โปรเจกต์ ไฟล์ และ repo ซอฟต์แวร์ของคุณอยู่ตรงไหนจริง ๆ

เวลาคุณสั่ง AI ให้แก้เว็บ คุณพิมพ์ลงไปในช่องแชต มันตอบกลับมาว่าแก้ให้แล้ว แล้วเว็บก็เปลี่ยนตามนั้นจริง ๆ พอเป็นแบบนี้บ่อย ๆ มันชวนให้รู้สึกว่าเว็บของคุณอยู่ในตัว AI หรือไม่ก็ลอยอยู่บนอินเทอร์เน็ตที่ไหนสักแห่ง คุณนึกภาพไม่ออกว่ามันมีตัวตนตรงไหนกันแน่ และพอนึกไม่ออก ทุกอย่างก็เลยรู้สึกเหมือนเวทมนตร์

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

ทำไมคุณต้องรู้ว่าซอฟต์แวร์อยู่ตรงไหน

ก่อนลงรายละเอียด ขอปูให้ชัดว่าทำไมเรื่องนี้ถึงเป็นพื้นฐานที่ต้องมาก่อน

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

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

ของที่คุณสร้าง คือไฟล์ที่นั่งอยู่บนเครื่องคุณ

ภาพในหัวที่ต้องเปลี่ยนก่อนคือ ซอฟต์แวร์ไม่ใช่ของล่องลอย มันคือไฟล์ที่มีที่อยู่จริง เหมือนไฟล์รูปหรือไฟล์เอกสารที่คุณคุ้นเคย ต่างกันแค่ข้างในมันเขียนอะไรไว้ ส่วนนี้จะแยกให้เห็นทีละชั้น ตั้งแต่ไฟล์หนึ่งไฟล์ ไปจนถึงโฟลเดอร์ทั้งโปรเจกต์ ไปจนถึงคำว่า repo ที่คุณจะได้ยินบ่อย แต่ละตัวมีนิยาม มีวิธีทำงาน มีกฎ และมีหน้าตาจริงในทางปฏิบัติ

file หรือ ไฟล์ นิยาม คือกล่องเก็บข้อความหนึ่งกล่อง ที่ข้างในเขียนคำสั่งให้คอมพิวเตอร์ทำตาม ซอฟต์แวร์ของคุณไม่ได้ทำจากไฟล์เดียว แต่ทำจากไฟล์ข้อความแบบนี้หลายสิบหรือหลายร้อยไฟล์ต่อกัน ทำงานยังไง ไฟล์โค้ดส่วนใหญ่คือไฟล์ข้อความล้วน ๆ เปิดด้วยโปรแกรมแก้ข้อความก็อ่านได้เหมือนอ่านโน้ตในมือถือ แต่ละบรรทัดในไฟล์คือคำสั่งหนึ่งคำสั่ง หรือชิ้นส่วนหนึ่งของหน้าตา ที่คอมพิวเตอร์จะอ่านแล้วทำตามทีละบรรทัด เช่นไฟล์หนึ่งอาจบอกว่าหน้านี้มีปุ่มสีฟ้าเขียนว่าบันทึก อีกไฟล์อาจบอกว่ากดปุ่มนั้นแล้วให้ทำอะไรต่อ กฎ ทุกอย่างที่ซอฟต์แวร์คุณทำได้ มาจากที่เขียนไว้ในไฟล์เหล่านี้ ไม่มีอะไรเกิดขึ้นเองนอกเหนือจากที่เขียนไว้ ในทางปฏิบัติ ไฟล์ในโปรเจกต์ดูออกได้จากนามสกุลที่ลงท้าย และแต่ละแบบมีหน้าที่ต่างกัน ไฟล์ลงท้าย .tsx หรือ .jsx คือหน้าหรือชิ้นส่วนของหน้าบ้าน เป็นของฝั่ง React ที่ประกอบกันขึ้นเป็นสิ่งที่คุณเห็นบนจอ ไฟล์ลงท้าย .css คือไฟล์หน้าตาสไตล์ กำหนดสี ขนาด ระยะห่าง ไฟล์ลงท้าย .json คือไฟล์ข้อมูลหรือการตั้งค่า เก็บค่าต่าง ๆ ไว้เป็นรายการ และไฟล์ลงท้าย .md คือไฟล์ข้อความล้วน ๆ เอาไว้จดบันทึกหรือเขียนคำอธิบาย ไฟล์สำคัญตัวหนึ่งที่แทบทุกโปรเจกต์มีคือ package.json ซึ่งเป็นรายชื่อเครื่องมือและไลบรารีทั้งหมดที่โปรเจกต์เรียกใช้ พอเห็นนามสกุลพวกนี้แล้ว เวลา AI บอกว่ากำลังแก้ไฟล์ไหน คุณจะเดาออกทันทีว่ามันกำลังแตะส่วนไหนของเว็บ

