IT General

Svelte 5 Runes Guide

📅 2026-02-09 | โดย อ.บอม กิตติทัศน์ เจริญพนาสิทธิ์ — SiamCafe.net Since 1997

Svelte 5 Runes Guide คืออะไร / ทำไมถึงสำคัญ

น้องๆ ครับ Svelte 5 เนี่ย มันเป็นเวอร์ชันใหม่ล่าสุดของ Svelte Framework ซึ่งเป็น JavaScript Framework ที่เน้นเรื่องความเร็วและประสิทธิภาพในการสร้าง User Interface (UI) หรือหน้าเว็บที่เราเห็นๆ กันนี่แหละ

สิ่งที่ Svelte 5 แตกต่างและสำคัญมากๆ คือการนำเอา "Runes" เข้ามาใช้ Runes เนี่ยเปรียบเสมือน "เวทมนตร์" ที่ช่วยให้เราจัดการ State (สถานะของข้อมูล) ใน Component ได้ง่ายและมีประสิทธิภาพมากขึ้น สมัยผมทำเว็บด้วย jQuery นะ โอ้โห... กว่าจะจัดการข้อมูลให้มันอัพเดทตามที่เราต้องการนี่แทบกระอักเลือด

ทำไม Runes ถึงสำคัญ? เพราะมันช่วยลดความซับซ้อนในการเขียนโค้ด ทำให้โค้ดของเราอ่านง่ายขึ้น เข้าใจง่ายขึ้น และที่สำคัญคือทำงานได้เร็วขึ้นด้วยนะ ลองนึกภาพว่าเรามีร้านเน็ต สมัยก่อนคอมพิวเตอร์ช้า ใครมาใช้ก็บ่น เดี๋ยวนี้คอมแรงๆ ใครๆ ก็ติดใจ Svelte 5 กับ Runes ก็เหมือนกัน ทำให้เว็บของเรา "แรง" ขึ้นนั่นเอง

พื้นฐานที่ต้องรู้

ก่อนจะไปลุยโค้ดกันจริงๆ เรามาปูพื้นฐานกันก่อนนิดนึงนะ

Components คืออะไร?

Component ก็คือส่วนประกอบย่อยๆ ของหน้าเว็บเรานั่นเอง เหมือนกับการต่อ LEGO แต่ละชิ้นก็คือ Component ที่เราเอามาประกอบรวมกันเป็นบ้าน เป็นรถ หรืออะไรก็ตามที่เราต้องการ

ใน Svelte เราสร้าง Component ด้วยไฟล์ที่มีนามสกุล .svelte ข้างในไฟล์ก็จะมี HTML, CSS, และ JavaScript (หรือ TypeScript) ผสมกันอยู่

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

<h1>Hello, {name}!</h1>

โค้ดนี้แสดงผลข้อความ "Hello, SiamCafe!" บนหน้าเว็บ ลองดู SiamCafe Blog ของเราสิ มีตัวอย่าง Component เพียบเลย

State คืออะไร?

State ก็คือข้อมูลที่เปลี่ยนแปลงได้ใน Component ของเรา เช่น ชื่อผู้ใช้, จำนวนสินค้าในตะกร้า, หรือสถานะการล็อกอิน State นี่แหละคือหัวใจสำคัญของการทำเว็บแบบ Interactive เพราะมันทำให้เว็บของเราตอบสนองต่อการกระทำของผู้ใช้ได้

สมัยก่อนเราใช้ตัวแปรธรรมดาๆ ใน JavaScript ในการเก็บ State แต่ปัญหาคือการจัดการให้ Component มันอัพเดทเมื่อ State เปลี่ยนแปลง มันยุ่งยากมาก Svelte กับ Runes เข้ามาช่วยแก้ปัญหานี้แหละ

Runes คืออะไร?

Runes คือชุดของฟังก์ชันพิเศษที่ Svelte 5 เตรียมไว้ให้เราใช้จัดการ State อย่างง่ายดาย Runes จะช่วยให้ Svelte รู้ว่า State ตัวไหนที่เราต้องการติดตามการเปลี่ยนแปลง และเมื่อ State เปลี่ยนแปลง Svelte ก็จะจัดการอัพเดท Component ให้เราโดยอัตโนมัติ

