ทำความรู้จักกับ Express.js และเหตุผลที่ต้องใช้
เวลาเราจะสร้างเว็บไซต์ที่ซับซ้อนขึ้นมาสักหน่อย เรามักจะไม่เขียนโค้ดจัดการทุกอย่างเองตั้งแต่ศูนย์ เพราะมันทั้งเหนื่อยและเสียเวลาเปล่า การใช้ Express.js (เฟรมเวิร์กสำหรับช่วยสร้างเว็บเซิร์ฟเวอร์บน Node.js) จึงเป็นทางเลือกที่ฉลาดมากสำหรับมือใหม่ เพราะมันเปรียบเสมือนตัวช่วยที่เตรียมโครงสร้างพื้นฐานไว้ให้เราพร้อมใช้งานอยู่แล้ว
ลองนึกภาพว่าการเขียน Node.js (โปรแกรมรันโค้ด JavaScript นอกเบราว์เซอร์) เปล่าๆ เหมือนกับการสร้างบ้านด้วยการไปตัดไม้และเผาอิฐเองทั้งหมด แต่ถ้าเราใช้ Express.js ก็เหมือนกับการที่เราซื้อชุดโครงสร้างบ้านสำเร็จรูปมาประกอบ ซึ่งทำให้เราโฟกัสกับการตกแต่งหรือฟังก์ชันภายในบ้านได้เร็วกว่าเดิมหลายเท่าตัว
เหตุผลที่คนหัดเขียน Backend (ระบบหลังบ้าน) ทั่วโลกนิยมใช้ Express.js เพราะมันมีขนาดเล็กและไม่ยัดเยียดวิธีการเขียนที่ซับซ้อนจนเกินไป มันช่วยให้เราจัดการกับคำขอจากผู้ใช้งานได้ง่ายขึ้นมาก ทั้งการรับข้อมูล การแสดงผล หรือการเชื่อมต่อกับฐานข้อมูล ถ้าคุณกำลังก้าวเข้าสู่สายงานนี้ การเข้าใจเจ้าตัวนี้คือบันไดขั้นแรกที่สำคัญที่สุด
การติดตั้งและเตรียมโปรเจกต์ให้พร้อมใช้งาน
ก่อนจะเริ่มเขียนโค้ด เราต้องเตรียมพื้นที่ทำงานให้เรียบร้อยก่อน โดยเราจะใช้ npm (เครื่องมือจัดการโปรแกรมเสริมสำหรับ JavaScript) ในการดาวน์โหลด Express.js เข้ามาในเครื่องของเรา ขั้นตอนแรกให้สร้างโฟลเดอร์สำหรับโปรเจกต์ขึ้นมาใหม่ แล้วเปิดโปรแกรม Terminal (หน้าจอพิมพ์คำสั่งสั่งงานคอมพิวเตอร์) ขึ้นมาที่โฟลเดอร์นั้น
เมื่อเข้ามาที่โฟลเดอร์แล้ว ให้พิมพ์คำสั่ง npm init -y เพื่อสร้างไฟล์ package.json (ไฟล์บันทึกรายการโปรแกรมเสริมที่โปรเจกต์เราต้องใช้) ขึ้นมาทันที ไฟล์นี้สำคัญมากเพราะมันจะเป็นตัวคอยจดจำว่าเราได้ติดตั้งอะไรไปบ้าง ทำให้เวลาเราเอาโค้ดไปรันที่อื่น โปรแกรมจะรู้ว่าต้องหาตัวช่วยอะไรมาติดตั้งเพิ่มบ้าง
ขั้นตอนสุดท้ายคือการติดตั้ง Express.js ลงไปในโปรเจกต์ด้วยคำสั่ง npm install express หลังจากรันคำสั่งนี้ คุณจะเห็นโฟลเดอร์ที่ชื่อว่า node_modules (ที่เก็บไฟล์โค้ดของโปรแกรมเสริมที่เราติดตั้ง) ปรากฏขึ้นมา นี่คือสัญญาณว่าเราพร้อมจะเขียนโค้ดกันแล้ว อย่าลืมว่าต้องทำทุกอย่างในโฟลเดอร์ที่สร้างขึ้นเท่านั้น เพื่อไม่ให้ไฟล์ปะปนกับโปรเจกต์อื่น
# เริ่มต้นโปรเจกต์ใหม่
npm init -y
# ติดตั้ง Express.js
npm install express
คำอธิบายโค้ด:
npm init -y: สั่งให้สร้างไฟล์package.jsonโดยตอบตกลงค่าเริ่มต้นทั้งหมดอัตโนมัติnpm install express: สั่งให้ดาวน์โหลดตัวไลบรารี Express.js มาเก็บไว้ในโปรเจกต์
ผลลัพธ์ที่ควรเห็น: จะมีไฟล์ package.json และโฟลเดอร์ node_modules ปรากฏขึ้นในโฟลเดอร์โปรเจกต์ของคุณ
สร้าง Server ตัวแรกด้วย Express.js
หัวใจสำคัญของเว็บเซิร์ฟเวอร์คือการรอคอยคำสั่งจากผู้ใช้งาน เหมือนกับพนักงานต้อนรับที่คอยยืนประจำจุดรอรับออเดอร์จากลูกค้า ใน Express.js เราจะสร้างเซิร์ฟเวอร์ด้วยการเรียกใช้ฟังก์ชัน express() และกำหนดให้มันรอฟังคำสั่งผ่าน Port (ช่องทางเชื่อมต่อสื่อสารระหว่างคอมพิวเตอร์) ที่เรากำหนดไว้
การเขียนโค้ดเพื่อสร้างเซิร์ฟเวอร์นั้นไม่ยากเลย เราแค่ต้องประกาศตัวแปรขึ้นมาตัวหนึ่งเพื่อเก็บค่าของแอปพลิเคชัน จากนั้นสั่งให้เซิร์ฟเวอร์เริ่มทำงานผ่านคำสั่ง listen (คำสั่งสั่งให้เซิร์ฟเวอร์เริ่มรับฟังการเชื่อมต่อ) ซึ่งเรามักจะเลือกใช้เลขพอร์ตอย่าง 3000 เพื่อให้เข้าถึงผ่านเบราว์เซอร์ได้ง่ายๆ
เมื่อเซิร์ฟเวอร์เริ่มทำงานแล้ว เราต้องมีฟังก์ชันคอยบอกว่าเซิร์ฟเวอร์พร้อมใช้งานหรือยัง เพื่อให้เรามั่นใจว่าโค้ดไม่มีบั๊ก (ข้อผิดพลาดที่ทำให้โปรแกรมทำงานผิดปกติ) จุดที่มือใหม่มักพลาดคือการลืมสั่งให้เซิร์ฟเวอร์เริ่มทำงาน ทำให้รันโค้ดไปแล้วเงียบสนิทไม่มีอะไรเกิดขึ้น ให้ตรวจสอบเสมอว่าเราได้ใส่คำสั่ง listen ไว้บรรทัดสุดท้ายของไฟล์แล้ว
const express = require('express'); // ดึงตัวช่วย Express เข้ามาใช้
const app = express(); // สร้างตัวแอปพลิเคชัน
const port = 3000; // กำหนดเลขพอร์ต
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
คำอธิบายโค้ด:
require('express'): เรียกใช้ชุดคำสั่งจาก Express ที่เราติดตั้งไว้app.listen(): สั่งให้โปรแกรมทำงานต่อเนื่องและรอรับการติดต่อที่พอร์ต 3000
ผลลัพธ์ที่ควรเห็น: เมื่อรันคำสั่ง node app.js จะมีข้อความ Server is running at http://localhost:3000 แสดงขึ้นมาใน Terminal
เข้าใจเรื่อง Application-level Routing
Routing (การกำหนดเส้นทางให้เว็บว่าถ้าเข้า URL นี้ ต้องไปทำอะไรต่อ) คือสิ่งที่ทำให้เว็บไซต์มีหลายหน้า แม้เราจะสร้างเซิร์ฟเวอร์ตัวเดียวก็ตาม ลองคิดว่ามันเหมือนป้ายบอกทางในสถานีรถไฟที่คอยบอกว่าถ้าไปช่องทางนี้ จะไปเจอกับข้อมูลส่วนไหนของระบบ เช่น หน้าแรก หน้าติดต่อเรา หรือหน้ารายการสินค้า
ใน Express.js เราจะใช้คำสั่งอย่าง app.get() เพื่อกำหนดว่าถ้ามีคนส่งคำขอมาที่เส้นทางที่กำหนด เราจะตอบกลับไปว่าอะไร คำสั่งนี้รับค่าสองอย่างคือ Path (เส้นทางหรือ URL ที่ระบุตำแหน่ง) และฟังก์ชันที่จะให้ทำงานเมื่อมีคนเข้าถึงเส้นทางนั้นๆ ซึ่งเป็นหัวใจสำคัญของการออกแบบระบบ API (ช่องทางที่ให้โปรแกรมต่างระบบคุยกันได้)
การจัดการ Routing ที่ดีจะช่วยให้โปรเจกต์ของคุณดูเป็นระบบระเบียบและขยายต่อได้ง่ายในอนาคต หากคุณมีหน้าเว็บเยอะขึ้นเรื่อยๆ คุณจะได้ไม่ต้องเขียนโค้ดกองรวมกันในที่เดียว มือใหม่ควรลองหัดแยกเส้นทางต่างๆ ออกจากกันให้ชัดเจน เพื่อให้เวลาแก้ไขบั๊กหรือเพิ่มฟีเจอร์ใหม่ๆ จะได้ทำได้โดยไม่ไปกระทบส่วนอื่นของระบบโดยไม่ตั้งใจ
// หน้าแรก
app.get('/', (req, res) => {
res.send('ยินดีต้อนรับสู่หน้าแรก');
});
// หน้าเกี่ยวกับเรา
app.get('/about', (req, res) => {
res.send('นี่คือหน้าเกี่ยวกับเรา');
});
คำอธิบายโค้ด:
app.get('/'): กำหนดเส้นทางหลักของเว็บไซต์req(Request): ข้อมูลที่ผู้ใช้งานส่งเข้ามาหาเราres(Response): เครื่องมือสำหรับส่งข้อมูลกลับไปหาผู้ใช้งาน
ผลลัพธ์ที่ควรเห็น: เมื่อเข้าเบราว์เซอร์ไปที่ http://localhost:3000/ จะเห็นข้อความ "ยินดีต้อนรับสู่หน้าแรก"
การตอบกลับ Response รูปแบบต่างๆ
เมื่อเซิร์ฟเวอร์ได้รับคำขอแล้ว หน้าที่สำคัญที่สุดคือการส่งข้อมูลกลับ หรือที่เรียกว่า Response (ข้อมูลที่เซิร์ฟเวอร์ส่งกลับไปยังผู้ใช้) ซึ่งไม่ได้มีแค่ข้อความธรรมดาเท่านั้น แต่เราสามารถส่งข้อมูลแบบ JSON (รูปแบบข้อมูลที่นิยมใช้ส่งระหว่างเซิร์ฟเวอร์กับแอปพลิเคชัน) หรือแม้แต่ไฟล์ HTML ได้ตามความต้องการ
การส่งข้อมูลแบบ JSON เป็นที่นิยมมากในการทำ API สมัยใหม่ เพราะมันอ่านง่ายและโปรแกรมส่วนหน้าบ้าน (Frontend) สามารถนำไปใช้งานต่อได้ทันทีด้วยคำสั่ง res.json() นอกจากนี้เรายังสามารถกำหนด Status Code (รหัสสถานะที่บอกว่าการทำงานสำเร็จไหม เช่น 200 คือสำเร็จ 404 คือไม่พบข้อมูล) เพื่อให้ผู้ใช้งานทราบสถานะการทำงาน
การเลือกส่งข้อมูลให้เหมาะสมกับงานเป็นทักษะที่โปรแกรมเมอร์ต้องฝึกฝน หากคุณทำระบบเว็บแอปพลิเคชัน การส่ง HTML กลับไปอาจจะตอบโจทย์ แต่ถ้าคุณทำระบบหลังบ้านให้แอปมือถือ การส่ง JSON จะเป็นมาตรฐานที่ถูกต้องกว่า การเข้าใจจุดนี้จะช่วยให้คุณออกแบบระบบที่ทำงานร่วมกับผู้อื่นได้ง่ายขึ้นและเป็นมืออาชีพมากขึ้น
// ส่งข้อมูลแบบ JSON
app.get('/api/user', (req, res) => {
res.status(200).json({ name: 'Somchai', age: 25 });
});
// ส่งสถานะแจ้งเตือนว่าไม่พบข้อมูล
app.get('/error', (req, res) => {
res.status(404).send('ไม่พบหน้าที่คุณต้องการ');
});
คำอธิบายโค้ด:
res.json(): ส่งข้อมูลในรูปแบบ Object ที่เป็นมาตรฐานกลางres.status(404): ระบุรหัสสถานะความผิดพลาดให้เบราว์เซอร์ทราบ
ผลลัพธ์ที่ควรเห็น: เมื่อเข้า /api/user เบราว์เซอร์จะแสดงข้อมูลเป็น {"name":"Somchai","age":25}
สรุป: ก้าวแรกสู่การเป็น Backend Developer
การเรียนรู้ Express.js คือจุดเริ่มต้นที่ยอดเยี่ยมสำหรับคนที่อยากเป็นโปรแกรมเมอร์สาย Backend เพราะมันช่วยให้เราเข้าใจกลไกการทำงานของอินเทอร์เน็ตผ่านการสร้างเซิร์ฟเวอร์จริงๆ ตั้งแต่การติดตั้ง การจัดการเส้นทาง ไปจนถึงการตอบกลับข้อมูล ซึ่งทั้งหมดนี้คือทักษะหลักที่บริษัทส่วนใหญ่ต้องการจากนักพัฒนาในปัจจุบัน
เมื่อคุณเริ่มเข้าใจพื้นฐานเหล่านี้แล้ว ลองนำไปประยุกต์ใช้กับโปรเจกต์เล็กๆ ของตัวเองดู เช่น สร้าง API สำหรับบันทึกรายการสิ่งที่ต้องทำ (To-Do List) การทำแบบนี้จะช่วยให้คุณเห็นภาพว่าโค้ดที่เขียนไปนั้นเอาไปใช้งานจริงอย่างไร และยังเป็นการฝึกแก้ปัญหาที่เกิดขึ้นระหว่างทาง ซึ่งเป็นหัวใจสำคัญของการพัฒนาฝีมือ
ความสม่ำเสมอคือสิ่งสำคัญที่สุด ไม่ต้องรีบร้อนที่จะเก่งในวันเดียว แต่ให้ค่อยๆ ฝึกฝนและต่อยอดจากสิ่งที่เรียนในวันนี้ไปเรื่อยๆ หากคุณติดปัญหาตรงไหน อย่าลืมกลับมาทบทวนเอกสารทางการของ Express.js เสมอ เพราะนั่นคือแหล่งข้อมูลที่ดีที่สุดสำหรับโปรแกรมเมอร์ทุกคน ขอให้สนุกกับการเขียนโค้ดและสร้างสรรค์สิ่งใหม่ๆ บนโลกออนไลน์
