Git 101: ติดตั้งไทม์แมชชีนให้โค้ดของเรา (ใช้คนเดียวยังไงให้รอด)

สวัสดีชาวโค้ดเดอร์!

เราเชื่อว่าทุกคนที่เคยเขียนโค้ดต้องเคยผ่านประสบการณ์นี้:

Project_V1.zip
Project_Final.zip
Project_Final_ส่งจริง.zip
Project_Final_แก้ล่าสุด_final_v2.zip

โฟลเดอร์ที่เต็มไปด้วยไฟล์ zip หน้าตาคล้ายๆ กันจนงงไปหมดว่าอันไหนคืออันล่าสุดกันแน่!? วันนี้เราจะพาทุกคนบอกลาฝันร้ายนี้ แล้วมาสร้าง "ไทม์แมชชีน" หรือ "จุดเซฟ" ให้กับโปรเจคของเราด้วยเครื่องมือที่ชื่อว่า Git กัน

Git คืออะไร? ทำไมต้องใช้?

พูดง่ายๆ Git คือระบบที่คอยบันทึกทุกการเปลี่ยนแปลงที่เกิดขึ้นกับไฟล์ในโปรเจคของเรา (เขาเรียกเท่ๆ ว่า Version Control System) มันเหมือนมีเลขาฯ ส่วนตัวที่คอยจดว่า "ใคร" แก้ "ไฟล์ไหน" "เมื่อไหร่" และ "แก้ว่าอะไรไปบ้าง"

ประโยชน์ของมันคืออะไร?

• ไม่กลัวพัง: เผลอลบโค้ดผิดบรรทัด? ทำฟีเจอร์ใหม่แล้วเละ? ไม่ต้องห่วง! เราสามารถย้อนเวลากลับไป ณ "จุดเซฟ" ไหนก็ได้ที่โค้ดของเรายังทำงานได้ดีอยู่
• เห็นประวัติ: อยากรู้ว่าโค้ดบรรทัดนี้เราแก้ไปเมื่อไหร่ หรือเพิ่มเข้ามาทำไม Git มีคำตอบให้หมด
• เป็นระเบียบ: เลิกใช้ไฟล์ zip ที่ตั้งชื่อมั่วซั่วได้เลย ชีวิตดีขึ้นเยอะ

เดี๋ยวนะ... แล้วมันต่างจาก GitHub, GitLab ยังไง?

หลายคนอาจจะคุ้นเคยกับชื่อ GitHub มากกว่า ขออธิบายสั้นๆ ตรงนี้เลยว่า Git คือ 'โปรแกรม' ที่ทำงานบนเครื่องเรา ส่วนบริการอย่าง GitHub, GitLab, หรือ Bitbucket คือ 'เว็บไซต์' ที่เป็นเหมือนบ้านออนไลน์ให้เราเอาโค้ดที่จัดการด้วย Git ไปฝากไว้ ในบทความนี้เราจะโฟกัสที่การใช้ 'Git' ให้คล่องก่อน แล้วตอนหน้าเราจะพาไปรู้จักบ้านยอดนิยมอย่าง GitHub กัน!

Step 1: ติดตั้งไทม์แมชชีน (Install Git)

ขั้นตอนแรกสุดของการมีไทม์แมชชีน ก็คือต้องสร้างมันขึ้นมาก่อน!

เข้าไปที่ git-scm.com/downloads{:target="_blank"} แล้วดาวน์โหลดตัวติดตั้งสำหรับระบบปฏิบัติการของเราได้เลย ไม่ว่าจะเป็น Windows หรือ macOS

สำหรับมือใหม่ ตอนติดตั้งกด Next รัวๆ ไปก่อนได้เลย ยังไม่ต้องตั้งค่าอะไรเป็นพิเศษ

Step 2: เสกคาถาเรียก Git และ 3 ทหารเสือ

เมื่อติดตั้งเสร็จแล้ว ให้ลองเปิดโปรแกรมที่ใช้พิมพ์คำสั่งขึ้นมา (บน Windows คือ Command Prompt หรือ PowerShell, บน Mac คือ Terminal) แล้วลองทำตามนี้ดู

1. สร้างโฟลเดอร์โปรเจคของเรา แล้วเข้าไปในนั้นก่อน

mkdir my-awesome-project
cd my-awesome-project

