Agent Dev Thai Academyprinciples · patterns · architecture

แก้ให้แล้วนะ แต่มันเปลี่ยนแค่ที่เดียว

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

บอก AI ว่าเปลี่ยนสีปุ่มเป็นสีเขียวหน่อย

มันเปลี่ยนให้ เปิดดู เขียวแล้ว เรียบร้อย

อีกสองวันเปิดหน้าอื่น ปุ่มยังส้มอยู่ อีกหน้าก็ยังส้ม รวมแล้วมีห้าที่ที่ยังไม่เปลี่ยน

กลับไปบอก AI อีกรอบว่าอันนี้ยังไม่เปลี่ยน มันก็แก้ให้อีกที่นึง


ไม่ใช่ AI ทำงานพลาด มันแก้ให้ครบทุกที่ที่มันเห็นแล้ว

ปัญหาคือสีนั้นถูกพิมพ์ทิ้งไว้หกที่ แล้วมันเห็นแค่ที่เดียว

ย้อนกลับไปตอนสร้าง แต่ละหน้าถูกสั่งสร้างคนละรอบ รอบนั้นบอกว่าทำปุ่มสั่งซื้อ รอบต่อมาบอกว่าทำหน้าโปรไฟล์ รอบต่อมาทำหน้าตั้งค่า

ทุกรอบมันเขียน #f97316 ลงไปใหม่ตรงนั้น เพราะรอบนั้นมันไม่รู้ว่าเมื่อวานมันเคยเขียนเลขนี้ไว้ที่ไหนแล้วบ้าง

ของก็เลยงอกออกมาหกก้อน หน้าตาเหมือนกัน ไม่รู้จักกัน


หลักการมีข้อเดียว

ความจริงหนึ่งเรื่อง เก็บไว้ที่เดียว ที่เหลือชี้มาที่นั่น

สีแบรนด์คือความจริงหนึ่งเรื่อง ค่าส่งคือหนึ่งเรื่อง เบอร์ติดต่อคือหนึ่งเรื่อง วิธีคิดยอดรวมคือหนึ่งเรื่อง

แต่ละเรื่องควรมีบ้านหลังเดียว

// theme.ts
export const BRAND = '#16a34a'

แล้วทุกหน้าเรียก BRAND ไม่มีใครพิมพ์เลขสีซ้ำอีก

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

วงการเรียกของแบบนี้ว่า single source of truth ความจริงมีแหล่งเดียว


ทีนี้ประเด็นที่ทำให้เรื่องนี้หนักกว่าเมื่อก่อน

ของที่ถูกก๊อปไว้หลายที่มันเคยเป็นปัญหาอยู่แล้ว แต่สมัยที่คนพิมพ์เองทุกบรรทัด คนพิมพ์พอจำได้ว่าตัวเองเคยวางอะไรไว้ตรงไหน

ตอนนี้คนที่วางของ กับคนที่ต้องไปตามหาของ เป็นคนละคนกัน

AI เห็นเฉพาะสิ่งที่อยู่ตรงหน้ามันในรอบนั้น มันไม่ได้จำงานเมื่อวานได้ทั้งโปรเจกต์

เครื่องมือที่สร้างของซ้ำให้เรา คือเครื่องมือเดียวกับที่หาของซ้ำไม่เจอ

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


ของจริงที่เอาไปทำได้ มีสามอย่าง

หนึ่ง ก่อนสั่งสร้างของใหม่ ให้มันไปดูก่อนว่ามีของเดิมอยู่แล้วมั้ย

ก่อนเขียนใหม่ ค้นในโปรเจกต์ก่อนว่ามีฟังก์ชันหรือค่าคงที่
ที่ทำเรื่องนี้อยู่แล้วหรือยัง
ถ้ามี ให้ใช้ของเดิม แล้วบอกผมว่าอยู่ไฟล์ไหน
ถ้าไม่มี ค่อยเขียนใหม่ แล้วบอกว่าทำไมของเดิมใช้ไม่ได้

สองบรรทัดสุดท้ายสำคัญกว่าที่คิด มันบังคับให้ต้องตอบว่าหาแล้วเจออะไร ไม่ใช่เขียนใหม่แล้วเงียบ

สอง เวลาเจอว่าของซ้ำแล้ว อย่าไล่แก้ทีละที่ ให้รวมก่อน

ค่านี้ถูกเขียนซ้ำอยู่หลายไฟล์ ช่วยหาให้ครบว่าอยู่ที่ไหนบ้าง
ย้ายไปไว้ที่เดียว แล้วให้ที่เหลือเรียกจากตรงนั้น

ไล่แก้ทีละที่คือแก้อาการ รวมให้เหลือที่เดียวคือแก้เหตุ

สาม เขียนกติกาไว้ใน CLAUDE.md ให้มันอ่านเองทุกรอบ

## กติกา
- ห้ามพิมพ์ค่าคงที่ซ้ำ (สี ราคา ค่าส่ง url) ให้อยู่ไฟล์ config ที่เดียว
- ก่อนเขียนฟังก์ชันใหม่ ค้นก่อนว่ามีของเดิมที่ทำเรื่องเดียวกันมั้ย

ไม่ต้องคอยพิมพ์เตือนเองทุกครั้ง เขียนไว้ทีเดียว มันอ่านเองทุกรอบ


ข้อควรระวังข้อเดียว

พออ่านจบแล้วจะเริ่มอยากรวมทุกอย่าง เห็นโค้ดคล้ายกันสองที่แล้วรีบจับมัดเป็นก้อนเดียว

อย่าเพิ่ง

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

เกณฑ์ที่ใช้ได้จริง ถามว่าถ้าของนี้ต้องเปลี่ยน มันต้องเปลี่ยนพร้อมกันทุกที่มั้ย

ถ้าใช่ นั่นคือเรื่องเดียวกัน รวมได้ สีแบรนด์เปลี่ยนทีต้องเปลี่ยนทั้งแอป รวมเลย

ถ้าไม่ใช่ ปล่อยมันแยกกันไว้แบบนั้นแหละ


สรุปสั้นๆ

ที่ต้องกลับไปบอก AI ซ้ำๆ ว่า "ตรงนี้ยังไม่เปลี่ยนนะ" ไม่ใช่เพราะสั่งไม่เก่ง

เป็นเพราะความจริงเรื่องเดียวถูกเก็บไว้หลายที่ แล้วไม่มีใครในทีมนี้จำได้ว่ามันมีกี่ที่ รวมทั้งตัวเราเองด้วย

เก็บไว้ที่เดียว แล้วเรื่องนี้จะหายไปเลย

เปิดโปรเจกต์ตอนนี้ ค้นหาสีแบรนด์ตัวเองดู ถ้าเจอมากกว่าหนึ่งที่ ก็เริ่มจากตรงนั้น

ไม่ใช่ว่าไม่เก่ง แค่ไม่มีใครเคยบอกว่าของแบบนี้มันมีชื่อ