แผนที่เครื่องมือทั้งหมด
ทำความรู้จักทุกเครื่องมือที่จะเจอ ก่อนที่จะงงว่าทำไมมันเยอะจัง
ทำไมมันเยอะจัง?! 😵
ถ้าคุณเปิดบทแรก ๆ ของสายเรียนแล้วเห็นชื่อแปลก ๆ โผล่มาเยอะ (VS Code, Terminal, Git, npm, Express, React, Postman...) แล้วรู้สึกงง — เป็นเรื่องปกติมาก!
บทนี้คือ แผนที่ ให้คุณเห็นภาพรวมก่อน ว่าแต่ละตัวคืออะไร ทำไมต้องมี อ่านจบแล้วพอเจอชื่อพวกนี้ทีหลัง จะได้ไม่ตกใจ
💡 ของเน้น: คุณ ไม่ต้องเก่งทุกตัวพร้อมกัน เครื่องมือแต่ละอย่างจะค่อย ๆ โผล่มาทีละตัวตามบทเรียน บทนี้แค่อยากให้คุณ "เคยเห็นชื่อ" ไว้ก่อน
ภาพรวม: เครื่องมือกี่กลุ่ม?
มาดูทีละกลุ่มกัน
1. เครื่องมือเขียนโค้ด
| เครื่องมือ | คืออะไร | ทำไมต้องมี |
|---|---|---|
 VS Code | โปรแกรมเขียน/แก้โค้ด (Code Editor) | เหมือนไม้บรรทัดของช่าง — เป็นที่เราพิมพ์โค้ด |
| 🖥️ Terminal | หน้าต่างพิมพ์คำสั่งควบคุมเครื่อง | บางอย่างทำทางคำสั่งเร็วกว่าคลิกเมาส์ |
VS Code กับ Word ไม่เหมือนกันนะ — VS Code เน้นข้อความโค้ด มีฟีเจอร์ช่วยเขียนโค้ดโดยเฉพาะ
2. เครื่องมือจัดการโค้ด (เซฟประวัติ + แชร์)
| เครื่องมือ | คืออะไร | ทำไมต้องมี |
|---|---|---|
 Git | โปรแกรมบันทึก "ประวัติ" โค้ดในเครื่อง | ย้อนกลับได้เวอร์ชันเก่า ไม่กลัวทำพัง |
 GitHub | เว็บเก็บโค้ดออนไลน์ | แชร์ให้คนอื่นเห็น, เก็บสำรอง, ทำพอร์ตโฟลิโอ |
🔑 จำง่าย ๆ: Git = กล้องถ่ายรูปบันทึกช่วงเวลา (ในเครื่อง) GitHub = อัลบั้มรูปบนคลาวด์ (บนเว็บ)
3. ตัวรัน / แปลภาษา
โค้ดที่เราเขียนเป็น "ข้อความ" ต้องมีตัวแปลให้คอมพิวเตอร์เข้าใจ
| ตัวรัน | สายไหน | ทำหน้าที่ |
|---|---|---|
 Node.js | JavaScript | รัน JS ฝั่งเซิร์ฟเวอร์ได้ |
 Python | Python | ตัวแปลภาษา Python |
 npm / pip | JS / Python | ตัวติดตั้งแพ็กเกจ (ของเสริมที่คนอื่นทำไว้) |
💡 นึกถึงการลงแอพในมือถือ: npm กับ pip เหมือน "App Store / Play Store" ของโลกโค้ด เรากดติดตั้งของเสริมที่คนอื่นทำไว้แล้ว ไม่ต้องเขียนเองทุกอย่าง
4. เครื่องมือทดสอบ
| เครื่องมือ | คืออะไร | ใช้ตอนไหน |
|---|---|---|
 Browser Console | เครื่องมือในเบราว์เซอร์ (กด F12) | ทดลอง JS เร็ว ๆ, ดู error ของหน้าเว็บ |
 Postman / Thunder Client | เครื่องมือเรียก API (ส่ง request ทดสอบ) | ตอนทำ Backend อยากทดสอบว่า API ตอบครบไหม |
⚠️ สองตัวนี้คือจุดที่คนงอกบ่อยที่สุด เพราะบท Express/FastAPI จะบอกให้ "ทดสอบด้วย Thunder Client" แต่หลายบทเรียนลืมอธิบายว่ามันคืออะไร — ในหลักสูตรเราจะสอนลงมือใช้ทีละขั้นเลย ไม่ต้องกลัว
Postman กับ Thunder Client ต่างกันยังไง?
มือใหม่แนะนำ Thunder Client เพราะอยู่ใน VS Code ที่เปิดอยู่แล้ว ไม่ต้องลงแอพเพิ่ม
5. ไลบรารี / เฟรมเวิร์ก
พอเก่งขึ้น เราจะใช้ "โครง" ที่คนอื่นสร้างไว้ ไม่ต้องปู้ยี่จากศูนย์
| ชื่อ | ภาษา | ใช้ทำ |
|---|---|---|
 Express | JavaScript | ทำ Backend / API |
 FastAPI | Python | ทำ Backend / API |
 React | JavaScript | ทำหน้าเว็บโต้ตอบ |
 Vite | JavaScript | ช่วยเริ่มโปรเจกต์ React เร็ว ๆ |
 SQLite | (รวม) | ฐานข้อมูลเก็บไฟล์เดียว ใช้ฝึก |
ลำดับที่คุณจะ "พบ" เครื่องมือแต่ละตัว
เห็นไหมว่า มันทยานขึ้นไปทีละขั้น ไม่ได้โผล่มาพร้อมกันทั้งหมด แค่เดินตามลำดับบทเรียน คุณจะค่อย ๆ คุ้นเคยทีละตัว
คำแนะนำสำหรับมือใหม่
- อย่าพยายามจำทุกตัว — เข้าใจหน้าที่คร่าว ๆ พอ เดี๋ยวจำเองเวลาใช้
- ทำตามบทเรียนทีละบท — แต่ละตัวจะโผล่มาตอนที่ต้องใช้จริง
- งงตรงไหน กลับมาดูแผนที่นี้ — หรือเปิดหน้า อภิธานศัพท์ ที่เรารวมคำศัพท์ไว้
สรุป
- เครื่องมือแบ่ง 5 กลุ่ม: เขียนโค้ด / จัดการโค้ด / รัน / ทดสอบ / ไลบรารี
- แต่ละตัวมีหน้าที่ต่างกัน ไม่ต้องเก่งพร้อมกัน
- ไดอะแกรมด้านบนคือ "แผนที่" ที่คุณจะเดินทะลุไปเรื่อย ๆ
บทหน้า: ลงมือ ติดตั้งเครื่องมือ จริง ๆ (VS Code, Terminal, Node/Python) 🛠️
อ่านจบแล้ว? ทำเครื่องหมายว่าเสร็จเพื่อบันทึกความคืบหน้า
แบบทดสอบ
ตอบให้ครบแล้วกด “ตรวจคำตอบ” เพื่อเช็คความเข้าใจ
1. Code Editor (เช่น VS Code) ใช้ทำอะไร?
2. ความต่างระหว่าง Git กับ GitHub คือ?
3. npm และ pip ใช้ทำอะไร?
กำลังโหลด…