เริ่มต้น Vibe Coding: เตรียมเครื่องมือก่อนใช้ AI เขียนโค้ด ทีละขั้น

ทุกวันนี้คนที่ไม่เคยเขียนโปรแกรมมาก่อนก็สร้างเว็บไซต์ ระบบงานภายใน หรือเครื่องมือช่วยงานเล็ก ๆ ได้ด้วยการ "บอก" ให้ AI เขียนโค้ดให้ วิธีทำงานแบบนี้เรียกว่า Vibe Coding แต่ก่อนจะเริ่มสั่งงาน AI ได้ลื่น ๆ ต้องเตรียมเครื่องมือให้พร้อมก่อน ซึ่งเป็นจุดที่มือใหม่ติดกันมากที่สุด

บทความนี้เป็นตอนแรกของซีรีส์สอน vibe code จะพาเตรียมเครื่องมือทีละขั้น ตั้งแต่ติดตั้งโปรแกรม ตรวจสอบว่าใช้งานได้ ไปจนถึงสร้างโฟลเดอร์โปรเจกต์แรกและเปิดเครื่องมือ AI เขียนโค้ด พร้อมภาพหน้าจอทุกขั้นตอน

Vibe Coding คืออะไร

Vibe Coding คือการสร้างโปรแกรมโดยอธิบายสิ่งที่ต้องการเป็นภาษาคน แล้วให้ AI เป็นผู้เขียนโค้ด เราทำหน้าที่เหมือน "เจ้าของงาน" ที่บอกโจทย์ ทดลองใช้ผลงาน และสั่งแก้จนได้สิ่งที่ต้องการ คำนี้ถูกพูดถึงอย่างกว้างขวางตั้งแต่ต้นปี 2025 เมื่อเครื่องมือ AI เขียนโค้ดเก่งพอจะสร้างแอปที่ใช้งานได้จริง

สิ่งที่ต่างจากการถาม ChatGPT แล้วคัดลอกโค้ดไปวางเอง คือเครื่องมือรุ่นใหม่อย่าง Claude Code เปิดไฟล์ในโปรเจกต์ แก้ไขไฟล์ และรันคำสั่งให้เองได้ เราจึงไม่ต้องรู้ว่าโค้ดต้องวางไว้ตรงไหน แต่ยังต้องเข้าใจเครื่องมือพื้นฐานพอจะตรวจงานและแก้ปัญหาได้

เครื่องมือที่ต้องใช้ในการเริ่ม Vibe Code

เครื่องมือ	ใช้ทำอะไร	จำเป็นแค่ไหน
คอมพิวเตอร์ Windows / macOS	RAM 8 GB ขึ้นไป มีพื้นที่ว่างราว 10 GB	จำเป็น
VS Code	โปรแกรมเปิดดูและแก้ไขไฟล์โค้ด มี Terminal ในตัว	จำเป็น
Node.js (รุ่น LTS)	ใช้รันโปรเจกต์เว็บสมัยใหม่ และติดตั้งแพ็กเกจด้วยคำสั่ง npm	จำเป็น
Git + บัญชี GitHub	บันทึกเวอร์ชันของงาน ย้อนกลับได้เมื่อ AI แก้พัง และเก็บงานไว้บนคลาวด์	จำเป็น
เครื่องมือ AI เขียนโค้ด เช่น Claude Code	ผู้ช่วยที่อ่าน เขียน และแก้โค้ดในโปรเจกต์ตามที่เราสั่ง	จำเป็น (ต้องมีบัญชีแบบเสียเงินหรือ API)
เบราว์เซอร์ Chrome หรือ Edge	เปิดดูผลงานและตรวจหาข้อผิดพลาด	จำเป็น (มีอยู่แล้ว)
บัญชีโฮสติ้ง เช่น Vercel หรือ Netlify	นำเว็บขึ้นออนไลน์ให้คนอื่นใช้	ใช้เมื่อพร้อมเผยแพร่

