วิธีใช้ Gemini เขียน JavaScript

Google Gemini สามารถช่วยเขียน JavaScript ได้ตั้งแต่ Code พื้นฐานสำหรับมือใหม่ การจัดการ DOM, Event, Array, Object, Form และ Fetch API ไปจนถึงการช่วยวิเคราะห์ Async/Await, Promise, Module และโครงสร้าง Web Application ที่ซับซ้อนขึ้น

วิธีใช้ Gemini เขียน JavaScript ให้ได้ผลดีไม่ควรเริ่มด้วยคำสั่งกว้าง ๆ ว่า “เขียน JavaScript ให้หน่อย” แต่ควรบอก สิ่งที่ต้องการให้โปรแกรมทำ Environment ที่ใช้ Input/Output และข้อจำกัดของ Code จากนั้นสร้างและทดสอบทีละ Feature เพื่อให้สามารถตรวจสอบ Error ได้ง่าย

❶ 🟨 Gemini เขียน JavaScript ได้ไหม

ได้ Gemini สามารถช่วยงาน JavaScript ได้หลายประเภท เช่น

• เขียน JavaScript พื้นฐาน
• อธิบาย Syntax
• สร้าง Function
• จัดการ Array และ Object
• Manipulate DOM
• จัดการ Event
• ตรวจ Form
• เรียก API
• ใช้ Fetch API
• เขียน Async/Await
• อธิบาย Promise
• จัดการ Error
• เขียน Module
• Refactor Code
• หา Bug
• สร้าง Test
• ช่วยเขียน Node.js
• ช่วยสร้าง Frontend
• อธิบาย Code ของผู้อื่น

Gemini Apps ยังมี Canvas ซึ่ง Google ระบุว่าสามารถใช้สร้างและแก้ Code หรือ App และเปิด Code View เพื่อแก้ Code ได้โดยตรงในสภาพแวดล้อมที่รองรับ

❷ 🧠 เริ่มจากบอกว่า JavaScript จะทำอะไร

JavaScript ใช้ได้หลาย Environment

ดังนั้นก่อนให้ Gemini เขียน Code ควรบอกก่อนว่าใช้กับอะไร

ตัวอย่าง

Browser JavaScript

ใช้กับหน้าเว็บไซต์

เช่น

• Button
• Form
• DOM
• Menu
• Modal
• Fetch API

Node.js

ใช้ JavaScript ฝั่ง Server หรือ Script

เช่น

• API Server
• File Processing
• Automation
• CLI

Framework

เช่น

• React
• Vue
• Next.js
• Express

หากไม่บอก Environment Gemini อาจเลือกวิธีที่ไม่ตรงกับ Project

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

“เขียน Vanilla JavaScript สำหรับ Browser เพื่อให้ปุ่มกดแล้วเปิด/ปิด Menu โดยไม่ใช้ Library หรือ Framework”

ชัดกว่าคำสั่ง

“เขียน JavaScript เปิด Menu”

❸ 📋 Prompt ที่ดีที่สุดสำหรับให้ Gemini เขียน JavaScript

สามารถใช้ Template นี้ได้

“ช่วยเขียน JavaScript สำหรับงานต่อไปนี้:

เป้าหมาย:
[อธิบายสิ่งที่ต้องการ]

Environment:
Browser / Node.js / Framework

Input:
[ข้อมูลที่รับ]

Expected Output:
[ผลลัพธ์ที่ต้องการ]

ข้อกำหนด:

1. ใช้ JavaScript ที่อ่านง่าย
2. ไม่ใช้ Library เพิ่มถ้าไม่จำเป็น
3. แยก Logic เป็น Function
4. จัดการ Error ที่จำเป็น
5. หลีกเลี่ยง Global Variable โดยไม่จำเป็น
6. อธิบาย Code ส่วนสำคัญ
7. แสดงวิธีทดสอบ
8. หาก Requirement ไม่ชัด ห้ามสร้าง Feature เพิ่มเอง

หลังสร้าง Code ให้ตรวจ Edge Case ก่อนสรุป”

Prompt นี้ใช้ได้กับงาน JavaScript จำนวนมาก

❹ 🌱 วิธีใช้ Gemini เรียน JavaScript ตั้งแต่พื้นฐาน

หากเพิ่งเริ่มเรียน ไม่ควรให้ Gemini สร้าง Application ใหญ่ทันที

ควรเรียนตามลำดับ เช่น

1. Variable
2. Data Type
3. Operator
4. Condition
5. Loop
6. Function
7. Array
8. Object
9. DOM
10. Event
11. Async/Await
12. API

Prompt

“สอน JavaScript สำหรับมือใหม่โดยเริ่มจาก Variable และ Data Type ใช้ตัวอย่างสั้น ๆ และให้แบบฝึกหัดหลังจบแต่ละหัวข้อ”

วิธีนี้เหมาะกว่าการ Copy Code สำเร็จรูปโดยไม่เข้าใจ Syntax

❺ 🔢 วิธีให้ Gemini เขียน Variable และ Data Type

JavaScript ปัจจุบันมักใช้

const
let

มากกว่า var สำหรับ Code ใหม่ทั่วไป

ตัวอย่าง

const siteName = "My Website";
let visitors = 100;
const isOnline = true;

สามารถถาม Gemini

“อธิบายความแตกต่างระหว่าง const, let และ var พร้อมบอกว่า Code ใหม่ควรเลือกใช้แต่ละแบบเมื่อไร”

หลักง่าย ๆ คือ

• ใช้ const เมื่อ Reference ไม่ต้อง Assign ใหม่
• ใช้ let เมื่อค่าต้องถูก Assign ใหม่
• ทำความเข้าใจ var เพราะยังพบใน Code เก่า แต่ควรเข้าใจเรื่อง Scope ก่อนเลือกใช้

❻ 🧮 วิธีให้ Gemini สร้าง Function

ตัวอย่าง Function

function calculateTotal(price, quantity) {
  return price * quantity;
}

const total = calculateTotal(250, 3);
console.log(total);

สามารถสั่ง

“สร้าง Function JavaScript สำหรับคำนวณราคารวมจากราคาและจำนวน พร้อมตรวจว่า Input เป็นตัวเลขที่ถูกต้อง”

เมื่อ Requirement เพิ่มขึ้น ค่อยแก้ Function ทีละส่วน

เช่น

“เพิ่ม Discount เป็นเปอร์เซ็นต์ แต่รักษา Function เดิมให้อ่านง่าย”

❼ ➡️ ใช้ Gemini อธิบาย Arrow Function

JavaScript สมัยใหม่พบ Arrow Function บ่อยมาก

ตัวอย่าง

const add = (a, b) => {
  return a + b;
};

แบบสั้น

const add = (a, b) => a + b;

Prompt

“อธิบาย Arrow Function นี้สำหรับมือใหม่ และเปรียบเทียบกับ Function Declaration โดยเน้น Syntax และความแตกต่างเรื่อง this ที่ควรรู้”

ไม่ควรเข้าใจว่า Arrow Function เป็นเพียง Function ที่เขียนสั้นกว่า เพราะพฤติกรรมของ this แตกต่างจาก Function ปกติในบริบทสำคัญ

❽ 📚 วิธีใช้ Gemini เขียน Array

JavaScript มี Method สำหรับ Array ที่ใช้บ่อย เช่น

• map()
• filter()
• find()
• some()
• every()
• reduce()
• sort()

ตัวอย่าง

const prices = [100, 250, 500, 750];

const expensivePrices = prices.filter((price) => price >= 500);

console.log(expensivePrices);

Prompt

“จาก Array สินค้านี้ ให้ใช้ filter() เลือกสินค้าที่ราคาเกิน 500 บาท และอธิบาย Callback Function ทีละส่วน”

เหมาะสำหรับเรียน Array Method จากงานจริง

❾ 🧩 วิธีใช้ Gemini จัดการ Object

ตัวอย่าง

const user = {
  name: "Somchai",
  age: 30,
  active: true
};

เข้าถึงข้อมูล

console.log(user.name);

สามารถถาม

“สร้าง Object สำหรับสินค้าโดยมี id, name, price, stock และ category จากนั้นเขียน Function ตรวจว่าสินค้ายังมี Stock หรือไม่”

การใช้ตัวอย่างที่มีบริบทธุรกิจจริงช่วยให้เข้าใจ Object ได้ง่ายกว่าการใช้ข้อมูลสมมติที่ไม่มีความหมาย

❿ 🌐 วิธีใช้ Gemini เขียน JavaScript จัดการ DOM

DOM หรือ Document Object Model ทำให้ JavaScript สามารถอ่านและเปลี่ยน Element บนหน้าเว็บได้

HTML

<h2 id="message">ข้อความเดิม</h2>

<button id="changeButton">
  เปลี่ยนข้อความ
</button>

JavaScript

const message = document.querySelector("#message");
const button = document.querySelector("#changeButton");

button.addEventListener("click", () => {
  message.textContent = "ข้อความใหม่";
});

Prompt

“อธิบาย Code นี้ทีละขั้น ตั้งแต่ querySelector() จนถึง addEventListener() และบอกว่าเกิดอะไรขึ้นหลังผู้ใช้กด Button”

นี่เป็นพื้นฐานสำคัญของ JavaScript ฝั่ง Browser

🖱️ วิธีให้ Gemini เขียน Event Listener

Event ที่ใช้บ่อย เช่น

• click
• submit
• input
• change
• keydown
• mouseover

ตัวอย่าง

const button = document.querySelector("#button");

button.addEventListener("click", () => {
  console.log("Button clicked");
});

สามารถสั่ง

“สร้าง Event Listener สำหรับ Form Submit โดยป้องกันการ Reload หน้าและตรวจข้อมูลก่อนประมวลผล”

Gemini ควรอธิบายด้วยว่าทำไมจึงใช้

event.preventDefault();

แทนการใส่ Code โดยไม่อธิบาย

📝 วิธีใช้ Gemini ตรวจ Form ด้วย JavaScript

ตัวอย่าง HTML

<form id="contactForm">
  <input id="name" type="text">
  <input id="email" type="email">
  <button type="submit">ส่ง</button>
</form>

Prompt

“เขียน JavaScript Validation สำหรับ Form นี้ โดยตรวจ:

1. Name ห้ามว่าง
2. Email ห้ามว่าง
3. แสดง Error ใกล้ Field
4. ไม่ใช้ alert()
5. ไม่ส่ง Form ถ้าข้อมูลไม่ผ่าน
6. รองรับ Keyboard
7. อย่าแทนที่ HTML Validation โดยไม่จำเป็น”

ควรใช้ JavaScript Validation เป็นส่วนเสริม ไม่ใช่ Security Validation เพียงจุดเดียว

ถ้ามี Backend ต้อง Validate ฝั่ง Server อีกครั้ง

👁️ วิธีให้ Gemini สร้าง Show/Hide Password

HTML

<input id="password" type="password">
<button id="togglePassword" type="button">
  แสดงรหัสผ่าน
</button>

JavaScript

const password = document.querySelector("#password");
const toggleButton = document.querySelector("#togglePassword");

toggleButton.addEventListener("click", () => {
  const isHidden = password.type === "password";

  password.type = isHidden ? "text" : "password";

  toggleButton.textContent = isHidden
    ? "ซ่อนรหัสผ่าน"
    : "แสดงรหัสผ่าน";
});

Prompt ที่เหมาะคือ

“เขียน JavaScript Show/Hide Password และตรวจ Accessibility ของ Button ด้วย”

นอกจาก Function ทำงานได้แล้วควรพิจารณาสถานะที่ผู้ใช้และ Assistive Technology เข้าใจได้ด้วย

🍔 วิธีใช้ Gemini สร้าง Mobile Menu

Prompt

“เขียน Vanilla JavaScript สำหรับเปิดและปิด Mobile Navigation

Requirement:

• ใช้ Button
• Toggle Class
• รองรับ aria-expanded
• ปิด Menu เมื่อกด Escape
• ไม่ใช้ Library”

วิธีนี้ดีกว่าสั่งเพียง

“สร้าง Hamburger Menu”

เพราะกำหนด Accessibility Behavior มาด้วย

🎭 วิธีสร้าง Modal ด้วย Gemini

Modal ต้องมีรายละเอียดมากกว่าการเปลี่ยน display

ควรคิดถึง

• เปิด
• ปิด
• Escape
• Focus
• Background
• Keyboard

Prompt

“สร้าง Modal ด้วย HTML/CSS/JavaScript โดยเน้น Accessibility และอธิบาย Focus Management ที่จำเป็น”

หาก Gemini สร้าง Modal ที่ดูสวยแต่ Keyboard ใช้งานไม่ได้ ก็ยังไม่ถือว่าเสร็จสมบูรณ์

🌐 วิธีใช้ Gemini เขียน Fetch API

JavaScript สามารถเรียก HTTP API ด้วย fetch()

ตัวอย่าง

