Frontend Academy · บทเรียน

git init, add, commit และ status

เริ่มต้นคลังเก็บข้อมูล จัดเตรียมการเปลี่ยนแปลงด้วย git add สร้างคอมมิต และอ่าน git status กับ git log เพื่อทำความเข้าใจประวัติการเปลี่ยนแปลง

git init, add, commit และ status เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงต้องควบคุมเวอร์ชัน

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

git init — เริ่มต้นคลัง

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

mkdir my-project && cd my-project
git init
# Initialized empty Git repository in ./my-project/.git/

พื้นที่ทั้งสามส่วน

Git มีพื้นที่สามส่วน ได้แก่ ไดเรกทอรีทำงาน (ไฟล์ที่คุณแก้ไข), พื้นที่เตรียมการ (ไฟล์ที่ทำเครื่องหมายไว้สำหรับการบันทึกครั้งถัดไป) และ คลัง (ประวัติที่บันทึกแล้ว) พื้นที่เตรียมการช่วยให้คุณจัดทำการบันทึกที่ระบุการเปลี่ยนแปลงได้อย่างแม่นยำ

git status — มีอะไรเปลี่ยนแปลงบ้าง

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

git status
# Output:
# On branch main
# Changes not staged for commit:
#   modified: index.html
# Untracked files:
#   styles.css

git add — เตรียมการเปลี่ยนแปลง

git add filename นำไฟล์ที่ระบุเข้าสู่พื้นที่เตรียมการ git add . นำการเปลี่ยนแปลงทั้งหมดในไดเรกทอรีปัจจุบันเข้าสู่พื้นที่เตรียมการ ส่วน git add -p ใช้เตรียมการเปลี่ยนแปลงแบบโต้ตอบทีละส่วน

git add index.html           # stage one file
git add src/                 # stage a directory
git add .                    # stage everything
git add -p                   # interactive staging

git commit — บันทึกภาพรวม

git commit -m 'message' สร้างภาพรวมถาวรของการเปลี่ยนแปลงที่อยู่ในพื้นที่เตรียมการ ข้อความควรอธิบายว่า เหตุใดจึงเปลี่ยนแปลง ไม่ใช่เปลี่ยนแปลงอะไร แต่ละการบันทึกมีแฮช SHA ที่ไม่ซ้ำกัน

git commit -m 'feat: add user authentication form'
git commit -m 'fix: correct email validation regex'
git commit -m 'refactor: extract validation into helper function'

การบันทึกแบบมาตรฐาน

หลายทีมใช้รูปแบบการบันทึกแบบมาตรฐาน ได้แก่ type(scope): description ชนิดที่ใช้บ่อย ได้แก่ feat, fix, refactor, test, docs, chore และ perf รูปแบบนี้ช่วยสร้างบันทึกการเปลี่ยนแปลงและการกำหนดเวอร์ชันตามความหมายโดยอัตโนมัติ

feat(auth): add Google OAuth login
fix(cart): prevent duplicate item addition
docs(api): add rate limit documentation
chore(deps): upgrade React to 18.3

git log — ดูประวัติ

git log แสดงประวัติการบันทึก git log --oneline แสดงมุมมองแบบกระชับ โดยมีหนึ่งบรรทัดต่อการบันทึกหนึ่งครั้ง ส่วน git log --graph จะแสดงโครงสร้างสาขาเป็นแผนภาพ

git log --oneline --graph
# * a1b2c3d feat: add dark mode toggle
# * d4e5f6g fix: resolve mobile nav overflow
# * 7h8i9j0 refactor: extract theme hook

git diff — ดูสิ่งที่เปลี่ยนแปลง

git diff แสดงการเปลี่ยนแปลงที่ยังไม่ได้เตรียมการ git diff --staged แสดงการเปลี่ยนแปลงที่อยู่ในพื้นที่เตรียมการ และ git diff HEAD แสดงการเปลี่ยนแปลงทั้งหมดนับจากการบันทึกครั้งล่าสุด

ไฟล์ .gitignore

ระบุไฟล์และไดเรกทอรีที่ต้องการยกเว้นจากการควบคุมเวอร์ชันไว้ใน .gitignore ควรยกเว้น node_modules, .env, dist และไดเรกทอรี build เสมอ GitHub มีแม่แบบ gitignore สำหรับทุกภาษาและกรอบการทำงาน

# .gitignore
node_modules/
dist/
.env
.env.local
*.log
.DS_Store
coverage/

git restore — ยกเลิกการเปลี่ยนแปลงที่ยังไม่เตรียมการ

git restore filename ละทิ้งการเปลี่ยนแปลงของไฟล์ในไดเรกทอรีทำงาน และเปลี่ยนไฟล์กลับเป็นเวอร์ชันที่บันทึกล่าสุด การดำเนินการนี้ทำลายข้อมูล เนื่องจากการเปลี่ยนแปลงจะสูญหาย

git restore index.html        # discard unstaged changes
git restore --staged file.js  # unstage without losing changes

ตรวจสอบอย่างรวดเร็ว

git add . ทำอะไร

ทบทวน: คำสั่ง Git พื้นฐาน

git init เริ่มต้นคลัง git status แสดงสถานะปัจจุบัน git add นำไฟล์เข้าสู่พื้นที่เตรียมการ git commit บันทึกภาพรวมพร้อมข้อความ git log แสดงประวัติ git diff แสดงการเปลี่ยนแปลง ส่วน .gitignore ใช้ยกเว้นไฟล์ ควรเขียนข้อความการบันทึกที่มีความหมายและอธิบายเหตุผล ไม่ใช่เพียงอธิบายว่ามีการเปลี่ยนแปลงอะไร

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

บทเรียน “git init, add, commit และ status” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “git init, add, commit และ status” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “git init, add, commit และ status”

เริ่มต้นคลังเก็บข้อมูล จัดเตรียมการเปลี่ยนแปลงด้วย git add สร้างคอมมิต และอ่าน git status กับ git log เพื่อทำความเข้าใจประวัติการเปลี่ยนแปลง คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “git init, add, commit และ status” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy