พื้นฐาน Web Dev ที่ต้องรู้ก่อนมาใช้ Agentic Coding

เกริ่นนำ: ยุคที่ AI เขียนโค้ดแทนเราได้แล้ว

ปี 2025 เป็นปีที่เปลี่ยนแปลงวงการพัฒนาซอฟต์แวร์ไปตลอดกาล

เครื่องมืออย่าง Windsurf, Cursor, GitHub Copilot และ Claude Code ทำให้ AI สามารถ "ลงมือทำ" ได้จริง ไม่ใช่แค่ตอบคำถาม — มันอ่าน codebase ทั้งโปรเจกต์ได้ แก้ไขไฟล์โค้ดได้โดยตรง รัน terminal commands ได้ และทำงานหลายขั้นตอนต่อเนื่องกันได้ สิ่งนี้เรียกว่า Agentic Coding

หลายคนจึงคิดว่า "ถ้า AI เขียนโค้ดได้แล้ว ฉันยังต้องเรียน Web Dev ทำไม?"

คำตอบคือ: ยังต้องเรียนอยู่ — และสำคัญกว่าเดิมด้วยซ้ำ

Agentic Coding คืออะไรกันแน่?

ก่อนอื่น มาทำความเข้าใจให้ตรงกันก่อน

Agentic Coding ≠ แค่ถาม ChatGPT แล้วก็อปโค้ด

Agentic Coding คือการทำงานร่วมกับ AI ที่:

• เข้าใจ context ทั้งโปรเจกต์ — อ่านไฟล์ทุกไฟล์ในโฟลเดอร์ได้

• แก้โค้ดได้โดยตรง — ไม่ต้องก็อปวางเอง

• รัน commands ได้ — npm install, git commit, database migration

• ทำ multi-step tasks — "สร้าง API endpoint พร้อม validation และ unit test"

ฟังดูทรงพลังมาก และมันก็ทรงพลังจริงๆ — แต่เฉพาะในมือของคนที่รู้ว่ากำลังทำอะไรอยู่

ปัญหาที่เกิดขึ้นจริง: เมื่อคนไม่รู้พื้นฐานใช้ AI

ลองนึกภาพสถานการณ์นี้:

คุณสั่ง AI ว่า "สร้างระบบ login ให้หน่อย" แล้ว AI ก็สร้างโค้ดมาให้ 200 บรรทัด คุณรัน npm run dev แล้วเจอ error แดงๆ เต็มหน้าจอ

ถ้าคุณไม่รู้พื้นฐาน คุณจะ:

1. ก็อป error ไปถาม AI อีกครั้ง

2. AI แก้ให้ แต่เกิด error ใหม่

3. วนซ้ำ loop นี้ไปเรื่อยๆ โดยไม่เข้าใจว่าเกิดอะไรขึ้น

4. โปรเจกต์กลายเป็น "Frankenstein code" ที่ทำงานได้บ้างไม่ได้บ้าง

นี่ไม่ใช่ Agentic Coding — นี่คือ การพึ่งพา AI แบบตาบอด

5 เหตุผลที่พื้นฐาน Web Dev สำคัญมากในยุค AI

1. สั่ง AI ได้ตรงและละเอียดกว่า

ความแตกต่างระหว่าง prompt ที่ดีกับไม่ดีมหาศาลมาก:

❌ Prompt ของคนที่ไม่รู้พื้นฐาน:

"ทำให้เว็บสวยขึ้น และเพิ่มฟีเจอร์ login ด้วย"

✅ Prompt ของคนที่รู้พื้นฐาน:

"เพิ่มหน้า /login ด้วย Next.js App Router ใช้ NextAuth.js กับ Credentials provider มี email/password form พร้อม error handling ถ้า login ผิด และ redirect ไปหน้า /dashboard หลัง login สำเร็จ ใช้ Zod validate input ก่อน"

Prompt ที่สองให้ผลลัพธ์ที่ถูกต้องตั้งแต่ครั้งแรก เพราะคุณรู้ว่าต้องการอะไร รู้ชื่อ library ที่ใช้ และรู้ flow ที่ถูกต้อง

2. ตรวจสอบโค้ดที่ AI สร้างได้

AI ไม่ได้ถูกต้องเสมอไป มันอาจ:

• สร้างโค้ดที่ดูดีแต่มี security vulnerability (SQL injection, auth bypass)

• ใช้ library ที่ deprecated หรือไม่มีอยู่จริง (hallucination)

• เขียน logic ที่ ผิดพลาดในบาง edge case

• สร้าง pattern ที่ ไม่เหมาะกับ project ของคุณ

ถ้าคุณอ่านโค้ดไม่ออก คุณจะ accept ทุกอย่างที่ AI สร้างมาให้ และนั่นอันตรายมาก

3. Debug ได้เองเมื่อเกิดปัญหา

Error ที่พบบ่อยใน Web Dev:

TypeError: Cannot read properties of undefined (reading 'id')

คนที่รู้ JavaScript จะรู้ทันทีว่า object ที่คาดว่าจะมีค่าเป็น undefined อยู่ — และรู้ว่าต้องไปดูที่ไหน

คนที่ไม่รู้จะก็อป error ไปถาม AI ซ้ำๆ โดยไม่เข้าใจ root cause

4. ตัดสินใจด้าน Architecture ได้

AI เก่งในการ implement แต่ไม่รู้ว่า business ของคุณต้องการอะไร

คำถามที่ต้องตัดสินใจเอง:

• ควรใช้ Server Component หรือ Client Component?

• ข้อมูลนี้ควร cache หรือ fetch ใหม่ทุกครั้ง?

• DB schema ควรออกแบบยังไงให้ scale ได้?

• ควรใช้ REST API หรือ Server Actions?

คำถามเหล่านี้ต้องการความเข้าใจพื้นฐาน ไม่ใช่แค่สั่ง AI

5. ไม่กลัวเมื่อ AI ทำพัง

เมื่อ AI แก้โค้ดแล้วทำให้ feature อื่นพัง คนที่รู้ Git จะ:

git stash    # เก็บ changes ชั่วคราว
git log      # ดู history
git revert   # ย้อนกลับ

คนที่ไม่รู้จะ panic และไม่รู้จะทำอะไร

พื้นฐานที่ต้องรู้ก่อน: Roadmap จริงๆ

นี่คือสิ่งที่ต้องเข้าใจก่อนจะใช้ Agentic Coding ได้อย่างมีประสิทธิภาพ:

🌐 1. เข้าใจว่า Web ทำงานยังไง

ไม่ต้องรู้ลึกมาก แต่ต้องรู้ว่า:

• Client vs Server คืออะไร — browser คือ client, เซิร์ฟเวอร์คือที่รัน backend

• HTTP Request/Response — browser ขอข้อมูล, server ตอบกลับ

• Status codes — 200 OK, 404 Not Found, 500 Server Error หมายความว่าอะไร

• API คืออะไร — endpoint ที่ frontend เรียกเพื่อรับ/ส่งข้อมูล

เมื่อรู้สิ่งนี้ คุณจะสั่ง AI ได้ว่า "สร้าง API endpoint ที่รับ POST request และ return JSON" แทนที่จะบอกแค่ "ทำให้ส่งข้อมูลได้"

📄 2. HTML — โครงสร้างของหน้าเว็บ

<!-- Semantic HTML ที่ AI ควรสร้าง -->
<main>
  <article>
    <header>
      <h1>ชื่อบทความ</h1>
    </header>
    <section>
      <p>เนื้อหา...</p>
    </section>
  </article>
</main>

ต้องรู้:

• Semantic elements — <header>, <main>, <section>, <article>, <nav>

• Forms — <form>, <input>, <button>, type, name, required

• Links & Images — <a href>, <img src alt>

• JSX — HTML ใน React/Next.js ใช้ className แทน class

🎨 3. CSS — ทำให้สวยงาม

ไม่ต้องเป็น CSS master แต่ต้องรู้:

• Box Model — margin, padding, border, width, height

• Flexbox — display: flex, justify-content, align-items

• Grid — display: grid, grid-template-columns

• Responsive — @media (max-width: 768px)

• Tailwind CSS — utility classes ที่ AI ใช้บ่อยมาก เช่น flex, p-4, text-xl

เมื่อรู้ CSS คุณสั่ง AI ได้ว่า "ปรับ padding เป็น 24px และทำให้ responsive บน mobile" แทนที่จะบอกว่า "ทำให้ดูดีขึ้น"

⚡ 4. JavaScript — ทำให้มีชีวิต

นี่คือ ที่สำคัญที่สุด เพราะ Next.js ทั้งหมดเขียนด้วย JavaScript/TypeScript

ต้องรู้:

// Variables

const name = 'สมชาย';
let count = 0;

// Functions
const greet = (name) => สวัสดี ${name};

// Arrays
const courses = ['HTML', 'CSS', 'JS'];
courses.map(c => c.toUpperCase());
courses.filter(c => c.length > 2);

// Objects
const user = { id: 1, name: 'สมชาย', role: 'admin' };

// Async/Await — สำคัญมากใน Next.js
const data = await fetch('/api/courses');
const json = await data.json();

// Destructuring
const { id, name } = user;
const [first, ...rest] = courses;

และ TypeScript ที่ Next.js ใช้:

type User = {
    id: string;
    name: string;
    role: 'admin' | 'student';
};

🔧 5. Tools — VS Code, Node.js, npm

ต้องใช้ได้:

• VS Code — เปิดไฟล์, ใช้ terminal, ติดตั้ง extensions

• Terminal — cd, ls, mkdir, npm install, npm run dev

• npm — package.json คืออะไร, node_modules คืออะไร, npm install ทำอะไร

• Project structure — รู้ว่า src/app/, public/, components/ ใช้เก็บอะไร

🐙 6. Git — Version Control

สำคัญมากเมื่อใช้ AI เพราะ AI อาจทำพังได้ตลอดเวลา:

git init
git add .
git commit -m "เพิ่ม login feature"
git stash          # เก็บ changes ชั่วคราว
git revert HEAD    # ย้อนกลับ commit ล่าสุด

กฎทอง: commit ก่อนสั่ง AI ทำอะไรใหม่เสมอ

🐛 7. อ่าน Error Messages ได้

Error ที่พบบ่อยและความหมาย:

ErrorความหมายTypeError: Cannot read properties of undefinedตัวแปรเป็น undefined แต่พยายามเข้าถึง property404 Not FoundURL ไม่มีอยู่จริง500 Internal Server ErrorServer มี bugModule not foundimport ผิดชื่อหรือยังไม่ได้ install'use client' directiveลืมใส่ 'use client' ใน Client Component

เมื่ออ่าน error ออก คุณถาม AI ได้ตรงจุดว่า:

"เจอ TypeError: Cannot read properties of undefined (reading 'id') ที่บรรทัด 45 ใน

src/app/api/enroll/route.ts ตรง const courseId = course.id ช่วยดูว่า course เป็น undefined เมื่อไหร่"

แทนที่จะบอกแค่ "มี error ช่วยแก้"

Workflow จริงๆ ของ Agentic Coding

เมื่อมีพื้นฐานแล้ว workflow ที่ถูกต้องคือ:

1. วางแผนก่อน
   └─ รู้ว่าต้องการ feature อะไร
   └─ แบ่งเป็นขั้นตอนเล็กๆ

2. Commit ก่อนเริ่ม
   └─ git add . && git commit -m "before: add payment feature"

3. ให้ Context ครบ
   └─ บอก tech stack: "ใช้ Next.js 15, Drizzle ORM, MySQL"
   └─ @mention ไฟล์ที่เกี่ยวข้อง

4. สั่งทีละขั้น
   └─ ไม่สั่ง 10 อย่างพร้อมกัน
   └─ ตรวจสอบก่อนไปขั้นถัดไป

5. Review โค้ดที่ AI สร้าง
   └─ อ่านทุกบรรทัด
   └─ ตรวจ security issues
   └─ ตรวจ edge cases

6. Test ก่อน commit
   └─ รัน npm run dev ทดสอบ manual
   └─ รัน npm test

7. Commit หลังทำสำเร็จ
   └─ git commit -m "feat: add payment with Stripe"

สิ่งที่ AI ทำได้ดี vs ต้องการคนควบคุม

AI ทำได้ดีมาก ✅

• สร้าง boilerplate code (forms, API routes, components)

• แก้ TypeScript type errors

• เขียน unit tests

• Refactor โค้ดซ้ำๆ

• อธิบายโค้ดที่ไม่เข้าใจ

• Convert จาก library หนึ่งไปอีก library

ต้องการคนที่รู้พื้นฐาน ⚠️