project หรือ project folder คือ โฟลเดอร์โปรเจกต์ นิยาม คือโฟลเดอร์หนึ่งโฟลเดอร์ที่รวบรวมไฟล์ทั้งหมดของซอฟต์แวร์คุณไว้ด้วยกัน โฟลเดอร์นั้นแหละคือตัวโปรเจกต์ของคุณ ไม่ใช่อะไรที่นามธรรมกว่านั้น ทำงานยังไง ไฟล์ทุกไฟล์ที่ประกอบเป็นเว็บคุณ อยู่รวมกันในโฟลเดอร์นี้ และมันไม่ได้กองรวมกันมั่ว ๆ แต่มีการจัดระเบียบเป็นโฟลเดอร์ย่อย เช่นโฟลเดอร์หนึ่งเก็บไฟล์ของหน้าบ้าน อีกโฟลเดอร์เก็บไฟล์ตั้งค่า อีกโฟลเดอร์เก็บสคริปต์ที่ใช้รันงานต่าง ๆ ตอนคุณสั่ง AI ให้แก้ของ มันเข้าไปอ่านและเขียนไฟล์ในโฟลเดอร์นี้แหละ กฎ โฟลเดอร์โปรเจกต์คือแหล่งความจริงเดียวของซอฟต์แวร์คุณ ของจริงอยู่ในนี้ ที่อื่นล้วนเป็นสำเนาของที่นี่ ในทางปฏิบัติ คุณแทบไม่ต้องเปิดไฟล์พวกนี้อ่านเอง หน้าที่นั้นเป็นของ AI แต่การรู้ว่าโฟลเดอร์มีโครงสร้าง คือสิ่งที่ทำให้คุณชี้สั่งได้แม่นในภายหลัง ของที่คุณจะเห็นบ่อยในโฟลเดอร์โปรเจกต์จริง มีเช่น โฟลเดอร์สำหรับเก็บหน้าต่าง ๆ ของเว็บ ไฟล์ตั้งค่าหนึ่งหรือสองไฟล์ที่กำหนดว่าโปรเจกต์ทำงานยังไง และไฟล์รายชื่อเครื่องมือที่โปรเจกต์ต้องใช้ ซึ่งมักชื่อ package บอกว่าเว็บนี้พึ่งพาชุดเครื่องมือตัวไหนบ้าง ยกตัวอย่างจริง เว็บ AI ภาษาคน เว็บนี้เอง ก็คือโฟลเดอร์ของไฟล์โฟลเดอร์หนึ่งบนเครื่องเจ้าของ ที่ Claude Code คอยเปิดเข้าไปแก้ ข้างในมีโฟลเดอร์ย่อยแยกของหน้าบ้าน แยกสคริปต์ แยกไฟล์ตั้งค่า การที่มันมีโครงสร้างแบบนี้แหละ คือสิ่งที่ทำให้เจ้าของชี้บอกได้ว่าให้ไปแก้ตรงไหน แทนที่จะบอกลอย ๆ ว่าแก้เว็บที