async function loadUsers() {
  const response = await fetch("/api/users");

  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status}`);
  }

  const users = await response.json();

  return users;
}

Prompt

“เขียน JavaScript Fetch API สำหรับ GET /api/users โดยใช้ async/await ตรวจ response.ok และจัดการ Error อย่างเหมาะสม”

จุดสำคัญคือ fetch() ไม่ได้ Throw Error เพียงเพราะ Server ตอบ HTTP 404 หรือ 500 ทุกกรณีในลักษณะที่มือใหม่มักคาดไว้ จึงควรตรวจสถานะ Response ด้วย

⏳ วิธีใช้ Gemini เขียน Async/Await

ตัวอย่าง

async function getData() {
  const response = await fetch("/api/data");
  const data = await response.json();

  return data;
}

สามารถสั่ง

“อธิบาย Async/Await Code นี้โดยเปรียบเทียบว่าโปรแกรมหยุดรออะไร และอะไรยังสามารถทำงานต่อได้”

ควรเรียน Concept มากกว่าจำ Syntax เพราะ Async Bug เป็นปัญหาที่พบได้บ่อยใน JavaScript

🤝 Promise คืออะไร ให้ Gemini อธิบายอย่างไร

Prompt

“อธิบาย JavaScript Promise สำหรับคนที่เข้าใจ Function แล้วแต่ยังไม่เข้าใจ Async Programming โดยใช้ตัวอย่าง Request API”

ตัวอย่าง

fetch("/api/users")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

จากนั้นถามต่อ

“แปลง Code นี้เป็น async/await และเปรียบเทียบข้อดีข้อเสียด้าน Readability”

ทำให้เข้าใจสองรูปแบบแทนที่จะ Copy วิธีใดวิธีหนึ่งอย่างเดียว

⚠️ วิธีให้ Gemini เขียน Error Handling

JavaScript ที่เรียก API หรือทำงาน Async ควรจัดการ Error ที่จำเป็น

ตัวอย่าง

async function loadData() {
  try {
    const response = await fetch("/api/data");

    if (!response.ok) {
      throw new Error(`Request failed: ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    console.error("Unable to load data:", error);
    throw error;
  }
}

แต่อย่าใช้ try...catch ครอบทุก Function โดยไม่มีเหตุผล

ถาม Gemini

“Error นี้ควรถูก Handle ใน Function นี้หรือควรถูกส่งต่อให้ Caller จัดการ อธิบายก่อนสร้าง Code”

ช่วยให้ Error Handling เป็นส่วนหนึ่งของ Architecture

🧹 วิธีใช้ Gemini แก้ undefined

หนึ่งใน Error ที่พบมากคือ

Cannot read properties of undefined

ตัวอย่าง

const city = user.address.city;

ถ้า address ไม่มีค่า Code จะเกิด Error

อย่ารีบให้ Gemini เพิ่ม

user?.address?.city

ทันที

ควรถาม

“Trace ก่อนว่าทำไม user.address ถึงไม่มีค่า และ address เป็น Optional ตาม Requirement จริงหรือไม่”

หาก Optional จริง Optional Chaining อาจเหมาะ

แต่ถ้าตาม API Contract ต้องมี address การซ่อน Error อาจทำให้ Root Cause ไม่ถูกแก้

🔍 วิธีใช้ Gemini แก้ JavaScript ไม่ทำงาน

เวลาส่งปัญหาให้ Gemini ควรระบุ

• HTML ที่เกี่ยวข้อง
• JavaScript
• Console Error
• สิ่งที่กด
• Expected Result
• Actual Result

ตัวอย่าง Prompt

“Button นี้ควรเปิด Menu แต่กดแล้วไม่มีอะไรเกิดขึ้น

HTML:
[Code]

JavaScript:
[Code]

Console:
[Error]

ตรวจตามลำดับ:

1. Selector
2. Script Loading
3. DOM Timing
4. Event Listener
5. CSS Class
6. Console Error

หา Root Cause ก่อนแก้ Code”

Prompt นี้ช่วยให้ Debug เป็นระบบ

🧰 Console สำคัญกับ JavaScript อย่างไร

Browser DevTools Console เป็นเครื่องมือสำคัญมาก

สามารถใช้ดู

• Error
• Warning
• Log
• Object
• Network-related messages

ถ้า Gemini สร้าง Code แล้วไม่ทำงาน เปิด Console ก่อน

จากนั้นส่ง Error กลับไป

ตัวอย่าง

Uncaught TypeError: Cannot read properties of null

พร้อม Code ที่เกี่ยวข้อง

ดีกว่าบอกเพียง

“JavaScript ไม่ทำงาน”

🗂️ วิธีใช้ Gemini แยก JavaScript ออกจาก HTML

ตัวอย่างที่ไม่เหมาะกับ Project ที่เริ่มใหญ่ขึ้น

