Mission 1: Node.js, npm และ package.json

เป้าหมายของ Mission นี้: เข้าใจว่า Node.js คืออะไร, npm ทำอะไร, และ package.json เก็บอะไรไว้บ้าง

---

1. Learning Objective

จบ Mission นี้คุณจะ

• อธิบายได้ว่า Node.js คืออะไร และต่างจาก JavaScript ในเบราว์เซอร์อย่างไร
• สร้างโปรเจค Node ใหม่ด้วย npm init ได้
• อ่าน package.json ออกทุกบรรทัด
• รู้ว่า node_modules และ package-lock.json มีไว้ทำไม

---

2. Theory — Node.js คือ "เครื่องเล่น JavaScript ที่อยู่นอกเบราว์เซอร์"

เดิมที JavaScript รันได้ที่เดียวคือในเบราว์เซอร์ เพราะเบราว์เซอร์มี JavaScript Engine อยู่ข้างใน (ของ Chrome ชื่อ V8)

ปี 2009 มีคนคิดว่า "ถ้าเอา V8 ออกมาจากเบราว์เซอร์ แล้วให้มันรันไฟล์ในเครื่องได้ล่ะ?" — นั่นคือ Node.js

        JavaScript ภาษาเดียวกัน แต่คนละสนาม

+---------------------------+     +---------------------------+
|        BROWSER            |     |         NODE.JS           |
+---------------------------+     +---------------------------+
| มี document, window        |     | ไม่มี document, window      |
| มี alert(), localStorage   |     | มี fs (อ่าน/เขียนไฟล์)       |
| แตะไฟล์ในเครื่องไม่ได้        |     | แตะไฟล์ในเครื่องได้ทั้งหมด     |
| เปิดพอร์ตรอ Request ไม่ได้  |     | เปิดพอร์ตเป็น Server ได้     |
| ผู้ใช้เห็นโค้ดทั้งหมด          |     | ผู้ใช้ไม่เห็นโค้ดเลย          |
+---------------------------+     +---------------------------+

ข่าวดีสำหรับคุณ: ไม่ต้องเรียนภาษาใหม่ — const, map(), async/await, arrow function ที่ใช้ใน React ใช้ได้เหมือนเดิมทุกอย่าง เปลี่ยนแค่ "ของเล่นรอบตัว"

---

3. Diagram — npm ทำงานยังไง

npm (Node Package Manager) คือ ร้านสะดวกซื้อของโค้ด — แทนที่จะเขียนทุกอย่างเอง เราหยิบของที่คนอื่นทำไว้แล้วมาใช้

flowchart LR
    A["npm install express"] --> B["npm registry<br/>(เซิร์ฟเวอร์กลางบนเน็ต)"]
    B --> C["ดาวน์โหลดลง<br/>node_modules/"]
    C --> D["บันทึกชื่อ+เวอร์ชัน<br/>ลง package.json"]
    C --> E["บันทึกเวอร์ชันเป๊ะๆ<br/>ลง package-lock.json"]
    style A fill:#3f2d5c,stroke:#a855f7,color:#fff
    style B fill:#1e3a5f,stroke:#38bdf8,color:#fff

ไฟล์/โฟลเดอร์	คืออะไร	ต้อง commit ขึ้น git ไหม
package.json	ใบรายการของ: ชื่อโปรเจค, สคริปต์, รายชื่อ package ที่ใช้	ต้อง
package-lock.json	ล็อกเวอร์ชันเป๊ะๆ ให้ทุกเครื่องได้ของเหมือนกัน	ต้อง
node_modules/	ตัว package จริงๆ ที่โหลดมา (หนักมาก เป็นพันไฟล์)	ไม่ต้อง ใส่ .gitignore

ทำไมไม่ commit node_modules? เพราะมันใหญ่มากและสร้างใหม่ได้เสมอ — ใครโคลนโปรเจคไป แค่สั่ง npm install npm จะอ่าน package.json แล้วโหลดของครบเอง

---

4. Live Coding — สร้างโปรเจคแรก

ขั้นที่ 1: เช็กว่ามี Node.js แล้วหรือยัง

node -v     # ต้องได้ v20.x ขึ้นไป
npm -v      # ต้องได้เลขเวอร์ชันออกมา

ถ้าขึ้นว่า command not found แปลว่ายังไม่ได้ติดตั้ง → ไปโหลดตัว LTS ที่ nodejs.org (LTS = Long Term Support เวอร์ชันที่เสถียร ใช้ตัวนี้เสมอ ไม่ต้องเอา Current)

ขั้นที่ 2: สร้างโฟลเดอร์โปรเจค

mkdir books-api      # สร้างโฟลเดอร์
cd books-api         # เข้าไปข้างใน

โฟลเดอร์ books-api นี้จะอยู่กับเราไปตลอด ทั้ง 2 คอร์ส — ห้ามลบ

ขั้นที่ 3: สร้าง package.json

npm init -y

-y แปลว่า "ตอบ yes ให้หมด" ไม่ต้องนั่งกด Enter ทีละคำถาม จะได้ไฟล์หน้าตาแบบนี้