ทั้งหมดนี้ยกเว้นเครื่องมือ AI เริ่มต้นใช้ได้ฟรี ถ้ายังไม่คุ้นกับคำอย่าง Terminal, npm หรือ repository แนะนำให้อ่านศัพท์เทคนิค Vibe Coding ที่ต้องรู้ควบคู่ไปด้วย

ขั้นที่ 1: ติดตั้ง VS Code

1. ดาวน์โหลดจากเว็บไซต์ทางการ code.visualstudio.com เลือกให้ตรงกับระบบปฏิบัติการ
2. บน Windows ระหว่างติดตั้งให้ติ๊ก "Add to PATH" และ "Open with Code" เพื่อให้เปิดโฟลเดอร์จากคลิกขวาได้
3. เปิดโปรแกรม แล้วลองเปิด Terminal ในตัวด้วยเมนู Terminal > New Terminal หรือกด Ctrl + ` (macOS ใช้ Cmd + `)

เราจะพิมพ์คำสั่งทั้งหมดในบทความนี้ใน Terminal นี้ ไม่ต้องสลับไปมาหลายโปรแกรม

ขั้นที่ 2: ติดตั้ง Node.js

เข้า nodejs.org แล้วดาวน์โหลดรุ่นที่มีป้าย LTS (รุ่นที่รองรับระยะยาว เสถียรที่สุด) ติดตั้งแบบกด Next ตามค่าเริ่มต้นได้เลย Node.js จะมาพร้อม npm ซึ่งเป็นเครื่องมือติดตั้งแพ็กเกจที่ AI จะเรียกใช้บ่อยมาก

ขั้นที่ 3: ติดตั้ง Git และสมัคร GitHub

1. Windows ดาวน์โหลด Git for Windows จาก git-scm.com ติดตั้งตามค่าเริ่มต้น (จะได้โปรแกรม Git Bash มาด้วย)
2. macOS พิมพ์ git --version ใน Terminal ถ้ายังไม่มี ระบบจะเสนอให้ติดตั้ง Command Line Tools ให้กดติดตั้ง
3. สมัครบัญชีฟรีที่ github.com แล้วตั้งชื่อและอีเมลให้ Git ด้วยสองคำสั่งนี้ (ทำครั้งเดียว)

git config --global user.name "Somchai Jaidee"
git config --global user.email "somchai@example.com"

Git สำคัญมากสำหรับ vibe coding เพราะ AI แก้ไฟล์ได้ทีละหลายไฟล์ ถ้าผลออกมาไม่ดี เราย้อนกลับไปจุดที่บันทึกไว้ได้ทันที

ขั้นที่ 4: ตรวจสอบว่าติดตั้งครบ

ปิดแล้วเปิด VS Code ใหม่ เปิด Terminal แล้วพิมพ์ทีละบรรทัด ถ้าแต่ละคำสั่งแสดงเลขเวอร์ชันแปลว่าพร้อมใช้งาน

node -v
npm -v
git --version

ถ้าขึ้นข้อความว่า command not found หรือ is not recognized ส่วนใหญ่เกิดจากยังไม่ได้ปิดเปิด Terminal ใหม่หลังติดตั้ง หรือตอนติดตั้งไม่ได้เพิ่มโปรแกรมเข้า PATH ให้ติดตั้งซ้ำแล้วเลือกตัวเลือกนั้น

ขั้นที่ 5: ติดตั้ง Claude Code และเข้าสู่ระบบ

Claude Code คือเครื่องมือ AI เขียนโค้ดของ Anthropic ที่ทำงานใน Terminal อ่านโปรเจกต์ทั้งโฟลเดอร์ แก้ไฟล์ และรันคำสั่งได้เอง (ขออนุญาตเราก่อนทุกครั้ง) วิธีติดตั้งที่ง่ายที่สุดคือผ่าน npm ที่เพิ่งติดตั้งไป

npm install -g @anthropic-ai/claude-code
claude --version