Runes ที่สำคัญๆ ก็จะมี $state(), $derived(), $effect() และอื่นๆ อีกมากมาย เดี๋ยวเราจะได้ลองใช้กัน

วิธีใช้งาน / เริ่มต้นยังไง

เอาล่ะครับ น้องๆ เตรียมพร้อมกันแล้วใช่ไหม? เรามาเริ่มใช้งาน Svelte 5 กับ Runes กันเลย

อันดับแรก เราต้องสร้างโปรเจกต์ Svelte ขึ้นมาก่อน ถ้ายังไม่มี ให้ใช้คำสั่งนี้ใน Terminal:

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

คำสั่งนี้จะสร้างโปรเจกต์ Svelte ชื่อ my-app ให้เรา แล้วก็ติดตั้ง Dependencies ที่จำเป็น และสุดท้ายก็รัน Development Server เพื่อให้เราสามารถดูเว็บของเราใน Browser ได้

หลังจากสร้างโปรเจกต์เสร็จแล้ว ให้เปิดไฟล์ src/routes/+page.svelte ขึ้นมา ไฟล์นี้แหละคือ Component หลักของเรา

ขั้นตอนปฏิบัติจริง

เรามาลองสร้าง Component ง่ายๆ ที่มีการใช้ Runes ในการจัดการ State กัน

การใช้ $state()

$state() เป็น Rune ที่ใช้สำหรับสร้าง State Variable ที่ Svelte สามารถติดตามการเปลี่ยนแปลงได้ สมมติว่าเราต้องการสร้าง State ที่เก็บจำนวน Counter เราจะเขียนโค้ดแบบนี้:

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

  function increment() {
    count++;
  }
</script>

<button on:click={increment}>Count: {count}</button>

เมื่อเราคลิกที่ปุ่ม "Count" ค่า count จะเพิ่มขึ้นทีละ 1 และ Svelte จะอัพเดทหน้าเว็บให้เราโดยอัตโนมัติ ง่ายไหมล่ะ?

การใช้ $derived()

$derived() เป็น Rune ที่ใช้สำหรับสร้าง Derived State หรือ State ที่คำนวณมาจาก State อื่นๆ สมมติว่าเราต้องการแสดงข้อความว่า "Even" หรือ "Odd" ขึ้นอยู่กับค่า count เราจะเขียนโค้ดแบบนี้:

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

  function increment() {
    count++;
  }

  let evenOrOdd = $derived(count % 2 === 0 ? 'Even' : 'Odd');
</script>

<button on:click={increment}>Count: {count} ({evenOrOdd})</button>

เมื่อค่า count เปลี่ยนแปลง ค่า evenOrOdd ก็จะถูกคำนวณใหม่โดยอัตโนมัติ และ Svelte ก็จะอัพเดทหน้าเว็บให้เราอีกเช่นเคย

การใช้ $effect()

$effect() เป็น Rune ที่ใช้สำหรับทำ Side Effects เช่น การ Log ข้อมูลลงใน Console หรือการเรียก API เมื่อ State เปลี่ยนแปลง สมมติว่าเราต้องการ Log ค่า count ลงใน Console ทุกครั้งที่ count เปลี่ยนแปลง เราจะเขียนโค้ดแบบนี้:

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

  function increment() {
    count++;
  }

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

<button on:click={increment}>Count: {count}</button>

ทุกครั้งที่เราคลิกที่ปุ่ม "Count" เราจะเห็นข้อความ "Count changed:" พร้อมกับค่า count ปรากฏใน Console ของ Browser เรา

เปรียบเทียบกับทางเลือกอื่น

Svelte 5 กับ Runes ไม่ใช่ Framework เดียวที่มีอยู่บนโลกใบนี้ ยังมี Framework อื่นๆ อีกมากมาย เช่น React, Vue.js, และ Angular แต่ละ Framework ก็มีข้อดีข้อเสียแตกต่างกันไป เรามาลองเปรียบเทียบกันดูในตารางนี้:

Feature	Svelte 5 (Runes)	React	Vue.js
Learning Curve	ค่อนข้างง่าย	ปานกลาง	ค่อนข้างง่าย
Performance	ดีมาก (Compiled to Vanilla JS)	ดี (Virtual DOM)	ดี (Virtual DOM)
Bundle Size	เล็ก	ใหญ่กว่า Svelte	ปานกลาง
State Management	Runes (ง่ายและมีประสิทธิภาพ)	Hooks (useState, useEffect)	Reactivity System

จากตาราง เราจะเห็นว่า Svelte 5 มีข้อดีในเรื่องของ Learning Curve ที่ค่อนข้างง่าย Performance ที่ดีมาก และ Bundle Size ที่เล็ก ทำให้เว็บของเราโหลดเร็วขึ้นนั่นเอง

React ก็เป็น Framework ที่ได้รับความนิยมอย่างมาก มี Community ขนาดใหญ่ และมี Libraries ให้เลือกใช้มากมาย แต่ก็มี Learning Curve ที่สูงกว่า และ Bundle Size ที่ใหญ่กว่า Svelte

Vue.js ก็เป็น Framework ที่ Learning Curve ค่อนข้างง่าย และมี Ecosystem ที่แข็งแกร่ง แต่ Performance อาจจะไม่ดีเท่า Svelte ในบางกรณี

สุดท้ายแล้ว การเลือก Framework ก็ขึ้นอยู่กับความชอบและความถนัดของแต่ละคน ไม่มี Framework ไหนที่ดีที่สุดสำหรับทุกสถานการณ์ ลองศึกษาและทดลองใช้ Framework ต่างๆ ดู แล้วเลือก Framework ที่เหมาะกับโปรเจกต์ของเรามากที่สุด

อย่าลืมแวะไปอ่านบทความอื่นๆ ใน SiamCafe Blog นะครับ มี Tips & Tricks เกี่ยวกับการพัฒนาเว็บอีกเพียบเลย!

🎬 วิดีโอแนะนำ

ดูวิดีโอเพิ่มเติมเกี่ยวกับSvelte 5 Runes Guide:

Best Practices / เคล็ดลับจากประสบการณ์

เอ้อ... Svelte 5 Runes เนี่ย มันเหมือนดาบสองคมนะน้อง มัน powerful มาก แต่ถ้าใช้ไม่เป็นนี่... บาดมือตัวเองเอาได้ง่ายๆ สมัยผมทำร้านเน็ต SiamCafe เนี่ย ผมจะย้ำลูกน้องเสมอว่า "รู้ให้จริงก่อนใช้" กับ Runes ก็เหมือนกันเลย

จำไว้ว่า Runes มันไม่ใช่ magic bullet ที่จะแก้ปัญหาทุกอย่างได้ บางที state management แบบเดิมๆ มันก็ง่ายกว่า เร็วกว่าเยอะ อย่าไปยึดติดว่าต้องใช้ Runes ทุกเคส

3-4 เทคนิคที่ใช้ได้จริง

เอาล่ะ มาดูเทคนิคที่ผมใช้จริงตอนลองเล่น Svelte 5 Runes กันบ้าง (บอกก่อนว่ายัง early access นะ)

เทคนิคที่ 1: $state ง่ายแต่ระวังเรื่อง Mutate

$state นี่แหละตัวดี เขียนง่ายสุดๆ ประกาศตัวแปรปุ๊บ ใช้งานได้เลย แต่! ระวังเรื่องการ mutate ค่าโดยตรงนะน้อง

let count = $state(0);

// แบบนี้ไม่ดี (Mutate โดยตรง)
count++;

// แบบนี้ค่อยดีหน่อย (สร้างสำเนาใหม่)
count = count + 1;

สมัยผมทำร้านเน็ต เคยเจอเคสที่ข้อมูลลูกค้าพัง เพราะเขียน code แบบ mutate ค่าตรงๆ นี่แหละ แก้กันหัวแตกเลย

เทคนิคที่ 2: $derived สำหรับ Computed Values

$derived เหมาะมากสำหรับค่าที่คำนวณจาก state อื่นๆ ข้อดีคือมันจะ update เองอัตโนมัติเมื่อ state ต้นทางเปลี่ยน เหมือน spreadsheet เลย

let price = $state(100);
let quantity = $state(2);
let total = $derived(price * quantity);

console.log(total); // Output: 200