{
  "name": "books-api",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

ขั้นที่ 4: บอก Node ว่าเราจะใช้ import แบบเดียวกับ React

เปิด package.json แล้วเพิ่มบรรทัด "type": "module" เข้าไป

{
  "name": "books-api",
  "version": "1.0.0",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

ทำไมต้องใส่? Node.js รองรับการเขียน import 2 แบบ

// แบบเก่า CommonJS (ค่าเริ่มต้นของ Node) — จะเจอในบทเรียนเก่าๆ ทั่วเน็ต
const express = require("express");

// แบบใหม่ ES Modules — เหมือนที่ใช้ใน React ทุกประการ  <-- คอร์สนี้ใช้แบบนี้
import express from "express";

ใส่ "type": "module" = บอก Node ว่า "ทั้งโปรเจคนี้ใช้แบบใหม่" จะได้เขียน import ได้เหมือน ที่คุ้นเคยจาก React ถ้าไม่ใส่แล้วเขียน import จะเจอ error Cannot use import statement outside a module ทันที

ขั้นที่ 5: แก้ scripts — เปลี่ยน test เป็น start

สังเกตว่าใน package.json มีก้อน scripts ที่ npm init -y ใส่มาให้แบบนี้

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
}

scripts คืออะไร? คือ ปุ่มลัด — เราตั้งชื่อสั้นๆ ให้คำสั่งยาวๆ แล้วเรียกด้วย npm run <ชื่อ> ตัว "test" ที่ติดมานี้เป็นแค่ตัวอย่างเปล่าๆ ที่ npm ใส่ให้ทุกโปรเจค สั่งไปก็ได้แค่ข้อความ error — เราจะลบทิ้งแล้วใส่ปุ่มที่ใช้จริงแทน

ลบบรรทัด "test" ออก แล้วพิมพ์แทนที่ด้วย "start"

{
  "name": "books-api",
  "version": "1.0.0",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  }
}

ตั้งแต่นี้ไป แทนที่จะพิมพ์ node index.js ทุกครั้ง เราพิมพ์แค่

npm start

ทำไมต้องทำ? เพราะคำสั่งเปิดโปรเจคจะยาวขึ้นเรื่อยๆ (เดี๋ยว Boss Battle ท้าย Chapter นี้ จะเพิ่ม nodemon เข้าไปอีก) การเก็บไว้ใน scripts ทำให้ทุกคนในทีมเปิดโปรเจคด้วยคำสั่งเดียวกัน โดยไม่ต้องจำว่าไฟล์หลักชื่ออะไร

หมายเหตุ: start เป็นชื่อพิเศษที่ npm รู้จัก เรียกด้วย npm start ได้เลย ไม่ต้องมี run ส่วนชื่ออื่นที่เราตั้งเองต้องใส่ run ด้วยเสมอ เช่น npm run dev

⚠️ ตอนนี้สั่ง npm start ยังไม่ได้ เพราะยังไม่มีไฟล์ index.js — เราจะสร้างใน Mission ถัดไป

ขั้นที่ 6: ติดตั้ง Express

npm install express

หลังรันเสร็จ ลองสังเกตว่า package.json มีของใหม่โผล่มา

"dependencies": {
  "express": "^5.1.0"
}

เครื่องหมาย ^ แปลว่า "เวอร์ชันนี้ขึ้นไป แต่ไม่ข้ามเลขหลักแรก" — เช่น ^5.1.0 ยอมรับ 5.2.0 แต่ไม่ยอมรับ 6.0.0 (เพราะเลขหลักแรกเปลี่ยน = มีการเปลี่ยนแปลงที่อาจทำให้โค้ดเดิมพัง)

ขั้นที่ 7: สร้าง .gitignore

node_modules
.env

---

5. Workshop

ทำตามขั้นตอนข้างบนให้ครบ แล้วตรวจว่าได้ครบทุกข้อ

books-api/
├── node_modules/       <-- มีเป็นพันโฟลเดอร์ข้างใน (ปกติ)
├── package.json        <-- มี "type": "module" และ dependencies express
├── package-lock.json
└── .gitignore

---

6. Common Mistakes

Error / ปัญหา	สาเหตุ	วิธีแก้
command not found: node	ยังไม่ได้ติดตั้ง Node หรือเพิ่งลงแล้วยังไม่ปิด terminal	ติดตั้ง LTS แล้ว ปิด terminal เปิดใหม่
Cannot use import statement outside a module	ลืมใส่ "type": "module"	เพิ่มลง package.json แล้วรันใหม่
npm ERR! Missing script: "start"	ลบ "test" ออกแล้วแต่ยังไม่ได้ใส่ "start" เข้าไป หรือสะกดผิด	เปิด package.json เช็กว่าใน scripts มี "start": "node index.js" จริง
แก้ package.json แล้วขึ้น Unexpected token }	ลบบรรทัด "test" ออกแล้วเหลือ , ค้างอยู่	JSON ห้ามมี , ก่อนปีกกาปิด — ลบ , ตัวสุดท้ายทิ้ง
npm install ไม่มีอะไรเกิดขึ้น	อยู่ผิดโฟลเดอร์ (ไม่มี package.json)	เช็กที่อยู่ก่อน — Windows พิมพ์ cd เปล่าๆ / macOS พิมพ์ pwd แล้วค่อย cd เข้าโฟลเดอร์โปรเจค
ลง package แล้วหาย เพราะลบ node_modules	เรื่องปกติ	npm install ใหม่ ได้ของครบเหมือนเดิม
EACCES: permission denied	สิทธิ์ไฟล์บน macOS/Linux	อย่าใช้ sudo npm install — ให้เปลี่ยนไปสร้างโปรเจคในโฟลเดอร์ของ user เอง

---

7. Summary

• Node.js = JavaScript ที่รันนอกเบราว์เซอร์ ภาษาเดิม แต่ทำอย่างอื่นได้ (อ่านไฟล์, เปิดพอร์ต)
• npm = ตัวจัดการ package ดึงโค้ดคนอื่นมาใช้
• package.json = ใบรายการของโปรเจค / node_modules = ของจริง (ไม่ต้อง commit)
• "type": "module" = ใช้ import แบบเดียวกับ React ได้
• scripts = ปุ่มลัด — ใส่ "start": "node index.js" แล้วเปิดโปรเจคด้วย npm start
• Mission ถัดไป: Express Server ตัวแรก 6 บรรทัด