#Svelte 5 & SvelteKit เบื้องต้น

Svelte 5 เป็นเครื่องมือสำหรับพัฒนา User Interface แบบ Component-based โดยมีจุดเด่นที่การใช้ compiler แปลง component ให้เป็น JavaScript ที่ทำงานกับ DOM โดยตรง ส่วน SvelteKit เป็น application framework ที่ต่อยอดจาก Svelte เพื่อเพิ่ม Routing, Server-Side Rendering, Data Loading, Form Actions, API Endpoints และความสามารถสำหรับการสร้าง Full-stack Web Application

หากอธิบายแบบสั้นที่สุด:

Svelte     = UI / Component Framework
SvelteKit  = Full-stack Application Framework ที่ใช้ Svelte

หลักสูตร Svelte 5 & SvelteKit For Hands-On Modern Web Development บน Coursera เน้นตั้งแต่โครงสร้าง Svelte component, reactive state, derived state, data fetching, routing ไปจนถึงการสร้าง project แบบ full-stack เช่น landing page, portfolio และ application ที่มี authentication และ database integration

#1. ทำไม Svelte จึงน่าสนใจ

Framework ฝั่ง Frontend อย่าง React, Vue และ Angular ใช้ Component เป็นแนวคิดหลักเช่นเดียวกัน แต่ Svelte มีแนวทางที่แตกต่างตรงที่ compiler จะวิเคราะห์ component ในขั้นตอน build และสร้าง JavaScript ที่เหมาะสมสำหรับการอัปเดต DOM

ข้อดีที่ผู้เริ่มต้นมักสังเกตเห็นได้เร็วคือ:

  • Syntax ใกล้เคียง HTML, CSS และ JavaScript
  • เขียน Component ได้กระชับ
  • มี Reactive State ที่อ่านง่าย
  • รองรับ TypeScript
  • ทำงานร่วมกับ Vite
  • SvelteKit ช่วยต่อยอดไปเป็น Full-stack Web App ได้

ตัวอย่าง Svelte Component:

<script>
  let name = 'Svelte';
</script>

<h1>Hello {name}</h1>

ไฟล์ component ใช้นามสกุล:

.svelte

โดยทั่วไปภายในไฟล์เดียวสามารถมี:

<script>
  // JavaScript หรือ TypeScript
</script>

<!-- HTML Template -->

<style>
  /* CSS */
</style>

#2. Svelte 5 และแนวคิด Runes

หัวใจสำคัญของ Svelte 5 คือ Runes API ซึ่งใช้ประกาศ reactive behavior อย่างชัดเจน

Runes ที่ควรรู้สำหรับผู้เริ่มต้น ได้แก่:

$state
$derived
$effect
$props

แนวคิดโดยรวมคือ:

State
  ↓
Derived State
  ↓
Component
  ↓
User Interaction
  ↓
State เปลี่ยน
  ↓
UI อัปเดต

#3. $state — Reactive State

$state ใช้ประกาศตัวแปรที่เมื่อค่าเปลี่ยนแล้ว Svelte จะอัปเดต UI ที่เกี่ยวข้องให้

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

<h1>Count: {count}</h1>

<button onclick={() => count++}>
  Increment
</button>

เมื่อกดปุ่ม:

count++;

ค่าในหน้าเว็บจะเปลี่ยนตามทันที

#4. $derived — ค่าที่คำนวณจาก State

ถ้ามีค่าที่ขึ้นอยู่กับ state ตัวอื่น สามารถใช้ $derived

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<p>Count: {count}</p>
<p>Doubled: {doubled}</p>

<button onclick={() => count++}>
  Add
</button>

ถ้า:

count = 5

จะได้:

doubled = 10

จุดสำคัญคือไม่ต้องเขียน logic เพื่อ sync ค่า doubled เอง

#5. $effect — Side Effect

$effect ใช้เมื่อเราต้องการให้บาง logic ทำงานเมื่อ reactive dependency เปลี่ยน เช่น:

  • Logging
  • Browser API
  • DOM integration
  • Third-party libraries
  • Synchronization กับระบบภายนอก

ตัวอย่าง:

<script>
  let count = $state(0);

  $effect(() => {
    console.log(`count changed: ${count}`);
  });
</script>

<button onclick={() => count++}>
  Count {count}
</button>

โดยทั่วไป ถ้า logic เป็นเพียง "คำนวณค่าจาก state" ควรใช้ $derived แทน $effect

