บทความนี้เป็นบทความที่จะช่วยให้ทุกคนเข้าใจ Front-End Developer มากขึ้น และหากต้องการที่จะเดินทางในสายนี้ คุณก็จะได้แนวทางสำหรับศึกษาหาความรู้ เพื่อเริ่มต้นการเป็น Front-End Developer ได้อย่างมั่นใจ
เขียนโดย คุณ ธัชริน บูรณกาล
Technical Consultant, MFEC
มารู้จักกันก่อน Front-End Developer ทำอะไรบ้าง?
การทำเว็บไซต์จะแบ่งออกเป็น Front-End กับ ฺBack-End ซึ่งสำหรับฝั่ง Front-End นั้นจะดูแลในส่วนหน้าบ้านที่เป็นหน้าตาของเว็บไซต์ทั้งหมด หลังจากได้รับการดีไซน์มาแล้วก็เป็นหน้าที่ของ Front-End Developer ที่จะควบคุมตำแหน่ง ขนาด สี การเคลื่อนไหว การตอบสนองต่าง ๆ กับ User ซึ่งทำให้ได้ใกล้ชิดหรือรับมือกับ User ได้มากกว่าฝั่งหลังบ้านอย่าง Back-End
Technical Skills ที่จำเป็นต้องมีของ Front-End Developer
สำคัญที่สุดคือ HTML CSS และ Javascript
– HTML : ภาษาพื้นฐานสำหรับแสดงข้อมูลบนเว็บไซต์ไม่ว่าจะเป็นข้อความ ลิงก์ ปุ่ม หรือรูปภาพต่าง ๆ ก็จะมาจากภาษา HTML นี้
– CSS : หรือชื่อเต็ม ๆ ว่า Cascading Style Sheets ใช้เพื่อตกแต่งเว็บไซต์โดยต้องใช้ควบคู่กันกับภาษา HTML เพื่อจัดตำแหน่ง ขนาด และสีสันต่าง ๆ เพื่อให้ได้ดีไซน์ตามที่ต้องการ
– Javascript : ภาษานี้ก็ใช้งานคู่กับ HTML เช่นกัน เราจะใช้เพื่อตอบสนองกับ User อย่างเช่นหลังจากกรอกแบบฟอร์มแล้วให้ Javascipt เช็กว่าเบอร์โทรศัพท์ที่กรอกนั้นถูกต้องตาม format หรือเปล่า
หลังจากที่ศึกษาภาษาเบื้องต้นทั้ง 3 ไปแล้วก็มาถึง JavaScript library ที่เป็นที่นิยมและเป็นที่ต้องการของตลาดในขณะนี้ซึ่งก็คือ React และ Angular
JavaScript library คือตัวช่วยให้เราเขียนและพัฒนาเว็บออกมาได้อย่างรวดเร็วมากขึ้น รวมทั้งสามารถทำให้คนอื่นนำไปพัฒนาต่อหรือทำงานร่วมกันเป็นทีมได้ง่ายขึ้นนั่นเอง
– React : library ที่พัฒนาโดย facebook และเหล่าผู้พัฒนาอิสระ
– Angular : ถูกพัฒนาขึ้นโดย google และเหล่าผู้พัฒนาอิสระอีกเช่นกัน
การทำงานของ JavaScript library ทั้งสองแบบนั้นมีหลักการเดียวกัน คือแบ่งเว็บออกเป็นส่วน ๆ เรียกว่า Component ที่สามารถนำมาประกอบกัน และส่งข้อมูลไปหากันได้ ซึ่งเราสามารถเลือกแล้วศึกษา library ที่สนใจได้เลยครับ นอกเหนือจากนี้ยังมี CSS library ที่จะช่วยให้ตกแต่งได้อย่างรวดเร็วมากขึ้นไปอีกสำหรับ CSS library ที่นิยมกันแนะนำให้ลองศึกษา Bootstrap และ Material UI สองตัวนี้ดู
สุดท้ายสำหรับความรู้ด้านโปรแกรม ถึงจะไม่ได้จำเป็น แต่ถ้าพอมีความรู้สามารถใช้งานโปรแกรมเหล่านี้ได้ ก็จะช่วยงานเราได้เหมือนกันทั้ง Adobe Photoshop, Adobe Illustrator และ Adobe XD
เพราะเราต้องรับไม้ต่อมาจากดีไซเนอร์ หากเราสามารถนำไอคอน โลโก้จากไฟล์ต้นฉบับมาใช้ได้ หรือสามารถตรวจสอบสี ขนาด ระยะห่างต่าง ๆ จากต้นฉบับได้ จะทำให้เราได้เปรียบและสะดวกขึ้นมากเลยทีเดียว