Beginner Book

โหมดมืด

บทที่ 04 — Claude Code: เครื่องมือสำหรับนักพัฒนา ​

ส่วนหนึ่งของ Claude Book · บทนี้ระดับ ระดับกลาง → ระดับสูง (Skills/Hooks/MCP)

ต้องรู้อะไรก่อน: ใช้ terminal เป็นเบื้องต้น, รู้จัก git, เคยทำงานในโปรเจกต์โค้ดจริง

ทำไมต้องมี Claude Code ในเมื่อมี claude.ai อยู่แล้ว ​

บน claude.ai คุณต้อง คัดลอกโค้ดไปวาง แล้วเอาคำตอบ คัดลอกกลับมาวาง ในไฟล์เอง — ทำซ้ำ ๆ จนเมื่อย และมันไม่เห็นโปรเจกต์ทั้งก้อนของคุณ

Claude Code คือ Claude ในรูปแบบ command-line (CLI — ซี-แอล-ไอ) ทำงานในเทอร์มินัล (terminal — เทอร์-มิ-นั่ล)

  • CLI = โปรแกรมที่สั่งงานด้วยการพิมพ์คำสั่งเป็นบรรทัด ๆ ไม่มีหน้าจอปุ่มกด
  • terminal = หน้าต่างดำ ๆ ที่ใช้พิมพ์คำสั่ง (บน Windows คือ PowerShell หรือ Windows Terminal; บน macOS/Linux คือ Terminal)

จุดต่างจาก claude.ai คือ Claude Code ลงมือทำกับไฟล์ในเครื่องคุณได้โดยตรง — อ่าน/แก้ไฟล์ในโปรเจกต์ รันคำสั่ง รันเทสต์ แล้วแก้ต่อจนเสร็จ

🔍 มองให้ถูก: โดยเนื้อแท้แล้ว Claude Code คือ AI agent ตัวหนึ่ง (เดี๋ยวเจาะลึกในบทที่ 06) — มันวนลูป "อ่านบริบท → ลงมือ → ตรวจผล" ให้คุณเอง คุณแค่บอกเป้าหมายเป็นภาษาคน

4.1 การติดตั้งและเริ่มใช้ ​

ก่อนติดตั้ง: ต้องมี Node.js (โหนด-เจ-เอส) บนเครื่องก่อน — เป็นโปรแกรมที่ทำให้ใช้คำสั่ง npm ได้

  • npm (เอ็น-พี-เอ็ม) = โปรแกรมจัดการแพ็กเกจ (package manager) ใช้ดาวน์โหลด/ติดตั้งไลบรารีหรือเครื่องมือจากอินเทอร์เน็ตด้วยคำสั่งเดียว เช่น npm install ชื่อแพ็กเกจ — มากับ Node.js อัตโนมัติ ไม่ต้องติดตั้งแยก
  1. ดาวน์โหลดและติดตั้งจาก nodejs.org (เลือกเวอร์ชัน LTS — รุ่นเสถียร)
  2. เปิด terminal ใหม่ แล้วเช็คว่าติดตั้งสำเร็จ:
bash
node --version
npm --version

ถ้าเห็นเลขเวอร์ชัน (เช่น v20.x.x) แปลว่าใช้งานได้แล้ว จากนั้นติดตั้ง Claude Code:

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

(-g = ติดตั้งแบบ global ใช้ได้ทุกโปรเจกต์)

จากนั้นเข้าไปในโฟลเดอร์โปรเจกต์ของคุณ (เปลี่ยน my-project เป็นชื่อโฟลเดอร์โปรเจกต์จริงของคุณ — ถ้ายังไม่มีโปรเจกต์ ลองสร้างโฟลเดอร์เปล่า ๆ ก่อนก็ได้ด้วย mkdir my-project) แล้วสั่ง:

bash
cd my-project
claude

ครั้งแรกจะให้ล็อกอิน — ใช้ได้ทั้งบัญชี Claude แบบ Pro/Max (รายเดือน) หรือ API key (จ่ายตาม token) นอกจาก CLI แล้ว Claude Code ยังใช้ได้ผ่าน:

  • ส่วนขยาย IDE — VS Code, JetBrains (IntelliJ, PyCharm ฯลฯ)
  • GitHub Actions — รัน Claude Code ใน CI/CD pipeline ของ repository (ดูที่ github.com/anthropics/claude-code-action)
text
⚠️ Pitfall: รัน `claude` นอกโฟลเดอร์โปรเจกต์ (เช่นที่ home directory)
มันจะไม่เห็นโค้ดของคุณ — ต้อง cd เข้าไปในโฟลเดอร์โปรเจกต์ก่อนเสมอ
เพราะ Claude Code ทำงานกับ "โฟลเดอร์ปัจจุบัน" เป็นขอบเขต

4.2 การใช้งานพื้นฐาน ​

พิมพ์สิ่งที่ต้องการเป็นภาษาธรรมชาติ — ภาษาไทยก็ได้:

text
> เพิ่มฟังก์ชันตรวจสอบอีเมลในไฟล์ utils.js พร้อมเขียนเทสต์
> หา bug ที่ทำให้หน้า login ค้าง
> รันเทสต์ทั้งหมดแล้วแก้ตัวที่ fail
> อธิบายว่าโฟลเดอร์ src/ ทำงานยังไง

Claude Code จะอ่านไฟล์ที่เกี่ยวข้องเอง วางแผน แก้โค้ด และรันคำสั่ง โดย ขออนุญาตก่อน ทำสิ่งที่กระทบไฟล์หรือระบบ (เรื่องสิทธิ์อยู่ใน 4.8)

4.3 Slash Commands และ CLAUDE.md ​

