JavascriptNode JS

เข้าใจ NodeJS ง่ายๆ สำหรับคนทำเว็บ

เรื่องที่เกี่ยวข้อง - Javascript, Node JS

และ JavaScript ไม่ได้อยู่บนหน้าเว็บอีกต่อไป

รู้จักบทบาทของ JavaScript กันก่อน

ถ้าพูดถึงการทำเว็บไซต์ หรือเว็บแอพ เวลาเราพัฒนาจะเขียนแยกเป็น 2 ฝั่งใช่ไหม? นั่นก็คือฝั่งที่เรียกว่า Client และฝั่งที่เรียกว่า Server

ฝั่ง Client สำหรับเว็บเนี่ย มีภาษาที่ใช้พัฒนาอยู่ 3 ฝั่งใหญ่ๆ นั่นคือ

  1. HTML ใช้วางโครงสร้างของข้อมูล และ UI ต่างๆ
  2. CSS ปรับแต่งหน้าตา, รูปลักษณ์, สีสัน
  3. JavaScript จัดการข้อมูล และเปลี่ยนแปลง 2 ฝ่ายแรกด้านบน ตามที่ต้องการ เช่นคลิกปุ่มแล้วบวกราคาไปในบิล

HTML CSS JavaScript

ซึ่งจะสังเกตว่า ถ้าต้องการให้เว็บไซต์มันรับข้อมูล และมีลูกเล่นได้ ภาษาฝั่ง JavaScript จะรับผิดชอบส่วนนี้ไปเต็มๆ และเป็นภาษาฝั่ง client ที่เรียกได้ว่ายอดนิยมที่สุดตัวหนึ่ง

แรกเริ่ม JavaScript สร้างขึ้นรองรับความต้องการของ Dynamic HTML (ไปศึกษาเพิ่มเติมได้ที่นี่) นั่นคือคนทำเว็บไซต์ไม่พอกับหน้าเว็บนิ่งๆ เหมือนกระดาษแล้ว

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

และ JavaScript ยุคแรกๆ ใครเคยเขียนจะรู้ว่า มันยากโคตรๆ เลย ไม่มีเครื่องมืออะไรมารองรับทั้งนั้น Inspector แบบทุกวันนี้ยังไม่เกิด จะนักพัฒนา JavaScript ยุคแรกๆ จะเห็นเจ้านี่กันจนหลงรักเลยล่ะ

JavaScript Pop UP Error on IE 6
ที่มา – PC World

หลังๆ ก็มีผู้บาดเจ็บล้มตาย ก็คิดว่าทำไมต้องลำบากกับ JavaScript ด้วย ห๊ะ?

ก็พากันคิดค้นแนวคิดใหม่ๆ และสร้าง Framework กับ Library ต่างๆ ขึ้นมา เช่น Angular, TypeScript, React หรือ JQuery ที่ฮิตในเมืองไทยติดบ้านติดเมือง

เรียกได้ว่ามียุคหนึ่ง เขียนเว็บ ต้องเขียน JQuery เป็นกันเลยล่ะ

แต่ตัวที่ปังที่สุด ก็คือ Node หรือ NodeJS ครับ

JavaScript: โค้ดในกรงทอง

JS trapped in Web Browser

กรงที่ว่านี่คือ Web Browser นั่นเองครับ

อย่างที่เราเท้าความกันด้านบน เราเห็นแล้วว่า JavaScript ถูกคิดค้นขึ้นมาเพื่อหน้าที่โดยเฉพาะ นั่นคือการเปลี่ยนแปลงโครงสร้างของ HTML จากภายใน Web Browser เลย ไม่ต้องอาศัยให้ Server ทำงานให้

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

ดังนั้น JavaScript จึงผูกพันแน่นแฟ้นกับ HTML มาก และโปรแกรมที่ทำงานกับ HTML เป็นหลัก ก็คือ Web Browser ที่ทำหน้าที่อ่าน และแสดงผลของ HTML เป็นหน้าตาเว็บนี่เอง

JavaScript จึงมีชีวิตได้เต็มที่ เพราะ Web Browser ทำให้มันมี! 

มันจึงถูกมองว่าเป็นภาษาที่เอาไว้เขียนแค่ Client ของฝั่งเทคโนโลยีเว็บเท่านั้น

แต่แล้ววันหนึ่ง ก็มีคนคิดว่า

เฮ้ย ถ้าเราทำให้ภาษา JavaScript ที่ติดแหงกในกรง มันทำงานนอก Web Browser ได้ล่ะ? มันต้องยอดเยี่ยมมากแน่ๆ

Node: JavaScript แหกคุกสู่โลกกว้าง

Node and JavaScript

ความคิดนั้นจุดประกาย โอกาสที่ว่าภาษา JavaScript จะไม่หยุดอยู่แค่การอัพเดตแก้ไขหน้าตาของ HTML อีกต่อไป แต่มันจะจัดการไฟล์ต่างๆ รวมถึงทำงานได้เหมือนกับภาษารุ่นพี่อย่าง C++, Java, หรือ C#.NET ทำได้

และต้องทำได้ทุกระบบด้วยนะ

เช่นถ้าโค้ดทำงานได้บน Windows ก็ต้องเอาไปรันบนเครื่อง Mac ได้ด้วย

ซึ่งจริงๆ แล้ว แนวคิดนี้มีคนทำได้อยู่ก่อนแล้ว ซึ่งไม่ใช่ใครอื่น พี่ Java ที่บอกว่าตัวเองทำงานข้ามระบบได้ โดยอาศัยสิ่งที่เรียกว่า Runtime นั่นเอง

