ในยุค AI การรีแฟกเตอร์ไม่ใช่งานหินอีกต่อไป

 (blog.lemonbase.team)
29 คะแนน โดย whatsup 2026-01-22 | 6 ความคิดเห็น | แชร์ทาง WhatsApp

บทความว่าด้วยการจัดระเบียบเลกาซีของ Design System ด้วย AI + Codemod
หวังว่าจะเป็นประโยชน์สำหรับผู้ที่กำลังจะทำรีแฟกเตอร์ครั้งใหญ่

ที่มาของปัญหา

  • ใน Design System ภายในบริษัท มีหลายคอมโพเนนต์ เช่น Typography ที่ถูก Deprecated
  • หลังจากนำ Design System ใหม่ + Tailwind มาใช้ ทำให้ภายในโค้ดเบสเดียวมีแพตเทิร์น Deprecated ปะปนอยู่
  • ถ้าจะค่อย ๆ จัดการตามกฎ Boy Scout
    • จำนวนไฟล์มีมากเกินไป
    • และเพราะหลักการแยก PR เปลี่ยนฟีเจอร์กับ PR รีแฟกเตอร์ออกจากกัน จึงถูกเลื่อนลำดับความสำคัญออกไปเรื่อย ๆ

วิธีการเข้าถึง: Codemod + AI

  • ใช้ AST-based Codemod (jscodeshift) แทนการแทนที่สตริง
  • ใช้ AI เพื่อ:
    • สำรวจแพตเทิร์นการใช้งาน Deprecated Typography ทั้งหมด
    • จัดระเบียบกฎ Before/After
    • ช่วยร่างสคริปต์แปลง jscodeshift และเขียนโค้ดทดสอบ
  • ตัวอย่างการแปลงหลัก:
    • <Body1 bold>텍스트</Body1>
      → <span className="typography-body1-bold">텍스트</span>
    • <HeadLine5 as="h1" color={SemanticColor.Text.Primary}>
      → <h1 className="typography-headLine5 text-primary">

ผลลัพธ์

  • แปลงแพตเทิร์น Deprecated ที่เกี่ยวกับ Typography แบบอัตโนมัติได้ ประมาณ 95%
  • แพตเทิร์นแบบผสมลดลงอย่างมาก ทำให้ความสม่ำเสมอของโค้ดและประสบการณ์ onboarding ดีขึ้น
  • ได้ทางเลือกสำหรับ “การเปลี่ยน Design System ครั้งถัดไปก็ทำด้วย Codemod”

สิ่งที่ได้เรียนรู้

  • งานรีแฟกเตอร์จำนวนมากกว่าที่คิดสามารถทำอัตโนมัติได้ด้วย AST + Codemod
  • ในการแปลงอัตโนมัติขนาดใหญ่ การ “รีวิวกฎการแปลง + เทสต์” มีประสิทธิภาพและปลอดภัยกว่าการ “รีวิว diff ของไฟล์”
  • ควรแยกบทบาทให้ AI เป็นตัวช่วย วิเคราะห์แพตเทิร์นและร่างเบื้องต้น ส่วน Codemod รับหน้าที่ แปลงจำนวนมากอย่างสม่ำเสมอ

บทความที่เกี่ยวข้อง

6 ความคิดเห็น

 
hebu570 2026-01-23

เป็นบทความที่น่าสนใจมาก..!
ตอนนี้โค้ดฝั่งฟรอนต์เอนด์ของโปรเจกต์ปัจจุบันเละเทะมาก คงต้องลองใช้ดูแล้ว!
 
whatsup 2026-01-23

ยินดีที่ได้รู้จักครับ/ค่ะ ขอบคุณที่อ่านกันอย่างสนุกนะครับ/คะ!
ถ้าลองนำไปใช้แล้วมีข้อสงสัยอะไร ฝากไว้ได้ทุกเมื่อเลยครับ/ค่ะ!!
 
shincad 2026-01-23

เป็นบทความที่มีประโยชน์มากครับ ตอนกำหนดกฎ AST ผมก็เคยพยายามจะทำให้เป็นอัตโนมัติทั้งหมดตั้งแต่แรก แล้วก็ลำบากอยู่พักหนึ่ง... พอทำไปเรื่อย ๆ ก็พบว่าคำตอบคือ ตัดเคสที่กำกวมออก แล้วกำหนดเฉพาะสิ่งที่ชัดเจนแน่นอนเท่านั้น
 
whatsup 2026-01-23

จริงครับ T_T ผมเองก็เคยลองทำแบบเดียวกันว่า "มาทำให้ทุกอย่างเป็นอัตโนมัติกันเถอะ!" แล้วก็เจอความลำบากเหมือนกัน
อย่างที่เล่าไว้เลยว่า ถ้าตัดเคสที่กำกวมออกไปก่อน แล้วจัดการแพตเทิร์นที่ชัดเจนก่อน จะมีประสิทธิภาพกว่าครับ 555

  • แพตเทิร์นที่ชัดเจนใช้ Codemod
  • แพตเทิร์นที่กำกวมจัดการด้วยมือ

การแยกเป็นสองแทร็กแบบนี้ พอคิดรวมถึงความเสี่ยงด้านการพัฒนา/รีวิว/บั๊กแล้ว มันมีประสิทธิภาพกว่าจริง ๆ ครับ!
 
aliveornot 2026-01-23

โอ้ แบบนี้ดีเลยนะ
 
whatsup 2026-01-23

ขอบคุณมากครับที่มองกันในแง่ดี!!