Slash Commands ​

คำสั่งที่ขึ้นต้นด้วย / เรียกใช้ความสามารถเฉพาะทาง คำสั่งเหล่านี้แบ่งเป็น 2 กลุ่ม:

Built-in (มาพร้อม Claude Code ตั้งแต่ติดตั้ง):

  • /help — ดูคำสั่งทั้งหมด
  • /clear — ล้างบทสนทนาในเซสชันปัจจุบัน
  • /compact — ย่อบริบทเก่าให้สั้นลงเพื่อประหยัด context
  • /model — เปลี่ยนรุ่นโมเดล (เช่น Sonnet/Opus/Fable — ตรวจรายชื่อรุ่นปัจจุบันในเมนูของคุณเอง เพราะรุ่นออกใหม่เรื่อย ๆ)
  • /permissions — จัดการสิทธิ์เครื่องมือ
  • /agents — จัดการ subagent (ดู 4.7)
  • /init — สร้างไฟล์ CLAUDE.md (บริบทโปรเจกต์) ให้อัตโนมัติ
  • /review — รีวิว PR (Pull Request — พูล-รีเควสต์ = คำขอรวมโค้ดเข้าโปรเจกต์หลัก)
  • /mcp — จัดการ MCP server (ดู 4.6)

Custom (คุณเขียนเอง): วางไฟล์ Markdown ใน .claude/commands/ — ชื่อไฟล์คือชื่อคำสั่ง เนื้อหาคือสิ่งที่อยากให้ทำ ใช้ $ARGUMENTS รับอาร์กิวเมนต์ได้:

markdown
สรุป git log ตั้งแต่ tag ล่าสุดถึงปัจจุบัน
เขียนเป็น changelog รูปแบบ Keep a Changelog
หัวข้อที่ผู้ใช้ระบุเพิ่ม: $ARGUMENTS

(บันทึกเป็น .claude/commands/changelog.md) เรียกใช้ด้วย /changelog v2.1

📎 หมายเหตุ: ในตัวอย่างหนังสือเล่มอื่น ๆ คุณอาจเห็นบรรทัด <!-- .claude/commands/xxx.md --> ในตัวอย่าง — นั่นคือ HTML comment ที่ผู้เขียนใส่เพื่อบอก path ของไฟล์ เท่านั้น ไม่ใช่ส่วนของเนื้อหา slash command จริง คุณไม่ต้องใส่ในไฟล์ของคุณก็ได้

CLAUDE.md — บริบทประจำโปรเจกต์ ​

ไฟล์บันทึกบริบทของโปรเจกต์ที่ Claude Code อ่านทุกครั้งที่เริ่มทำงาน — ใส่ข้อมูลอย่างวิธีรันเทสต์ โครงสร้างโปรเจกต์ คำสั่ง build หรือกฎการเขียนโค้ดของทีม สั่ง /init ให้สร้างให้อัตโนมัติได้

มีได้หลายระดับ:

  • ระดับผู้ใช้ (~/.claude/CLAUDE.md) — ใช้ทุกโปรเจกต์
  • ระดับโปรเจกต์ (./CLAUDE.md) — แชร์ผ่าน git
  • ระดับโฟลเดอร์ย่อย — บริบทเฉพาะส่วน

ตัวอย่างไฟล์ CLAUDE.md ของโปรเจกต์เว็บจริง:

markdown
# โปรเจกต์: ระบบจัดการคลังสินค้า

## เทคโนโลยีที่ใช้
- Frontend: React + TypeScript + Vite
- Backend: Node.js (Express) · ฐานข้อมูล PostgreSQL

## คำสั่งที่ใช้บ่อย
- `npm run dev` — รันเซิร์ฟเวอร์ระหว่างพัฒนา
- `npm test` — รันเทสต์ทั้งหมด (ต้องผ่านก่อน commit เสมอ)
- `npm run lint` — ตรวจสไตล์โค้ด

## กฎการเขียนโค้ดของทีม
- ใช้ async/await เท่านั้น ห้ามใช้ .then()
- ตั้งชื่อตัวแปรเป็นภาษาอังกฤษ ใช้ camelCase
- ทุกฟังก์ชันที่ export ต้องมี unit test คู่กัน

## สิ่งที่ห้ามแตะ
- โฟลเดอร์ `src/legacy/` — โค้ดเก่ากำลังจะถูกถอด อย่าแก้

💡 เคล็ดลับ: เขียน CLAUDE.md เหมือนสอนพนักงานใหม่ — สั้น ตรง และเฉพาะสิ่งที่ Claude เดาเองไม่ได้ บริบทที่ดีลดความผิดพลาดได้มหาศาล ส่วนสิ่งที่เห็นได้จากโค้ดอยู่แล้วไม่ต้องเขียนซ้ำ

4.4 Skills — แพ็กเกจความเชี่ยวชาญเฉพาะทาง ​

Agent Skill คือโฟลเดอร์ที่บรรจุความสามารถเฉพาะทางไว้เป็นแพ็กเกจ ทำให้ Claude ทำงานเฉพาะด้านได้ตาม "วิธีที่ถูกต้อง" ที่ผู้เชี่ยวชาญกำหนดไว้ แทนที่จะให้ Claude คิดวิธีเองใหม่ทุกครั้ง

🔍 เปรียบเทียบ: Skill เหมือน "คู่มือขั้นตอนการทำงาน (SOP)" ที่บริษัทเขียนไว้ — พนักงานเก่งแค่ไหน ถ้ามี SOP ที่ดีก็ทำงานได้มาตรฐานเดียวกันทุกครั้ง ไม่ต้องคิดใหม่

