เรียนรู้การเขียนโค้ดโดยการเขียนโค้ดบทกวี

ย้อนกลับไปในปี 2008 ฉันเริ่มเรียนการออกแบบและจำได้อย่างชัดเจนว่าการมองโค้ดอย่างชัดแจ้งทำให้ฉันกลัวได้อย่างไร ฉันมีชั้นเรียนเขียนโค้ดอยู่บ้าง และไม่มีประสบการณ์ในการเขียนโค้ดมาก่อน ฉันมีช่วงเวลาที่ยากลำบากในการทำความเข้าใจโค้ดที่ฉันติดต่อด้วยในครั้งแรก ทันใดนั้น คำที่ฉันใช้ในภาษาอังกฤษ (เช่น "ใหม่" "กลับมา" และ "โยน/จับ") ก็มีความหมายใหม่ทั้งหมด ไวยากรณ์ที่คลุมเครือ อัฒภาค เครื่องหมายวงเล็บ และกฎใหม่ทั้งหมดไม่ได้ช่วยให้อะไรฉันง่ายขึ้น

หากคุณยังใหม่ต่อ JavaScript และ/หรือมีปัญหาในการเพิ่มลงในชุดทักษะของคุณ ฉันอาจมีแนวทางให้คุณเอาชนะอุปสรรคเหล่านั้น คุณไม่ได้อยู่คนเดียวอย่างแน่นอน และคุณมีสิทธิทุกอย่างที่จะคิดว่าการเรียนรู้การเขียนโค้ดนั้นยากต่อการถอดรหัส

ทำไมการเรียนรู้การเขียนโค้ดจึงยากจัง

ต่อไปนี้คือ ความเข้าใจผิดบางประการ เกี่ยวกับสาเหตุที่ฉันคิดว่าผู้คนมีปัญหาในการเรียนรู้หรือสนใจ JavaScript (หรือภาษาเขียนโค้ดใดๆ):

• รหัสมีความคลุมเครือ ใช้งานได้จริง และน่ากลัว
• รหัสมีไว้สำหรับเครื่องจักรเท่านั้น ดังนั้นผู้คนจึงไม่รู้สึกว่าถูกพูดถึงหรือมีส่วนร่วม
• รหัสไม่ถือว่าเป็นภาษา เพราะมันมีกรณีการใช้งานที่แตกต่างไปจากเดิมอย่างสิ้นเชิง และดูแตกต่างอย่างมากจากสิ่งที่พวกเขาเคยเห็นมาก่อน
• ผู้คนมักนึกถึงการเหมารวม (แฮกเกอร์ที่ชั่วร้าย อาจเป็นพวกเมทริกซ์บางคน) ดังนั้นจึงไม่ระบุตัวตนด้วย
  

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

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

อย่างไรก็ตาม ด้วยจุดประสงค์ดังกล่าว โอกาสในการเปรียบเทียบจึงหายไป และภาษาที่คุณพูด (คำศัพท์และกฎเกณฑ์) ดูเหมือนจะไร้ประโยชน์สำหรับการเรียนรู้ภาษาโปรแกรม ไม่มีคำว่า "รัก" ในภาษา JavaScript และไม่สมเหตุสมผลเลยที่จะพูดว่า "ฉันรักคุณ" เครื่องจักร (หรือบราวเซอร์) ไม่รู้หรือสนใจความรัก (ยัง?) ความรู้สึก "ใหม่ทั้งหมด" และ "ไม่รู้ว่าจะเริ่มต้นที่ไหน" นี้อาจน่ากลัวราวกับตกนรก

นี่คือเหตุผลที่ฉันอยู่ที่นี่ ฉันคิดว่าคุณสามารถเรียนรู้ JavaScript ได้ง่ายขึ้นและเป็นศิลปะมาก โดยยึดความรู้ภาษามนุษย์ของคุณ และโดยการปฏิบัติต่อ JavaScript เช่นเดียวกับภาษามนุษย์อื่นๆ ให้ฉันแสดงให้เห็นด้วยตัวอย่างเล็กๆ

เกร็ด น่ารู้ : ภาษาโปรแกรมบางภาษามีการเปลี่ยนจากภาษาโปรแกรมหนึ่งไปเป็นอีกภาษาหนึ่งในใจ นี่คือเหตุผลว่าทำไมการเรียนรู้ภาษาเขียนโปรแกรมจำนวนมากจึงง่ายกว่ามาก เพียงแค่เรียนรู้ภาษาเดียว

ตัวอย่างเล็กๆ

