# Glossary ผู้สอน: คำสำคัญ 38 คำสำหรับอธิบายในห้อง

ใช้คำอธิบายนี้กับผู้เริ่มต้นก่อนใช้ศัพท์อังกฤษใน code. เป้าหมายคือให้เขาเห็นว่าแต่ละสิ่ง “มีหน้าที่อะไร” และ “ไม่ใช่อะไร”

หน้านี้คงเป็น glossary แบบตารางเพราะผู้อ่านต้องค้นคำทีละคำ ไม่ใช่ตามเส้นทางเดียว เมื่อจะสอนความสัมพันธ์ ให้เปิด [request จาก browser ถึง Worker/D1](/diagrams/web-request.html), [context ที่ agent โหลดตามงาน](/diagrams/agent-context.html) และ [release gates](/diagrams/release-gates.html) ประกอบ แล้วกลับมาตรวจความหมายของแต่ละ node จากตารางนี้

| คำ | ความหมายในหลักสูตร | อุปมา/ตัวอย่างที่พูดในห้อง |
|---|---|---|
| **Vibe coding** | การใช้ AI สนทนาเพื่อช่วยวางแผน/เขียน/ตรวจ software โดยมนุษย์ยังรับผิดชอบผล | เหมือนมีช่างฝึกงานเร็วมาก: ทำงานไว แต่เจ้าของงานยังต้องอ่านแบบและตรวจรับ |
| **Agent** | โปรแกรม AI ที่รับเป้าหมาย, อ่าน context และเรียก tools เพื่อทำงาน | ผู้ช่วยที่มีโต๊ะทำงานและชุดเครื่องมือ ไม่ใช่เพียงกล่อง chat |
| **Prompt** | คำสั่งสำหรับรอบงานหนึ่ง | ใบสั่งงานวันนี้: เป้าหมาย, ขอบเขต, หลักฐาน, จุดหยุด |
| **Spec** | ข้อตกลงตรวจได้ว่า product ต้องทำอะไรและไม่ทำอะไร | แบบบ้านก่อนเริ่มก่อ; ไม่ใช่รูป facade อย่างเดียว |
| **Acceptance criteria** | เงื่อนไข observable ว่างานผ่านหรือไม่ | checklist ตรวจรับ เช่น “Tab ถึงปุ่มได้” ไม่ใช่ “ดูดี” |
| **Evidence** | output ที่ยืนยัน claim: command/result, URL, screenshot พร้อม method | ใบเสร็จ ไม่ใช่คำบอกว่า “ผมจ่ายแล้ว” |
| **Assumption log** | รายการสิ่งที่ยังไม่ยืนยัน, owner และผลกระทบ | ป้ายเตือนบนแบบว่า “ยังไม่รู้ขนาดประตู—ถามสถาปนิก” |
| **Vertical slice** | งานชิ้นเล็กที่เดินครบจาก UI ถึงพฤติกรรมที่จำเป็น | ทำประตูหนึ่งบานให้เปิดได้ แทนสร้างผนังทุกห้องพร้อมกัน |
| **Scope** | สิ่งที่ตกลงทำในรอบนี้ | รั้วเขตก่อสร้าง; นอกนั้นไม่ขุดแม้เครื่องมือทำได้ |
| **Out of scope** | สิ่งที่ตั้งใจไม่ทำตอนนี้ | ป้าย “เฟส 2” ที่กัน feature creep |
| **`AGENTS.md`** | กติกา repository ที่ agent ควรรู้เกือบทุกงาน | ป้ายกฎความปลอดภัยหน้าห้องปฏิบัติการ |
| **Context** | ข้อมูลที่ model เห็นระหว่างตัดสินใจ | โต๊ะทำงาน: ถ้าวางของไร้เรื่องจนเต็ม จะหาเอกสารสำคัญไม่เจอ |
| **Context hygiene** | ทำ context ให้สั้น ถูก และเกี่ยวข้อง | เก็บโต๊ะก่อนเริ่มงานใหม่ ไม่ใช่กองเอกสารทุกโครงการไว้ด้วยกัน |
| **Skill** | instructions/resources/scripts สำหรับ workflow เฉพาะที่โหลดเมื่อเกี่ยวข้อง | คู่มือทำกาแฟสำหรับงานกาแฟ ไม่ใช่กฎติดผนังทุกงาน |
| **`SKILL.md`** | entry file ของ Agent Skill ที่บอกชื่อ/trigger/instructions | หน้าปกและวิธีใช้ของคู่มือ workflow |
| **Progressive disclosure** | โหลด catalog ก่อน, body เมื่อ match, references เมื่อจำเป็น | สารบัญ → บทที่เลือก → ภาคผนวกเฉพาะเรื่อง |
| **Portable core** | ส่วน skill ที่หลาย host เข้าใจร่วมกัน เช่น `name`, `description`, Markdown | ปลั๊ก USB-C: เสียบได้หลายที่ แต่ power profile อาจต่างกัน |
| **Vendor extension** | ฟีเจอร์เพิ่มเฉพาะ Codex/Claude/host เช่น command syntax หรือ frontmatter | ปุ่มพิเศษบนรถรุ่นหนึ่ง อย่าคาดว่ารถทุกคันมี |
| **MCP server** | server ที่ให้ agent เรียก tool/data จากระบบภายนอก | ปลั๊กพ่วงเครื่องมือ: ทำให้ผู้ช่วยเปิด Figma/Cloudflare ได้ แต่ไม่บอกว่าควรตัดสินใจอย่างไร |
| **Plugin** | package ที่รวม skills, MCP, agents, hooks หรือ metadata | กล่องเครื่องมือที่อาจมีหลายชิ้น จึงต้องเปิดตรวจทุกชิ้นก่อนใช้ |
| **Subagent** | agent แยก context/tool boundary เพื่อทำงานย่อย | ให้คนหนึ่งไปค้นห้องสมุด แล้วส่งสรุปกลับ ไม่เอาหนังสือทั้งห้องมากองโต๊ะหลัก |
| **Least privilege** | ให้ permission เท่าที่จำเป็น | ให้กุญแจเปิดห้องประชุม ไม่ให้ master key ทั้งตึก |
| **Secret** | credential ที่ให้เข้าถึงระบบ เช่น API token | กุญแจตู้เซฟ; ห้ามแปะใน prompt, code, screenshot หรือ Git |
| **Environment binding** | ชื่อ resource/secret ที่ Worker ได้รับจาก platform | ป้ายหน้าลิ้นชัก “DB”; code รู้ชื่อ แต่ไม่ได้พิมพ์กุญแจลงในสมุด |
| **Worker** | code ฝั่ง server ที่ Cloudflare เรียกเมื่อ request มา | เคาน์เตอร์หลังร้านที่ตัดสินกฎธุรกิจ ไม่ใช่ป้ายเมนูหน้าเว็บ |
| **Static assets** | HTML/CSS/JS/image ที่เสิร์ฟเป็นไฟล์ | ชั้นโชว์สินค้า; ใน repo Worker ส่ง assets ที่ไม่ใช่ `/api/*` ผ่าน `env.ASSETS.fetch` |
| **Route / endpoint** | address ที่ request เข้า code เฉพาะ | หมายเลขช่องบริการ เช่น `/api/quotes` เป็นช่องรับใบเสนอราคา |
| **HTTP method** | ชนิดการกระทำ เช่น GET อ่าน, POST ส่ง/สร้าง | คำกริยาบนแบบฟอร์ม: ดูข้อมูล vs ยื่นคำขอ |
| **API contract** | ชื่อ route, method, fields, response/errors ที่ตกลง | แบบฟอร์มราชการ: ช่องไหนต้องกรอกและจะได้ใบตอบอะไร |
| **Validation** | ตรวจว่า input มีรูปแบบและความหมายถูก | เจ้าหน้าที่เช็กบัตรและวันเดินทาง ไม่รับแค่กระดาษที่มีตัวอักษร |
| **Allow-list** | ยอมรับเฉพาะ fields/values ที่ระบุ | รายชื่อแขกหน้าประตู; ชื่ออื่นไม่ผ่าน แม้หน้าตาคล้าย |
| **D1** | Cloudflare SQL database ในหลักสูตรนี้ | ตู้ทะเบียนหลังร้าน เก็บ contacts, rentals, quotes และ idempotency records |
| **Migration** | ไฟล์เปลี่ยน schema database แบบติดตามได้ | คำสั่งปรับแบบตู้เอกสาร ไม่ใช่แค่ย้ายกระดาษด้วยมือ |
| **Authority** | ฝั่งที่เชื่อถือได้ในการตัดสินข้อมูล | เครื่องคิดเงินหลังร้านเป็น authority ของราคา; ป้ายราคาที่ลูกค้าพิมพ์เองไม่ใช่ |
| **Idempotency key** | key ที่ทำให้ request ซ้ำเดิมไม่สร้าง mutation ซ้ำ | หมายเลขบัตรคิว: ยื่นซ้ำแล้วได้เรื่องเดิม ไม่เปิดเคสสองใบ |
| **Race condition** | ผลผิดเมื่อหลาย request แข่งกันระหว่าง check กับ write | คนสองคนเห็นเก้าอี้ว่างใบสุดท้ายแล้วนั่งพร้อมกัน |
| **Atomic write / transaction** | กลุ่ม write สำเร็จครบหรือไม่สำเร็จเลย | โอนเงินต้องหักและฝากพร้อมกัน ไม่ใช่หักได้แต่ฝากไม่ได้ |
| **Preview deployment** | version ออนไลน์สำหรับตรวจรับก่อน release จริง | ห้องตัวอย่างก่อนเปิดร้าน ไม่ใช่หน้าร้านจริง |
| **Production** | environment ที่ผู้ใช้จริง/ข้อมูลจริงได้รับผล | หน้าร้านที่เปิดขาย; ทุก change มีผลกับคนจริง |
| **Smoke test** | การตรวจ flow หลักสั้น ๆ หลัง deploy | เปิดไฟและลองก๊อกน้ำก่อนเปิดบ้าน ไม่ใช่การตรวจทุกท่อ |
| **Rollback** | กลับ code version ที่รู้ว่าใช้ได้ | ถอยไปสูตรเมนูเดิม; ไม่ได้ย้อนข้อมูล D1 โดยอัตโนมัติ |
| **CSP** | Content Security Policy ที่จำกัดแหล่ง script/frame/etc. | รายชื่อแขกที่อนุญาตให้เข้าอาคาร ช่วยลดของแปลกที่ browser โหลด |
| **Turnstile** | Cloudflare bot check สำหรับ form | ด่านคัดคนกับบอต; ไม่ใช่ระบบ login หรือ authorization ทั้งหมด |
| **Honeypot field** | field ซ่อนที่มนุษย์ไม่กรอก แต่ bot มักกรอก | ประตูปลอมสำหรับจับคนที่เดินมั่ว |
| **Rate limit** | จำกัดจำนวน action ในช่วงเวลา | บัตรกดรับคิวจำกัด เพื่อกันคนกดจนระบบล้น |
| **Responsive design** | layout ปรับตามพื้นที่/อุปกรณ์ | โต๊ะพับที่ใช้งานได้ทั้งห้องเล็กและห้องใหญ่ |
| **Semantic HTML** | เลือก element ตามความหมาย เช่น `button`, `nav`, `label` | ป้ายกำกับลิ้นชัก ทำให้คนและ screen reader หาเจอ |
| **Focus** | จุดที่ keyboard จะส่ง input ไป | ไฟฉายบอกว่าตอนนี้คุณกำลังกดอะไร |
| **Reduced motion** | preference ที่ขอให้ลด animation ที่ไม่จำเป็น | ขอให้ลิฟต์หยุดสั่น/เคลื่อนไหวหวือหวา ไม่ใช่ปิดเนื้อหา |
| **GSAP / ScrollTrigger** | library สร้าง animation และผูกกับ scroll | คนคุมไฟเวที; ต้องเก็บอุปกรณ์หลังจบฉาก (cleanup) |
| **Progressive enhancement** | เนื้อหาหลักทำงานก่อน แล้วค่อยเพิ่ม JS/motion | หนังสืออ่านได้ก่อน แล้วเพิ่มภาพ pop-up; ไม่ใช่หนังสือว่างจนกว่าจะเปิดแบต |
| **Core Web Vitals** | field metrics LCP/INP/CLS จากประสบการณ์ผู้ใช้ | คะแนนรถบนถนนจริง ไม่ใช่รอบทดสอบในอู่ |
| **LCP** | เวลาที่เนื้อหาชิ้นใหญ่ใน viewport แสดง | เวลาจนป้ายหน้าร้านหลักติดไฟ |
| **INP** | ความเร็วตอบสนองของ interaction ตลอด visit | เวลาจากกดกริ่งจนได้ยินเสียงตอบรับ |
| **CLS** | การขยับ layout ที่ผู้ใช้ไม่คาดคิด | หนังสือเลื่อนลงตอนกำลังเอื้อมกดบรรทัดหนึ่ง |

## คำคู่ที่ผู้เรียนสับสนบ่อย

| อย่าสับสน | ความต่างที่ผู้สอนย้ำ |
|---|---|
| skill กับ MCP | skill บอก process; MCP ให้ capability/tool |
| preview กับ production | preview ใช้ตรวจ; production กระทบผู้ใช้จริง |
| client state กับ server authority | cart แสดง/เก็บความตั้งใจ; Worker reprice/validate ก่อนบันทึก |
| 201 success กับ commercial completion | demo contact/rental/quote สำเร็จไม่ได้แปลส่งอีเมล, จองจริง หรือจ่ายเงินจริง |
| build passed กับ product verified | build พิสูจน์ compilation; manual/browser/API checks ยังต้องทำ |
| rollback code กับ rollback data | `wrangler rollback` ไม่ย้อน D1 rows/schema โดยตัวมันเอง |