โครงสร้างของสกิล ​

สกิลหนึ่งตัวคือหนึ่งโฟลเดอร์ ประกอบด้วย:

  • SKILL.md (บังคับ) — ไฟล์หลัก มี frontmatter (ฟร้อนต์-แมท-เทอร์ = ส่วนหัวไฟล์) บอก name (ชื่อ) กับ description (คำอธิบาย) ตามด้วยขั้นตอนการทำงาน
  • ไฟล์ประกอบ (ไม่บังคับ) — สคริปต์, เทมเพลต, เอกสารอ้างอิง ที่สกิลเรียกใช้

📎 frontmatter เขียนด้วย YAML (ยา-เม่ิล) — ภาษาเก็บค่าตั้งค่าแบบอ่านง่าย ใช้ key: value เช่น:

yaml
---
name: pdf-report
description: สร้างรายงาน PDF
---

เครื่องหมาย --- คือ "เปิด/ปิด frontmatter" ส่วนที่อยู่ระหว่าง 2 บรรทัดนี้คือค่าตั้งค่า

text
.claude/skills/
└── pdf-report/
    ├── SKILL.md          # frontmatter + ขั้นตอนการทำงาน
    ├── template.html     # เทมเพลตที่สกิลใช้
    └── generate.py       # สคริปต์ช่วยแปลงเป็น PDF

ตัวอย่าง SKILL.md:

markdown
---
name: pdf-report
description: สร้างรายงาน PDF จากข้อมูลสรุปรายเดือน — ใช้เมื่อผู้ใช้ขอรายงานหรือ export เป็น PDF
---

# วิธีสร้างรายงาน
1. รวบรวมข้อมูลยอดขายจากไฟล์ที่ผู้ใช้ระบุ
2. ใช้ template.html เป็นโครงหน้า
3. รัน `python generate.py` เพื่อแปลงเป็น PDF
4. ตรวจว่าไฟล์ผลลัพธ์ถูกสร้างจริงก่อนรายงานผู้ใช้

Progressive disclosure (โปร-เกรส-สีฟ ดิส-โคล้-เชอร์ = การเปิดเผยข้อมูลทีละขั้น) — กลไกที่ทำให้สกิลไม่เปลือง context ​

สกิลฉลาดตรงที่มันโหลดข้อมูล ทีละชั้น:

  1. ตอนเริ่ม Claude เห็นแค่ name + description ของทุกสกิล (กินที่น้อยมาก)
  2. เมื่อ description ตรงกับงาน ที่ผู้ใช้ขอ Claude จึงโหลดเนื้อหา SKILL.md เต็ม
  3. ไฟล์ประกอบ จะถูกอ่านเฉพาะตอนจำเป็นจริง ๆ เท่านั้น

ผลคือมีสกิลติดตั้งไว้ได้เป็นร้อยตัวโดยไม่ทำให้ context รก

💡 description คือหัวใจ — เป็นสิ่งเดียวที่ Claude ใช้ตัดสินใจว่าจะหยิบสกิลมาใช้ไหม เขียนให้ชัดทั้ง "ทำอะไร" และ "ใช้เมื่อไร"

ตำแหน่งและที่มาของสกิล ​

ที่มาตำแหน่งขอบเขต
ระดับผู้ใช้~/.claude/skills/ใช้ได้ทุกโปรเจกต์
ระดับโปรเจกต์.claude/skills/เฉพาะโปรเจกต์ แชร์ผ่าน git ได้
Pluginติดตั้งมาเป็นชุดตามที่ plugin กำหนด
Built-inมากับ Claude Codeเช่น สกิลสร้าง docx, pdf, pptx

การเรียกใช้ ​

  • อัตโนมัติ — Claude เลือกใช้สกิลเองเมื่อ description ตรงกับงานที่ผู้ใช้ขอ
  • เรียกตรง — ผู้ใช้พิมพ์ /<ชื่อสกิล> เพื่อสั่งใช้สกิลนั้นทันที

Skills เป็นมาตรฐานเดียวกันทั้งบน Claude Code, claude.ai และผ่าน API — เขียนครั้งเดียวใช้ได้หลายที่

4.5 Hooks — ทำงานอัตโนมัติเมื่อเกิดเหตุการณ์ ​

Hook คือคำสั่ง shell ที่ระบบรันให้อัตโนมัติเมื่อเกิดเหตุการณ์ที่กำหนด

จุดสำคัญที่ทำให้ hook ต่างจากการบอก Claude ผ่าน prompt: "ระบบ" เป็นคนรัน ไม่ใช่ Claude ตัดสินใจ จึงเชื่อถือได้ 100% ว่าจะทำงานทุกครั้ง — ต่างจากการสั่งใน prompt ที่ Claude อาจลืมหรือข้าม

🔍 เปรียบเทียบ: prompt = "ช่วยปิดไฟก่อนออกนะ" (อาจลืม) · hook = "เซนเซอร์ที่ปิดไฟเองเมื่อไม่มีคนในห้อง" (ทำงานแน่นอนทุกครั้ง)

เหตุการณ์ (event) ที่ hook เกาะได้:

Eventทำงานเมื่อตัวอย่างการใช้
PreToolUseก่อน Claude ใช้เครื่องมือบล็อกคำสั่งอันตราย ตรวจสิทธิ์
PostToolUseหลังใช้เครื่องมือเสร็จรัน formatter/linter หลังแก้ไฟล์
UserPromptSubmitเมื่อผู้ใช้ส่งข้อความเพิ่มบริบท ตรวจคำต้องห้าม
Notificationเมื่อ Claude แจ้งเตือน (เช่นรอ permission)ส่ง desktop notification
Stopเมื่อ Claude ตอบจบแจ้งเตือนว่างานเสร็จ
SubagentStopเมื่อ subagent ตอบจบlog ผลของ subagent แต่ละตัว
SessionStartเมื่อเริ่ม sessionโหลดสถานะ ตั้งค่าเริ่มต้น
SessionEndเมื่อจบ sessionสำรองสถานะ, ส่งสรุปการใช้งาน
PreCompactก่อนบีบอัด contextสำรองข้อมูลสำคัญ