<script>
  // JavaScript จำนวนมาก
</script>

สามารถสั่ง

“ย้าย JavaScript จาก HTML นี้ไปไว้ใน app.js โดยรักษา Behavior เดิมทั้งหมด และบอกว่าต้องเพิ่ม <script> อย่างไร”

ตัวอย่าง

<script src="app.js" defer></script>

defer ช่วยให้ External Script ถูก Execute หลัง HTML ถูก Parse ตามลักษณะการโหลดของ Script แบบ Classic ที่รองรับ

📦 วิธีใช้ JavaScript Modules

เมื่อโปรเจกต์ใหญ่ขึ้น สามารถแยก Code

js/
├── app.js
├── api.js
├── validation.js
└── ui.js

ตัวอย่าง Export

export function calculateTotal(price, quantity) {
  return price * quantity;
}

Import

import { calculateTotal } from "./utils.js";

ใน Browser ต้องโหลด Module ตามรูปแบบที่เหมาะสม เช่น

<script type="module" src="js/app.js"></script>

Prompt

“Refactor JavaScript ไฟล์นี้ให้แยกเป็น Module ตาม Responsibility โดยรักษา Behavior เดิม”

อย่าแยก Module มากเกินจำเป็นใน Project เล็ก

♻️ วิธีใช้ Gemini Refactor JavaScript

ก่อน Refactor ให้ Code ทำงานก่อน

จากนั้นถาม

“Review JavaScript นี้และหา:

• Duplicate Logic
• Function ที่ยาวเกินไป
• Global State
• Naming ที่ไม่ชัด
• Nested Condition
• Side Effect ที่ควรแยก

ยังไม่ต้องแก้ ให้จัดอันดับปัญหาก่อน”

แล้วเลือกแก้ทีละข้อ

วิธีนี้ลดความเสี่ยงจากการ Rewrite ทั้งระบบ

🧪 วิธีให้ Gemini สร้าง Test Case

ก่อนเขียน Test Code สามารถเริ่มจาก Test Case

ตัวอย่าง Function

function divide(a, b) {
  return a / b;
}

ถาม

“สร้าง Test Case สำหรับ Function นี้ โดยครอบคลุม Normal Case, Decimal, Negative Number, Zero และ Invalid Input”

จากนั้นค่อยเลือก Test Framework ที่ Project ใช้อยู่

หาก Project มี Framework อยู่แล้ว ควรให้ Gemini ตรวจ Configuration เดิมก่อนสร้าง Test ใหม่

🔐 วิธีใช้ Gemini ตรวจ Security ของ JavaScript

Frontend JavaScript ไม่ควรถือว่าเป็นพื้นที่ปลอดภัยสำหรับ Secret

❌ อย่าใส่ Secret ใน Browser JavaScript

ตัวอย่าง

const API_KEY = "REAL_SECRET_KEY";

JavaScript ที่ส่งไปยัง Browser สามารถถูกผู้ใช้ตรวจดูได้

หาก Key เป็น Secret จริง ควรเก็บไว้ใน Server-side Environment ที่เหมาะสม ไม่ใช่ซ่อนด้วยการเปลี่ยนชื่อตัวแปรหรือ Minify Code

ระวังข้อมูลจากผู้ใช้

หากนำ Input ไปแทรก HTML โดยตรงอย่างไม่เหมาะสม อาจเพิ่มความเสี่ยงด้าน XSS

ตัวอย่างที่ควรระมัดระวัง

element.innerHTML = userInput;

เมื่อไม่ได้ต้องการ HTML จริง การใช้

element.textContent = userInput;

อาจเหมาะสมกว่าในหลายกรณี

Security ต้องพิจารณาตาม Context ของ Application จริง

🚫 อย่าใช้ eval() เพียงเพราะ Code สั้น

หาก Gemini เสนอ eval() ให้ตรวจเหตุผลอย่างรอบคอบ

eval() สามารถ Execute String เป็น JavaScript และอาจสร้างปัญหา Security และ Maintainability หากใช้กับข้อมูลที่ไม่ควรเชื่อถือ

ถาม Gemini

“Solution นี้ทำได้โดยไม่ใช้ eval() หรือไม่”

ในงานทั่วไปมักมีวิธีที่ชัดเจนและปลอดภัยกว่า

📱 วิธีให้ Gemini ทำ JavaScript สำหรับ Responsive UI

Responsive Layout ส่วนใหญ่ควรใช้ CSS