repo หรือ repository นิยาม คือโฟลเดอร์โปรเจกต์ของคุณ เมื่อ git เริ่มเข้ามาคอยจดประวัติของมัน พูดง่าย ๆ repo คือโฟลเดอร์โปรเจกต์ที่อยู่ใต้การดูแลของ git ทำงานยังไง โฟลเดอร์โปรเจกต์ธรรมดากับ repo เป็นโฟลเดอร์เดียวกัน ไฟล์ชุดเดียวกัน ต่างกันแค่ว่า repo มีตัวจดประวัติทำงานอยู่เบื้องหลัง คอยบันทึกว่าไฟล์ในโฟลเดอร์เปลี่ยนไปยังไงบ้างตามเวลา โฟลเดอร์ยังเป็นโฟลเดอร์เดิม แค่ตอนนี้มันมีประวัติติดมาด้วย กฎ ไม่ใช่ทุกโฟลเดอร์เป็น repo โฟลเดอร์จะกลายเป็น repo ก็ต่อเมื่อคุณ หรือ AI สั่งให้ git เริ่มดูแลมัน ในทางปฏิบัติ repo ก็คือโฟลเดอร์โปรเจกต์ของคุณนี่แหละ เมื่อ git เข้ามาตามจดประวัติให้แล้ว ตัวประวัติที่ git จดไว้ มันเก็บอยู่ในโฟลเดอร์ลับชื่อ .git ที่ซ่อนอยู่ข้างในโฟลเดอร์โปรเจกต์ คุณไม่ต้องเข้าไปยุ่งกับมันเลย ปล่อยให้มันทำงานของมันไป ในการใช้งานแต่ละวัน คุณรู้แค่ว่า โฟลเดอร์นี้เป็น repo แปลว่าประวัติของมันถูกจดไว้แล้ว ก็พอ ส่วนสำเนาของ repo ที่อยู่บนออนไลน์ คือสิ่งที่คุณเห็นบน GitHub ทั้ง git และ GitHub ทำงานยังไง ใช้คู่กันยังไง เป็นเรื่องเต็ม ๆ ของบทถัดไป

ตอน AI แก้ของ จริง ๆ แล้วมันทำอะไร

ตรงนี้คือจุดที่ความรู้สึกว่าเป็นเวทมนตร์จะหายไป เวลา AI บอกว่า แก้ให้แล้ว สิ่งที่มันทำจริง ๆ ไม่ได้ลึกลับเลย มันเปิดไฟล์ไฟล์หนึ่งในโฟลเดอร์โปรเจกต์ของคุณ ไปหาบรรทัดที่ต้องแก้ เขียนทับด้วยข้อความใหม่ แล้วเซฟ เหมือนเป๊ะ ๆ กับตอนคุณเปิดเอกสารใน Word แก้ประโยคหนึ่ง แล้วกดเซฟ

ต่างกันแค่จุดเดียว เอกสาร Word ที่คุณแก้ คนเป็นคนอ่าน แต่ไฟล์ที่ AI แก้ คอมพิวเตอร์เป็นคนอ่านแล้วทำตาม เพราะข้างในไฟล์เป็นคำสั่ง ไม่ใช่เนื้อความให้คนอ่านเฉย ๆ นอกจากนั้นก็คือการแก้ข้อความในไฟล์ธรรมดา เปิด หา เขียนทับ เซฟ ไม่มีอะไรมากกว่านั้น

พอเห็นภาพนี้ คำว่า AI แก้โค้ดให้ ก็เลิกเป็นเวทมนตร์ มันคือ AI เปิดไฟล์ในโฟลเดอร์ของคุณ แล้วพิมพ์แก้ให้ แทนที่คุณจะต้องพิมพ์เอง

git ไม่ใช่ GitHub เป็นคนละตัวกัน

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

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