JSON I/O contract — hook คุยกับ Claude ผ่าน stdin/stdout

📎 ต้องรู้ก่อน (สำหรับมือใหม่):

  • stdin (สแตน-ดิน) = "ทางเข้า" ของโปรแกรม Claude Code ส่งข้อมูลให้ hook ผ่านช่องนี้
  • stdout (สแตน-ดเอาท์) = "ทางออก" ของโปรแกรม hook เขียนคำตอบกลับให้ Claude ผ่านช่องนี้
  • exit code = "เลขสถานะ" ที่โปรแกรมตอนจบ บอกว่าทำงานสำเร็จหรือไม่ (0 = สำเร็จ, อื่น ๆ = ไม่สำเร็จ)

hook ก็คือโปรแกรมตัวเล็ก ๆ (shell script, Node, Python อะไรก็ได้) ที่ระบบเรียกพร้อมส่ง JSON เข้า stdin แล้วรอ JSON ออกจาก stdout

Walkthrough: hook ทำงานอย่างไรทีละขั้น

  1. ผู้ใช้สั่ง Claude แก้ไฟล์ app.js
  2. ก่อน/หลังใช้เครื่องมือ ระบบรันโปรแกรม hook ของคุณ
  3. ระบบส่ง JSON แบบนี้เข้า stdin:
    json
    {
  "session_id": "abc123",
  "hook_event_name": "PostToolUse",
  "tool_name": "Edit",
  "tool_input": { "file_path": "/work/app.js" }
}
  4. โปรแกรม hook อ่าน JSON นี้ ตัดสินใจว่าจะทำอะไร แล้วเขียน JSON ตอบกลับทาง stdout (ตัวอย่างด้านล่าง)
  5. ระบบอ่าน stdout + exit code เพื่อรู้ว่า hook อนุญาต/ปฏิเสธ/ขอ approval

ตัวอย่าง JSON ที่ hook เขียนกลับ — บล็อกการใช้เครื่องมือ:

json
{
  "hookSpecificOutput": {
    "hookEventName": "PreToolUse",
    "permissionDecision": "deny",
    "permissionDecisionReason": "คำสั่งนี้รันใน production ห้ามให้ Claude ใช้ตรง ๆ ต้องมี approval"
  }
}

permissionDecision รับค่า "allow" (อนุญาต), "deny" (ปฏิเสธ), หรือ "ask" (ถามผู้ใช้ก่อน)

ตัวอย่าง: เพิ่มบริบทให้ Claude เห็น (ไม่บล็อก แค่ส่งข้อความเข้า session):

json
{
  "systemMessage": "เพิ่มบริบทให้ Claude เห็น: deploy freeze เริ่ม 5 มิ.ย."
}

exit code (ทางเลือกที่สอง): ถ้าไม่อยากเขียน JSON ใช้ exit code แทนได้ — 0 = ผ่าน, 2 = block พร้อมส่งข้อความใน stderr กลับให้ Claude เห็น, อื่น ๆ = ถือว่า hook พัง (Claude เห็น error)

📎 ไม่ต้องจำตอนนี้: JSON output ทาง stdout คือวิธีหลัก (canonical) ที่ docs แนะนำ — exit code 2 เป็นทางสำรองสำหรับ shell script สั้น ๆ ที่ไม่อยากต้องสร้าง JSON เอง การใช้ 2 แทน 1 เป็น ข้อตกลง (convention) เฉพาะของ Claude Code เอง ไม่ใช่มาตรฐาน Unix

⚠️ schema เปลี่ยนตามเวอร์ชัน — ตรวจที่ docs.anthropic.com/en/docs/claude-code/hooks ก่อนใช้จริง

ตั้งค่าที่ไหน: เปิดไฟล์ .claude/settings.json ในรากโปรเจกต์ (ถ้ายังไม่มีให้สร้างเอง) — ตัวอย่างนี้รัน Prettier ทุกครั้งหลัง Claude แก้ไฟล์:

json
{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [{
          "type": "command",
          "command": "jq -r '.tool_input.file_path' | xargs -r npx prettier --write"
        }]
      }
    ]
  }
}

อ่านโค้ดข้างบนทีละจุด:

  • matcher = บอกว่า hook นี้จะเกาะกับเครื่องมือไหน — ในที่นี้คือ Edit (แก้ไฟล์) กับ Write (เขียนไฟล์ใหม่)
  • | ในค่า "Edit|Write" = อ่านว่า "หรือ" คือเกาะกับ Edit หรือ Write ก็ได้
  • command = คำสั่ง shell ที่จะรัน คำสั่งนี้:
    • jq -r '.tool_input.file_path' = อ่าน JSON จาก stdin (ที่ระบบส่งให้) แล้วดึงเฉพาะค่า tool_input.file_path (path ของไฟล์ที่ Claude เพิ่งแก้)
    • | xargs -r = ส่งค่านั้นเป็น argument ให้คำสั่งถัดไป (ถ้าค่าว่างไม่ต้องรัน)
    • npx prettier --write = เรียก Prettier มาจัด format ไฟล์นั้น (npx = รัน package จาก npm โดยไม่ต้องติดตั้งถาวร)