ไม่ควรเขียน JavaScript ตรวจ Width ทุกอย่างโดยไม่จำเป็น

ตัวอย่างที่ควรให้ CSS จัดการ

• Column
• Spacing
• Font Size
• Grid
• Flex Direction

JavaScript เหมาะเมื่อ Behavior ต้องเปลี่ยนจริง เช่น

• Mobile Navigation
• Interactive Component
• Dynamic State

Prompt

“ตรวจ Feature นี้ก่อนว่าควรแก้ด้วย CSS Media Query หรือ JavaScript และเลือกวิธีที่ง่ายที่สุด”

ช่วยป้องกันการใช้ JavaScript เกินความจำเป็น

🚀 วิธีใช้ Gemini เขียน JavaScript ให้เร็วขึ้นแต่ยังควบคุม Code ได้

ใช้ Workflow

❶ กำหนด Feature

เช่น Search Box

❷ ระบุ Input/Output

รับ Keyword และกรองรายการ

❸ สร้าง Function

ทำ Logic ก่อน

❹ Test Logic

ใช้ข้อมูลตัวอย่าง

❺ เชื่อม DOM

ต่อกับ Input และ Result

❻ Add Error Handling

จัดการกรณีที่จำเป็น

❼ Review

ตรวจ Readability

❽ Test Browser

ตรวจผลจริง

การแยก Business Logic ออกจาก DOM ช่วยให้ Code ทดสอบและดูแลง่ายขึ้น

🧩 ใช้ Gemini Canvas เขียน JavaScript ได้อย่างไร

Gemini Canvas สามารถใช้สร้างและแก้ Code หรือ App ได้ในสภาพแวดล้อมที่รองรับ

สามารถเริ่มด้วย Prompt เช่น

“สร้าง To-do App ด้วย HTML, CSS และ Vanilla JavaScript

Requirement:

• เพิ่มรายการ
• ลบรายการ
• Mark Complete
• Filter
• Responsive
• ไม่ใช้ Framework”

จากนั้นแก้ทีละ Feature

เช่น

“เพิ่ม Validation ห้ามสร้างรายการว่าง”

“แก้ Filter โดยไม่ Rewrite Component อื่น”

“ตรวจ Console Error”

Google ระบุว่าสามารถเปิด Code View ใน Canvas เพื่อแก้ Code โดยตรง และสามารถใช้ Console สำหรับตรวจ Error และ Log ของตัวอย่าง App ได้

💻 Gemini API กับ JavaScript

นอกจากให้ Gemini ช่วยเขียน JavaScript แล้ว นักพัฒนายังสามารถเรียก Gemini API จาก JavaScript ได้ด้วย

Google ปัจจุบันมี JavaScript SDK อย่างเป็นทางการชื่อ

@google/genai

ติดตั้งผ่าน npm ได้ด้วย

npm install @google/genai

อย่างไรก็ตาม การเรียก Gemini API เป็นหัวข้อที่มีรายละเอียดเรื่อง

• API Key
• Model
• Request
• Response
• Streaming
• Function Calling
• Error Handling
• Rate Limit

จึงควรแยกออกจากการเรียน JavaScript ทั่วไป

ในชุดบทความนี้จะมีหัวข้อเฉพาะสำหรับการใช้ Gemini API กับ JavaScript ต่อไป

🔑 อย่า Hard-code Gemini API Key ใน Frontend

ถ้ากำลังพัฒนา Application ด้วย Gemini API อย่าใส่ Secret API Key ลงใน JavaScript ที่ Browser ดาวน์โหลดได้

ตัวอย่างที่ไม่ควรใช้กับ Secret จริง

const apiKey = "REAL_API_KEY";

ควรออกแบบให้ Secret ถูกจัดการใน Environment ที่เหมาะสม และตรวจแนวทาง Security ของ API ที่กำลังใช้งาน

รายละเอียดนี้สำคัญมากเมื่อเปลี่ยนจาก Prototype ไปเป็น Production Application

📝 วิธีใช้ Gemini เพิ่ม Comment ใน JavaScript

ไม่ควรสั่ง

“Comment ทุกบรรทัด”

เพราะจะทำให้ Code รก

ควรสั่ง

“เพิ่ม Comment เฉพาะ Logic ที่ไม่ชัด และให้ Comment อธิบายเหตุผลมากกว่าการแปล Syntax”

ตัวอย่างไม่จำเป็น

// Increase index by one
index++;

ตัวอย่างที่มีประโยชน์กว่า

// Retry once because the upstream request can fail transiently.