เห็นภาพรวม โฟลเดอร์ของคุณเปลี่ยนยังไงเมื่อแก้หนึ่งครั้ง

รู้จักทีละชิ้นแล้ว ทีนี้มาตามรอยว่าเกิดอะไรขึ้นกับโฟลเดอร์โปรเจกต์ของคุณ ตอนคุณสั่งแก้ของเล็ก ๆ หนึ่งครั้ง สมมติคุณสั่ง AI ให้เปลี่ยนสีปุ่มบันทึกจากฟ้าเป็นเขียว นี่คือสิ่งที่เกิดขึ้นทีละขั้น

1. ของทั้งหมดอยู่ในโฟลเดอร์อยู่แล้ว ก่อนคุณสั่งอะไร เว็บของคุณคือไฟล์ชุดหนึ่งในโฟลเดอร์โปรเจกต์ ปุ่มสีฟ้าที่เห็นบนจอ มาจากบรรทัดหนึ่งในไฟล์ไฟล์หนึ่งในโฟลเดอร์นั้น
2. AI หาว่าสีปุ่มเขียนไว้ที่ไฟล์ไหน พอคุณสั่ง AI จะไล่ดูว่าในโฟลเดอร์ ปุ่มบันทึกถูกกำหนดไว้ที่ไฟล์ไหน บรรทัดไหน
3. AI เปิดไฟล์นั้น แล้วเขียนทับ มันเปิดไฟล์ขึ้นมา ไปที่บรรทัดที่บอกว่าสีฟ้า ลบทิ้ง เขียนคำว่าเขียวลงไปแทน
4. AI เซฟไฟล์ ไฟล์ในโฟลเดอร์ถูกบันทึกทับด้วยเวอร์ชันใหม่ ตอนนี้โฟลเดอร์โปรเจกต์ของคุณ มีปุ่มสีเขียวแล้ว
5. โฟลเดอร์คือแหล่งความจริงเดียว สิ่งที่เปลี่ยนจริง ๆ คือไฟล์ในโฟลเดอร์ ส่วนที่คุณเห็นบนจอ เป็นแค่ผลของการอ่านไฟล์ในโฟลเดอร์นั้นมาแสดง ถ้าไฟล์ในโฟลเดอร์เปลี่ยน หน้าจอก็เปลี่ยนตาม เพราะของจริงอยู่ในโฟลเดอร์เสมอ

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

ปุ่มบันทึกของเราอยู่ตรงไหนในเรื่องนี้

ขอผูกกลับมาที่ปุ่มบันทึกที่เราตามกันมาตลอด ตอนนี้คุณตอบได้แล้วว่าปุ่มนั้นอยู่ตรงไหนจริง ๆ มันคือข้อความไม่กี่บรรทัดในไฟล์ไฟล์หนึ่ง ที่นั่งอยู่ในโฟลเดอร์โปรเจกต์ของคุณ ซึ่งก็คือ repo ของคุณนั่นเอง

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

ภาพช่วยจำ

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

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

💡 ใจความสำคัญ: ซอฟต์แวร์ของคุณไม่ได้อยู่ในตัว AI และไม่ได้ลอยอยู่บนอินเทอร์เน็ต มันคือโฟลเดอร์ของไฟล์จริงบนเครื่องคุณ โฟลเดอร์นั้นคือโปรเจกต์ของคุณ และเมื่อมี git ดูแลก็เรียกว่า repo ตอน AI แก้ของ มันแค่เปิดไฟล์ในโฟลเดอร์นั้นมาเขียนทับแล้วเซฟ ไม่มีอะไรวิเศษ พอคุณรู้ว่าซอฟต์แวร์อยู่ตรงไหนและมีโครงสร้างยังไง คุณก็ชี้สั่งได้ตรงจุด

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

แหล่งอ้างอิง

• https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files
• https://git-scm.com/book/en/v2/Getting-Started-What-is-Git%3F