2. ร่ายมนตร์บทแรก: git init คำสั่งนี้เป็นการบอกว่า "ณ บัดนี้ โฟลเดอร์นี้จงอยู่ภายใต้การควบคุมของ Git!"

git init

เมื่อรันคำสั่งนี้ จะมีโฟลเดอร์ลับชื่อ .git ถูกสร้างขึ้นมา มันคือสมองกลของไทม์แมชชีนเรานั่นเอง (ไม่ต้องไปยุ่งกับมันนะ)

3. ทหารเสือที่ต้องใช้บ่อยกว่าหายใจ

หลังจากเราสร้างไฟล์งานในโปรเจค (เช่น index.html, style.css) หรือแก้ไขโค้ดเรียบร้อยแล้ว วงจรชีวิตการ "เซฟ" ของเราจะมีแค่ 3 ขั้นตอนง่ายๆ

git add . (เลือกของใส่กล่อง)

คำสั่งนี้คือการบอก Git ว่า "เฮ้! ไฟล์ทั้งหมด (.) ที่เราเพิ่งแก้ไปนี่แหละ คือของที่เราจะเซฟในรอบนี้" เหมือนการหยิบของใส่กล่องเตรียมส่งพัสดุ

git add .

git commit -m "ข้อความบันทึก" (ปิดกล่องแปะป้าย)

เมื่อของในกล่องพร้อม ก็ถึงเวลาปิดกล่องและแปะป้าย! คำสั่งนี้คือการกด "เซฟ" จริงๆ ส่วนข้อความที่อยู่ในเครื่องหมายคำพูด (-m ย่อมาจาก message) คือโน้ตที่เราจะแปะไว้บนกล่อง เพื่อบอกตัวเองในอนาคตว่าการเซฟครั้งนี้เราทำอะไรไป

git commit -m "สร้างไฟล์ HTML กับ CSS เริ่มต้น"

ทิป: พยายามเขียนข้อความ commit ให้สื่อความหมายนะ เช่น "เพิ่มหน้า Login" หรือ "แก้บั๊กปุ่มกดแล้วไม่ไปไหน" อนาคตจะได้ไม่งง

ดูประวัติการเซฟด้วย git log

แล้วเราจะย้อนกลับไปดูจุดเซฟทั้งหมดที่เคยทำมาได้ยังไง? ง่ายๆ เลยด้วยคำสั่ง:

git log

มันจะแสดงรายการ commit ทั้งหมดที่เราเคยสร้างไว้ หน้าตาประมาณนี้:

commit a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0 (HEAD -> main)
Author: Hudchew <me@hudchew.com>
Date:   Tue Aug 12 10:30:00 2025 +0700

เพิ่มหน้า Login ที่ใช้งานได้

commit f0e9d8c7b6a5f4e3d2c1b0a9f8e7d6c5b4a3b2a1
Author: Hudchew <me@hudchew.com>
Date:   Tue Aug 12 09:00:00 2025 +0700

สร้างไฟล์ HTML กับ CSS เริ่มต้น

แค่นี้เอง! เพียงแค่รู้จักคำสั่ง init, add, commit เราก็สามารถควบคุมเวอร์ชันโปรเจคส่วนตัวของเราได้อย่างเป็นระเบียบแล้ว ไม่ต้องงมหาไฟล์ _final_v3.zip อีกต่อไป!

ตอนนี้เรามีไทม์แมชชีนส่วนตัวแล้ว แต่ถ้าอยากเอาโค้ดไปเก็บไว้บน Cloud เพื่อความปลอดภัย หรือเริ่มปูทางไปสู่การทำงานร่วมกับคนอื่นล่ะ?

ตอนหน้า เราจะพาทุกคนไปรู้จักกับ GitHub คู่หูของ Git ที่จะทำให้ชีวิตง่ายขึ้นไปอีก!

---

📚 ซีรีส์ Git สำหรับมือใหม่

• ตอนที่ 1: Git 101: ติดตั้งไทม์แมชชีนให้โค้ดของเรา (ใช้คนเดียวยังไงให้รอด) ← ตอนนี้
• ตอนที่ 2: Git 102: ส่งการบ้านขึ้น Cloud (เมื่อโค้ดไม่ได้มีแค่เราคนเดียว)
• ตอนที่ 3: Git 103: แตกกิ่งก้านสาขา ทำงานร่วมกับชาวแก๊ง (Branch & Merge เบื้องต้น)