ศัพท์เทคนิค Vibe Coding ที่ต้องรู้ก่อนใช้ AI เขียนโค้ด (30+ คำ)
· อ่านประมาณ 14 นาที
เวลาใช้ AI เขียนโค้ด AI มักตอบกลับด้วยคำอย่าง "ติดตั้ง dependency แล้ว", "รัน dev server ที่ localhost:3000", "commit แล้ว push ขึ้น repository" หรือ "ต้องตั้ง environment variable" ถ้าไม่เข้าใจคำเหล่านี้ เราจะตรวจงาน AI ไม่ได้ และสั่งแก้ไม่ถูกจุด
บทความนี้รวมศัพท์เทคนิค Vibe Coding ที่ใช้บ่อยที่สุดกว่า 30 คำ แบ่งเป็นหมวด อธิบายเป็นภาษาง่าย พร้อมภาพหน้าจอให้เห็นว่าแต่ละคำหน้าตาเป็นอย่างไรในงานจริง เป็นพื้นฐานสำคัญของการสอน vibe code และสอนใช้ AI เขียนโค้ดสำหรับคนที่ไม่ได้เรียนสายโปรแกรมมิง
หมวด 1: ศัพท์ฝั่ง AI
| คำศัพท์ | ความหมายแบบเข้าใจง่าย |
|---|---|
| Prompt | ข้อความหรือคำสั่งที่เราพิมพ์บอก AI ยิ่งชัดและมีตัวอย่าง ผลยิ่งตรง |
| Model (โมเดล) | "สมอง" ของ AI แต่ละรุ่นเก่งและเร็วไม่เท่ากัน เช่น รุ่นใหญ่คิดลึกกว่าแต่ช้ากว่า |
| Token | หน่วยนับข้อความที่ AI อ่านและเขียน ใช้คิดค่าบริการและขีดจำกัดการใช้งาน |
| Context / Context window | ข้อมูลทั้งหมดที่ AI "จำได้" ในการสนทนาหนึ่ง รวมไฟล์ที่อ่านไป ถ้ายาวเกินไป AI จะเริ่มลืมรายละเอียดต้น ๆ |
| Agent (เอเจนต์) | AI ที่ลงมือทำงานหลายขั้นเองได้ เช่น อ่านไฟล์ แก้โค้ด รันคำสั่ง แล้วตรวจผล ไม่ใช่แค่ตอบแชท |
| Hallucination | อาการที่ AI ตอบมั่นใจแต่ข้อมูลผิด เช่น อ้างฟังก์ชันที่ไม่มีอยู่จริง ต้องทดสอบผลเองเสมอ |
| MCP (Model Context Protocol) | มาตรฐานเชื่อม AI เข้ากับเครื่องมือหรือข้อมูลภายนอก เช่น ฐานข้อมูล Google Drive หรือระบบในบริษัท |
หมวด 2: โครงสร้างของแอป
แอปใช้งานจริงเกือบทุกตัวแบ่งเป็น 3 ส่วนที่คุยกันผ่าน API ภาพนี้คือแผนผังที่ควรจำให้ขึ้นใจ เพราะเวลาเกิดปัญหา เราจะบอก AI ได้ว่าปัญหาอยู่ฝั่งไหน
| คำศัพท์ | ความหมายแบบเข้าใจง่าย |
|---|---|
| Frontend | ส่วนที่ผู้ใช้มองเห็นและกดได้ในเบราว์เซอร์หรือมือถือ เขียนด้วย HTML, CSS, JavaScript |
| Backend | ส่วนที่ทำงานบนเซิร์ฟเวอร์ คำนวณ ตรวจสิทธิ์ และจัดการข้อมูล ผู้ใช้มองไม่เห็น |
| Database (ฐานข้อมูล) | ที่เก็บข้อมูลถาวร เช่น รายชื่อลูกค้า คำสั่งซื้อ คล้ายตาราง Excel หลายชีทที่เชื่อมกัน |
| API | "ช่องทางสั่งงาน" ระหว่างโปรแกรม เช่น Frontend ขอข้อมูลลูกค้าจาก Backend หรือแอปเราขอส่ง LINE ผ่าน API ของ LINE |
| Framework | โครงสร้างสำเร็จรูปสำหรับสร้างแอป เช่น React, Next.js, Laravel ช่วยไม่ต้องเริ่มจากศูนย์ |
| Library | ชุดโค้ดสำเร็จรูปสำหรับงานเฉพาะ เช่น ทำกราฟ อ่านไฟล์ Excel สร้าง PDF |
| Full-stack | งานหรือแอปที่มีครบทั้ง Frontend, Backend และ Database |
หมวด 3: Terminal และคำสั่งพื้นฐาน
AI เขียนโค้ดจะรันคำสั่งเหล่านี้ให้บ่อยมาก เราไม่ต้องจำทั้งหมด แต่ต้องอ่านออกว่ามันกำลังทำอะไร
| คำศัพท์ / คำสั่ง | ความหมายแบบเข้าใจง่าย |
|---|---|
| Terminal / CLI | หน้าต่างพิมพ์คำสั่งแทนการคลิก CLI ย่อมาจาก Command Line Interface |
| Directory / Folder / Path | Directory คือโฟลเดอร์ ส่วน Path คือที่อยู่ของไฟล์ เช่น src/app/page.tsx |
cd, ls (dir), mkdir | เข้าโฟลเดอร์, ดูรายการไฟล์, สร้างโฟลเดอร์ใหม่ |
| Package / npm | Package คือ library ที่ติดตั้งเพิ่มได้ npm คือเครื่องมือติดตั้ง package ของ Node.js |
| Dependency | package ที่โปรเจกต์ต้องใช้ ระบุไว้ในไฟล์ package.json และติดตั้งด้วย npm install ไปไว้ในโฟลเดอร์ node_modules |
| Dev server | เซิร์ฟเวอร์จำลองสำหรับทดสอบในเครื่อง มักเปิดด้วย npm run dev แก้โค้ดแล้วหน้าเว็บอัปเดตทันที |
| localhost / Port | localhost คือ "เครื่องของเราเอง" Port คือหมายเลขช่อง เช่น localhost:3000 คนอื่นเปิดไม่ได้ |
| IDE / Code editor | โปรแกรมเขียนโค้ด เช่น VS Code มีทั้งตัวแก้ไฟล์และ Terminal ในตัว |
หมวด 4: Git และ GitHub
Git คือระบบบันทึกเวอร์ชันของงาน เหมือนปุ่ม Save ที่จำได้ทุกครั้งพร้อมคำอธิบาย และย้อนกลับได้ เป็นตาข่ายนิรภัยที่สำคัญที่สุดเมื่อให้ AI แก้โค้ด
| คำศัพท์ | ความหมายแบบเข้าใจง่าย |
|---|---|
| Repository (Repo) | โฟลเดอร์โปรเจกต์ที่ Git ติดตามประวัติ อยู่ในเครื่อง (local) และบน GitHub (remote) |
| Commit | การบันทึกจุดเวอร์ชันหนึ่งพร้อมข้อความอธิบาย เช่น "เพิ่มหน้ารายงานยอดขาย" |
| Branch | สายงานแยก ทดลองฟีเจอร์ใหม่ได้โดยไม่กระทบเวอร์ชันหลัก (main) |
| Push / Pull | Push = ส่งงานจากเครื่องขึ้น GitHub, Pull = ดึงงานล่าสุดจาก GitHub ลงเครื่อง |
| Pull Request (PR) | คำขอรวมงานจาก branch หนึ่งเข้า main เพื่อให้คนอื่นตรวจก่อน |
| Merge / Conflict | Merge = รวมงานสองสาย, Conflict = สองสายแก้บรรทัดเดียวกัน ต้องเลือกว่าจะเก็บแบบไหน |
หมวด 5: การเผยแพร่และความปลอดภัย
| คำศัพท์ | ความหมายแบบเข้าใจง่าย |
|---|---|
| Deploy | นำแอปจากเครื่องเราขึ้นเซิร์ฟเวอร์จริงให้คนอื่นเข้าใช้ได้ |
| Hosting | บริการที่ให้แอปของเราทำงานบนอินเทอร์เน็ต เช่น Vercel, Netlify, เซิร์ฟเวอร์ของบริษัท |
| Domain | ชื่อเว็บ เช่น wisethailand.com ชี้ไปยังโฮสติ้งที่แอปอยู่ |
| Environment (Dev / Production) | Dev คือที่ทดสอบในเครื่อง Production คือระบบจริงที่ผู้ใช้ใช้อยู่ ห้ามทดลองบน Production |
| Environment variable / .env | ค่าตั้งค่าที่แยกจากโค้ด เช่น รหัสฐานข้อมูล API key เก็บในไฟล์ .env |
| API key | รหัสลับสำหรับเรียกใช้บริการภายนอก รั่วไหลเมื่อไหร่ คนอื่นใช้แทนเราและเราเป็นคนจ่ายเงิน |
| .gitignore | รายชื่อไฟล์ที่ Git ไม่ต้องบันทึก เช่น .env และ node_modules |
หมวด 6: เมื่อโค้ดมีปัญหา
| คำศัพท์ | ความหมายแบบเข้าใจง่าย |
|---|---|
| Bug | ข้อผิดพลาดที่ทำให้โปรแกรมทำงานไม่ตรงที่ตั้งใจ |
| Error | ข้อความแจ้งข้อผิดพลาด เป็นข้อมูลที่มีค่าที่สุดสำหรับให้ AI แก้ |
| Stack trace | รายการบรรทัดใต้ error ที่บอกเส้นทางว่าเกิดปัญหาที่ไฟล์และบรรทัดไหน |
| Log / Console | ข้อความที่โปรแกรมพิมพ์ออกมาระหว่างทำงาน ดูใน Terminal หรือกด F12 ในเบราว์เซอร์ แท็บ Console |
| Debug | กระบวนการหาและแก้ bug |
| Refactor | ปรับโครงสร้างโค้ดให้อ่านง่ายขึ้นโดยผลลัพธ์เหมือนเดิม |
เคล็ดลับ: เมื่อเจอ error อย่าพิมพ์แค่ว่า "มันพัง" ให้คัดลอกข้อความ error ทั้งก้อนส่งให้ AI พร้อมบอกว่ากำลังทำอะไรอยู่ตอนเกิดปัญหา AI จะแก้ถูกจุดเร็วขึ้นมาก
ประโยคสั่ง AI ที่ใช้ศัพท์เหล่านี้ได้ทันที
- "ช่วยรัน dev server แล้วบอกว่าเปิดที่ localhost port อะไร"
- "หน้า frontend ไม่แสดงรายชื่อลูกค้า ช่วยเช็กว่า API ฝั่ง backend ส่งข้อมูลกลับมาไหม"
- "ย้าย API key ไปไว้ใน .env และเพิ่ม .env ใน .gitignore"
- "commit งานตอนนี้ด้วยข้อความที่อธิบายสิ่งที่เปลี่ยน แล้ว push ขึ้น GitHub"
- "สร้าง branch ใหม่ชื่อ feature/export-excel ก่อนเริ่มทำฟีเจอร์ส่งออก Excel"
สรุป
ไม่ต้องจำศัพท์ทั้งหมดในครั้งเดียว ให้เริ่มจาก 5 กลุ่มที่เจอบ่อยที่สุดคือ Frontend / Backend / Database / API, Terminal และ npm, Git commit / push, .env และ API key และ Error เมื่อเข้าใจคำเหล่านี้ การอ่านคำตอบของ AI และสั่งแก้จะง่ายขึ้นมาก
ถ้ายังไม่ได้เตรียมเครื่องมือ อ่านเตรียมตัวเริ่ม Vibe Coding และเมื่อพร้อมใช้งานจริง อ่านพื้นฐานการใช้ Claude Code ต่อได้เลย
Wise Success กำลังจะเปิดหลักสูตรสอน vibe codeและสอนใช้ AI เขียนโค้ดสร้างแอปใช้งานจริงสำหรับคนทำงานที่ไม่ได้เรียนสายโปรแกรมมิง สนใจรับข่าวรอบอบรม หรือจัดอบรมแบบ In-house ให้ทีมในองค์กร ติดต่อเราได้เลย
- #vibe coding
- #ศัพท์โปรแกรมมิ่ง
- #สอน vibe code
- #สอนใช้ ai เขียนโค้ด
- #Git
- #API