[Python] แนะนำโมดูล json! มาทำความเข้าใจรูปแบบข้อมูลที่จำเป็นสำหรับการสร้างเว็บกันเถอะ
หากต้องการเรียกใช้ Python ผ่าน Command Prompt หรือ PowerShell บนคอมพิวเตอร์ของคุณ คุณจำเป็นต้องดาวน์โหลดและติดตั้ง Python ก่อน
หากคุณยังไม่ได้ติดตั้ง กรุณาดูบทความ การติดตั้ง Python และการตั้งค่าสภาพแวดล้อมการพัฒนา เพื่อทำการติดตั้ง Python
สวัสดีครับ! ผมจะมาแชร์ความรู้ที่ได้เรียนรู้จากประสบการณ์การสร้างเว็บไซต์ด้วยตัวเองกับ AI ทั้งๆ ที่เมื่อไม่กี่เดือนก่อนยังไม่รู้จักการเขียนโปรแกรมเลยแม้แต่น้อย
เมื่อได้ยินคำว่า "JSON" (เจสัน) ทุกคนนึกถึงอะไรกันบ้างครับ? อาจจะรู้สึกว่า "ดูเหมือนจะยากนะ..." หรือ "เป็นสิ่งที่ผู้เชี่ยวชาญด้านเว็บใช้กันใช่ไหม?" ตอนแรกผมก็คิดแบบนั้นเหมือนกันครับ แต่ในการสร้างเว็บไซต์ โดยเฉพาะการสร้าง "เว็บไซต์แบบไดนามิก" ในปัจจุบัน JSON เป็นสิ่งที่หลีกเลี่ยงไม่ได้ และเมื่อได้ทำความรู้จักกันแล้ว มันจะกลายเป็นคู่หูที่พึ่งพาได้มากที่สุดเลยล่ะครับ
ในบทความนี้ ผมจะอธิบายวิธีการจัดการข้อมูล JSON ได้อย่างอิสระโดยใช้โมดูล json ของ Python พร้อมทั้งบอกเล่าถึงจุดที่ผมเคยติดปัญหาด้วยภาษาที่เข้าใจง่ายที่สุดในโลก เป้าหมายคือเมื่อทุกคนอ่านบทความนี้จบ จะสามารถลงมือทำและรู้สึกได้ว่า "อ๋อ! JSON ใช้งานแบบนี้นี่เอง!" ผมได้เตรียมโค้ดที่ "ใช้งานได้จริง" และสามารถคัดลอกไปใช้ได้เลยไว้มากมาย มาสัมผัสประสบการณ์ "มันทำงานได้!" ไปด้วยกันเถอะครับ
JSON คืออะไร? แล้วทำไมถึงจำเป็นสำหรับการสร้างเว็บ?
เรามาวางนิยามที่ยากๆ ไว้ก่อนนะครับ พูดง่ายๆ ก็คือ JSON เป็น "ภาษากลางสำหรับการแลกเปลี่ยนข้อมูลระหว่างโปรแกรมต่างๆ" ครับ
ตัวอย่างเช่น สมมติว่าน้อง Python ที่ทำงานอยู่เบื้องหลัง (เซิร์ฟเวอร์) ของเว็บไซต์คุณ มีข้อมูลโปรไฟล์ของผู้ใช้ (ชื่อ, อายุ, งานอดิเรก ฯลฯ) อยู่ และคุณต้องการส่งข้อมูลนั้นไปให้น้อง JavaScript ที่ทำงานอยู่เบื้องหน้า (เบราว์เซอร์) เพื่อแสดงผลเป็นการ์ดโปรไฟล์สวยๆ
- น้อง Python จะแปลข้อมูลที่มีอยู่เป็น "JSON" ซึ่งเป็นภาษาสากลแล้วส่งไป
- น้อง JavaScript จะรับ JSON นั้นมา แล้วแปลกลับเป็นภาษาที่ตัวเองเข้าใจ
- ข้อมูลถูกส่งต่อสำเร็จ และการ์ดโปรไฟล์ก็แสดงขึ้นมา!
ด้วยวิธีนี้ JSON จึงทำหน้าที่เป็น "สะพานเชื่อม" ที่ขาดไม่ได้ในการแลกเปลี่ยนข้อมูลระหว่างฝั่งเซิร์ฟเวอร์และฝั่งฟรอนต์เอนด์ เวลาที่เราดึงข้อมูลพยากรณ์อากาศหรือข่าวจาก Web API (กลไกสำหรับดึงข้อมูลจากบริการภายนอก) ก็ใช้รูปแบบ JSON นี้เกือบ 100% เลยครับ สะดวกใช่ไหมล่ะ!
4 เวทมนตร์พื้นฐานสำหรับจัดการ JSON ใน Python
ใน Python มีโมดูลมาตรฐานชื่อว่า json ที่เตรียมไว้ให้เราใช้จัดการกับ JSON ที่สะดวกสบายนี้อยู่แล้ว ไม่จำเป็นต้อง pip install แค่เขียนว่า import json ก็สามารถใช้งานได้ทันที
โมดูลนี้มีฟังก์ชันมากมาย แต่สำหรับมือใหม่ แค่จำฟังก์ชัน (คาถา) 4 อย่างต่อไปนี้ก็เพียงพอแล้วครับ!
json.dumps(): แปลงข้อมูล Python (เช่น dictionary) เป็น "สตริง" ในรูปแบบ JSONjson.loads(): แปลง "สตริง" ในรูปแบบ JSON เป็นข้อมูล Pythonjson.dump(): เขียนข้อมูล Python ลงใน "ไฟล์" JSONjson.load(): อ่าน "ไฟล์" JSON แล้วแปลงเป็นข้อมูล Python
คิดว่า "เอ๊ะ ชื่อคล้ายๆ กันจนสับสนไปหมด!" ใช่ไหมครับ? ไม่เป็นไรครับ ผมก็เคยเป็น (ฮ่าๆ) มีวิธีจำง่ายๆ อยู่ครับ
ให้จำไว้ว่า ตัวที่ลงท้ายด้วย s (dumps, loads) คือตัวที่ใช้กับ String (สตริง) ส่วนตัวที่ไม่มี s จะใช้กับไฟล์โดยตรง แค่นี้ก็ไม่สับสนแล้วใช่ไหมครับ!
1. การแปลงข้อมูล Python เป็นสตริง JSON: json.dumps()
ก่อนอื่น เรามาลองแปลงข้อมูล dictionary (dict) ของ Python ให้เป็นสตริงในรูปแบบ JSON กันก่อน นี่คือพื้นฐานที่สุดเลยครับ
# python-code
import json
# ข้อมูล dictionary ของ Python
user_data = {
"name": "CopiCode สมชาย",
"age": 30,
"is_creator": True,
"skills": ["HTML", "CSS", "JavaScript", "Python"]
}
# แปลง dictionary ของ Python เป็นสตริงรูปแบบ JSON
json_string = json.dumps(user_data)
print(json_string)
# มาลองตรวจสอบชนิดข้อมูลกันด้วย
print(type(json_string))
ผลลัพธ์การทำงาน:
{"name": "CopiCode \u0e2a\u0e21\u0e0a\u0e32\u0e22", "age": 30, "is_creator": true, "skills": ["HTML", "CSS", "JavaScript", "Python"]}
<class 'str'>
[จุดที่มักจะติดขัด №1] ภาษาไทยกลายเป็น `\uXXXX`!
ถ้าคุณดูผลลัพธ์ข้างบนแล้วสังเกตเห็นว่า "เอ๊ะ? ทำไมชื่อกลายเป็นสัญลักษณ์แปลกๆ!" แสดงว่าคุณเป็นคนช่างสังเกตมากครับ นี่คืออาการ "ตัวอักษรเพี้ยน" ชนิดหนึ่ง ซึ่งผมก็เคยติดปัญหานี้อยู่นานมากตอนแรก
สาเหตุคือ โดยปกติแล้ว json.dumps() จะทำการ escape (แปลงให้อยู่ในรูปแบบที่ปลอดภัย) ตัวอักษรที่ไม่ใช่ ASCII (พูดง่ายๆ คือตัวอักษรอื่นๆ ที่ไม่ใช่อักขระภาษาอังกฤษและตัวเลข) วิธีแก้คือการเพิ่มคาถา ensure_ascii=False เข้าไปครับ
# python-code
import json
user_data = {
"name": "CopiCode สมชาย",
"age": 30,
"is_creator": True,
"skills": ["HTML", "CSS", "JavaScript", "Python"]
}
# เพิ่ม ensure_ascii=False เพื่อให้แสดงผลภาษาไทยได้โดยตรง
json_string_jp = json.dumps(user_data, ensure_ascii=False)
print(json_string_jp)
ผลลัพธ์การทำงาน:
{"name": "CopiCode สมชาย", "age": 30, "is_creator": true, "skills": ["HTML", "CSS", "JavaScript", "Python"]}
เยี่ยมไปเลย! ภาษาไทยแสดงผลอย่างถูกต้องแล้วใช่ไหมครับ ถ้าจะสร้างบริการเว็บสำหรับคนไทย ensure_ascii=False นี่แทบจะเป็นคู่หูที่ขาดไม่ได้เลยครับ
[จุดที่มักจะติดขัด №2] JSON แสดงผลในบรรทัดเดียว อ่านยาก!
อีกหนึ่งปัญหาครับ พอข้อมูลเยอะขึ้น ทุกอย่างจะถูกแสดงผลต่อกันเป็นบรรทัดเดียว ทำให้ทายากมาก ปัญหานี้ก็สามารถแก้ไขได้ด้วยออปชันเช่นกันครับ โดยการระบุ indent (การย่อหน้า) จะช่วยเพิ่มการขึ้นบรรทัดใหม่และการย่อหน้าให้อ่านง่ายขึ้นสำหรับมนุษย์ ตัวเลขคือจำนวนช่องว่าง และส่วนใหญ่มักจะใช้ 4 ครับ
# python-code
import json
user_data = {
"name": "CopiCode สมชาย",
"age": 30,
"is_creator": True,
"skills": ["HTML", "CSS", "JavaScript", "Python"]
}
# ระบุทั้ง ensure_ascii=False และ indent=4
json_string_pretty = json.dumps(user_data, ensure_ascii=False, indent=4)
print(json_string_pretty)
ผลลัพธ์การทำงาน:
{
"name": "CopiCode สมชาย",
"age": 30,
"is_creator": true,
"skills": [
"HTML",
"CSS",
"JavaScript",
"Python"
]
}
เป็นยังไงบ้างครับ? ดูอ่านง่ายขึ้นเยอะเลยใช่ไหมครับ ออปชันสองตัวนี้มักจะถูกใช้คู่กันบ่อยๆ ดังนั้นจำไว้ให้ดีนะครับ ใน เอกสารทางการของ Python ก็มีคำอธิบายเกี่ยวกับออปชันเหล่านี้อย่างละเอียดเช่นกัน
2. การแปลงสตริง JSON กลับเป็นข้อมูล Python: json.loads()
ต่อไปเป็นการทำงานแบบย้อนกลับครับ เราจะมาแปลง "สตริง" ในรูปแบบ JSON ที่ได้รับมาจาก Web API หรือที่อื่นๆ กลับมาเป็นข้อมูล dictionary ที่ Python สามารถจัดการได้กันครับ เราจะใช้ loads ที่มีตัว `s` ครับ
# python-code
import json
# สมมติว่าได้รับสตริงแบบนี้มาจาก Web API
received_json_string = """
{
"id": "001",
"productName": "คีย์บอร์ดสุดเจ๋ง",
"price": 15800,
"inStock": true
}
"""
# แปลงสตริง JSON เป็น dictionary ของ Python
product_data = json.loads(received_json_string)
print(product_data)
# มาลองตรวจสอบชนิดข้อมูลกันด้วย
print(type(product_data))
# เมื่อกลายเป็น dictionary แล้ว เราสามารถดึงค่าออกมาโดยใช้ key ได้
print(f"ชื่อสินค้า: {product_data['productName']}")
print(f"ราคา: {product_data['price']} เยน")
ผลลัพธ์การทำงาน:
{'id': '001', 'productName': 'คีย์บอร์ดสุดเจ๋ง', 'price': 15800, 'inStock': True}
<class 'dict'>
ชื่อสินค้า: คีย์บอร์ดสุดเจ๋ง
ราคา: 15800 เยน
JSON ที่เคยเป็นสตริง ได้ถูกแปลงเป็น dictionary (dict) ของ Python อย่างสวยงาม! แค่นี้เราก็สามารถจัดการข้อมูลหรือดึงเฉพาะข้อมูลที่ต้องการออกมาได้อย่างอิสระแล้วครับ
3. การเขียนข้อมูล Python ลงในไฟล์ JSON: json.dump()
ต่อไปเป็นการจัดการไฟล์ครับ เราจะใช้ dump() ที่ไม่มีตัว `s` ซึ่งมักจะใช้เมื่อต้องการบันทึกข้อมูลการตั้งค่าเว็บไซต์หรือผลลัพธ์จากการประมวลผลลงในไฟล์
dump() จะรับอาร์กิวเมนต์ 2 ตัว ตัวแรกคือข้อมูล Python ที่ต้องการเขียน และตัวที่สองคืออ็อบเจกต์ไฟล์ การใช้โครงสร้าง with open(...) เป็นวิธีที่ปลอดภัยและเป็นที่นิยมครับ
# python-code
import json
# ข้อมูลการตั้งค่าที่ต้องการบันทึก
app_settings = {
"theme": "dark",
"language": "thai",
"notifications": {
"email": True,
"push": False
},
"version": "1.0.2"
}
# 'w' หมายถึงโหมดเขียน (write)
# การระบุ encoding='utf-8' เป็นธรรมเนียมปฏิบัติที่ดีเมื่อมีภาษาไทย
with open('settings.json', 'w', encoding='utf-8') as f:
# indent และ ensure_ascii ก็สามารถใช้ได้เช่นกัน
json.dump(app_settings, f, indent=4, ensure_ascii=False)
print("เขียนการตั้งค่าลงในไฟล์ settings.json แล้ว")
เมื่อรันโค้ดนี้ จะมีไฟล์ชื่อ settings.json ถูกสร้างขึ้นในไดเรกทอรีเดียวกับสคริปต์ Python ของคุณ เนื้อหาข้างในก็จะเป็นรูปแบบที่อ่านง่ายเหมือนกับตอนที่เราใช้ dumps จัดรูปแบบเลยครับ
4. การอ่านไฟล์ JSON มาเป็นข้อมูล Python: json.load()
สุดท้าย เรามาลองอ่านไฟล์ settings.json ที่สร้างไว้เมื่อสักครู่กันครับ เป็นการจัดการไฟล์จึงต้องใช้ load() ที่ไม่มีตัว `s` ครับ
# python-code
import json
import os # import โมดูล os เพื่อตรวจสอบการมีอยู่ของไฟล์
file_path = 'settings.json'
# ตรวจสอบว่าไฟล์มีอยู่จริงหรือไม่
if os.path.exists(file_path):
# 'r' หมายถึงโหมดอ่าน (read)
with open(file_path, 'r', encoding='utf-8') as f:
# แค่ส่งอ็อบเจกต์ไฟล์เข้าไป
loaded_settings = json.load(f)
print("อ่านการตั้งค่าจาก settings.json แล้ว")
print(loaded_settings)
# ใช้ข้อมูลที่อ่านมาประมวลผล
print(f"การตั้งค่าธีมปัจจุบัน: {loaded_settings['theme']}")
else:
print(f"ข้อผิดพลาด: ไม่พบไฟล์ {file_path}")
print("กรุณารันโค้ดตัวอย่างของ json.dump() ก่อน")
ผลลัพธ์การทำงาน:
อ่านการตั้งค่าจาก settings.json แล้ว
{'theme': 'dark', 'language': 'thai', 'notifications': {'email': True, 'push': False}, 'version': '1.0.2'}
การตั้งค่าธีมปัจจุบัน: dark
เท่านี้คุณก็เชี่ยวชาญเวทมนตร์พื้นฐานทั้ง 4 อย่างแล้ว! ถ้าจัดการกับสตริง ให้ใช้ dumps/loads ที่มี `s` ถ้าจัดการกับไฟล์ ให้ใช้ dump/load ที่ไม่มี `s` แค่นี้เองครับ!
[โค้ดที่ก๊อปปี้ไปใช้ได้เลย] ลองปฏิบัติจริง! สร้างการ์ดโปรไฟล์แบบไดนามิกจากข้อมูล JSON
มาถึงแล้วครับ! นี่คือส่วนที่สำคัญที่สุดของบทความนี้ เราจะนำความรู้ทั้งหมดที่เรียนมาใช้เพื่อเชื่อมต่อ Python กับ JavaScript และสัมผัสประสบการณ์การสร้างเนื้อหา HTML แบบไดนามิกจากข้อมูล JSON กัน
ในโลกของการพัฒนาเว็บจริงๆ เราจะแยกข้อมูลกับการแสดงผลออกจากกันแบบนี้เลยครับ เมื่อคุณได้ลองทำสิ่งนี้ คุณจะเข้าใจถึงพลังที่แท้จริงของ JSON!
โค้ด HTML ฉบับสมบูรณ์ที่นำไปใช้ได้ทันที
คัดลอกโค้ดทั้งหมดด้านล่าง แล้วสร้างไฟล์ชื่อ profile.html และบันทึก จากนั้นลองเปิดไฟล์นั้นในเว็บเบราว์เซอร์ของคุณดูครับ
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>โปรไฟล์ที่สร้างจากข้อมูล JSON</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #121212;
color: #e0e0e0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.card {
background-color: #1e1e1e;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
padding: 2rem;
width: 320px;
border: 1px solid #333;
}
.card h1 {
color: #669df6;
margin-top: 0;
border-bottom: 2px solid #669df6;
padding-bottom: 0.5rem;
}
.card p {
line-height: 1.6;
}
.card .label {
font-weight: bold;
color: #8ab4f8;
}
.skills {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.skills li {
background-color: #333;
padding: 0.3rem 0.8rem;
border-radius: 1rem;
font-size: 0.9em;
}
</style>
</head>
<body>
<!-- การ์ดโปรไฟล์จะถูกแทรกที่นี่ -->
<div id="profile-container"></div>
<!--
[สำคัญมาก!]
โดยปกติแล้ว ข้อมูล JSON นี้จะถูกส่งมาจากเซิร์ฟเวอร์ที่ทำงานด้วย Python
ในตัวอย่างนี้ เพื่อจำลองการทำงานดังกล่าว เราจะฝัง
ข้อมูล JSON ไว้ในแท็ก <script> โดยตรง
-->
<script id="user-json-data" type="application/json">
{
"name": "บอทผู้ช่วย AI",
"age": 2,
"bio": "ผมเป็นผู้ช่วย AI ที่เชี่ยวชาญ Python และ JavaScript ครับ พร้อมสนับสนุนการสร้างเว็บของคุณอย่างเต็มที่!",
"is_active": true,
"skills": ["การวิเคราะห์ข้อมูล", "การพัฒนาเว็บ", "การประมวลผลภาษาธรรมชาติ", "การดีบัก"]
}
</script>
<script>
// โค้ด JavaScript นี้จะทำงานในเบราว์เซอร์
document.addEventListener('DOMContentLoaded', function() {
// 1. ดึงสตริง JSON จากแท็ก <script>
var jsonScriptTag = document.getElementById('user-json-data');
var jsonString = jsonScriptTag.textContent;
// 2. แปลงสตริง JSON เป็นอ็อบเจกต์ JavaScript
var userData = JSON.parse(jsonString);
// 3. สร้างเนื้อหา HTML โดยใช้ข้อมูลที่ดึงมา
var container = document.getElementById('profile-container');
// สร้าง HTML สำหรับรายการทักษะ
var skillsHtml = userData.skills.map(function(skill) {
return '<li>' + skill + '</li>';
}).join('');
// สร้าง HTML ทั้งหมดของการ์ดโปรไฟล์ด้วยการต่อสตริง
var profileCardHtml =
'<div class="card">' +
'<h1>' + userData.name + '</h1>' +
'<p><span class="label">อายุ:</span> ' + userData.age + ' ปี</p>' +
'<p><span class="label">เกี่ยวกับฉัน:</span> ' + userData.bio + '</p>' +
'<p><span class="label">สถานะ:</span> ' + (userData.is_active ? 'ใช้งาน' : 'ไม่ใช้งาน') + '</p>' +
'<h2 style="color: #669df6; font-size: 1.2em;">ทักษะ</h2>' +
'<ul class="skills">' +
skillsHtml +
'</ul>' +
'</div>';
// 4. แทรก HTML ที่สร้างขึ้นลงในหน้าเว็บ
container.innerHTML = profileCardHtml;
});
</script>
</body>
</html>
เมื่อเปิดในเบราว์เซอร์ คุณจะเห็นการ์ดโปรไฟล์ที่ตกแต่งอย่างสวยงามปรากฏขึ้นมา ทั้งๆ ที่ในไฟล์ HTML ไม่ได้เขียนองค์ประกอบของการ์ดไว้โดยตรงเลย!
ในโค้ดนี้ JavaScript ที่อยู่ด้านล่างจะอ่านข้อมูล JSON ที่เขียนไว้ใน <script id="user-json-data"> ฟังก์ชัน JSON.parse() คือ json.loads() เวอร์ชัน JavaScript นั่นเอง จากนั้นมันจะใช้ข้อมูลนั้นมาสร้าง HTML แบบไดนามิก แล้วแทรกลงในตำแหน่งที่มี id="profile-container"
ในการพัฒนาเว็บจริงๆ เซิร์ฟเวอร์ Python จะสร้างส่วนข้อมูล JSON นี้ขึ้นมาแบบไดนามิก แล้วฝังลงในเทมเพลต HTML เพื่อส่งไปยังเบราว์เซอร์ นี่คือกลไกพื้นฐานที่คุณเพิ่งได้สัมผัสด้วยตัวเองในไฟล์เดียว น่าทึ่งใช่ไหมครับ?
สรุป: JSON ไม่ได้น่ากลัว แต่เป็นอาวุธที่ทรงพลังที่สุดของคุณ!
ครั้งนี้ ผมได้อธิบายเกี่ยวกับการจัดการข้อมูลโดยใช้โมดูล json ของ Python และความสำคัญของมันในการสร้างเว็บ โดยผสมผสานกับประสบการณ์ส่วนตัวของผม
- JSON คือ ภาษากลาง ที่ใช้ในการแลกเปลี่ยนข้อมูลระหว่างโปรแกรม
- Python มีโมดูล
jsonมาตรฐานติดตั้งมาให้แล้ว - ถ้าจัดการกับสตริง ให้ใช้ตัวที่มี `s`:
dumps/loads. - ถ้าจัดการกับไฟล์ ให้ใช้ตัวที่ไม่มี `s`:
dump/load. - สำหรับภาษาไทย อย่าลืม
ensure_ascii=Falseและเพื่อให้อ่านง่าย อย่าลืมindent=4.
ตอนแรกอาจจะรู้สึกว่ามันเข้าถึงยาก แต่เมื่อคุณเข้าใจกลไกของ JSON แล้ว ขอบเขตของเว็บไซต์ที่คุณสามารถสร้างได้จะกว้างขึ้นอย่างมาก ความเป็นไปได้ไม่มีที่สิ้นสุด ตั้งแต่การเชื่อมต่อกับ API ภายนอกไปจนถึงการบันทึกการตั้งค่าสำหรับผู้ใช้แต่ละคน
ลองแก้ไขโค้ดในบทความนี้และทดลองดูว่า "ถ้าเปลี่ยนแบบนี้จะเป็นอย่างไร?" การลองผิดลองถูกนี่แหละคือเครื่องปรุงรสที่ดีที่สุดที่จะทำให้คุณเติบโตในฐานะนักพัฒนา!
ไปยังขั้นตอนต่อไป
เมื่อคุณคุ้นเคยกับการจัดการข้อมูลด้วย JSON แล้ว ต่อไปเรามาเรียนรู้วิธีรับข้อมูลจากภายนอกเมื่อเปิดโปรแกรมกันเถอะ การสามารถจัดการกับอาร์กิวเมนต์ของบรรทัดคำสั่งจะช่วยให้คุณสร้างเครื่องมือที่ทรงพลังยิ่งขึ้นได้