Svelte

เริ่มต้นที่การสร้าง Project

npm create svelte@latest my-project

create-svelte version 6.0.10

┌  Welcome to SvelteKit!
│
◆  Which Svelte app template?
│  ○ SvelteKit demo app
│  ● Skeleton project (Barebones scaffolding for your new SvelteKit app)
│  ○ Library project
└

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◆  Add type checking with TypeScript?
│  ○ Yes, using JavaScript with JSDoc comments
│  ● Yes, using TypeScript syntax
│  ○ No
└

Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◆  Select additional options (use arrow keys/space bar)
│  ◻ Add ESLint for code linting
│  ◻ Add Prettier for code formatting
│  ◻ Add Playwright for browser testing
│  ◻ Add Vitest for unit testing
│  ◼ Try the Svelte 5 preview (unstable!)
└

✔ Typescript
  Inside Svelte components, use <script lang="ts">

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-add

Next steps:
  1: cd my-project
  2: npm install
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat

หลังจากนั้นให้เข้าไปที่ my-project

cd my-project

จากนั้นติดตั้ง Tailwindcss

npx --yes svelte-add@latest tailwindcss

จากนั้นก็ใช้คำสั่ง npm install เพื่อติดตั้ง Package ที่จำเป็น

npm install

จากนั้นลองรันโปรแกรม โดยใช้คำสั่ง npm run dev -- --open

npm run dev -- --open

จากนั้นจะขึ้นหน้าเว็บ localhost:5173 แสดงข้อความ 2 บรรทัดนี้ (แบบตัวอักษรเท่ากัน) แสดงว่ารันโปรแกรมเรียบร้อย

ขั้นต่อไป เริ่มเขียนโปรแกรม โดยให้กลับมาที่ Terminal แล้วกด Ctrl+C เพื่อหยุดการรันโปรแกรม

เริ่มเขียน Code

หลังจากที่สร้างโปรเจคและลองรันจนเรียบร้อยแล้ว ต่อไปให้เปิด VS Code โดยใช้คำสั่ง code . หรือเปิดโปรแกรม Code แล้ว Open Folder my-project ที่สร้างไว้

code .

ที่ด้านซ้ายของ VS Code ให้เข้าไปที่ Folder /src/routes/ แล้วเปิดไฟล์ +page.svelte จะพบ Code ดังนี้

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

เริ่มต้นด้วยการใส่ Style โดยใช้ Tailwindcss class

ต่อให้ลองใส่ Style ให้ Header โดยระบุชื่อ class ใน <h1> ดังนี้

<h1 class="text-3xl font-bold">Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