ในหลายกรณี เมื่อคุณต้องการรันโค้ด JavaScript คุณต้องการให้ "เอกสาร" (โดยทั่วไปคือเว็บไซต์ที่ผู้ใช้ดาวน์โหลดในแต่ละครั้ง) ให้พร้อมเพื่อให้คุณสามารถโต้ตอบกับองค์ประกอบ HTML เป็นต้น ใน JavaScript ล้วนๆ คุณอาจสะดุดกับสิ่งนี้:

 (function() { // Your code goes here })();

(แย่จัง! ในกรณีนี้ ฟังก์ชันถูกกำหนดไว้ในวงเล็บ แล้วเรียกทันทีด้วยวงเล็บคู่อื่นในตอนท้าย ซึ่งเรียกว่า IIFE)

หรือบางครั้งเช่นนี้:

 if (document.readyState === 'complete') { // Your code goes here }

ตัวอย่างแรกต้องมีคำอธิบายอย่างแน่นอน ในขณะที่ตัวอย่างที่สอง (และอาจเป็นเรื่องเพ้อฝัน) เราอาจเข้าใจว่ามีเงื่อนไขที่ต้องทำให้สำเร็จเพื่อที่สิ่งอื่นจะเกิดขึ้นได้เพียงแค่มองดูเท่านั้น

ลองนึกภาพบางอย่างเช่นนี้:

 onceUponATime(function () { // Your code (story) goes here })

“กาลครั้งหนึ่ง” เป็นสิ่งที่ (ฉันกล้าพูด) แม้แต่เด็กก็อาจเข้าใจ มันกล่าวถึงนักพัฒนา (โดยอ้างถึงความทรงจำในวัยเด็ก) ในขณะที่ทำสิ่งเดียวกันในทางทฤษฎี นี่คือสิ่งที่ฉันคิดว่า "มีการเปลี่ยนภาษาของมนุษย์เป็นโค้ดดิ้ง"

บันทึกย่อเกี่ยวกับ "ฟังก์ชัน ": ฟังก์ชันนั้นเป็นทักษะซึ่งอยู่เฉยๆ จนกว่าคุณจะเรียกใช้ “การอ่าน” เป็น function read() { … } ซึ่งถูกเรียกใช้เมื่อคุณต้องการอ่านสิ่งนี้: read() นอกจากนี้ยังมีสิ่งที่เรียกว่า “ฟังก์ชั่นที่ไม่ระบุชื่อ” เช่น "function() { … } (ไม่มีชื่อเหมือนในตัวอย่างด้านบน) ซึ่งโดยทั่วไปแล้วจะเป็น “การกระทำครั้งเดียว / ไม่เป็นทางการ” ที่คุณไม่คิดว่าเป็นทักษะ เช่น “การกดปุ่ม”

เปลี่ยนตาราง: จากข้อความสู่พื้นฐาน

ลองนำแนวคิดนี้ไปอีกหน่อย ลองมาดูเหตุผลและความเข้าใจผิดข้างต้นแล้วกลับหัวกลับหาง:

กวีน้อย.

เขียนด้วยจาวาสคริปต์

ทำเพื่อมนุษย์.

เกี่ยวกับความรักระหว่างคนสองคน

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

มันใช้งานไม่ได้ ขณะนี้ไม่ได้มีไว้สำหรับเครื่อง มันมีไว้สำหรับให้คุณอ่านและทำความเข้าใจ

หากคุณได้รับข้อความจากบทกวี แสดงว่าคุณเข้าใจโค้ด JavaScript บางส่วนแล้ว ซึ่งคุณอาจเทียบได้กับภาษาอังกฤษ

ตอนนี้ คุณอาจถามตัวเองว่า ฉันเข้าใจแล้ว แต่ทำไมมันเขียนแบบนี้? กฎ (ไวยากรณ์) ของภาษานี้คืออะไร? ความหมายของคำว่า “ฉัน” (ในแง่เทคนิค) คืออะไร และทำไมรหัสนี้จึงดูคล้ายกับภาษาอังกฤษมาก

กฎ คำศัพท์ และตัวแปร

สิ่งสำคัญที่สุดอย่างหนึ่งที่ต้องเข้าใจเมื่อเรียนภาษาโปรแกรมคือ แนวคิดของตัวแปร

ภาษามนุษย์ทุกภาษามีกฎเกณฑ์ (ไวยากรณ์) และคำศัพท์มากมาย (ที่กำหนดไว้ล่วงหน้า) แน่นอนว่าต้องเรียนรู้ทั้งสองสิ่งนี้ก่อนจึงจะสามารถพูดภาษานั้นได้

JavaScript ก็เหมือนกับภาษาโปรแกรมอื่นๆ ที่มาพร้อมชุดกฎของมันเอง (เช่น . ระหว่างคำหรือ if คำสั่งถูกเขียนอย่างไร) และคำศัพท์ของมันเอง ( if , document , window , Event และอื่นๆ) คำหลักเหล่านี้สงวนไว้ (หรือ 'กำหนดไว้ล่วงหน้า') โดย JavaScript (และเบราว์เซอร์) และแต่ละคำมีจุดประสงค์เฉพาะ

แต่อย่างที่ฉันได้กล่าวไว้ก่อนหน้านี้ โอกาสที่จะเปรียบเทียบคำและประโยคที่คุณรู้จักจากภาษาอังกฤษนั้นดูเหมือนจะหายไปเพราะ ไม่มีสิ่งที่เทียบเท่า กัน

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

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

แต่ใน JavaScript ไม่มีคำว่า "รัก" จนกว่าคุณจะบอกว่ามี มันสามารถเป็นอะไรก็ได้ที่คุณต้องการให้เป็น

 var love = { color: 'red', duration: 365, loveTarget: 'cats', }; // a simple variable expression, // where love is an object “{ … }”, a thing // with some properties (color, duration, loveTarget).
 const love2 = { สี: 'สีม่วง', ระยะเวลา: 'ตลอดไป', loveTarget: 'dogs', };
 // เป็นนิพจน์ตัวแปรด้วย โดยที่ love2 (ค่าคงที่) // ไม่สามารถกำหนดใหม่ได้ / เขียนทับได้ทั้งหมด: // love2 = undefined; // => จะไม่ทำงาน
 // (“undefined” เป็นคีย์เวิร์ดจาวาสคริปต์ที่กำหนดไว้ล่วงหน้า // โดยทั่วไปจะบอกว่า “ไม่มีค่า”)

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

กลับมาที่บทกวีที่เขียนไว้ข้างต้นว่า

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

นิพจน์เหล่านี้มาจากคำศัพท์/ชุดกฎ JavaScript ต่อไปนี้:

 if (...) { ... } // if statement: when ... is met, do things in { ... } { inLove: true, } // an "object" with some info, some thing in the world. // can contain other info, and "skills" (functions). // "inLove" is a custom property, // "true" is pre-defined in javascript, (meaning: "yes") // and the value of "inLove". . // needed to access an objects property "my name: me.name" getDistanceTo() // an expression to "call" a function (a "skill"). // getDistanceTo is custom (not JavaScript), and a function, // so it can be executed / called upon with the "()" after. // sometimes you can pass arguments in those brackets (like "position") // to change the outcome of a function.

 me // an object, some thing in the world you // an object, some thing in the world position // an info about "you", accessed by the "." getDistanceTo // a skill of me, accessed by the "." getDistanceTo() // the skill, with javascript grammar telling: do it. getDistanceTo(position) // same, but do it with "position". setFeelings // another skill of me, accessed by the "." setFeelings({ inLove: true }); // the skill, with some instructions (an object).

 // This is how the definition of a being (me/you) could look like var me = { position: {x: 0, y: 0} // some coordinates, maybe getDistanceTo: function(position) { // calculate the distance, relative to own position }, setFeelings: function(feelings) { // handle those feelings... } } var you = { position: {x: 0, y: 0} // some coordinates, maybe } // the poem itself if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

ตัวอย่างที่ใหญ่กว่า: บทกวีโค้ดเชิงโต้ตอบ

นี่คือวิธีที่โครงการส่วนตัวของฉัน LoveBits เกิดขึ้น LoveBits คือประสบการณ์การเรียนรู้โค้ด/การเล่าเรื่อง

พยายามทำให้ผู้คนสนใจ JavaScript/การเข้ารหัสโดย:

• คำนึงถึงความสามารถในการอ่านและภาษามนุษย์เป็นอันดับแรก
• การรวมโค้ดกับงานศิลปะที่ผู้อ่านอาจคุ้นเคยอยู่แล้ว

เรื่องราวเกี่ยวกับสองบิต (สิ่งมีชีวิตสี่เหลี่ยม); หนึ่งใน Bits (blueBit) เป็นแบบโรแมนติกและเขียนบทกวีรัก JavaScript ไปยัง Bit อื่น ๆ (purpleBit)

เมื่อคุณเริ่ม LoveBits คุณสามารถเลือกบทกวีรักได้หลายบท (เขียนด้วย JavaScript) บทกวีแต่ละบทมีข้อมูลโค้ดซึ่งเขียนในลักษณะที่ผู้ที่ไม่คุ้นเคยกับการเขียนโปรแกรมควรจะเข้าใจ ข้อกำหนดเพียงอย่างเดียวคือภาษาอังกฤษ

ตัวอย่างเช่น “Love at first sight” (หนึ่งในบทกวีของ LoveBits) เป็นเรื่องเกี่ยวกับสอง Bits ซึ่ง blueBit พูดโดยทั่วไปว่า “ถ้าฉันเข้าใกล้ตำแหน่งของคุณมากพอ ฉันจะ 'ตั้งความรู้สึก' เป็น inLove: true ”

สิ่งพิเศษเกี่ยวกับบทกวีเหล่านี้คือ คุณสามารถ "เรียกใช้" หรือ "เล่น" ได้เพียงแค่กดปุ่ม "เล่น" ด้านล่าง ในกรณีของ “รักแรกพบ” คุณจะเห็นสี่เหลี่ยมสีน้ำเงินและสีม่วงพร้อมกับตัวเลข อย่างที่คุณอาจเดาได้แล้ว นั่นคือสอง Bits ที่กล่าวถึงในบทกวี และตัวเลขที่ต่ำกว่า blueBit คือระยะห่างระหว่าง blueBit และ purpleBit

ตามที่บทกวีแนะนำ คุณอาจต้องการทำให้ blueBit ตกหลุมรัก PurpleBit โดยการลดระยะห่างระหว่างพวกเขาใช่ไหม แล้วคุณทำอะไรได้บ้าง? คุณสามารถโต้ตอบและลาก blueBit ไปรอบๆ และทำให้มันตกหลุมรักได้ แต่ระวัง บางครั้งอาจมีมากกว่าหนึ่งผลลัพธ์

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

จะไปจากที่นี่ที่ไหน?

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

นี่คือสิ่งที่ฉันจะแนะนำให้คุณทำต่อไป:

• มักจะชอบดูตัวอย่างและโค้ดสำหรับแอปพลิเคชันทั้งหมดที่รวมกฎ คำศัพท์ และตัวแปรเข้าด้วยกันเพื่อสร้างตรรกะของแอปพลิเคชัน
• ตรรกะของแอปพลิเคชันจะบอกเรื่องราวที่จะช่วยคุณเติมช่องว่างเช่นในตัวอย่างโค้ดด้านบน ไลบรารีโค้ดและยูทิลิตี้ต่างๆ เช่น lodash จะให้คำศัพท์ใหม่ๆ แก่คุณเท่านั้น ซึ่งจะเป็นประโยชน์หลังจากสามารถอ่านและทำความเข้าใจโค้ด JavaScript ได้
• ตรวจสอบโค้ดที่มีอยู่ และพยายามแบ่งออกเป็นฟังก์ชันเล็กๆ พร้อมชื่อที่สะท้อนถึงสิ่งที่พวกเขาทำ เขียนโค้ดที่กล่าวถึงมนุษย์และเครื่องจักร เขียนโค้ดในลักษณะที่สามารถอ่านได้เหมือนประโยค ใช้ความคิดเห็นทุกที่ที่จำเป็น ลองคิดดู: ฉันจะแสดงสิ่งนี้เป็นภาษามนุษย์ได้อย่างไร (ถึงผู้พัฒนารายอื่น)

บทสรุป

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

ข้อความก่อนพื้นฐาน : ทำความเข้าใจข้อความของข้อมูลโค้ด และพื้นฐานของ JavaScript จะตามมาโดยธรรมชาติ กี่ครั้งแล้วที่คุณได้ยินคนพูดว่า “ฉันเข้าใจภาษา แต่ฉันยังพูดไม่ได้”? เป็นกระบวนการทางธรรมชาติ ซึ่งสามารถและน่า จะ นำไปใช้ในการเรียนรู้ทั้งภาษามนุษย์และภาษาเขียนโค้ด

นอกจากนี้ พึงระลึกไว้เสมอว่าโค้ดมีจุดประสงค์ในการใช้งานที่ชัดเจน แต่ก็ไม่จำเป็นต้องเป็นอย่างนั้นเสมอไป แม้แต่ภาษามนุษย์ก็ใช้งานได้จริงเพียงครั้งเดียว แต่แล้วก็มีบทกวีและแม้แต่เพลง (เพลง JavaScript ใคร?) ซึ่งเชื่อมโยงผู้คนในรูปแบบที่แตกต่างกันอย่างสิ้นเชิง ฉันคิดว่าหรือหวังว่าจะสามารถนำไปใช้ที่นี่ได้เช่นกัน

สำรวจโครงการโค้ดอยู่เสมอ และอาจลองเขียนบทกวีด้วยตัวเอง (อาจถึงแม้จะเป็นภาษาโปรแกรมอื่นที่คุณคุ้นเคย) ฉันสนุกกับการสร้างโปรเจ็กต์ LoveBits และอยากเห็นไอเดียของคุณในความคิดเห็นด้านล่าง!

อ่านเพิ่มเติม

• “ถ้าเฮมิงเวย์เขียนจาวาสคริปต์” แองกัส ครอลล์
  นี่เป็นหนึ่งในหนังสือเล่มโปรดของฉันที่ฉันสะดุดหลังจาก LoveBits เป็นเรื่องเกี่ยวกับกวีและศิลปินที่มีชื่อเสียงหลายคน และพวกเขาจะเขียนโค้ด JavaScript ได้อย่างไร มันเฮฮา!