# Rust และ WebAssembly ในปี 2026: คู่มือ Wasm, wasm-bindgen และคำถามสัมภาษณ์

> บทเรียน Rust WebAssembly พร้อม wasm-pack และ wasm-bindgen เรียนรู้การสร้าง ปรับแต่ง และทดสอบ Wasm module ด้วยตัวอย่างจริง

- Published: 2026-08-07
- Updated: 2026-08-07
- Author: SharpSkill
- Reading time: 5 min

---

Rust WebAssembly (Wasm) นำประสิทธิภาพระดับ native มาสู่แอปพลิเคชันเว็บโดยการคอมไพล์โค้ด Rust ให้เป็นรูปแบบไบนารีที่สามารถทำงานได้ในเบราว์เซอร์และสภาพแวดล้อมเซิร์ฟเวอร์ การผสมผสานการรับประกันความปลอดภัยของหน่วยความจำของ Rust กับการทำงานแบบ sandbox ของ WebAssembly สร้างรากฐานที่แข็งแกร่งสำหรับคอมโพเนนต์เว็บประสิทธิภาพสูง ตั้งแต่การประมวลผลภาพไปจนถึงการดำเนินการเข้ารหัส

> **ประเด็นสำคัญ**
>
> Rust คอมไพล์เป็น WebAssembly ผ่าน `wasm-pack` และ `wasm-bindgen` สร้างโมดูลที่ JavaScript สามารถ import และเรียกใช้ได้โดยตรง เวิร์กโฟลว์ประกอบด้วยการเขียนฟังก์ชัน Rust เพิ่ม annotation `#[wasm_bindgen]` คอมไพล์เป็น `.wasm` และ import โค้ด glue JavaScript ที่สร้างขึ้นเข้าสู่แอปพลิเคชันเว็บใดก็ได้

## การตั้งค่า Rust สำหรับการพัฒนา WebAssembly

Toolchain ของ Rust ต้องการ target `wasm32-unknown-unknown` และ `wasm-pack` สำหรับการสร้างโมดูล WebAssembly เครื่องมือเหล่านี้จัดการการคอมไพล์ การปรับแต่ง และการสร้าง binding JavaScript โดยอัตโนมัติ

```bash
# install-wasm-tools.sh
# Add the WebAssembly target to rustup
rustup target add wasm32-unknown-unknown

# Install wasm-pack for building and packaging
cargo install wasm-pack

# Verify installation
wasm-pack --version
```

หลังจากติดตั้ง ให้สร้าง library crate ใหม่ที่กำหนดค่าสำหรับเอาต์พุต WebAssembly ไฟล์ `Cargo.toml` ต้องมีการตั้งค่าเฉพาะสำหรับความเข้ากันได้กับ Wasm

```toml
# Cargo.toml
[package]
name = "wasm-calculator"
version = "0.1.0"
edition = "2024"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2.100"

[profile.release]
opt-level = "z"      # Optimize for size
lto = true           # Link-time optimization
```

ประเภท crate `cdylib` สร้าง dynamic library ที่เหมาะสำหรับ WebAssembly การปรับแต่ง release profile ลดขนาดไฟล์ `.wasm` สุดท้ายได้อย่างมีนัยสำคัญ—มักจะลดได้ถึง 50% หรือมากกว่าเมื่อเทียบกับ build ที่ไม่ได้ปรับแต่ง

## ทำความเข้าใจ wasm-bindgen และการทำงานร่วมกับ JavaScript