จากนั้นรันโปรแกรมผ่าน VS Code โดยเปิดหน้า Terminal (หรือกด Ctrl+` ) แล้วใช้คำสั่งรันโปรแกรม ดังนี้

npm run dev -- --open

ถ้าสำเร็จจะแสดงข้อความ Welcome to SvelteKit เป็นตัวอักษรตัวใหญ่ จาก class="text-3xl font-bold" ที่เราใส่ไว้ใน tag <h1> เป็นที่เรียบร้อย

เริ่มใช้ตัวแปรใน Svelte

ต่อไปจะเป็นการประกาศตัวแปร name แล้วนำไปแทนที่คำว่า SvelteKit โดยให้สลับมาที่หน้าจอ Code ที่ไฟล์ /src/routes/+page.svelte ให้เพิ่ม <script> แล้วใส่ code ประกาศตัวแปร name และใส่ {name} แทนคำว่า SvelteKit ดังนี้

<script>
    let name = "Kosol"
</script>

<h1 class="text-3xl font-bold">Welcome to {name}</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

จากนั้นกด Ctrl+S เพื่อบันทึก แล้วสลับไปที่ Browser เพื่อดูผลลัพธ์ (หน้าเว็บจะรีเฟรชใหม่ให้อัตโนมัติเมื่อบันทึก)

เล่นกับ $state โดยสร้างปุ่ม Counter

ขั้นต่อไปจะเป็นการเพิ่มปุ่ม Counter โดยมีตัวเลขบอกจำนวนครั้งที่กดปุ่ม โดยไปที่ไฟล์ /src/routes/+page.svelte แล้วประกาศตัวแปร count โดยให้มีค่าเริ่มต้นเป็น 0 และเพิ่มปุ่มให้แสดงค่า count ดังนี้ (โดยให้ลบ Tag <p> ออกก่อน)

<script>
  let name = "Kosol";
  let count = 0;
</script>

<h1 class="text-3xl font-bold">Welcome to {name}</h1>

<button class="bg-blue-500 px-8 py-1 rounded">{count}</button>

จากนั้นบันทึกไฟล์ แล้วดูผลลัพธ์เห็นปุ่มที่มีเลข 0 ลองกดปุ่มดูจะยังไม่เกิดอะไรขึ้น

ต่อไปสั่งให้ปุ่มทำการเพิ่มค่า count ทีละ 1 เมื่อมีการกดปุ่มดังนี้

<script>
  let name = "Kosol";
  let count = $state(0);
</script>

<h1 class="text-3xl font-bold">Welcome to {name}</h1>

<button class="bg-blue-500 px-8 py-1 rounded" onclick={() => count++}
  >{count}</button
>

จากนั้นบันทึกไฟล์แล้วลองกดปุ่มดู จะเห็นว่าตัวเลขจะถูกเพิ่มเมื่อมีการกดปุ่ม

เล่นกับ $derived ช่วยคูณ 2 ให้หน่อย

ต่อมาเราจะเพิ่มการแสดงเลขด้านข้างเป็น 2 เท่าของ counter โดยเพิ่ม code ดังนี้

<script>
  let name = "Kosol";
  let count = $state(0);
  let double = $derived(count * 2);
</script>

<h1 class="text-3xl font-bold">Welcome to {name}</h1>

<button class="bg-blue-500 px-8 py-1 rounded" onclick={() => count++}
  >{count}</button
>
<div>{count} x 2 = {double}</div>

เมื่อบันทึกแล้วลองกดปุ่ม จะเห็นตัวเลขบรรทัดล่างแสดงค่าผลคูณให้เห็น

ลองเล่น $effect สำหรับจัดการเมื่อ State เปลี่ยนแปลง

เพิ่ม code ใน Tag <script> ดังนี้

<script>
  let name = "Kosol";
  let count = $state(0);
  let double = $derived(count * 2);
  $effect(() => {
    if (count > 12) {
      alert("Over 12");
      count = 12;
    }
  });
</script>

<h1 class="text-3xl font-bold">Welcome to {name}</h1>

<button class="bg-blue-500 px-8 py-1 rounded" onclick={() => count++}
  >{count}</button
>
<div>{count} x 2 = {double}</div>

จากนั้นบันทึกแล้วลองกดปุ่มจนขึ้นเลข 12 และเมื่อกดอีกครั้งจะขึ้น Alert ขึ้นมา แล้วเปลี่ยนค่า counter ให้อยู่ที่ 12 เท่านั้น

ถึงตรงนี้จะเห็นว่าการเล่นกับ $state $derived $effect ไม่ได้ยากหรือซับซ้อนเท่าไหร่

ลองเล่น $props รับส่ง parameter ระหว่างกัน

เริ่มต้นจากการจัดระเบียนใหม่ ให้ปุ่มกับตัวคูณที่เราสร้างไว้ไปอยู่ใน Component แล้วค่อยเรียกใช้จากหน้าหลัก โดยไปที่ /src/lib แล้วสร้าง Folder ชื่อ components และเพิ่มไฟล์ชื่อ Counter.svelte ดังนี้

จากนั้นย้าย Code จากหน้า /src/routes/+page.svelte มาไว้ที่ counter.svelte ดังนี้

<script>
  let name = "Kosol";
  let count = $state(0);
  let double = $derived(count * 2);
  $effect(() => {
    if (count > 12) {
      alert("Over 12");
      count = 12;
    }
  });
</script>

<h1 class="text-3xl font-bold">Welcome to {name}</h1>

<button class="bg-blue-500 px-8 py-1 rounded" onclick={() => count++}
  >{count}</button
>
<div>{count} x 2 = {double}</div>

โดยไฟล์ /src/routes/+page.svelte ให้เอา code ที่ย้ายไปออก แล้วใส่ Code เพื่อเรียกใช้ Counter component ดังนี้

<script>
  import Counter from "$lib/components/counter.svelte";
</script>

<Counter />

จากนั้นบันทึกไฟล์ทั้งหมดแล้วไปดูที่ Browser ควรแสดงผลลัพธ์ให้เห็นเหมือนเดิม ดังนี้

ต่อไปจะเริ่มใช้ $props ในการส่งค่าจาก /src/routes/+page.svelte เพื่อส่งคำว่า "Svelte 5" ไปแทนคำว่า "Kosol" ใน Counter Component

โดยเริ่มจากทำการเพิ่มการรับผ่าน $props() ในไฟล์ /src/lib/components/counter.svelte ดังนี้

<script>
  let { name = "Kosol" } = $props();
  let count = $state(0);
  let double = $derived(count * 2);
  $effect(() => {
    if (count > 12) {
      alert("Over 12");
      count = 12;
    }
  });
</script>

<h1 class="text-3xl font-bold">Welcome to {name}</h1>

<button class="bg-blue-500 px-8 py-1 rounded" onclick={() => count++}
  >{count}</button
>
<div>{count} x 2 = {double}</div>

ส่วนไฟล์ /src/routes/+page.svelte ให้ส่งค่า name="Svelte 5" ดังนี้

<script>
  import Counter from "$lib/components/counter.svelte";
</script>

<Counter name="Svelte 5" />

จากนั้นบันทึกไฟล์ทั้งหมดแล้วดูผลลัพธ์จะมีคำว่า "Svelte 5" ที่ส่งไปจาก +page.svelte ให้เห็น