รวมความ: "ทุกครั้งหลัง Claude แก้หรือเขียนไฟล์ ระบบส่ง JSON ให้ hook → hook ดึงชื่อไฟล์ออกมาแล้วเรียก prettier จัด format ไฟล์นั้นทันที"

⚠️ Windows/PowerShell: คำสั่งข้างบนใช้ jq และ xargs ซึ่งเป็นโปรแกรมสาย POSIX (มากับ macOS/Linux/WSL/Git Bash) — ไม่ได้มากับ PowerShell โดยตรง ถ้าใช้ PowerShell ล้วนต้องติดตั้ง jq เพิ่มเอง หรือเขียน hook เป็นสคริปต์ Node.js/PowerShell ที่อ่าน JSON จาก stdin แทน

ตัวอย่างนี้ยังสมมติว่า tool_input มีคีย์ file_path ตรง ๆ (ใช้ได้กับ Edit/Write) — เครื่องมืออื่นที่แก้หลายไฟล์พร้อมกัน (เช่น NotebookEdit) มีโครง tool_input ต่างออกไป ต้องปรับ jq query เอง

⚠️ อย่าใช้ $CLAUDE_FILE_PATHS — เป็น env var ที่หนังสือ/บทความเก่าหลายเล่มเขียนถึง แต่ไม่ใช่ contract ปัจจุบัน ของจริง hook ต้องอ่าน tool_input จาก JSON ทาง stdin (เช่นด้วย jq หรือ process.stdin ใน Node)

4.6 MCP — เชื่อมต่อเครื่องมือและข้อมูลภายนอก ​

MCP (เอ็ม-ซี-พี / Model Context Protocol — โม-เดล คอน-เท็กซ์ โปร-โท-คอล = โพรโทคอลแลกเปลี่ยนบริบทกับโมเดล) คือมาตรฐานเปิดสำหรับเชื่อม AI เข้ากับเครื่องมือและแหล่งข้อมูลภายนอก เปรียบเหมือน "พอร์ต USB-C ของ AI" — เสียบกับอะไรก็ได้ที่รองรับมาตรฐานเดียวกัน โดยไม่ต้องเขียน integration ใหม่ทุกครั้ง

MCP server เปิดให้ Claude เข้าถึง 3 อย่าง:

  • Tools — ฟังก์ชันที่ Claude เรียกใช้ได้ (เช่น query ฐานข้อมูล, สร้าง issue)
  • Resources — ข้อมูลที่ Claude อ่านได้ (เช่น ไฟล์, เอกสาร, เรคคอร์ด)
  • Prompts — เทมเพลต prompt สำเร็จรูปที่ server เตรียมไว้

ตัวอย่าง MCP server ที่นิยม: GitHub, Slack, Google Drive, Postgres, Sentry, Playwright (ควบคุมเบราว์เซอร์)

ตั้งค่าได้ใน .mcp.json (แชร์ในทีมผ่าน git ได้) เชื่อมได้ 2 รูปแบบหลัก (transport = ช่องทางรับส่งข้อมูลระหว่าง Claude กับ server):

  • local — รันเป็นโปรเซสในเครื่องคุณ ใช้ transport stdio
  • remote — เซิร์ฟเวอร์อยู่ที่อื่น ใช้ transport Streamable HTTP (มาตรฐานใหม่ตั้งแต่ มี.ค. 2025) หรือ SSE (รูปแบบเดิม กำลังจะเลิกใช้)

คำย่อแต่ละตัว (ดูเฉพาะถ้าสนใจ):

  • stdio (สแตน-ดิ-โอ) = standard input/output — ส่งข้อมูลผ่านทาง stdin/stdout ของโปรเซสที่รันในเครื่อง
  • HTTP (เอช-ที-ที-พี) = โพรโทคอลของเว็บ ใช้คุยข้ามเครื่องผ่านอินเทอร์เน็ต
  • SSE (เอส-เอส-อี / Server-Sent Events) = วิธีที่เซิร์ฟเวอร์ทยอยส่งข้อมูลกลับมาเรื่อย ๆ บน HTTP เดียวกัน

💡 ยังไม่ต้องจำศัพท์ทั้งหมดนี้ — จำแค่ local = รันในเครื่องเรา กับ remote = อยู่ที่เซิร์ฟเวอร์ข้างนอก ก็พอใช้งานได้แล้ว ส่วน transport ส่วนใหญ่เครื่องมือจัดการให้

ฟีเจอร์ Connectors บน claude.ai (บทที่ 02) ก็ทำงานบน MCP เช่นกัน — มาตรฐานเดียว ใช้ได้ทุกที่

ตัวอย่าง .mcp.json ที่เพิ่ม MCP server 2 ตัว — ตัวแรก local (stdio) ตัวที่สอง remote (Streamable HTTP):

json
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/folder"]
    },
    "internal-api": {
      "type": "http",
      "url": "https://mcp.mycompany.com/mcp"
    }
  }
}

อธิบายทีละจุด:

  • command + args = รัน MCP server เป็นโปรเซสในเครื่อง — ใช้ npx -y เพื่อให้ npm ดาวน์โหลดและรัน package โดยไม่ต้องติดตั้งถาวร (-y = ตอบ "yes" อัตโนมัติถ้าถามว่าจะดาวน์โหลดไหม)
  • type: "http" = remote MCP server แบบ Streamable HTTP — endpoint โดยทั่วไปจะลงท้ายด้วย /mcp
  • ถ้าใช้ SSE (รูปแบบเดิม) ให้ใช้ "type": "sse" กับ URL ที่ลงท้าย /sse แทน — อย่ามิกซ์ type: "http" กับ URL /sse เพราะเป็นคนละ transport