#6. $props — รับข้อมูลจาก Parent Component

ใน Svelte 5 แบบ Runes สามารถรับ props ผ่าน $props()

สร้างไฟล์:

src/lib/ProductCard.svelte

<script>
  let { name, price } = $props();
</script>

<article>
  <h2>{name}</h2>
  <p>{price} บาท</p>
</article>

จาก Parent:

<script>
  import ProductCard from '$lib/ProductCard.svelte';
</script>

<ProductCard
  name="Mechanical Keyboard"
  price={2500}
/>

แนวคิดคือข้อมูลไหลจาก Parent ไป Child:

Parent
  ↓ props
Child

#7. Event Handling

ใน Svelte 5 แบบใหม่ event handler สามารถเขียนเป็น property ของ element ได้

<script>
  function handleClick() {
    alert('Hello Svelte');
  }
</script>

<button onclick={handleClick}>
  Click Me
</button>

หรือใช้ arrow function:

<button onclick={() => console.log('clicked')}>
  Click
</button>

หากอ่าน tutorial รุ่นเก่า อาจเจอ:

<button on:click={handleClick}>

แต่ Svelte 5 แบบ Runes นิยม event attributes เช่น onclick

#8. Conditional Rendering

Svelte ใช้ {#if}

<script>
  let loggedIn = $state(false);
</script>

{#if loggedIn}
  <h2>Welcome</h2>
{:else}
  <h2>Please Login</h2>
{/if}

สามารถต่อด้วย {:else if} ได้เช่นกัน

#9. Loop ด้วย {#each}

ตัวอย่างแสดงรายการสินค้า:

<script>
  let products = $state([
    { id: 1, name: 'Keyboard' },
    { id: 2, name: 'Mouse' },
    { id: 3, name: 'Monitor' }
  ]);
</script>

<ul>
  {#each products as product}
    <li>{product.name}</li>
  {/each}
</ul>

ถ้าข้อมูลมี unique ID ควรใช้ keyed each block:

{#each products as product (product.id)}
  <p>{product.name}</p>
{/each}

#10. Two-Way Binding

Svelte รองรับ binding กับ form control โดยตรง

<script>
  let name = $state('');
</script>

<input bind:value={name} />

<p>Hello {name}</p>

เมื่อผู้ใช้พิมพ์ใน <input> ค่า name จะเปลี่ยนตาม

#11. ตัวอย่าง Counter ด้วย Svelte 5

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);

  function increment() {
    count++;
  }

  function decrement() {
    count--;
  }
</script>

<h1>Svelte Counter</h1>

<p>Count: {count}</p>
<p>Doubled: {doubled}</p>

<button onclick={decrement}>-</button>
<button onclick={increment}>+</button>

ตัวอย่างนี้ใช้:

$state
$derived
event handler
reactive UI

#12. ตัวอย่าง Todo List

<script>
  let todo = $state('');

  let todos = $state([
    { id: 1, title: 'Learn Svelte 5' },
    { id: 2, title: 'Learn SvelteKit' }
  ]);

  function addTodo() {
    const title = todo.trim();

    if (!title) {
      return;
    }

    todos.push({
      id: Date.now(),
      title
    });

    todo = '';
  }
</script>

<h1>Todo List</h1>

<input
  bind:value={todo}
  placeholder="Enter todo"
/>

<button onclick={addTodo}>
  Add
</button>

<ul>
  {#each todos as item (item.id)}
    <li>{item.title}</li>
  {/each}
</ul>

จากตัวอย่างจะได้ฝึก:

  • $state
  • Input binding
  • Event handling
  • Array state
  • {#each}
  • Keyed list

#13. เริ่มต้น SvelteKit Project

SvelteKit ใช้ CLI ของ Svelte สำหรับสร้างโปรเจกต์ใหม่

npx sv create my-app

จากนั้น:

cd my-app
npm install
npm run dev

Development server โดยทั่วไปจะเปิดที่:

http://localhost:5173

เมื่อสร้างโปรเจกต์ CLI จะให้เลือก option เช่น JavaScript/TypeScript และ add-on ที่ต้องการ

#14. โครงสร้างโปรเจกต์ SvelteKit

ตัวอย่างโครงสร้างที่ควรรู้:

my-app/
├── src/
│   ├── lib/
│   │   └── components/
│   ├── routes/
│   │   └── +page.svelte
│   ├── app.html
│   └── app.d.ts
├── static/
├── package.json
├── svelte.config.js
└── vite.config.js

Directory สำคัญคือ:

src/routes

เพราะ SvelteKit ใช้ filesystem-based routing

#15. หน้าแรกด้วย +page.svelte

ไฟล์:

src/routes/+page.svelte

ตัวอย่าง:

<script>
  let message = $state('Hello SvelteKit');
</script>

<h1>{message}</h1>

ไฟล์นี้จะตรงกับ route:

/

#16. Routing

สร้างหน้า About:

src/routes/about/+page.svelte

<h1>About</h1>

<p>This is my SvelteKit application.</p>

จากนั้นเปิด:

http://localhost:5173/about

โครงสร้าง route จะเป็น:

src/routes/
├── +page.svelte
└── about/
    └── +page.svelte

#17. Dynamic Route

สมมติว่าต้องการ URL:

/products/100
/products/200

สามารถสร้าง:

src/routes/products/[id]/+page.svelte

[id] คือ Dynamic Segment

โครงสร้าง:

/products/[id]

สามารถรองรับ:

/products/1
/products/100
/products/abc

#18. Layout

UI ที่ใช้ร่วมกันหลายหน้า เช่น:

  • Navbar
  • Sidebar
  • Footer

สามารถวางใน:

src/routes/+layout.svelte

ตัวอย่างแนวคิดสำหรับ Svelte 5:

<script>
  let { children } = $props();
</script>

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<main>
  {@render children()}
</main>

Layout จะครอบ child routes ที่อยู่ภายใต้ route นั้น

#19. Data Loading

SvelteKit รองรับการโหลดข้อมูลผ่าน load

ตัวอย่าง:

src/routes/products/
├── +page.ts
└── +page.svelte

+page.ts

export async function load({ fetch }) {
  const response = await fetch('/api/products');
  const products = await response.json();

  return {
    products
  };
}

+page.svelte

<script>
  let { data } = $props();
</script>

<h1>Products</h1>

{#each data.products as product}
  <p>{product.name}</p>
{/each}

#20. Server-Side Data Loading

ถ้า logic ต้องทำเฉพาะบน Server เช่น:

  • Database Query
  • Authentication
  • Secret API Key
  • Private Environment Variables

สามารถใช้:

+page.server.ts

ตัวอย่าง:

export async function load() {
  return {
    message: 'Loaded from server'
  };
}

แนวคิดคือ:

Browser
   ↓
SvelteKit Server
   ↓
Database / Private API
   ↓
Page Data
   ↓
Component

#21. API / Server Endpoint

SvelteKit สามารถสร้าง HTTP Endpoint ผ่าน +server.ts

เช่น:

src/routes/api/hello/+server.ts

import { json } from '@sveltejs/kit';

export function GET() {
  return json({
    message: 'Hello API'
  });
}

เรียก:

GET /api/hello

Response:

{
  "message": "Hello API"
}

ดังนั้น SvelteKit สามารถใช้สร้าง:

Frontend
+
Server Logic
+
API Endpoint

ใน codebase เดียวกันได้

#22. Form Actions

นอกจาก REST-style endpoints แล้ว SvelteKit ยังมี Form Actions สำหรับรับข้อมูลจาก HTML Form ที่ฝั่ง server

แนวคิด:

<form method="POST">
        ↓
+page.server.ts
        ↓
action
        ↓
Database / Business Logic

เหมาะกับงานเช่น:

  • Login
  • Register
  • Create Post
  • Contact Form
  • CRUD Form

Form Actions ยังสามารถใช้ร่วมกับ progressive enhancement ได้

#23. Svelte กับ SvelteKit ต่างกันอย่างไร

ความสามารถ Svelte SvelteKit
Component ✅ ✅
Reactive State ✅ ✅
Templating ✅ ✅
Props / Events ✅ ✅
File-based Routing - ✅
SSR - ✅
SSG / Prerender - ✅
Data Loading - ✅
Form Actions - ✅
Server Endpoint - ✅
Full-stack App ต้องเพิ่มระบบเอง ✅

สรุป:

Svelte
   ↓
เรียน Component และ Reactivity
   ↓
SvelteKit
   ↓
Routing + Data + Server
   ↓
Full-stack Application

#24. Rendering Model ของ SvelteKit

SvelteKit รองรับ rendering หลายแนวทาง

#Server-Side Rendering

Browser
   ↓ request
SvelteKit Server
   ↓ rendered HTML
Browser

เหมาะกับ:

  • SEO
  • Dynamic Content
  • Application ที่ต้องใช้ Server Data
  • Authentication

#Prerender / Static Site

Build
   ↓
Static HTML
   ↓
CDN / Static Hosting

เหมาะกับ:

  • Blog
  • Documentation
  • Landing Page
  • Marketing Site

#Client-Side Navigation

หลังจากหน้าแรกถูกโหลดแล้ว SvelteKit สามารถทำ navigation ฝั่ง browser เพื่อช่วยให้การเปลี่ยนหน้ารวดเร็วและลื่นขึ้น

#25. Learning Roadmap

สำหรับผู้เริ่มต้น แนะนำลำดับดังนี้:

HTML / CSS / JavaScript
        ↓
Svelte Component
        ↓
$state
        ↓
$derived
        ↓
$props
        ↓
Event Handling
        ↓
{#if}
        ↓
{#each}
        ↓
bind:value
        ↓
Reusable Components
        ↓
SvelteKit
        ↓
Routing
        ↓
Layout
        ↓
load()
        ↓
Server Load
        ↓
Form Actions
        ↓
API Endpoint
        ↓
Database
        ↓
Authentication
        ↓
Deployment

#26. Project สำหรับฝึก

#Project 1: Counter App

ฝึก:

$state
$derived
events

#Project 2: Todo App

ฝึก:

forms
bind:value
arrays
{#each}
components

#Project 3: Product Catalog

ฝึก:

routing
dynamic routes
data loading
API

#Project 4: Blog

ฝึก:

layout
SSR
prerender
dynamic routes
CMS
SEO

#Project 5: Full-stack Application

ฝึก:

authentication
database
form actions
server endpoints
deployment

#27. แนวทางเรียนจาก Coursera Specialization

จากโครงสร้างของหลักสูตร Svelte 5 & SvelteKit For Hands-On Modern Web Development สามารถจัด Learning Path ได้ประมาณนี้:

Svelte 5 Fundamentals
      ↓
Components + Reactive State
      ↓
SvelteKit Routing + Data Fetching
      ↓
Product Landing Page
      ↓
Stripe Integration
      ↓
Developer Portfolio
      ↓
Sanity CMS
      ↓
Full-stack SvelteKit
      ↓
Supabase + Authentication

หลักสูตรแบ่งเป็น 4 courses และมี applied projects เช่น:

  1. Svelte 5 & SvelteKit Fundamentals
  2. Product Landing Page + Stripe
  3. Developer Portfolio + Sanity CMS
  4. Full-stack SvelteKit + Supabase

จึงเหมาะกับผู้ที่ต้องการเรียนต่อเนื่องจากพื้นฐานไปจนถึงการสร้าง application จริง

#28. สิ่งที่ควรจำก่อนเริ่ม Project จริง

Svelte 5:

$state   → State
$derived → Computed / Derived State
$effect  → Side Effect
$props   → Component Input

SvelteKit:

+page.svelte       → Page
+layout.svelte     → Shared Layout
+page.ts           → Universal Load
+page.server.ts    → Server Load / Form Actions
+server.ts         → HTTP Endpoint
src/routes         → Routing

จำชุดนี้ได้ ก็สามารถเริ่มอ่าน Project SvelteKit ส่วนใหญ่ได้ง่ายขึ้นมาก

#สรุป

Svelte 5 เหมาะสำหรับการสร้าง UI แบบ Component-based ด้วย syntax ที่กระชับและ Reactive Model แบบ Runes ส่วน SvelteKit ช่วยขยายจาก Component Framework ไปสู่ Application Framework ที่รองรับทั้ง Frontend และ Server

สำหรับผู้เริ่มต้น ไม่จำเป็นต้องเรียนทุก feature พร้อมกัน ควรเริ่มจาก:

Component
   ↓
$state
   ↓
$derived
   ↓
$props
   ↓
Events
   ↓
Conditional / Loop
   ↓
SvelteKit Routing
   ↓
Data Loading
   ↓
Server Logic

เมื่อเข้าใจ flow นี้แล้ว จะสามารถต่อยอดไปยัง Database, Authentication, REST API, CMS และ Deployment ได้อย่างเป็นระบบ

#References

บทความนี้ตรวจสอบแนวทางกับเอกสาร Svelte/SvelteKit และรายละเอียดหลักสูตร Coursera ณ เดือนกันยายน 2026