JSON to Dart Converter: แปลง JSON เป็น Dart Model Class อัตโนมัติ พร้อม Null Safety
JSON to Dart Converter ช่วยแปลง JSON เป็น Dart model class พร้อม null safety, nested class และ fromJson/toJson ครบทุกอย่าง ทำงานได้ทันทีในเบราว์เซอร์โดยไม่ต้องติดตั้งอะไรเลย
Table of Contents
JSON to Dart Converter: แปลง JSON เป็น Dart Model Class อัตโนมัติ พร้อม Null Safety
นักพัฒนา Flutter และ Dart แทบทุกคนต้องเจอกับงานเดียวกันนี้เสมอ — backend ส่งข้อมูลมาเป็น JSON แล้วเราต้องนั่งเขียน model class ด้วยมือทีละ field, เขียน fromJson และ toJson ให้ครบ, ทวนสอบชนิดข้อมูลว่าตรงกับ API จริงหรือเปล่า งานแบบนี้ไม่ยากแต่บริโภคเวลาและเป็นแหล่งรวมของ bug โดยเฉพาะเมื่อโครงสร้าง JSON มี nested object ซ้อนกันหลายชั้น
JSON to Dart Converter คือทางออกที่ตัดปัญหาเหล่านี้ทิ้งไปได้เลย แค่วาง JSON ตัวอย่างลงไป เครื่องมือจะ generate Dart model class ให้พร้อม null safety, nested class, การ mapping สำหรับ List และ annotation ตามสไตล์ที่คุณเลือก ทั้งหมดทำงานในเบราว์เซอร์ของคุณโดยตรง ไม่มีข้อมูลถูกส่งไปเซิร์ฟเวอร์ไหนเลย
ในบทความนี้เราจะพาไปดูว่าเครื่องมือนี้ทำอะไรได้บ้าง ใช้งานอย่างไร โค้ดที่ได้มามีส่วนไหนน่าสนใจ พร้อมตัวอย่างการใช้งานจริงและ best practices ที่ควรรู้ก่อนนำโค้ดไปใช้ในโปรเจกต์ Flutter ของคุณ
ทำไมต้องใช้ JSON to Dart Converter?
- ประหยัดเวลาได้มาก — งานที่ต้องนั่งเขียนเอง 30 นาทีกลายเป็น 5 วินาที เพราะแค่วาง JSON แล้วกด copy ก็ได้ model class ที่พร้อมใช้งานทันที
- ลด human error — การเขียน fromJson ด้วยมือคือจุดที่พลาดกันมากที่สุด ไม่ว่าจะเป็นชื่อ key ผิด, ลืม cast ชนิดข้อมูล หรือลืมสร้าง class สำหรับ object ที่ซ้อนอยู่ เครื่องมือจะจัดการให้ถูกต้องตามโครงสร้าง JSON ต้นฉบับทุกครั้ง
- รองรับ Null Safety อย่างถูกต้อง — เปิดใช้ null safety แล้ว field ที่เป็น null ได้จะถูก generate เป็น Type? โดยอัตโนมัติ ช่วยให้โค้ดปลอดภัยจาก null reference exception ตั้งแต่วันแรก
- ทำงานในเบราว์เซอร์ 100% — ไม่ต้องติดตั้ง package หรือ extension อะไรเลย JSON ของคุณถูกประมวลผลด้วย JavaScript ในเครื่องคุณเอง จึงใช้กับข้อมูลที่อ่อนไหวได้อย่างอุ่นใจ
- จัดการโครงสร้างซับซ้อนได้ — nested object หลายชั้น หรือ List ที่บรรจุ object ข้างใน จะถูกแตกออกเป็น class แยกพร้อม mapping ครบทุกชั้น ไม่ต้องไล่เขียนเอง
- เลือกสไตล์โค้ดได้ตามต้องการ — อยากได้ fromJson/toJson แบบ manual หรือจะใช้ @JsonSerializable ตามแนวทางของ json_serializable package ก็สลับได้ในคลิกเดียว
Key Features
| Feature | คำอธิบาย |
|---|---|
| Null Safety | field ที่เป็น null ได้ถูก generate เป็น Type? พร้อมกำหนดค่าเริ่มต้นให้ปลอดภัย |
| Nested Class Generation | object ที่ซ้อนอยู่ใน JSON จะถูกสร้างเป็น class แยก เช่น Address พร้อม fromJson ของตัวเอง |
| List Mapping | List ที่บรรจุ object จะกลายเป็น List<Address> พร้อม map ผ่าน fromJson อัตโนมัติ |
| Annotation Styles | เลือกระหว่าง manual fromJson/toJson หรือ @JsonSerializable ตาม json_serializable package |
| Reserved Keyword Escaping | ชื่อ field ที่ตรงกับ Dart keyword เช่น class หรือ default จะถูกแก้ให้ compile ผ่าน |
| camelCase Naming | ชื่อ field แบบ snake_case ใน JSON จะถูกแปลงเป็น camelCase ตาม Dart conventions |
| Copy to Clipboard | กดปุ่มเดียวก็ได้โค้ดทั้งหมดไปวางใน editor ทันที ไม่ต้องลากเลือกเอง |
จุดที่น่าสนใจเป็นพิเศษคือความยืดหยุ่นของ output — คุณเลือกได้ว่าจะให้ class มี private fields พร้อม getters หรือจะใช้ public final fields แบบสั้นกระชับ ขึ้นอยู่กับสไตล์โค้ดของทีม และ constructor ที่ได้มาจะกำหนด parameter ที่จำเป็นเป็น required ให้อยู่แล้ว ทำให้สร้าง instance ได้โดยไม่พลาด field สำคัญ
อีกจุดที่มักถูกมองข้ามคือการจัดการ Dart reserved keywords ถ้า JSON มี field ชื่อ class หรือ default เครื่องมือจะแก้ชื่อให้อัตโนมัติเพื่อให้โค้ด compile ผ่าน ซึ่งเป็นเรื่องที่เจ็บมือมากถ้าต้องเจอเองตอนเขียนด้วยมือ
วิธีใช้งาน
- เปิดหน้าเครื่องมือ — ไปที่ JSON to Dart Converter บนเบราว์เซอร์ของคุณ ไม่ต้องสมัครสมาชิกหรือล็อกอินใด ๆ
- วาง JSON ตัวอย่าง — นำ JSON จาก API response, JSON fixture หรือไฟล์ config ของคุณมาวางในช่อง input ฝั่งซ้าย เครื่องมือจะตรวจว่า JSON มีรูปแบบถูกต้อง (valid) ก่อนเสมอ
- ตั้งค่า options ตามต้องการ — เลือกว่าจะเปิด null safety (ทำให้ field ที่เป็น null ได้กลายเป็น Type?) และเลือก annotation style ระหว่าง manual fromJson/toJson หรือ @JsonSerializable
- ดูโค้ด Dart ที่ถูก generate — ผลลัพธ์จะปรากฏทางฝั่งขวาทันที พร้อมทั้ง class หลัก, nested class ที่เกี่ยวข้อง และ method สำหรับแปลงข้อมูลครบทุกตัว
- กด Copy to Clipboard แล้วนำไปใช้ — วางโค้ดลงในไฟล์ .dart ของโปรเจกต์ ตั้งชื่อไฟล์ให้สื่อความหมาย เช่น user.dart แล้วเริ่มใช้งานได้เลย
ทำความเข้าใจโค้ด Dart ที่ Generate ได้
เพื่อให้เห็นภาพชัดขึ้น ลองดู JSON ตัวอย่างนี้:
{
"id": 1,
"user_name": "Somchai",
"email": null,
"address": {
"city": "Bangkok",
"zip_code": "10110"
},
"roles": [{ "name": "admin", "level": 3 }]
}
เมื่อแปลงแล้ว เครื่องมือจะสร้าง class หลักพร้อม nested class Address และ Role ให้อัตโนมัติ โดยคุณสมบัติที่น่าสนใจมีดังนี้
Null safety syntax — สังเกตว่า email เป็น null ใน JSON เมื่อเปิด null safety จะได้ field เป็น String? email; แทนที่จะเป็น String email; ธรรมดา เครื่องหมาย ? บอก Dart compiler ว่าค่านี้อาจเป็น null ได้ และ compiler จะบังคับให้คุณจัดการกับกรณีนั้นทุกครั้งที่เรียกใช้ ซึ่งช่วยป้องกัน null exception ก่อนที่จะรันจริง
camelCase conversion — field user_name ใน JSON ถูกแปลงเป็น userName ตาม Dart naming conventions แต่ใน fromJson จะยังอ่านจาก key "user_name" ตัวเดิมให้ถูกต้อง ไม่มีปัญหา API เปลี่ยนชื่อ field
fromJson/toJson contract — โค้ดแบบ manual จะมี factory constructor รับ Map<String, dynamic> และ method toJson() คืนค่าเป็น Map<String, dynamic> เช่นนี้:
factory User.fromJson(Map<String, dynamic> json) => User(
id: json['id'] as int,
userName: json['user_name'] as String,
email: json['email'] as String?,
address: Address.fromJson(json['address'] as Map<String, dynamic>),
roles: (json['roles'] as List<dynamic>)
.map((e) => Role.fromJson(e as Map<String, dynamic>))
.toList(),
);
การที่ nested object ถูก map แบบ recursive และ List ถูกแปลงด้วย .map().toList() คือส่วนที่เขียนเองแล้วพลาดง่ายที่สุด แต่เครื่องมือจัดการให้ครบทุกชั้นเสมอ
@JsonSerializable vs manual — ถ้าเลือกสไตล์ @JsonSerializable โค้ดที่ได้จะใช้ annotation จาก json_serializable package พร้อม part 'user.g.dart' และคุณต้องรัน build_runner ในโปรเจกต์เพื่อสร้างโค้ดส่วนแปลงข้อมูลให้ วิธีนี้เหมาะกับโปรเจกต์ใหญ่ที่มี model เยอะเพราะโค้ดสั้นกว่าและดูแลง่ายกว่า ส่วนแบบ manual เหมาะกับกรณีที่ต้องการโค้ด self-contained ไม่ต้องพึ่ง build step หรืออยากปรับแต่ง logic การแปลงด้วยตัวเอง
ทั้งสองสไตล์ยังคงสร้าง constructor ที่มี required กำหนดชัดเจน ทำให้คุณไม่สามารถสร้าง instance โดยลืม field สำคัญได้เลย ซึ่งเป็นด่านป้องกันความผิดพลาดอีกชั้นที่ได้มาฟรี ๆ
กรณีใช้งานจริง
สร้าง Model สำหรับ Flutter REST API
สถานการณ์คลาสสิกที่สุด — คุณกำลังต่อกับ backend ผ่าน REST API เช่น endpoint ดึงข้อมูลสินค้า, ผู้ใช้ หรือ order แทนที่จะเปิด swagger แล้วนั่งไล่เขียน model ทีละตัว ให้ยิง API จริงครั้งหนึ่ง copy JSON response มาวางใน converter แล้วได้ model ครบชุดไปใช้กับ http หรือ dio ได้ทันที ทีมที่ทำงานกับ API หลายสิบ endpoint จะรู้สึกเหมือนได้เวลาคืนมาเป็นวัน ๆ
ทำงานกับ Firebase และ JSON Fixtures
เวลาเขียน unit test หรือ widget test ใน Flutter เรามักต้องมี JSON fixture เป็นข้อมูลจำลองสำหรับ test case ต่าง ๆ นอกจากนี้ Firestore หรือ Remote Config ก็เก็บข้อมูลเป็นโครงสร้างคล้าย JSON เมื่อเอา fixture เหล่านี้มาแปลงเป็น Dart class คุณจะได้ type ที่ชัดเจนสำหรับใช้ใน test ทำให้ test อ่านง่ายขึ้นและ editor ช่วย autocomplete ได้ด้วย ไม่ต้องเดา key จาก Map ดิบ ๆ
อ่านไฟล์ Config และ Schema
แอปที่โหลด config จากไฟล์ JSON เช่น feature flags, การตั้งค่า environment หรือ schema ของ form ที่ backend กำหนด สามารถแปลง JSON นั้นเป็น strongly-typed class ได้ในพริบตา คุณได้ประโยชน์เต็ม ๆ จาก type system ของ Dart — compile error ทันทีถ้า config เปลี่ยนรูปแบบ แทนที่จะพังตอน runtime ตอนที่ผู้ใช้กำลังใช้งานอยู่
Rapid Prototyping
ช่วงเริ่มโปรเจกต์หรือทำ proof of concept ความเร็วคือทุกอย่าง วาง JSON ที่ mock ไว้ แปลงเป็น model แล้วต่อ UI ได้เลยโดยยังไม่ต้องรอ backend พร้อม พอ backend เสร็จจริงก็ยิง response จริงมาแปลงใหม่อีกรอบเพื่ออัปเดต model ให้ตรงกับของจริง วงจร iterate แบบนี้ทำให้ทีมเดินหน้าได้เร็วขึ้นมาก
Best Practices
- ใช้ JSON จาก API จริงเสมอ — JSON ที่เขียนเองมักลืม field ที่ backend ส่งมาจริงหรือเผลอใส่ค่า null ที่จริง ๆ แล้ว backend ไม่เคยส่ง null มา ทำให้ model ที่ได้คลาดเคลื่อนจากความเป็นจริง
- เปิด null safety ตั้งแต่ต้น — ถ้าคุณเขียนด้วย Dart 2.12 ขึ้นไป (ซึ่งแทบทุกโปรเจกต์ Flutter ปัจจุบันเป็นแบบนี้) ควรเปิด null safety เพื่อให้ได้โค้ดที่ทันสมัยและปลอดภัยกว่าเสมอ
- แยกไฟล์ตาม domain — อย่าโยนโค้ดทั้งกองใส่ไฟล์เดียว จัดเก็บ model แต่ละตัวในไฟล์ของตัวเองหรือแยกตาม feature เพื่อให้ codebase โตแล้วยังดูแลรักษาง่าย
- ทบทวนชื่อ class ที่ได้มา — เครื่องมือตั้งชื่อจาก key ใน JSON ซึ่งบางครั้งไม่สื่อความหมายในบริบทของแอป อย่าลังเลที่จะเปลี่ยนชื่อให้เหมาะสมก่อนนำไปใช้
- เลือก annotation style ให้ตรงกับทีม — ถ้าโปรเจกต์มีอยู่แล้วและใช้ json_serializable อยู่ ให้เลือกสไตล์ @JsonSerializable เพื่อความสม่ำเสมอ ถ้าเป็นโปรเจกต์เล็กหรือไม่อยากเพิ่ม build step ก็เลือกแบบ manual ได้เต็มที่
- เก็บ JSON sample ไว้ใน repo — เซฟ JSON ต้นฉบับไว้ในโฟลเดอร์ fixtures หรือ docs เพื่อว่า model จะต้อง regenerate ในอนาคต ทีมก็ยังมีต้นทางที่แท้จริงให้อ้างอิงเสมอ
เริ่มแปลง JSON เป็น Dart ได้เลยวันนี้
ถ้าคุณเขียน Flutter หรือ Dart อยู่ ไม่ว่าจะเป็นแอปใหญ่แค่ไหนหรือ side project เล็ก ๆ การพิมพ์ model class ด้วยมือไม่ใช่เวลาที่ควรถูกใช้ไปกับงานนั้นอีกต่อไป เปิด JSON to Dart Converter วาง JSON ของคุณ แล้วรับ Dart model class พร้อม null safety และ serialization ครบสรรพด้วยปุ่มเดียว — ฟรี ไม่ต้องสมัคร ไม่ต้องติดตั้ง และทำงานได้ทุกที่ที่มีเบราว์เซอร์
ลองใช้กับ JSON ของโปรเจกต์ที่คุณกำลังทำอยู่ แล้วดูว่าเวลาที่ประหยัดได้จะพาคุณไปเขียน feature ที่มีค่ามากกว่าได้แค่ไหน
Related Tools You Might Like:
Happy coding ทุกคน!
คำถามที่พบบ่อย
ถ: เครื่องมือนี้เก็บข้อมูล JSON ของผมไว้ไหม?
ตอบ: ไม่เก็บครับ การแปลงทั้งหมดทำงานในเบราว์เซอร์ของคุณด้วย JavaScript ฝั่ง client เท่านั้น ไม่มีการส่ง JSON ไปยังเซิร์ฟเวอร์ใด ๆ จึงใช้กับข้อมูลที่เป็นความลับหรือข้อมูลจาก API ภายในบริษัทได้อย่างปลอดภัย
ถ: ถ้า JSON มี object ซ้อนกันหลายชั้นจะจัดการได้ไหม?
ตอบ: ได้ครับ เครื่องมือจะสร้าง class แยกให้ทุก nested object พร้อม fromJson และ toJson ของแต่ละตัว รวมถึง List ที่บรรจุ object ข้างในก็จะถูกแปลงเป็น List<Class> พร้อม mapping อัตโนมัติเช่นกัน
ถ: ควรเลือกแบบ manual fromJson หรือ @JsonSerializable ดี?
ตอบ: ถ้าโปรเจกต์ใหญ่และมี model หลายตัว แนะนำ @JsonSerializable เพราะโค้ดสั้นและดูแลง่าย แต่ต้องติดตั้ง json_serializable package และรัน build_runner ส่วนแบบ manual เหมาะกับโปรเจกต์เล็กหรือกรณีที่ต้องการโค้ดที่ไม่พึ่ง build step เพราะได้ทุกอย่างในไฟล์เดียวจบ
ถ: ชื่อ field ที่ตรงกับ Dart keyword อย่าง class หรือ default จะเป็นอย่างไร?
ตอบ: เครื่องมือจะทำ reserved keyword escaping ให้อัตโนมัติ โดยปรับชื่อ field ให้ไม่ชนกับ Dart keyword เพื่อให้โค้ด compile ผ่านเสมอ พร้อมยังอ่านค่าจาก key เดิมใน JSON ได้ถูกต้องใน fromJson
ถ: ใช้กับ Dart/Flutter เวอร์ชันเก่าที่ยังไม่มี null safety ได้ไหม?
ตอบ: ได้ครับ เพียงปิดตัวเลือก null safety ในหน้าเครื่องมือ โค้ดที่ได้จะเป็นแบบ non-nullable ธรรมดาที่ใช้ได้กับ Dart เวอร์ชันเก่ากว่า 2.12 ส่วนโปรเจกต์ปัจจุบันแนะนำให้เปิด null safety ไว้เสมอ