บทความ IT เจ๋งๆ

Leonardo Carreiro ผู้เขียนบทความนี้ กล่าวถึง สิ่งสำคัญที่สุดในการเขียน Program คือ Source Code ของคุณควรอ่านง่าย ซึ่งมันมีปัจจัยเกี่ยวข้องหลายอย่างจาก Syntax ของภาษา Programming ไปจนถึง ชื่อตัวแปร, Comments และ การจัดย่อหน้า เรามาดูสาเหตุกันว่า ทำไมควรจัดย่อหน้า ตอนเขียน Code กันครับ

ลองมาดู 4 ตัวอย่างของการใช้การจัดย่อหน้าใน Code ว่ามันดีและมีประโยชน์ในเรื่องใดบ้าง

ตัวอย่างที่ 1

ลองดูตัวอย่าง Code นี้

คุณจะเห็นว่ามันอ่านยาก ดังนั้น หากคุณจัดมันเสียใหม่ จะทำให้มันอ่านง่ายขึ้นไหม ดังรูป

นี่คือ จาก 7 บรรทัด กลายเป็น 40 บรรทัด ซึ่งมันมีแค่ 3-4 Properties ต่อ Object เท่านั้นเอง ตาถ้ามันมีสัก 8 Properties ล่ะ พอจัดแล้วมันจะไม่ปาเข้าไป 70 บรรทัดเลยเหรอ ซึ่งในรูปด้านล่างคือ ไอเดียที่ Leonardo กำลังกล่าวถึงอยู่คือ การจัดย่อหน้าเป็นคอลัมน์

ตัวอย่างที่ 2

ไม่ใช่เฉพาะสำหรับแค่ Object เท่านั้น มันสามารถใช้ได้กับส่วนของ Code ใดๆ ที่เป็นกลุ่มของบรรทัดที่คล้ายๆ กันได้ ซึ่งกระบวนการนี้สามารถทำได้อย่างรวดเร็ว โดยคุณสามารถคัดลอกบรรทัดแรกวางและเขียน Code โดยเปลี่ยนบางส่วนของแต่ละบรรทัดได้ และมันสามารถใช้ในการ JS import ได้ด้วย อยากให้ลองเปรียบเทียบทั้ง 2 version นี้ดู:

คุณจะเห็นว่าทั้ง 13 บรรทัด เป็น Code ที่เรียงตามกลุ่มของ Path คือ vs/base 5 บรรทัด และ vs/platform 8 บรรทัด ซึ่งแน่นอนว่า แม้คุณจะไม่ต้องกวาดตาไป-มามากนัก แต่มันก็ทำให้ดูยุ่งเหยิง ติดเป็นพืดไปหมด จาก Code เป็นการ Import ไฟล์ ซึ่งโดยทั่วไปคุณอาจจะไม่ต้องดูมันมากนัก แต่หากคุณต้องการเช็คว่าไฟล์ที่ Import มานั้นถูกต้องไหม หรือไฟล์นั้นถูก Import หรือยัง แต่เมื่อคุณนำมันมาจัด การจัดย่อหน้าเป็นคอลัมน์ มันจะหน้าตาเป็นแบบด้านล่าง

มันดูง่ายขึ้นกว่าเดิมไหมล่ะ

ตัวอย่างที่ 3

จากตัวอย่างด้านล่างเป็นการ Declaration Method จาก TypeScript compiler

และแน่นอนว่า คุณจะเห็นความแตกต่างระหว่างรูปทั้ง 2 โดยแม้ทั้ง 2 รูปจะเห็นครบทั้ง 5 บรรทัดเหมือนกัน แต่รูปล่างจะดูง่ายกว่า และถ้าคุณต้องการเพิ่ม parameter ในแต่ละบรรทัด คุณสามารถทำได้ในครั้งเดียว โดยใช้ multiline cursor ซึ่งแทบจะใช้ได้ในทุก Code Editor เลย

ตัวอย่างที่ 4

นี่เป็นตัวอย่างสุดท้าย ซึ่งคุณจะสามารถดูความแตกต่างได้เลย

มี Tools ใดบ้างที่ช่วยให้คุณทำแบบนี้ได้

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

เขาใช้ Visual Studio และ Visual Studio Code ดังนั้น เขาจึงพยายามหา extension หรือ plugin ที่ช่วยให้เขาทำสิ่งนี้ได้ แต่เขาก็ไม่พบอะไร จนในเดือนพฤศจิกายนที่ผ่านมา เขาจึงเริ่มสร้าง extension ของตัวเองสำหรับ Visual Studio Code และตั้งชื่อว่า Smart Column Indenter และได้เผยแพร่ version แรกที่ใช้งานได้ออกไปในเดือนเดียวกันนั้นเอง ลองดูตัวอย่างการใช้งานคร่าวๆ

โดยขณะนี้ใช้ได้เฉพาะกับไฟล์ *.ts, *.js และ *.json เท่านั้น และเขาคิดว่ามันน่าจะสามารถใช้กับไฟล์ XML และ HTML ได้ด้วย

เมื่อ Code ถูกเลือกสำหรับจัดย่อหน้าเป็นคอลัมน์ แล้ว Algorithm จะทำงานใน 3 ขั้นตอน ดังนี้

1. Lexical analysis (หรือ tokenization) ใน Code เขาได้ติดตั้ง TypeScript npm package ไว้แบบ dependency และใช้ Compiler API เพื่อเลี่ยงการทำงานซ้ำๆ
2. Execute Longest Common Subsequence (LCS) algorithm ผ่านแต่ละบรรทัดของ Code ตาม Sequence ของ Token นี่เป็นส่วนที่ยาก มี Reference จำนวนมากในอินเทอร์เน็ตพูดคุยเกี่ยวกับ LCS เกี่ยวกับ 2 Sequence ที่เป็น input ซึ่งแก้ไขได้อย่างง่ายดายด้วย Dynamic Programming โดยทั่วไปเรามักต้องการแทรกบรรทัดมากกว่า 2 บรรทัดใน Code ปัญหาเลยกลายเป็นการหา LCS ของ Multiple String นี่คือ NP-hard problem และเนื่องจากเป็นปัญหาทั่วไป เขาจึงสร้าง NPM package ที่แยกออกมาต่างหาก (Multiple LCS) ด้วยการ implementation พื้นฐานเพื่อให้บรรลุในสิ่งนี้ แม้มันไม่ใช่ทางออกที่ดีที่สุดในบางกรณี แต่มันก็ใช้งานได้
3. ทำการ Rewrite Code ให้กับการจัดย่อหน้าเป็นคอลัมน์ของ Token ที่ปรากฏใน LCS และแต่ละ Token ใน LCS ก็จะอยู่ในคอลัมน์ใหม่

สำหรับ Token บางประเภท เช่น String หรือชื่อตัวแปร จะใช้ชื่อของประเภทแทนเนื้อหาใน LCS Algorithm ผลลัพธ์ที่ได้คือ ลำดับย่อยที่ใหญ่ขึ้น

เขาใส่ตรรกะทั้งหมดใน NPM package ที่แยกออกมาต่างหาก (smart-column-indenter) หากคุณต้องการสร้าง extension หรือ plugin แบบนี้สำหรับ IDE อื่นๆ ของ JavaScript คุณสามารถใช้ package นี้ได้

ที่มา:  https://medium.freecodecamp.org/

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

บทความที่เกี่ยวข้อง

• 12 JavaScript VSCode Extensions ที่น่าสนใจ
• สิ่งที่ได้ จากการเรียนรู้ Data Structure มาตลอดทั้งสัปดาห์
• ทำไมถึงควรทำ Test-Driven Development