Comment ที่ดีควรเพิ่ม Context ที่ Code อย่างเดียวบอกไม่ได้

📚 วิธีให้ Gemini อธิบาย JavaScript ของคนอื่น

ถ้ามี Code ที่ไม่เข้าใจ ใช้ Prompt

“อ่าน JavaScript นี้ก่อน แล้วอธิบายตามลำดับ:

1. จุดประสงค์
2. Input
3. Output
4. Function
5. Event
6. State
7. Async Operation
8. DOM ที่เกี่ยวข้อง
9. Error Handling
10. จุดที่ควรระวัง

อธิบายภาษาไทยสำหรับคนที่มีพื้นฐาน JavaScript ระดับต้น”

วิธีนี้ดีกว่าให้อธิบายทุกบรรทัดแบบไม่มีภาพรวม

📂 โปรเจกต์ JavaScript หลายไฟล์ทำอย่างไร

Gemini Apps รองรับ Import Code Folder ในสภาพแวดล้อมที่รองรับ

สามารถนำ Project เข้ามาแล้วถาม

“ตรวจ Project นี้และ Trace JavaScript ตั้งแต่ผู้ใช้กด Submit จน API Request ถูกส่ง”

หรือ

“ค้นหาไฟล์ทั้งหมดที่เกี่ยวข้องกับ Shopping Cart”

เหมาะกับ Codebase ที่มี Module จำนวนมาก

หากโปรเจกต์อยู่บน GitHub ก็สามารถใช้ GitHub Repository เป็น Context ตามฟีเจอร์ Import Code ของ Gemini ได้

⚠️ Gemini เขียน JavaScript ถูกต้อง 100% หรือไม่

ไม่ควรถือว่าถูกต้อง 100%

Gemini อาจสร้าง Code ที่มี

• Syntax Error
• Logic Error
• API ที่ไม่ตรง Version
• Null/Undefined Bug
• Async Bug
• Memory Leak
• Event Listener ซ้ำ
• Security Problem
• Edge Case ตกหล่น
• Browser Compatibility Issue

ดังนั้นทุกครั้งควร

1. อ่าน Code
2. เปิด Browser
3. ตรวจ Console
4. Test Input
5. Test Edge Case
6. ตรวจ Network เมื่อมี API
7. ตรวจ Security
8. ทดสอบหลาย Browser ตามความจำเป็น

🚫 10 ข้อผิดพลาดเมื่อใช้ Gemini เขียน JavaScript

❶ ไม่บอก Environment

Browser กับ Node.js ไม่เหมือนกัน

❷ ไม่กำหนด Requirement

AI ต้องเดา Feature

❸ ให้สร้าง Code ยาวเกินไปครั้งเดียว

Debug ยาก

❹ Copy แล้วใช้ทันที

ยังไม่ได้ Test

❺ ใช้ Optional Chaining ซ่อน Bug

โดยไม่หา Root Cause

❻ Catch Error ทุกที่

ทำให้ Debug ยาก

❼ ใช้ innerHTML โดยไม่คิดเรื่องข้อมูล

อาจสร้างความเสี่ยงเมื่อข้อมูลไม่ควรเชื่อถือ

❽ ใส่ Secret ใน Frontend

ผู้ใช้สามารถตรวจ Code ได้

❾ ใช้ Library เกินความจำเป็น

Project ซับซ้อนขึ้น

❿ ไม่เปิด Console

เสียข้อมูล Debug ที่สำคัญที่สุดส่วนหนึ่ง

🪜 Workflow ใช้ Gemini เขียน JavaScript

แนวทางที่แนะนำคือ

❶ กำหนด Environment

Browser, Node.js หรือ Framework

❷ เขียน Requirement

บอก Feature ชัดเจน

❸ กำหนด Input/Output

รู้ว่า Code รับและคืนอะไร

❹ สร้าง Function

เริ่มจาก Logic เล็กที่สุด

❺ Test Logic

ตรวจ Normal และ Edge Case

❻ เชื่อม UI หรือ API

เพิ่ม Integration หลัง Logic ผ่าน

❼ ตรวจ Console

แก้ Error ตามหลักฐาน

❽ Refactor

ลด Duplication

❾ Security Review

ตรวจ Input และ Secret

❿ Browser Test

ทดสอบ Environment จริง

สำหรับงานพัฒนา Web ของ comsiam วิธีนี้ช่วยให้ JavaScript ที่ AI สร้างยังอยู่ภายใต้การควบคุมของ Developer ไม่กลายเป็น Code จำนวนมากที่ไม่มีใครรู้ว่าแต่ละส่วนทำอะไร

