5 เทคนิคฝึกเขียนโค้ดให้ "อ่านง่าย" ตั้งแต่เริ่มต้น

บทนำ

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

แล้วทำไมการเขียนโค้ดให้ “อ่านง่าย” ถึงสำคัญ?

• เพราะเวลาเกิดบั๊ก จะได้แก้ไขได้ง่าย

• เพราะเพื่อนร่วมทีมจะได้เข้าใจโค้ดเรา

• และเพราะตัวเราเองในอนาคต...ก็จะกลับมาอ่านโค้ดตัวเองแล้วเข้าใจง่ายขึ้น

บทความนี้จะพาคุณไปรู้จัก 5 เทคนิคง่าย ๆ ที่ช่วยให้คุณเขียนโค้ดได้ “อ่านง่าย” ขึ้นตั้งแต่วันแรกที่เริ่มต้น และวางรากฐานไปสู่การเป็นนักพัฒนาระดับมืออาชีพในอนาคต

เทคนิคที่ 1: ตั้งชื่อตัวแปรและฟังก์ชันให้สื่อความหมาย

💡 “ชื่อดี = ไม่ต้องอธิบายเพิ่ม”

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

ตัวอย่างไม่ดี:

let x = 100;
function calc(a, b) {
  return a + b;
}

ตัวอย่างที่ดี:

let maxScore = 100;
function calculateTotalScore(mathScore, scienceScore) {
  return mathScore + scienceScore;
}

คำแนะนำ:

• ใช้ภาษาอังกฤษแบบง่าย ๆ ที่อ่านแล้วเข้าใจทันที

• หลีกเลี่ยงตัวย่อที่ไม่เป็นสากล

• ถ้าเป็น Boolean ให้ขึ้นต้นด้วย is, has, can เช่น isLoggedIn, hasPermission

เทคนิคที่ 2: เขียนให้มีโครงสร้างและเว้นวรรคให้ดี

💡 “โค้ดที่มีโครงสร้างดี เหมือนย่อหน้าในบทความที่อ่านสบายตา”

การจัดรูปแบบโค้ดให้ดูเรียบร้อย และแบ่งโครงสร้างชัดเจนช่วยให้สมองของผู้อ่านตีความโค้ดได้ง่ายขึ้น

สิ่งที่ควรทำ:

• เว้นบรรทัดระหว่างกลุ่มคำสั่งที่ต่างกัน

• จัด Indent (ระยะห่างบรรทัด) ให้ถูกต้อง

• ไม่ยัดทุกอย่างไว้ในบรรทัดเดียว

ตัวอย่างไม่ดี:

let maxScore = 100;
function calculateTotalScore(mathScore, scienceScore) {
  return mathScore + scienceScore;
}

ตัวอย่างที่ดี:

if (user) {
  if (user.age > 18) {
    allowAccess();
  }
} else {
  denyAccess();
}

ใช้ Format อัตโนมัติ
แนะนำให้ใช้ Extension เช่น Prettier หรือ ESLint เพื่อช่วยจัดรูปแบบโค้ดให้เรียบร้อยอัตโนมัติ

เทคนิคที่ 3: แยกโค้ดเป็นฟังก์ชันย่อย

💡 “ฟังก์ชันควรทำแค่เรื่องเดียว และชื่อของมันควรบอกได้ว่า ‘ทำอะไร’”

เมื่อคุณเขียนโค้ดยาว ๆ อย่าเก็บทุกอย่างไว้ในฟังก์ชันเดียว ลองแยกเป็นฟังก์ชันเล็ก ๆ ที่รับผิดชอบเฉพาะอย่างแทน

ประโยชน์:

• อ่านง่ายขึ้น

• ทดสอบง่ายขึ้น

• แก้ไขเฉพาะส่วนได้ง่าย

ตัวอย่าง:

function createUserAccount(userData) {
  validateInput(userData);
  saveUserToDatabase(userData);
  sendWelcomeEmail(userData.email);
}

โค้ดข้างบนนี้ชัดเจนว่า createUserAccount() ทำอะไรบ้าง โดยไม่ต้องเปิดดูรายละเอียดแต่ละขั้น

เทคนิคที่ 4: Comment ให้น้อย แต่มีคุณภาพ

💡 “Comment ที่ดีคือคำอธิบาย ‘เหตุผล’ ไม่ใช่คำอธิบาย ‘ว่ามันทำอะไร’”

มือใหม่หลายคนมักเขียน Comment ทุกบรรทัด เช่น // บวกเลข, // ลบ ซึ่งไม่จำเป็นเลย ถ้าโค้ดตั้งชื่อดีอยู่แล้ว

เขียน Comment เท่าที่จำเป็น และเน้นอธิบายสิ่งที่โค้ด ‘ไม่เห็นด้วยตา’ เช่น:

• ข้อจำกัดของระบบ

• เหตุผลที่ใช้วิธีนี้

• สิ่งที่ควรระวัง

ตัวอย่าง:

// Using setTimeout instead of await because the API doesn’t support async
setTimeout(() => {
  fetchData();
}, 1000);

เทคนิคที่ 5: ทบทวนโค้ดตัวเองหลังเขียนเสร็จ

💡 “อ่านโค้ดตัวเอง...เหมือนเราเป็นคนอื่นที่ไม่เคยเห็นโค้ดนี้มาก่อน”

หลังจากเขียนเสร็จ ลองปิดหน้าจอสัก 5 นาที แล้วกลับมาอ่านโค้ดอีกครั้ง
ถ้าอ่านแล้วไม่เข้าใจหรือมีจุดที่งง นั่นแปลว่าคุณสามารถปรับปรุงให้ดีขึ้นได้อีก

Checklist ที่ควรถามตัวเอง:

• ถ้าเพื่อนร่วมทีมมาอ่าน จะเข้าใจทันทีไหม?

• ถ้ากลับมาอ่านอีก 1 เดือน เราจะเข้าใจเองได้ไหม?

• มีจุดไหนซับซ้อนเกินไปหรือเปล่า?

Tip:
ลองให้เพื่อนอ่าน แล้วให้เขาอธิบายว่าโค้ดเราทำอะไร ถ้าเขาเข้าใจผิด = โค้ดเราต้องปรับ

สรุป

การเขียนโค้ดให้ “อ่านง่าย” เป็นทักษะที่ต้องฝึกต่อเนื่อง แต่ถ้าคุณเริ่มตั้งแต่วันแรก โค้ดของคุณจะมีคุณภาพ มีระเบียบ และพร้อมสำหรับการทำงานร่วมกับทีมในโลกจริง

ลองนำทั้ง 5 เทคนิคนี้ไปใช้ แล้วคุณจะเริ่มรู้สึกว่า “การเขียนโค้ดที่ดี” ไม่ใช่เรื่องยากเลย