Crate [wasm-bindgen](https://rustwasm.github.io/docs/wasm-bindgen/) เชื่อมต่อ Rust และ JavaScript โดยสร้าง binding แบบ type-safe โดยอัตโนมัติ ฟังก์ชันที่มี annotation `#[wasm_bindgen]` สามารถเรียกใช้ได้จาก JavaScript ในขณะที่ฟังก์ชัน JavaScript สามารถ import เข้าสู่ Rust ได้

```rust
// src/lib.rs
use wasm_bindgen::prelude::*;

// Export this function to JavaScript
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    // Base cases for recursion
    match n {
        0 => 0,
        1 => 1,
        // Recursive calculation with tail-call optimization
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

// Import console.log from JavaScript
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

// Export a function that uses console.log
#[wasm_bindgen]
pub fn greet(name: &str) {
    log(&format!("Hello, {}!", name));
}
```

บล็อก `extern "C"` ประกาศฟังก์ชัน JavaScript ที่โค้ด Rust สามารถเรียกใช้ได้ แอตทริบิวต์ `js_namespace` ระบุออบเจกต์ JavaScript ที่มีฟังก์ชันนั้น binding สองทิศทางนี้ช่วยให้สามารถผสานรวมระหว่างลอจิก Rust และ API ของ JavaScript ได้อย่างราบรื่น

## การสร้างและรวม WebAssembly Module

คำสั่ง `wasm-pack build` คอมไพล์ Rust เป็น WebAssembly และสร้างโค้ด wrapper JavaScript target ที่แตกต่างกันเหมาะสำหรับสภาพแวดล้อม JavaScript ที่แตกต่างกัน

```bash
# build-wasm.sh
# Build for bundlers like webpack, Vite, or Rollup
wasm-pack build --target bundler --release

# Build for native ES modules (browser)
wasm-pack build --target web --release

# Build for Node.js
wasm-pack build --target nodejs --release
```

แต่ละ target สร้างเอาต์พุตที่แตกต่างกันในไดเรกทอรี `pkg/` target bundler ทำงานกับ JavaScript bundler สมัยใหม่ที่รองรับ ES modules และการ import WebAssembly target web สร้างโค้ดที่โหลดได้โดยตรงในเบราว์เซอร์ผ่าน `<script type="module">`

```javascript
// main.js
// Import the generated WebAssembly module
import init, { fibonacci, greet } from './pkg/wasm_calculator.js';

async function run() {
    // Initialize the WebAssembly module
    await init();
    
    // Call exported Rust functions
    const result = fibonacci(20);
    console.log(`fibonacci(20) = ${result}`);
    
    greet('WebAssembly');
}

run();
```

ฟังก์ชัน `init()` ดึงข้อมูลและคอมไพล์ไฟล์ `.wasm` แบบ asynchronous หลังจากเริ่มต้น ฟังก์ชันที่ export ทำงานเหมือนฟังก์ชัน JavaScript ทั่วไป โดย wasm-bindgen จัดการการแปลงประเภทโดยอัตโนมัติ

## การทำงานกับประเภทที่ซับซ้อนและหน่วยความจำ

WebAssembly ทำงานบนหน่วยความจำแบบ linear—บล็อกไบต์ที่ต่อเนื่องกัน การส่งผ่านประเภทที่ซับซ้อนระหว่าง Rust และ JavaScript ต้องใช้ serialization หรือการจัดการหน่วยความจำโดยตรง crate `wasm-bindgen` จัดการประเภททั่วไปส่วนใหญ่โดยอัตโนมัติ

```rust
// src/lib.rs
use wasm_bindgen::prelude::*;
use serde::{Serialize, Deserialize};

// Enable serde support for wasm-bindgen
#[derive(Serialize, Deserialize)]
pub struct Point {
    pub x: f64,
    pub y: f64,
}

// Accept and return JavaScript objects
#[wasm_bindgen]
pub fn distance(a: JsValue, b: JsValue) -> Result<f64, JsValue> {
    // Deserialize JavaScript objects to Rust structs
    let point_a: Point = serde_wasm_bindgen::from_value(a)?;
    let point_b: Point = serde_wasm_bindgen::from_value(b)?;
    
    // Calculate Euclidean distance
    let dx = point_b.x - point_a.x;
    let dy = point_b.y - point_a.y;
    
    Ok((dx * dx + dy * dy).sqrt())
}

// Return a Rust struct as a JavaScript object
#[wasm_bindgen]
pub fn midpoint(a: JsValue, b: JsValue) -> Result<JsValue, JsValue> {
    let point_a: Point = serde_wasm_bindgen::from_value(a)?;
    let point_b: Point = serde_wasm_bindgen::from_value(b)?;
    
    let mid = Point {
        x: (point_a.x + point_b.x) / 2.0,
        y: (point_a.y + point_b.y) / 2.0,
    };
    
    // Serialize Rust struct to JavaScript object
    Ok(serde_wasm_bindgen::to_value(&mid)?)
}
```

Crate `serde-wasm-bindgen` (เพิ่มใน `Cargo.toml`: `serde-wasm-bindgen = "0.6"` และ `serde = { version = "1.0", features = ["derive"] }`) แปลงระหว่างออบเจกต์ JavaScript และประเภท Rust อย่างมีประสิทธิภาพ สำหรับโค้ดที่ต้องการประสิทธิภาพสูง การเข้าถึงหน่วยความจำโดยตรงผ่าน crate `js_sys` และ `web_sys` หลีกเลี่ยง overhead ของ serialization

## การปรับแต่งประสิทธิภาพและขนาดของ WebAssembly

โมดูล WebAssembly ได้รับประโยชน์จากเทคนิคการปรับแต่งหลายอย่าง การลดขนาดปรับปรุงเวลาโหลด ในขณะที่การปรับแต่งอัลกอริทึมปรับปรุงประสิทธิภาพ runtime เครื่องมือ [wasm-opt](https://github.com/WebAssembly/binaryen) จาก Binaryen ให้การปรับแต่งเพิ่มเติมหลังการคอมไพล์

```bash
# optimize-wasm.sh
# Install binaryen for wasm-opt
# On macOS: brew install binaryen
# On Ubuntu: apt install binaryen

# Apply aggressive size optimizations
wasm-opt -Oz -o pkg/wasm_calculator_opt.wasm pkg/wasm_calculator_bg.wasm

# Apply speed optimizations instead
wasm-opt -O3 -o pkg/wasm_calculator_fast.wasm pkg/wasm_calculator_bg.wasm
```

การตั้งค่า Cargo.toml เพิ่มเติมช่วยลดขนาดเอาต์พุตเพิ่มเติม:

```toml
# Cargo.toml - additional optimizations
[profile.release]
opt-level = "z"
lto = true
codegen-units = 1
panic = "abort"
strip = true
```

การตั้งค่าเหล่านี้สร้างเอาต์พุตที่เล็กที่สุดเท่าที่จะเป็นไปได้โดยเปิดใช้งาน link-time optimization ลดการสร้างโค้ดแบบขนาน และลบ debug symbols โมดูล Wasm ที่เรียบง่ายสามารถลดจาก 100KB ลงเหลือต่ำกว่า 20KB ด้วยการปรับแต่งที่เหมาะสม

## กรณีการใช้งานจริง: การประมวลผลภาพในเบราว์เซอร์

WebAssembly เก่งในงานที่ใช้การคำนวณเข้มข้น เช่น การประมวลผลภาพ ตัวอย่างต่อไปนี้ใช้ฟิลเตอร์ grayscale กับข้อมูลภาพ แสดงให้เห็นการเข้าถึงหน่วยความจำโดยตรงเพื่อประสิทธิภาพสูงสุด

```rust
// src/lib.rs
use wasm_bindgen::prelude::*;
use wasm_bindgen::Clamped;

#[wasm_bindgen]
pub fn grayscale(data: Clamped<Vec<u8>>, width: u32, height: u32) -> Clamped<Vec<u8>> {
    let mut pixels = data.0;
    let len = (width * height * 4) as usize;
    
    // Process each pixel (RGBA format)
    for i in (0..len).step_by(4) {
        // Calculate luminance using standard coefficients
        let r = pixels[i] as f32;
        let g = pixels[i + 1] as f32;
        let b = pixels[i + 2] as f32;
        
        let gray = (0.299 * r + 0.587 * g + 0.114 * b) as u8;
        
        // Set RGB channels to grayscale value
        pixels[i] = gray;     // R
        pixels[i + 1] = gray; // G
        pixels[i + 2] = gray; // B
        // Alpha channel (i + 3) remains unchanged
    }
    
    Clamped(pixels)
}
```

ฝั่ง JavaScript ดึงข้อมูลพิกเซลจาก canvas ส่งไปยัง Wasm และ render ผลลัพธ์:

```javascript
// image-processor.js
import init, { grayscale } from './pkg/image_processor.js';

async function applyGrayscale(canvas) {
    await init();
    
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    
    // Pass pixel data to WebAssembly
    const result = grayscale(imageData.data, canvas.width, canvas.height);
    
    // Create new ImageData with processed pixels
    const processed = new ImageData(result, canvas.width, canvas.height);
    ctx.putImageData(processed, 0, 0);
}
```

วิธีการนี้ประมวลผลพิกเซลหลายล้านพิกเซลต่อวินาที—เร็วกว่าโค้ด JavaScript ที่เทียบเท่าอย่างมาก การทดสอบประสิทธิภาพบนแล็ปท็อปทั่วไปแสดงให้เห็นว่าเร็วขึ้น 3-5 เท่าสำหรับการดำเนินการกับภาพ

## คำถามสัมภาษณ์: แนวคิด Rust WebAssembly

การเข้าใจแนวคิด Rust WebAssembly แสดงให้เห็นความรู้ด้านการเขียนโปรแกรมระบบ คำถามเหล่านี้มักปรากฏในการสัมภาษณ์สำหรับตำแหน่งพัฒนาเว็บที่เน้นประสิทธิภาพ

**ถ: ความสัมพันธ์ระหว่าง wasm-bindgen และการทำงานร่วมกันกับ JavaScript คืออะไร?**

wasm-bindgen สร้างโค้ด glue JavaScript ที่จัดการการแปลงประเภทระหว่าง Rust และ JavaScript มันสร้าง wrapper JavaScript สำหรับแต่ละฟังก์ชัน Rust ที่ export จัดการการจัดสรรหน่วยความจำ การเข้ารหัสสตริง และการ serialization ประเภทที่ซับซ้อน หากไม่มี wasm-bindgen นักพัฒนาจะต้องจัดการหน่วยความจำ linear ของ WebAssembly ด้วยตนเองและใช้โปรโตคอล serialization ของตนเอง

**ถ: ทำไม WebAssembly ถึงใช้หน่วยความจำแบบ linear และผลกระทบคืออะไร?**

หน่วยความจำ linear ของ WebAssembly คืออาร์เรย์ของไบต์ที่ต่อเนื่องกัน สามารถปรับขนาดได้ ที่ทั้งโค้ด JavaScript และ Wasm สามารถเข้าถึงได้ การออกแบบนี้ให้ความปลอดภัยของหน่วยความจำผ่านการตรวจสอบขอบเขตและ sandboxing ผลกระทบคือการส่งผ่านโครงสร้างข้อมูลที่ซับซ้อนต้องคัดลอกข้อมูลเข้าสู่หน่วยความจำ linear หรือใช้การอ้างอิงพร้อมการจัดการ lifetime อย่างระมัดระวัง โมเดล ownership ของ Rust เข้ากันได้ดีกับข้อจำกัดนี้ เพราะมันป้องกัน dangling pointer และ data race ในเวลาคอมไพล์

**ถ: โหมด `no_std` ของ Rust มีประโยชน์อย่างไรสำหรับการพัฒนา WebAssembly?**

แอตทริบิวต์ `#![no_std]` ไม่รวม standard library ของ Rust ทำให้ได้ไบนารี Wasm ที่เล็กลง เมื่อไม่มี std นักพัฒนาใช้ crate `core` และ `alloc` สำหรับฟังก์ชันพื้นฐาน วิธีการนี้ลดขนาด bundle อย่างมาก—จาก ~100KB เหลือ ~10KB สำหรับโมดูลที่เรียบง่าย การแลกเปลี่ยนคือการสูญเสียความสะดวกสบายเช่น `String`, `Vec` และ I/O มาตรฐาน แม้ว่า `alloc` จะให้ประเภทที่จัดสรรบน heap เมื่อต้องการ

สำหรับการสำรวจเพิ่มเติมเกี่ยวกับรูปแบบ async ของ Rust ที่เสริมการพัฒนา WebAssembly ดู [คำถามโมดูล async/await](/technologies/rust/interview-questions/async-await)

## การดีบักและทดสอบโมดูล WebAssembly

การทดสอบที่มีประสิทธิภาพต้องการทั้ง unit test ฝั่ง Rust และ integration test ของเบราว์เซอร์ คำสั่ง `wasm-pack test` รันการทดสอบในสภาพแวดล้อมเบราว์เซอร์แบบ headless

```rust
// src/lib.rs
#[cfg(test)]
mod tests {
    use super::*;
    use wasm_bindgen_test::*;
    
    // Configure tests to run in browser
    wasm_bindgen_test_configure!(run_in_browser);
    
    #[wasm_bindgen_test]
    fn test_fibonacci() {
        assert_eq!(fibonacci(0), 0);
        assert_eq!(fibonacci(1), 1);
        assert_eq!(fibonacci(10), 55);
    }
    
    #[wasm_bindgen_test]
    fn test_greet() {
        // This test verifies greet doesn't panic
        greet("Test User");
    }
}
```

รันการทดสอบเบราว์เซอร์ด้วย Chrome หรือ Firefox:

```bash
# test-wasm.sh
# Run tests in headless Chrome
wasm-pack test --headless --chrome

# Run tests in headless Firefox
wasm-pack test --headless --firefox
```

สำหรับการดีบัก ให้เปิดใช้งาน source maps และ console output crate `console_error_panic_hook` ให้ข้อความ panic ที่มีความหมายใน console ของเบราว์เซอร์:

```rust
// src/lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen(start)]
pub fn init_panic_hook() {
    console_error_panic_hook::set_once();
}
```

เพิ่มใน `Cargo.toml`: `console_error_panic_hook = "0.1"` การตั้งค่านี้แสดงข้อความ panic ของ Rust ใน developer tools ของเบราว์เซอร์แทนที่จะเป็นข้อผิดพลาด WebAssembly ที่เข้าใจยาก

## บทสรุป

- Rust คอมไพล์เป็น WebAssembly ผ่าน `wasm-pack` สร้างโมดูลที่เรียกใช้ได้จาก JavaScript พร้อมการแปลงประเภทอัตโนมัติ
- แอตทริบิวต์ `#[wasm_bindgen]` ทำเครื่องหมายฟังก์ชันสำหรับ export; บล็อก `extern "C"` import ฟังก์ชัน JavaScript เข้าสู่ Rust
- การปรับแต่งขนาด (`opt-level = "z"`, `lto = true`, `wasm-opt -Oz`) ลดขนาด bundle 50-80%
- ประเภทที่ซับซ้อนผ่าน `serde-wasm-bindgen` สำหรับ serialization แบบ JSON หรือการเข้าถึงหน่วยความจำโดยตรงเพื่อประสิทธิภาพสูงสุด
- การประมวลผลภาพ การเข้ารหัส และอัลกอริทึมที่ใช้การคำนวณเข้มข้นมีความเร็วเพิ่มขึ้น 3-5 เท่าเมื่อเทียบกับการใช้งาน JavaScript
- การทดสอบเบราว์เซอร์ด้วย `wasm-pack test --headless` ตรวจสอบทั้งลอจิก Rust และการผสานรวม JavaScript

สำหรับหัวข้อ Rust ที่เกี่ยวข้อง สำรวจ [คำถามสัมภาษณ์ Cargo & Ecosystem](/technologies/rust/interview-questions/cargo-ecosystem) และ [คู่มือเตรียมสัมภาษณ์ Rust](/blog/rust/rust-interview-questions) ฉบับสมบูรณ์

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/th/blog/rust/rust-webassembly-wasm-bindgen-tutorial