⚠️ ข้อมูล ณ มิถุนายน 2026 — ชื่อแพ็กเกจ MCP server และรูปแบบ config เปลี่ยนตามเวอร์ชัน เช่น GitHub MCP server เดิมที่ชื่อ @modelcontextprotocol/server-github ถูกย้ายไปเป็น official server โดย GitHub เอง (เช่น ghcr.io/github/github-mcp-server แบบ Docker หรือ remote endpoint บน api.githubcopilot.com/mcp) ตรวจที่ github.com/modelcontextprotocol/servers หรือ docs.anthropic.com ก่อนใช้จริง

⚠️ ความปลอดภัย: อย่าใส่ token/secret (รหัสลับ) ตรง ๆ ใน .mcp.json ที่ commit ขึ้น git — ใช้รูปแบบอ้าง env var เช่น "env": { "GITHUB_TOKEN": "${env:GITHUB_TOKEN}" } แทน หรือใช้คำสั่ง claude mcp add ที่เก็บ credentials (ข้อมูลยืนยันตัวตน) แยก (ดูบทที่ 07)

📎 syntax ${env:VAR_NAME} เป็นรูปแบบของ Claude Code config (ไม่ใช่ shell มาตรฐาน) — ตอนรัน ระบบจะแทน ${env:GITHUB_TOKEN} ด้วยค่าจาก environment variable ชื่อ GITHUB_TOKEN ในเครื่องคุณ syntax อาจต่างกันตามเวอร์ชัน — ใช้ claude mcp add ผ่าน CLI ก็จัดการ env var ให้อัตโนมัติเช่นกัน

Scope ของ MCP server — เก็บไว้ที่ไหน ใช้กับงานไหน ​

Scopeตำแหน่ง (จัดการผ่าน claude mcp ดีกว่าแก้ไฟล์ตรง)เห็นจาก
userconfig ส่วนตัวของคุณใน home directoryทุกโปรเจกต์ของคุณ — ใช้กับ MCP ส่วนตัว เช่น Linear/Notion ส่วนตัว
project.mcp.json ในรากโปรเจกต์ (commit ขึ้น git ได้)ทุกคนในทีมที่ clone โปรเจกต์ — ใช้กับ MCP ของทีม
local.claude/settings.local.json (อยู่ใน .gitignore)เฉพาะเครื่องคุณในโปรเจกต์นี้ — ใช้กับ credentials ส่วนตัวในโปรเจกต์ทีม

ลำดับ precedence: local > project > user (เครื่องมือชื่อชนกัน อันที่แคบกว่าชนะ)

📎 ภาพง่าย ๆ ของ "ที่อยู่" 2 ระดับ:

  • home directory = โฟลเดอร์ส่วนตัวของคุณบนเครื่อง (Windows: C:\Users\<ชื่อ> · macOS/Linux: /Users/<ชื่อ> หรือ /home/<ชื่อ>) — config ที่นี่ใช้กับทุกโปรเจกต์
  • project root = โฟลเดอร์โปรเจกต์ที่คุณ cd เข้าไป — config ที่นี่ใช้เฉพาะโปรเจกต์นี้

ตำแหน่งไฟล์จริงของ user scope ต่างกันตามเวอร์ชัน/ระบบปฏิบัติการ — ใช้ claude mcp CLI จะปลอดภัยกว่า ไม่ต้องเดา path

CLI helpers แทนการแก้ JSON เอง ​

bash
# เพิ่ม stdio server เข้า user scope
# (ใช้ -- คั่นก่อน command ที่จะรัน เพื่อไม่ให้ flag ของ npx ปนกับ flag ของ claude mcp)
claude mcp add filesystem -s user -- npx -y @modelcontextprotocol/server-filesystem /path/to/folder

# เพิ่ม remote Streamable HTTP server เข้า project scope (commit ได้)
claude mcp add internal-api https://mcp.mycompany.com/mcp --transport http -s project

# list / remove / get
claude mcp list
claude mcp remove filesystem

📎 ตรวจ flag ที่แท้จริง ด้วย claude mcp add --help เพราะ short flag (เช่น -t) อาจต่างกันตามเวอร์ชัน

Remote MCP + OAuth ​

Remote MCP server ที่ต้องล็อกอิน (เช่น Linear, Asana, Sentry official) ใช้ OAuth 2.0 (โอ-อ้อธ ทู-พ้อยท์-โอ) ไม่ใช่ static token (รหัสลับตายตัวที่ไม่หมดอายุ)

📎 OAuth คืออะไร?

OAuth คือวิธีมาตรฐานของเว็บที่ใช้ตอนคุณกด "ล็อกอินด้วย Google" หรือ "ล็อกอินด้วย Facebook" บนเว็บอื่น

หลักการคือ: เว็บที่คุณจะเข้า ไม่ต้องรู้รหัสผ่านของคุณ เลย แค่ขอสิทธิ์เข้าถึงเฉพาะเรื่องที่คุณอนุญาต

ใช้กับ MCP อย่างไร?

เมื่อรัน claude mcp add หรือเข้า /mcp ในเซสชัน Claude Code จะ:

  1. เปิดเบราว์เซอร์ให้คุณ approve (อนุมัติ)
  2. เก็บ token (รหัสยืนยันตัวตน) ที่ได้กลับมา
  3. ต่ออายุ token ให้อัตโนมัติเมื่อหมดอายุ

ผลคือ: ไม่ต้องวาง token ใน config เลย ปลอดภัยกว่ามาก เหมาะกับ MCP ระดับองค์กร (organization-level) ที่ต้องคุม permission ต่อผู้ใช้