หรือใช้ตัวติดตั้งของ Anthropic เอง: macOS/Linux ใช้ curl -fsSL https://claude.ai/install.sh | bash ส่วน Windows PowerShell ใช้ irm https://claude.ai/install.ps1 | iex (วิธีติดตั้งอาจเปลี่ยนตามเวอร์ชัน ตรวจสอบได้จากเอกสารทางการของ Claude Code)

จากนั้นพิมพ์ claude ครั้งแรก โปรแกรมจะให้เลือกธีมสี แล้วพาไปเข้าสู่ระบบผ่านเบราว์เซอร์ เลือกได้ 2 แบบ คือบัญชี Claude แบบสมัครสมาชิก (Pro หรือ Max) หรือบัญชี Anthropic Console ที่จ่ายตามการใช้งาน API สำหรับมือใหม่ แบบสมาชิกคุมค่าใช้จ่ายง่ายกว่า

ขั้นที่ 6: สร้างโปรเจกต์แรกและเปิด AI ในโฟลเดอร์นั้น

กฎสำคัญข้อแรกของ vibe coding คือ 1 งาน = 1 โฟลเดอร์ และต้องเปิด AI ในโฟลเดอร์ของงานนั้นเสมอ เพราะ AI จะมองเห็นและแก้ไขเฉพาะไฟล์ในโฟลเดอร์ที่เปิดอยู่

mkdir my-first-app
cd my-first-app
git init
code .
claude

คำสั่งนี้สร้างโฟลเดอร์ my-first-app เข้าไปในโฟลเดอร์ เริ่มบันทึกเวอร์ชันด้วย Git เปิดโฟลเดอร์ใน VS Code แล้วเปิด Claude Code ใน Terminal ของ VS Code ลองสั่งงานแรก เช่น "สร้างหน้าเว็บ to-do list ภาษาไทย เพิ่ม ลบ และติ๊กว่าทำเสร็จได้"

วงจรการทำงานแบบ Vibe Coding

เมื่อเครื่องมือพร้อม การทำงานจริงจะวนเป็นรอบสั้น ๆ แบบนี้ ยิ่งรอบสั้น ยิ่งคุมงานได้ง่าย

1. บอกโจทย์ ให้ชัด ทีละเรื่อง
2. ให้ AI วางแผนหรือเขียนโค้ด อ่านสรุปว่าจะแก้อะไร
3. ทดสอบเอง เปิดในเบราว์เซอร์ กดใช้งานจริง
4. สั่งแก้ โดยบอกอาการที่เห็น หรือคัดลอกข้อความ error ให้ AI
5. บันทึกด้วย Git เมื่อทำงานได้ แล้วค่อยเริ่มฟีเจอร์ต่อไป
6. เผยแพร่ เมื่อพร้อมให้คนอื่นใช้

เตรียมโจทย์ก่อนสั่ง AI

เครื่องมือพร้อมแล้ว สิ่งที่ทำให้ผลงานดีหรือแย่คือ "โจทย์" ก่อนเปิด AI ให้เขียนสิ่งเหล่านี้ไว้ในโน้ตก่อน

แอปนี้ช่วยใคร ทำอะไร:   ฝ่ายขายบันทึกใบเสนอราคา
ผู้ใช้ทำอะไรได้บ้าง:      เพิ่มลูกค้า เลือกสินค้า คำนวณราคา พิมพ์ PDF
ข้อมูลที่ต้องเก็บ:        ลูกค้า สินค้า ราคา วันที่
หน้าตา:                ภาษาไทย ใช้บนมือถือได้ สีเรียบ ๆ
สิ่งที่ยังไม่ต้องมี:       ระบบล็อกอิน การชำระเงิน

การบอก "สิ่งที่ยังไม่ต้องมี" ช่วยให้ AI ไม่ทำงานเกินจำเป็น ซึ่งเป็นสาเหตุที่โปรเจกต์ของมือใหม่ซับซ้อนจนแก้ต่อไม่ได้ เทคนิคการสั่งงานแบบละเอียดอ่านต่อได้ในพื้นฐานการใช้ Claude Code