Runtime คืออะไร?

รัน-ไทม์

อย่าอ่านว่า รุน-ติ-เมะ นะ (ยุคแรกๆ มีอ่านอย่างนี้กันจริงๆ ญี่ปุ๊น ญี่ปุ่นเนอะ)

จะทำความเข้าใจหน้าที่ของ Runtime ง่ายๆ โค้ชพลให้พวกเรานึกตามแบบนี้…

พร้อมนะ?

ระบบต่างๆ อย่าง Windows, OS X, หรือ macOS เนี่ย มันคุมเครื่องคอมทั้งหมดของเราถูกไหม? และกลไกการทำงานมันก็แตกต่างกันด้วย ด้านหน้าที่เราเห็นคล้ายๆ กันแต่เบื้องลึกโค้ดวิ่งแตกต่างกันลิบลับ

เหมือนประเทศกลุ่มหนึ่งไง

ทีนี้ถ้ามีชาวต่างชาติอยากเข้ามาทำงานในประเทศพวกนี้ เช่นซื้อขาย รับจ้าง ตั้งบริษัท แต่มันพูดคนละภาษา มันจะทำงานได้ยังไงล่ะ?

โอเค อาจจะให้ชาวต่างชาติไปนั่งเรียนภาษา เพื่อให้พูดได้เหมือนกับคนท้องถิ่นในประเทศนั้นๆ แต่มันเปลืองเกินไป

ทางออกที่ดีทางหนึ่ง คือ “ล่าม” ครับ

โดยล่ามเนี่ยจะรู้จักการทำงาน การเดินระบบของประเทศนั้นๆ เป็นอย่างดี ดังนั้นแค่ฝรั่งทำงานผ่านล่าม ก็สามารถทำงาน ทำธุรกิจกับประเทศนั้นๆ ได้ทันที

Runtime คือล่ามของเราครับ

โดย Node หรือ NodeJS เนี่ย เป็น Runtime ของ JavaScript ที่มีคนพัฒนาขึ้นมาให้เราใช้กัน

Node Runtime work with OS by JavaScriptนั่นหมายความว่า ถ้ามี Node ติดตั้งในระบบ Windows และ macOS เราก็สามารถใช้ JavaScript ชุดเดียวกันบน 2 ระบบได้นั่นเอง

ทางเทคนิค Node เอาระบบของ Google Chrome มาใช้งาน เพื่อให้แปลภาษา JavaScript และทำตามคำสั่งได้

เก็ทแล้วยัง ง่ายๆ เนอะ

UPDATE ตอนนี้ฝั่ง .NET เขาก็มี “ล่าม .NET” คล้ายๆ กันแล้วนะ ชื่อ .NET Core ใครสนใจสาย C#.NET ติดตามได้ทางแฟนเพจจ้า

โลกกว้างใหม่ของคนทำเว็บ

ดังนั้นนักพัฒนาเว็บหลายๆ คน ที่ทำงานกับ JavaScript อยู่แล้วนี่ เหมือนถูกแจ๊คพอตเลยล่ะ

นั่นคือเราสามารถต่อยอดความรู้เดิมของ JavaScript เพื่อสร้างของใหม่ๆ ได้ เช่น

และมีระบบใหม่ๆ อีกมากที่จะมีมาให้เราใช้งาน เนื่องจากความเปิดกว้างของแนวคิด Open-source นี่เอง

สรุปกันอีกรอบ

  • JavaScript เดิมทีออกแบบมาให้ทำงานกับ HTML มีขอบเขตอยู่ใน Web Browser
  • ผู้คนอยากให้ JavaScript ทำงานนอก Web Browser ได้เพื่อเพิ่มความสามารถของมัน
  • Node เป็น Runtime สำหรับ JavaScript ทำหน้าที่เหมือนล่ามที่ติดตั้งลงไปในระบบต่างๆ แล้ว JavaScript สามารถทำงานได้เหมือนกัน
  • นักพัฒนาเว็บ ที่เป็น JavaScript อยู่แล้ว มีโอกาสทำงานใหม่ๆ ได้มากขึ้น

ขอให้มีความสุขกับการเรียนรู้ NodeJS กันนะ 🙂

เรียนรู้พัฒนาแอพถึงแก่น แบบเข้าใจได้ง่ายๆ

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

  • สร้างแอพพลิเคชั่น iOS และ Android แบบเขียนครั้งเดียวใช้ได้ทั้ง iOS และ Android Application ด้วย
  • สร้างเว็บแอพพลิเคชั่นด้วย MEAN Stack หรือ Meteor
  • สร้าง Desktop แอพพลิเคชั่น ด้วย Electron

หรือจะดูหลักสูตรทั้งหมดได้ที่หน้ารวมคอร์สที่นี่จ้า

เข้าใจเรื่องเทคโนโลยีง่ายๆ แบบนี้ก่อนใคร

  1. ก็กดติดตามช่อง YouTube ของพล
  2. กับติดตามแฟนเพจ Nextflow ได้ที่นี่
  3. หรือจะกดรับแจ้งทางไลน์ที่นี่ก็ได้นะ

เริ่มต้นยุค AI ด้วยคอร์สฟรี และพรีเมี่ยม กับพล

หากชอบสิ่งที่พลเล่า เรื่องที่พลสอน สามารถสนับสนุนพลโดยการเข้าเรียนคอร์สออนไลน์ของพลนะคร้าบ

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

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

Privacy Preferences

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

Allow All
Manage Consent Preferences
  • Always Active

Save