price = $state(150); // total จะ update เป็น 300 เองอัตโนมัติ

แต่ระวังเรื่อง performance นิดนึง ถ้า $derived ซับซ้อนมาก อาจจะหน่วงได้ ต้อง optimize ดีๆ

เทคนิคที่ 3: $effect สำหรับ Side Effects

$effect เอาไว้จัดการ side effects ต่างๆ เช่น fetch data, subscribe events, หรือ manipulate DOM แต่ต้องระวังเรื่อง memory leaks นะน้อง

$effect(() => {
  console.log('Component updated!');
  // ทำอย่างอื่นที่ต้องทำหลัง render เช่น fetch data
});

ตอนทำ SiamCafe.net ผมเคยพลาดเรื่อง memory leaks ไปทีนึง ทำเอา server ร่วงเลย ต้อง debug กันวุ่นวาย

เทคนิคที่ 4: ใช้ Runes ร่วมกับ Stores

ถึง Runes จะมาแรง แต่ Stores ก็ยังสำคัญอยู่ ลองใช้ Runes ควบคู่กับ Stores ดูสิ มันจะช่วยให้จัดการ state ได้ flexible มากขึ้น

// store.js
import { writable } from 'svelte/store';

export const name = writable('Guest');

// Component.svelte
import { name } from './store.js';

let currentName = $state($name); // bind store value to local state

วิธีนี้ช่วยให้เราแยก concerns ได้ดีขึ้น และจัดการ state ได้เป็นระบบมากขึ้นด้วย

FAQ คำถามที่พบบ่อย

$state, $derived, $effect ต่างกันยังไง?

$state คือตัวแปรปกติที่มี reactivity ในตัว $derived คือค่าที่คำนวณจาก state อื่นๆ และจะ update เองอัตโนมัติ ส่วน $effect ใช้จัดการ side effects หลัง component update แต่ละตัวมีหน้าที่ของมัน อย่าใช้ผิดประเภท

Runes จะมาแทนที่ Stores เลยมั้ย?

ไม่น่าจะแทนที่ทั้งหมดนะ Stores ยังมีประโยชน์ในหลายๆ เคส โดยเฉพาะการจัดการ state แบบ global หรือ state ที่ซับซ้อนมากๆ Runes กับ Stores มัน complement กันมากกว่า

ควรเริ่มใช้ Runes เลยมั้ย?

ถ้าอยากลองของใหม่ ก็ลองได้เลย แต่แนะนำให้เริ่มจาก project เล็กๆ ก่อน อย่าเพิ่งเอาไปใช้กับ project ใหญ่ที่ critical เพราะมันยังอยู่ในช่วงพัฒนา อาจจะมี bug หรือ breaking changes ได้

Runes ทำให้ code อ่านยากขึ้นหรือเปล่า?

ถ้าใช้ไม่เป็นก็อาจจะอ่านยากขึ้นได้ แต่ถ้าใช้ถูกวิธี มันจะช่วยให้ code กระชับและเข้าใจง่ายขึ้นเยอะเลย ลองศึกษา pattern การใช้งานดีๆ ก่อน

สรุป

Svelte 5 Runes เป็นของเล่นใหม่ที่น่าสนใจมาก มันช่วยให้จัดการ state ได้ง่ายและ powerful ขึ้น แต่ก็ต้องระวังเรื่องการใช้งานด้วย ใช้ให้ถูกที่ถูกเวลา มันจะช่วยให้ code ของน้องเทพขึ้นเยอะเลย แต่ถ้าใช้ผิดวิธี ก็อาจจะเจอปัญหาปวดหัวได้เหมือนกัน

ลองเอาเทคนิคที่ผมแนะนำไปปรับใช้ดูนะ แล้วอย่าลืมติดตามข่าวสาร Svelte อย่างใกล้ชิด เพราะมันมีการเปลี่ยนแปลงตลอดเวลา

ถ้าอยากหาความรู้เพิ่มเติม ลองแวะไปดูที่ SiamCafe Blog นะ ผมเขียนเรื่อง IT ไว้เยอะแยะเลย

และถ้าสนใจเรื่องการลงทุน ลองดูที่ iCafeForex ได้นะ เผื่ออยากหารายได้เสริม :)