ข้อควรระวังสำหรับมือใหม่

• อย่าเปิด AI ในโฟลเดอร์ใหญ่ เช่น Desktop หรือ Documents ทั้งโฟลเดอร์ ให้เปิดเฉพาะโฟลเดอร์งาน
• อย่าวางรหัสผ่านหรือ API key ลงในแชท ให้เก็บในไฟล์ .env และไม่อัปโหลดขึ้น GitHub
• อ่านก่อนกดอนุญาต เมื่อ AI ขอรันคำสั่งที่ลบไฟล์หรือติดตั้งโปรแกรม
• บันทึก Git บ่อย ๆ ถ้า AI แก้พัง ย้อนกลับได้ทันที
• ใช้ข้อมูลทดสอบ ไม่ใช้ข้อมูลลูกค้าจริงระหว่างพัฒนา

เช็กลิสต์ก่อนเริ่ม Vibe Coding

• ☐ ติดตั้ง VS Code และเปิด Terminal ในตัวได้
• ☐ node -v, npm -v, git --version แสดงเลขเวอร์ชัน
• ☐ มีบัญชี GitHub และตั้งค่า user.name / user.email แล้ว
• ☐ ติดตั้งเครื่องมือ AI เขียนโค้ดและเข้าสู่ระบบแล้ว
• ☐ สร้างโฟลเดอร์โปรเจกต์แรกและรัน git init
• ☐ เขียนโจทย์แอปแรกไว้แล้ว

คำถามที่พบบ่อย

ไม่เคยเขียนโปรแกรมเลย เริ่ม vibe code ได้ไหม

ได้ แต่ควรเข้าใจศัพท์และเครื่องมือพื้นฐาน เพราะเมื่อเกิดปัญหา เราต้องอธิบายอาการให้ AI ได้และตรวจได้ว่า AI แก้ถูกจุด ไม่ต้องเขียนโค้ดเองได้ แต่ต้อง "อ่านสถานการณ์" ออก

ใช้ ChatGPT หรือ Claude บนเว็บแทนได้ไหม

ใช้ได้กับงานเล็กมาก ๆ เช่นหน้าเว็บไฟล์เดียว แต่เมื่องานมีหลายไฟล์ เครื่องมือที่อ่านและแก้ไฟล์ในเครื่องได้เอง เช่น Claude Code จะเร็วกว่าและผิดพลาดน้อยกว่าการคัดลอกวางเองมาก

ต้องใช้ Mac หรือไม่

ไม่จำเป็น Windows ใช้ได้ทั้งหมด ถ้ามีปัญหากับบางคำสั่ง ให้ใช้ Git Bash หรือ WSL ซึ่งทำงานเหมือน Terminal ของ macOS/Linux

สรุป

ก่อนเริ่ม vibe coding ให้เตรียม 4 อย่างหลักคือ VS Code, Node.js, Git/GitHub และเครื่องมือ AI เขียนโค้ด ตรวจสอบด้วยคำสั่งเช็กเวอร์ชัน แล้วเริ่มทุกงานในโฟลเดอร์ของตัวเองพร้อม git init เมื่อพื้นฐานพร้อม การสั่ง AI สร้างแอปใช้งานจริงจะง่ายขึ้นมาก ตอนต่อไปอ่านศัพท์เทคนิคที่ควรรู้ และพื้นฐานการใช้ Claude Code

Wise Success กำลังจะเปิดหลักสูตรสอน vibe code และสอนใช้ AI เขียนโค้ดสร้างแอปใช้งานจริงในองค์กร ตั้งแต่ติดตั้งเครื่องมือจนถึงเผยแพร่ผลงาน สนใจรับข่าวรอบอบรม หรืออยากจัดอบรมแบบ In-house ให้ทีมในองค์กร ติดต่อเราได้เลย