OAuth ต่างจาก static token อย่างไร?

  • static token = คุณก๊อปรหัสจากเว็บมาวางในไฟล์ config ด้วยมือ → ถ้าหลุดต้องเข้าไปยกเลิกเอง
  • OAuth = approve ครั้งเดียวในเบราว์เซอร์ → ระบบจัดการ token ให้ทั้งหมด รวมถึงต่ออายุและถอนสิทธิ์

4.7 Subagents — แตกงานย่อยให้ agent ลูก ​

Claude Code แตกงานย่อยให้ "subagent" (agent ลูก) ทำได้ แต่ละตัวมีหน้าต่างบริบท (context) แยกของตัวเอง

ประโยชน์โดยย่อ: ไม่ทำให้ context หลักรก, ทำงานขนานกันได้, เชี่ยวชาญเฉพาะทาง — รายละเอียดเต็มและวิธีนิยาม subagent อยู่ใน บทที่ 06 — AI Agents ซึ่งว่าด้วยเรื่อง agent โดยเฉพาะ

4.8 โหมดการทำงานและสิทธิ์ (Permissions & Plan Mode) ​

Claude Code ควบคุมได้ว่าจะให้ลงมือมากแค่ไหน — นี่คือกลไกความปลอดภัยสำคัญ:

โหมดพฤติกรรมเหมาะกับ
ปกติถามอนุญาตก่อนทำสิ่งที่กระทบไฟล์/ระบบงานทั่วไป
Plan modeสำรวจและเสนอ "แผน" ก่อน ไม่แก้อะไรจนกว่าจะอนุมัติงานใหญ่ งานเสี่ยง
Auto-acceptรับการแก้ไขอัตโนมัติ ไม่ต้องยืนยันทีละครั้งงานที่มั่นใจแล้ว

นอกจากนี้ตั้ง permission allowlist ใน settings.json ล่วงหน้าได้ เพื่อลดการถามซ้ำ ๆ กับคำสั่งที่ปลอดภัย:

json
{
  "permissions": {
    "allow": ["Bash(npm test:*)", "Bash(npm run build:*)"]
  }
}

อธิบาย syntax ทีละส่วน:

ส่วนความหมายตัวอย่าง
Bash(...)อนุญาตเครื่องมือ Bash (รันคำสั่ง shell) เฉพาะ pattern ที่ตรงกับในวงเล็บBash(npm test:*) = อนุญาตเฉพาะคำสั่งที่ขึ้นต้นด้วย npm test
:*wildcard (ไวลด์การ์ด) = สัญลักษณ์แทน "อะไรก็ได้ต่อจากนี้"npm test:* จับได้ทั้ง npm test, npm test -- --coverage, npm test src/foo.test.js
pattern ของเครื่องมืออื่นเครื่องมือแต่ละตัวมี pattern คล้ายกันแต่ต่างชื่อRead(src/**) = อ่านได้ทุกไฟล์ใต้ src/ · Edit(*.ts) = แก้ได้เฉพาะไฟล์ .ts

💡 Plan mode คือเพื่อนของงานใหญ่ — บังคับให้ Claude วางแผนให้คุณตรวจก่อน ดีกว่าปล่อยให้มันลุยแก้ 20 ไฟล์แล้วค่อยมารู้ทีหลังว่าเดินผิดทาง

4.9 Memory — ความจำข้ามเซสชัน ​

Claude Code ไม่มี "ความจำ" แบบคนในตัวเอง — ทุกเซสชันเริ่มต้นใหม่ การข้ามเซสชันต้องอาศัย ไฟล์ ที่ระบบอ่านเข้ามาทุกครั้ง แยกได้ 3 ระดับ ตามว่าระบบรองรับเอง (built-in) หรือผู้ใช้ตั้งเอง:

กลไกใครจัดการสถานะ
CLAUDE.md (ดู 4.3)ระบบรองรับเอง — Claude Code อ่านอัตโนมัติทุกเซสชันใช้ได้ทันที
Auto-memory ผ่าน skill/hookผู้ใช้/ทีมตั้งเอง (เช่น skill ที่เขียนไฟล์ลง ~/.claude/memory/ แล้วโหลดผ่าน SessionStart hook)ต้องตั้งเอง
memory_tool ของ Claude API (Claude 4.x — Sonnet/Opus)API นิยาม action view/create/replace ให้ — ผู้พัฒนาเป็นคนเขียน storage layer เอง (ไฟล์, DB, อะไรก็ได้) Anthropic ไม่ได้ host memory ให้ (ดูบทที่ 05)เฉพาะตอนเรียก API ตรง ไม่ใช่ใน Claude Code CLI default

💡 อย่าสับสนระหว่าง 3 ระดับนี้ — ถ้าคุณอยากให้ Claude Code "จำ" ความชอบของคุณข้ามเซสชัน วิธีที่ตรงและเป็นทางการที่สุดคือเขียนลง CLAUDE.md หรือสร้าง skill memory เอง · memory_tool ของ API เป็นเรื่องของคนทำ agent ของตัวเองผ่าน SDK ไม่ใช่ฟีเจอร์ CLI

4.10 เคล็ดลับการใช้ Claude Code ให้ได้ผล ​

  • เขียน CLAUDE.md ให้ดี — บริบทที่ดีลดความผิดพลาดมหาศาล
  • แตกงานใหญ่เป็นขั้น — สั่งทีละเฟส ตรวจผลก่อนไปต่อ ดีกว่าสั่งรวดเดียว
  • ใช้ plan mode กับงานเสี่ยง — ให้ Claude เสนอแผนก่อนลงมือ
  • ตรวจ diff ก่อนรับ — อ่านสิ่งที่มันแก้เสมอ อย่ารับรวด ๆ
  • ทำงานบน git — commit บ่อย ๆ เพื่อย้อนกลับได้ถ้าผลไม่ดี
  • ลงทุนกับ Skills/commands ที่ใช้ซ้ำ — งานที่ทำบ่อยควรเก็บเป็นสกิลหรือ slash command

🛠️ Lab — ตั้งค่าโปรเจกต์จริง ​

ถ้ามีโปรเจกต์โค้ดอยู่แล้ว (หรือสร้างโฟลเดอร์เปล่าใหม่ก็ได้) ลองทำ 3 ขั้นนี้:

  1. ติดตั้งและ init — ติดตั้ง Claude Code, cd เข้าโปรเจกต์, รัน claude แล้วสั่ง /init ดูว่ามันสร้าง CLAUDE.md ให้หน้าตาเป็นยังไง
  2. เขียน slash command แรก — สร้างไฟล์ .claude/commands/summary.md ที่สั่งให้ "สรุปว่าโปรเจกต์นี้ทำอะไร โครงสร้างหลักมีอะไรบ้าง" แล้วเรียก /summary
  3. ลอง plan mode — สั่งงานที่กระทบหลายไฟล์ (เช่น "เปลี่ยนชื่อฟังก์ชัน X ทั้งโปรเจกต์") ในโหมด plan แล้วอ่านแผนที่มันเสนอก่อนอนุมัติ
โจทย์คิดต่อ: เมื่อไรควรใช้ Skill เมื่อไรควรใช้ slash command?
  • slash command = "prompt สำเร็จรูป" ที่คุณพิมพ์เรียกเอง เหมาะกับงานที่ คุณอยากสั่งเอง ซ้ำ ๆ (เช่น /changelog)
  • Skill = แพ็กเกจขั้นตอน + ไฟล์ประกอบ ที่ Claude หยิบมาใช้เองอัตโนมัติ เมื่อ description ตรงงาน เหมาะกับงานที่ซับซ้อนมีหลายไฟล์/สคริปต์ และอยากให้ Claude รู้จักใช้เองโดยไม่ต้องสั่ง

โดยคร่าว: งานง่ายสั่งเอง → command · งานมีขั้นตอนมาตรฐานซับซ้อน + อยากให้เลือกใช้อัตโนมัติ → skill

📚 Glossary — ศัพท์สำคัญในบทนี้ ​

ศัพท์คำอ่านความหมายสั้น
CLIซี-แอล-ไอโปรแกรมสั่งงานด้วยการพิมพ์คำสั่งเป็นบรรทัด
terminalเทอร์-มิ-นั่ลหน้าต่างสำหรับพิมพ์คำสั่ง
Node.jsโหนด-เจ-เอสruntime ที่ทำให้รัน JavaScript นอกเบราว์เซอร์ได้ ใช้ npm
frontmatterฟร้อนต์-แมท-เทอร์ส่วนหัวไฟล์ (มักเขียนด้วย YAML) เก็บค่าตั้งค่า
YAMLยา-เม่ิลภาษาเก็บค่าตั้งค่าแบบอ่านง่าย ใช้ key: value
Progressive disclosureโปร-เกรส-สีฟ ดิส-โคล้-เชอร์การเปิดเผยข้อมูลทีละขั้น
stdin / stdoutสแตน-ดิน / สแตน-ดเอาท์ทางเข้า/ทางออกของโปรแกรมในระบบ Unix
exit codeเอ็ก-ซิต-โค้ดเลขสถานะตอนโปรแกรมจบ (0 = สำเร็จ)
conventionคอน-เวน-ชั่นข้อตกลง/ธรรมเนียมปฏิบัติ (ไม่บังคับแต่ใช้กันแพร่หลาย)
MCPเอ็ม-ซี-พีModel Context Protocol — มาตรฐานเชื่อม AI กับเครื่องมือภายนอก
stdioสแตน-ดิ-โอstandard input/output ใช้รับส่งข้อมูลกับโปรเซสในเครื่อง
HTTPเอช-ที-ที-พีโพรโทคอลของเว็บ คุยข้ามเครื่อง
SSEเอส-เอส-อีServer-Sent Events — เซิร์ฟเวอร์ทยอยส่งข้อมูลกลับมา
OAuth 2.0โอ-อ้อธ ทู-พ้อยท์-โอวิธีล็อกอินมาตรฐาน เว็บอื่นไม่ต้องรู้รหัสผ่านของคุณ
PRพี-อาร์Pull Request — คำขอรวมโค้ดเข้าโปรเจกต์หลัก
access tokenแอ็กเซส-โท-เคนรหัสยืนยันตัวตน (สตริงลับ ๆ ที่ระบบใช้เช็คว่าใครเป็นใคร) — คนละความหมาย กับ token ที่ใช้นับ/คิดราคาข้อความใน Claude API (ดูบทที่ 01, 05)

✅ Checkpoint ​

  1. Claude Code ต่างจาก claude.ai ตรงไหนที่สำคัญที่สุด?
  2. CLAUDE.md มีไว้ทำอะไร และควรใส่/ไม่ควรใส่อะไร?
  3. Hook ต่างจากการสั่งใน prompt อย่างไร ทำไมจึงเชื่อถือได้กว่า?
  4. MCP แก้ปัญหาอะไร เปรียบเหมือนอะไร?
  5. Plan mode เหมาะกับงานแบบไหน เพราะอะไร?

➡️ บทที่ 05 — Claude API: เรียกใช้ผ่านโค้ด

⬅️ บทที่ 03 | กลับสารบัญ | ➡️ บทที่ 05