⏱️ ~12 นาที

ติดตั้งเครื่องมือ (Editor & Terminal)

เตรียมเครื่องมือที่จำเป็นในการเขียนโค้ดจริง

สิ่งที่ต้องมี

ก่อนเขียนโค้ดได้จริง ต้องติดตั้ง 3 อย่างนี้ให้ครบ:

  1. Code Editor — โปรแกรมสำหรับเขียนโค้ด
  2. Terminal — โปรแกรมสำหรับพิมพ์คำสั่ง
  3. Node.js (สาย JS) หรือ Python (สาย Python) — ตัวแปลภาษา

1. ติดตั้ง VS Code (Code Editor)

VS Code Visual Studio Code หรือ VS Code คือ editor ยอดนิยม ฟรี ใช้งานง่าย

วิธีติดตั้ง:

  1. เปิดเว็บ https://code.visualstudio.com
  2. กดปุ่มสีฟ้าตัวใหญ่ที่เขียน Download (ระบบจะเลือกเวอร์ชันที่เหมาะกับเครื่องคุณให้อัตโนมัติ — Windows/macOS/Linux)
  3. เปิดไฟล์ที่ดาวน์โหลดมา กด Next / Agree / Install ไปเรื่อย ๆ ค่าเริ่มต้นพอ
  4. (Windows) หน้าติดตั้ง ติ๊ก "Add 'Open with Code' action" ไว้ด้วย จะได้คลิกขวาโฟลเดอร์แล้วเปิดด้วย VS Code ได้

💡 สำเร็จแล้วจะมีไอคอนสีฟ้า ๆ 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 เลย

ลองทำ

  1. เปิด terminal
  2. พิมพ์ cd Desktop (เข้าไปหน้า Desktop)
  3. พิมพ์ mkdir my-first-code (สร้างโฟลเดอร์ใหม่)
  4. พิมพ์ cd my-first-code (เข้าไปข้างใน)
  5. พิมพ์ code . (เปิดโฟลเดอร์นี้ใน VS Code)

ถ้าคำสั่ง code . ไม่ได้ ให้เปิด VS Code แล้วเลือก File → Open Folder แทน

3. ติดตั้งตัวแปลภาษา

เลือกตามสายที่คุณสนใจ (ยังไม่ตัดสินใจก็ได้ ลงได้ทั้งสองอย่าง):

สาย JavaScript → ติดตั้ง Node.js

Node.js Node.js คือตัวที่ทำให้เครื่องคุณ "รันโค้ด JavaScript" ได้

วิธีติดตั้ง:

  1. เปิดเว็บ https://nodejs.org
  2. หน้าเว็บจะมีปุ่มให้เลือก 2 แบบ — กดปุ่มที่เขียน LTS (สีเขียว ๆ เขียนว่า "Recommended For Most Users")
    • (LTS = เวอร์ชันเสถียร ใช้สำหรับคนส่วนใหญ่)
  3. เปิดไฟล์ที่ดาวน์โหลดมา กด Next ไปเรื่อย ๆ จนจบ
  4. ตรวจสอบว่าสำเร็จ: เปิด terminal พิมพ์ node -v แล้วกด Enter
    • ถ้าเห็นเลขเวอร์ชัน เช่น v20.11.1 แปลว่า ใช้ได้แล้ว

สาย Python → ติดตั้ง Python

Python Python คือตัวแปลภาษา Python

วิธีติดตั้ง:

  1. เปิดเว็บ https://www.python.org/downloads/
  2. กดปุ่มเหลืองที่เขียน Download Python 3.x.x (เลือกล่าสุดให้)
  3. เปิดไฟล์ที่ดาวน์โหลดมา
  4. สำคัญที่สุด (Windows): หน้าติดตั้ง ให้ ติ๊กถูกที่ช่อง "Add Python to PATH" ด้านล่างก่อนกด Install!
    • ถ้าไม่ติ๊ก จะพิมพ์คำสั่ง python ใน terminal ไม่ได้
  5. กด Install Now แล้วรอจนเสร็จ
  6. ตรวจสอบ: เปิด 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. 1. Code Editor ที่นิยมที่สุดและแนะนำสำหรับมือใหม่คือ?

  2. 2. Terminal (Command Line) คืออะไร?

  3. 3. คำสั่งใน terminal ที่ใช้ ‘เปลี่ยนโฟลเดอร์’ คือ?

กำลังโหลด…