ติดตั้งเครื่องมือ (Editor & Terminal)
เตรียมเครื่องมือที่จำเป็นในการเขียนโค้ดจริง
สิ่งที่ต้องมี
ก่อนเขียนโค้ดได้จริง ต้องติดตั้ง 3 อย่างนี้ให้ครบ:
- Code Editor — โปรแกรมสำหรับเขียนโค้ด
- Terminal — โปรแกรมสำหรับพิมพ์คำสั่ง
- Node.js (สาย JS) หรือ Python (สาย Python) — ตัวแปลภาษา
1. ติดตั้ง VS Code (Code Editor)
Visual Studio Code หรือ VS Code คือ editor ยอดนิยม ฟรี ใช้งานง่าย
วิธีติดตั้ง:
- เปิดเว็บ https://code.visualstudio.com
- กดปุ่มสีฟ้าตัวใหญ่ที่เขียน Download (ระบบจะเลือกเวอร์ชันที่เหมาะกับเครื่องคุณให้อัตโนมัติ — Windows/macOS/Linux)
- เปิดไฟล์ที่ดาวน์โหลดมา กด Next / Agree / Install ไปเรื่อย ๆ ค่าเริ่มต้นพอ
- (Windows) หน้าติดตั้ง ติ๊ก "Add 'Open with Code' action" ไว้ด้วย จะได้คลิกขวาโฟลเดอร์แล้วเปิดด้วย VS Code ได้
💡 สำเร็จแล้วจะมีไอคอนสีฟ้า ๆ
ปรากฏในเครื่อง
Extension แนะนำ (ติดตั้งภายใน VS Code)
เปิด VS Code → คลิกไอคอนรูปสี่เหลี่ยมซ้อน (Extensions) ด้านซ้าย → ค้นหาแล้วกด Install:
- Live Server — ดูผล HTML แบบเรียลไทม์ (สาย JS)
- Python — สนับสนุนภาษา Python (สาย Python)
- Prettier — จัดรูปแบบโค้ดให้สวยอัตโนมัติ
2. รู้จัก Terminal
Terminal (เรียกอีกชื่อว่า Command Prompt / PowerShell บน Windows) คือหน้าต่างที่ให้เราพิมพ์ คำสั่งเป็นข้อความ เพื่อควบคุมคอมพิวเตอร์ แทนการคลิกเมาส์
เปิด Terminal
- Windows: กดปุ่ม Windows พิมพ์
cmdหรือPowerShellแล้วเปิด- (หรือเปิด VS Code แล้วกด `Ctrl + ``)
- macOS: เปิดแอป Terminal จากโฟลเดอร์ Utilities
- หรือแนะนำ iTerm2
- VS Code: เปิดได้จากเมนู
Terminal → New Terminal(ง่ายสุด!)
คำสั่ง terminal พื้นฐาน (ใช้บ่อยมาก)
| คำสั่ง | ความหมาย |
|---|---|
pwd | แสดงโฟลเดอร์ปัจจุบัน (macOS/Linux) |
ls | แสดงไฟล์/โฟลเดอร์ในตำแหน่งนี้ |
cd ชื่อโฟลเดอร์ | เข้าไปในโฟลเดอร์ |
cd .. | ออกไปโฟลเดอร์ข้างบน |
mkdir ชื่อ | สร้างโฟลเดอร์ใหม่ |
clear | ล้างหน้าจอ |
บน Windows คำสั่ง
lsอาจเป็นdirและpwdเป็นcd(ไม่มี argument) แต่ PowerShell รองรับlsได้ แนะนำให้ใช้ PowerShell เลย
ลองทำ
- เปิด terminal
- พิมพ์
cd Desktop(เข้าไปหน้า Desktop) - พิมพ์
mkdir my-first-code(สร้างโฟลเดอร์ใหม่) - พิมพ์
cd my-first-code(เข้าไปข้างใน) - พิมพ์
code .(เปิดโฟลเดอร์นี้ใน VS Code)
ถ้าคำสั่ง code . ไม่ได้ ให้เปิด VS Code แล้วเลือก File → Open Folder แทน
3. ติดตั้งตัวแปลภาษา
เลือกตามสายที่คุณสนใจ (ยังไม่ตัดสินใจก็ได้ ลงได้ทั้งสองอย่าง):
สาย JavaScript → ติดตั้ง Node.js
Node.js คือตัวที่ทำให้เครื่องคุณ "รันโค้ด JavaScript" ได้
วิธีติดตั้ง:
- เปิดเว็บ https://nodejs.org
- หน้าเว็บจะมีปุ่มให้เลือก 2 แบบ — กดปุ่มที่เขียน LTS (สีเขียว ๆ เขียนว่า "Recommended For Most Users")
- (LTS = เวอร์ชันเสถียร ใช้สำหรับคนส่วนใหญ่)
- เปิดไฟล์ที่ดาวน์โหลดมา กด Next ไปเรื่อย ๆ จนจบ
- ตรวจสอบว่าสำเร็จ: เปิด terminal พิมพ์
node -vแล้วกด Enter- ถ้าเห็นเลขเวอร์ชัน เช่น
v20.11.1แปลว่า ใช้ได้แล้ว ✅
- ถ้าเห็นเลขเวอร์ชัน เช่น
สาย Python → ติดตั้ง Python
Python คือตัวแปลภาษา Python
วิธีติดตั้ง:
- เปิดเว็บ https://www.python.org/downloads/
- กดปุ่มเหลืองที่เขียน Download Python 3.x.x (เลือกล่าสุดให้)
- เปิดไฟล์ที่ดาวน์โหลดมา
- สำคัญที่สุด (Windows): หน้าติดตั้ง ให้ ติ๊กถูกที่ช่อง "Add Python to PATH" ด้านล่างก่อนกด Install!
- ถ้าไม่ติ๊ก จะพิมพ์คำสั่ง
pythonใน terminal ไม่ได้
- ถ้าไม่ติ๊ก จะพิมพ์คำสั่ง
- กด Install Now แล้วรอจนเสร็จ
- ตรวจสอบ: เปิด terminal พิมพ์
python --version(หรือpython3 --version)- ถ้าเห็นเลขเวอร์ชัน เช่น
Python 3.12.xแปลว่า ใช้ได้แล้ว ✅
- ถ้าเห็นเลขเวอร์ชัน เช่น
4. ทดสอบว่าพร้อมแล้ว
สร้างไฟล์แรกของคุณ:
- ในโฟลเดอร์ที่สร้างไว้ สร้างไฟล์ชื่อ
hello.js(สาย JS) หรือhello.py(สาย Python)
สาย JS — ในไฟล์ hello.js:
console.log("สวัสดีโลก! นี่คือโปรแกรมแรกของฉัน");
รันใน terminal:
node hello.js
สาย Python — ในไฟล์ hello.py:
print("สวัสดีโลก! นี่คือโปรแกรมแรกของฉัน")
รันใน terminal:
python hello.py
ถ้าเห็นข้อความ "สวัสดีโลก!..." ปรากฏบนจอ แสดงว่าเครื่องมือครบและพร้อมแล้ว! 🎉
สรุป Checklist
- ติดตั้ง VS Code
- รู้จักคำสั่ง terminal พื้นฐาน (
cd,ls,mkdir) - ติดตั้ง Node.js หรือ Python (หรือทั้งสองอย่าง)
- รันโปรแกรมแรกได้สำเร็จ
บทหน้าเราจะรู้จักว่า อินเทอร์เน็ตและเว็บไซต์ทำงานยังไง ซึ่งสำคัญมากสำหรับ Fullstack 🌐
อ่านจบแล้ว? ทำเครื่องหมายว่าเสร็จเพื่อบันทึกความคืบหน้า
แบบทดสอบ
ตอบให้ครบแล้วกด “ตรวจคำตอบ” เพื่อเช็คความเข้าใจ
1. Code Editor ที่นิยมที่สุดและแนะนำสำหรับมือใหม่คือ?
2. Terminal (Command Line) คืออะไร?
3. คำสั่งใน terminal ที่ใช้ ‘เปลี่ยนโฟลเดอร์’ คือ?
กำลังโหลด…