• ตัดสินใจด้าน Architecture (DB schema, API design)

• Security decisions (ป้องกัน SQL injection, auth bypass)

• UX/Product decisions ("ฟีเจอร์นี้ควรมีไหม?")

• Debug complex bugs ที่ต้องเข้าใจ business logic

• Performance optimization ที่ต้องการ profiling จริงๆ

ตัวอย่างจริง: ก่อนและหลังมีพื้นฐาน

สถานการณ์: สร้างระบบ enrollment

❌ ไม่มีพื้นฐาน:

User: "สร้างระบบให้ user สมัครเรียนคอร์สได้" 

AI: [สร้างโค้ด 300 บรรทัด] User: "มี error" 
AI: [แก้ error แต่เกิด error ใหม่] 
User: "ยังมี error อีก" [วนซ้ำ 10 รอบ]

✅ มีพื้นฐาน:

User: "สร้าง POST /api/enroll ใน Next.js App Router

- รับ courseId จาก request body
- ตรวจ session ด้วย auth() จาก NextAuth
- ตรวจว่า user ยัง enroll อยู่ไหมใน enrollments table (Drizzle ORM)
- ถ้ายังไม่ enroll → insert ลง DB → return 201
- ถ้า enroll แล้ว → return 409 Conflict
- validate ด้วย Zod ก่อน"

AI: [สร้างโค้ดที่ถูกต้องตั้งแต่ครั้งแรก]
User: [review โค้ด, test, commit]

ความแตกต่างคือ คุณภาพของ prompt ซึ่งมาจากความเข้าใจพื้นฐาน

เริ่มต้นยังไงดี?

ถ้าคุณยังใหม่กับ Web Dev แต่อยากใช้ Agentic Coding ได้เร็วที่สุด นี่คือ learning path ที่แนะนำ:

Phase 1: พื้นฐาน (2-3 สัปดาห์)

1. HTML — โครงสร้าง, semantic elements, forms

2. CSS — Box model, Flexbox, Grid, Responsive

3. JavaScript — Variables, Functions, Arrays, Objects, Async/Await

4. Git — init, add, commit, push, stash, revert

Phase 2: Tools & Environment (1 สัปดาห์)

1. VS Code — shortcuts, extensions, terminal

2. Node.js & npm — install, scripts, package.json

3. อ่าน error messages — ฝึกอ่านและเข้าใจ error ที่พบบ่อย

Phase 3: Next.js Fundamentals (3-4 สัปดาห์)

1. App Router — Folder = URL, page.tsx, layout.tsx

2. Server vs Client Components — เมื่อไหรใช้แต่ละแบบ

3. Data Fetching — async components, loading/error states

4. API Routes — route.ts, CRUD operations

5. Authentication — NextAuth.js, session, protected routes

Phase 4: ลงมือใช้ Agentic Coding

1. สร้าง Next.js project แรก

2. เปิด Windsurf หรือ Cursor

3. เริ่มสร้าง feature จริงๆ ด้วย AI

บทสรุป: AI เป็นเครื่องมือ ไม่ใช่นาย

Agentic Coding เปลี่ยนวิธีที่เราพัฒนาซอฟต์แวร์ไปอย่างสิ้นเชิง แต่มันไม่ได้ทำให้ความรู้พื้นฐานหมดความสำคัญ — มันทำให้ความรู้พื้นฐานสำคัญขึ้นในบริบทที่ต่างออกไป

ก่อนหน้านี้ คุณต้องรู้พื้นฐานเพื่อ เขียนโค้ดเอง

ตอนนี้ คุณต้องรู้พื้นฐานเพื่อ สั่ง AI ได้ถูกต้อง, ตรวจสอบโค้ดที่ AI สร้าง, และแก้ปัญหาเมื่อ AI ทำพัง

คนที่รู้พื้นฐาน + ใช้ Agentic Coding = ทีมที่ทรงพลังที่สุด

คนที่ไม่รู้พื้นฐาน + ใช้ Agentic Coding = ปัญหาที่ใหญ่กว่าเดิม

เริ่มต้นเรียนพื้นฐานวันนี้ แล้วคุณจะพบว่า Agentic Coding ทรงพลังแค่ไหนเมื่ออยู่ในมือของคนที่รู้ว่ากำลังทำอะไรอยู่