💡 10 Prompt ใช้ Gemini เขียน JavaScript

❶ สร้าง Function

“เขียน JavaScript Function สำหรับ [งาน] โดยระบุ Input, Output และ Edge Case”

❷ อธิบาย Code

“อธิบาย JavaScript นี้ตาม Data Flow โดยไม่อธิบาย Syntax ที่ไม่จำเป็น”

❸ DOM

“เขียน Vanilla JavaScript สำหรับเปลี่ยน DOM เมื่อผู้ใช้กด Button”

❹ Event

“สร้าง Event Listener และอธิบาย Event Object ที่ใช้”

❺ Form

“สร้าง Form Validation โดยแสดง Error ใกล้ Field และไม่ใช้ alert()”

❻ Fetch API

“เรียก API ด้วย async/await ตรวจ HTTP Status และจัดการ Error”

❼ Debug

“วิเคราะห์ Console Error และหา Root Cause ก่อนสร้าง Patch”

❽ Refactor

“ลด Global State และ Duplicate Logic โดยรักษา Behavior เดิม”

❾ Security

“Review JavaScript นี้ด้าน XSS, Secret Handling และ Input Handling”

❿ Review

“ตรวจ Code นี้ด้าน Readability, Error Handling, Async Behavior และ Edge Case ก่อนใช้งานจริง”

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

Gemini เขียน JavaScript ได้ไหม

ได้ Gemini สามารถช่วยสร้าง อธิบาย Debug และปรับปรุง JavaScript ได้ ตั้งแต่ Code พื้นฐานไปจนถึง Application ที่มีหลาย Module

Gemini เขียน Vanilla JavaScript ได้ไหม

ได้ เพียงระบุใน Prompt ว่าใช้ Vanilla JavaScript และห้ามใช้ Framework หรือ Library ภายนอก

Gemini ช่วยเขียน Fetch API ได้ไหม

ได้ สามารถช่วยสร้าง Code สำหรับ HTTP Request รวมถึง async/await, Response Handling และ Error Handling ได้ แต่ต้องตรวจ API Contract จริงก่อนใช้งาน

Gemini แก้ JavaScript Error ได้ไหม

ได้ ควรส่ง Console Error, Code, Expected Behavior และ Actual Behavior เพื่อให้ Gemini วิเคราะห์ Root Cause ก่อนสร้าง Patch

Gemini สร้าง JavaScript App ได้ไหม

ได้ Gemini Canvas สามารถใช้สร้างและแก้ Code หรือ App ในสภาพแวดล้อมที่รองรับ รวมถึงเปิด Code และ Console เพื่อช่วยตรวจ Error และ Log

JavaScript ที่ Gemini เขียนใช้ได้ทันทีไหม

ไม่ควรนำไปใช้ทันทีโดยไม่ตรวจ ต้อง Run และ Test ใน Browser หรือ Runtime จริง รวมถึงตรวจ Error, Edge Case และ Security ก่อนใช้งาน Production

🎯 สรุป

วิธีใช้ Gemini เขียน JavaScript ให้ได้ผลดีที่สุดคือเริ่มจาก Environment → Requirement → Input/Output → Function → Test → DOM/API → Debug → Refactor → Security → Browser Test

หากเป็นมือใหม่ควรให้ Gemini อธิบาย Code และ Concept ไปพร้อมกัน โดยเฉพาะ Function, Array, Object, DOM, Event, Promise และ Async/Await แทนการ Copy Code สำเร็จรูปอย่างเดียว

หากเกิด Error ควรเปิด Browser Console แล้วนำ Error Message พร้อม Code กลับมาให้ Gemini วิเคราะห์ Root Cause ก่อนแก้ ไม่ควรซ่อนปัญหาด้วย Optional Chaining, Default Value หรือ try/catch โดยไม่เข้าใจต้นเหตุ

สำหรับโปรเจกต์ใหญ่สามารถใช้ Code Folder หรือ GitHub Repository เป็น Context ได้ ส่วน Canvas สามารถช่วยสร้าง แก้ และตรวจ Code ในรูปแบบ Interactive ได้

แนวทางของ comsiam คือใช้ Gemini เป็น Pair Programmer ที่ช่วยสร้าง Draft และอธิบาย JavaScript ส่วน Developer ยังคงต้อง Run, Review และ Test Code จริงก่อนนำไปใช้กับเว็บไซต์หรือระบบ Production