ให้ Claude เขียน JavaScript ได้อย่างไร? พร้อมตัวอย่างคำสั่งสำหรับมือใหม่

Claude ช่วยเขียน JavaScript จากคำอธิบายทั่วไปได้ เช่น คำนวณราคา ตรวจสอบข้อมูล หรือเพิ่มการโต้ตอบบนหน้าเว็บ ผู้เริ่มต้นสามารถบอกโจทย์เป็นภาษาไทย แล้วขอให้ Claude แสดงโค้ดพร้อมคำอธิบายและตัวอย่างผลลัพธ์ ผู้ใช้ ComSiam สามารถเริ่มจากฟังก์ชันสั้น ๆ ก่อน แล้วค่อยเพิ่มเงื่อนไขตามงานจริง

ก่อนขอให้เขียนโค้ด ควรระบุว่าจะนำ JavaScript ไปใช้ที่ใด เพราะโค้ดสำหรับหน้าเว็บอาจต้องทำงานร่วมกับ HTML ส่วน Node.js ใช้ JavaScript ในสภาพแวดล้อมฝั่งเซิร์ฟเวอร์หรือเครื่องมือบรรทัดคำสั่ง

ระบุโจทย์ให้ชัดก่อนสั่งเขียน JavaScript

① บอกเป้าหมาย — โปรแกรมหรือฟังก์ชันควรทำอะไร
② ระบุสภาพแวดล้อม — ใช้ในเบราว์เซอร์หรือ Node.js
③ บอกข้อมูลนำเข้า — เช่น ตัวเลข ข้อความ หรือข้อมูลจากฟอร์ม
④ ระบุผลลัพธ์ที่คาดหวัง — แสดงบนหน้าเว็บ คืนค่าจากฟังก์ชัน หรือพิมพ์ใน Console
⑤ กำหนดข้อจำกัด — เช่น ไม่ใช้ไลบรารีภายนอก หรือให้เขียน JavaScript อย่างเดียว
⑥ ขอคำอธิบายและการทดสอบ — ระบุระดับความรู้และกรณีตัวอย่างที่ต้องการ

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

ตัวอย่าง Prompt สำหรับมือใหม่

ช่วยเขียน JavaScript สำหรับคำนวณราคาหลังหักส่วนลด

เงื่อนไข:
- สร้างฟังก์ชันชื่อ calculateDiscountedPrice
- รับราคาเต็มและเปอร์เซ็นต์ส่วนลด
- คืนราคาหลังหักส่วนลด
- ใช้ JavaScript ปกติ ไม่ใช้ไลบรารี
- แสดงตัวอย่างทดสอบเมื่อราคาเป็น 1000 บาท และส่วนลด 10%
- อธิบายโค้ดทีละส่วนด้วยภาษาไทย
- ระบุว่าควรทดสอบกรณีใดเพิ่มเติม

Prompt นี้กำหนดชื่อฟังก์ชัน ข้อมูลนำเข้า ผลลัพธ์ และตัวอย่างไว้ครบ หากต้องการนำไปใช้ในหน้าเว็บ ให้เพิ่มว่าต้องการให้แสดงผลในตำแหน่งใด หรือส่งโครง HTML ที่มีอยู่ให้ Claude ดูด้วย

ตัวอย่างโค้ด JavaScript คำนวณส่วนลด

function calculateDiscountedPrice(price, discountPercent) {
  return price - (price * discountPercent / 100);
}

const finalPrice = calculateDiscountedPrice(1000, 10);
console.log(finalPrice);

ผลลัพธ์ใน Console คือ 900 เพราะส่วนลด 10% ของราคา 1,000 เท่ากับ 100 เมื่อนำไปหักจากราคาเต็มจึงเหลือ 900

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

ขั้นตอนนำโค้ดไปทดลอง

① ขอให้ Claude แสดงโค้ดพร้อมตัวอย่างข้อมูลทดสอบ
② นำโค้ดไปทดลองในสภาพแวดล้อมที่ตรงกับงาน เช่น Console ของเบราว์เซอร์หรือ Node.js
③ เปรียบเทียบผลลัพธ์กับค่าที่คำนวณไว้
④ ทดลองกรณีอื่น เช่น ส่วนลด 0% หรือราคาที่เป็นทศนิยม
⑤ หากต้องการใช้ในหน้าเว็บ ให้ระบุองค์ประกอบ HTML ที่จะเชื่อมกับโค้ด
⑥ ตรวจว่าโค้ดไม่เปลี่ยนส่วนอื่นของเว็บไซต์โดยไม่ตั้งใจ

วิธีขอให้ Claude เพิ่มการทำงานทีละส่วน

หลังจากโค้ดพื้นฐานทำงานแล้ว ให้สั่งเพิ่มทีละความสามารถ เช่น:

• “เพิ่มการตรวจว่าราคาเป็นตัวเลขบวก”
• “ถ้าข้อมูลไม่ถูกต้อง ให้คืนข้อความแจ้งเตือน”
• “แสดงราคาสุดท้ายในส่วนที่มี id="result"”
• “เพิ่มตัวอย่างทดสอบสำหรับส่วนลด 0% และ 100%”
• “อธิบายว่าต้องเพิ่มโค้ดส่วนใดใน HTML”

การแบ่งงานเป็นคำขอเล็ก ๆ ช่วยให้ตรวจได้ว่าการเปลี่ยนแปลงแต่ละครั้งทำอะไร และลดโอกาสได้โค้ดที่ซับซ้อนเกินจำเป็น

คำถามที่พบบ่อย

ต้องรู้ JavaScript ก่อนจึงจะใช้ Claude ได้ไหม

ไม่จำเป็น สามารถเริ่มจากการอธิบายงานด้วยภาษาทั่วไป แล้วขอให้ Claude อธิบายโค้ดที่สร้างขึ้นด้วยภาษาง่าย ๆ แต่ควรทดลองรันและตรวจผลลัพธ์ด้วยตนเอง

JavaScript ในเบราว์เซอร์กับ Node.js เหมือนกันไหม

ทั้งคู่ใช้ภาษา JavaScript แต่สภาพแวดล้อมและสิ่งที่เรียกใช้ได้ต่างกัน ควรระบุว่าจะใช้ในเบราว์เซอร์หรือ Node.js เพื่อให้ Claude สร้างตัวอย่างตรงกับงาน

ควรนำโค้ดที่ Claude เขียนไปใช้ทันทีหรือไม่

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

ถ้าไม่รู้ว่าต้องใช้ JavaScript แบบใด ควรถามอย่างไร

อธิบายว่าต้องการให้หน้าเว็บหรือโปรแกรมทำอะไร แล้วขอให้ Claude ระบุว่าต้องใช้ JavaScript ฝั่งเบราว์เซอร์หรือ Node.js พร้อมเหตุผลก่อนเขียนโค้ด

สรุป

การให้ Claude เขียน JavaScript ได้ตรงโจทย์ ควรระบุเป้าหมาย สภาพแวดล้อม ข้อมูลนำเข้า ผลลัพธ์ และข้อจำกัดให้ชัด จากนั้นทดลองโค้ดด้วยกรณีตัวอย่างและเพิ่มความสามารถทีละส่วน ผู้อ่าน ComSiam สามารถเริ่มจาก Prompt และฟังก์ชันคำนวณส่วนลดในบทความนี้ แล้วปรับให้เหมาะกับงานของตน