สวัสดีภาษา Elm ด้วย Fizzbuzz

ช่วงนี้ลองศึกษาภาษาโปรแกรมใหม่ ๆ เล่นดูบ้าง หนึ่งในนั้นคือ ภาษา Elm ซึ่งมีความสามารถที่น่าสนใจ เช่น

• JavaScript Interop
• No runtime exception (อันนี้น่าสนใจมาก ๆ)
• Great performance
• Enforced somatic versioning

ดังนั้นลองมาเรียนรู้ภาษา Elm ด้วยแนวทาง TDD กันหน่อยดีกว่า

เริ่มต้นด้วยการติดตั้ง

สามารถทำการติดตั้งง่าย ๆ แต่ละ OS ได้ที่ Install Elm หลังจากที่ติดตั้งแล้ว จะมีชุดคำสั่งให้ใช้ดังนี้

• elm-repl (Read Eval Print Loop)
• elm-reactor
• elm-make
• elm-package

เป้าหมายของการเรียนรู้ ประกอบไปด้วย สร้าง project อย่างไร ? จะพัฒนาระบบด้วยการเขียน Test ทำอย่างไร ?

โดยใช้โจทย์สุด classic คือ FizzBuzz การทดสอบจะใช้ package ชื่อว่า elm-test  เพราะว่า มันสวยและง่ายดี ที่สำคัญชอบรูปแบบการใช้งานนั่นเอง มาเริ่มกันเลย

ขั้นตอนที่ 1 สร้าง project กัน

ในการสร้าง project ด้วยคำสั่ง [gist id="44c5df38006c8f37da1b9996ca96c4ab" file="step01.txt"] ผลที่ได้คือ โครงสร้างของ project เป็นดังรูป แน่นอนว่า มี folder src สำหรับเก็บ production code มี folder tests สำหรับเก็บชุดการทดสอบนั่นเอง โดยจะมีตัวอย่างของชุดการทดสอบให้ด้วย จากนั้นทำการ run test ด้วยคำสั่ง [gist id="44c5df38006c8f37da1b9996ca96c4ab" file="step02.txt"] เพียงเท่านี้เราก็สามารถเริ่มเรียนรู้ การพัฒนาระบบด้วยภาษา Elm กันได้แล้ว ปล. ถ้าสังเกตุจะเห็นว่ามี link สำหรับการเขียน test ให้ด้วยนะ !!

ขั้นตอนที่ 2 มาเขียน test แรกกันดีกว่า

โดยจะทำการสร้างไฟล์ชื่อว่า FizzbuzzSpec.elm ขึ้นมา เขียน test case ได้ดังนี้ [gist id="44c5df38006c8f37da1b9996ca96c4ab" file="test01.elm"] จากนั้นทำการ run test จะได้ผลการทดสอบดังนี้ [gist id="44c5df38006c8f37da1b9996ca96c4ab" file="test01.txt"] คำอธิบาย เกิด error ขึ้นมาเนื่องจากหา variable ชื่อว่า say ใน module ต่าง ๆ ไม่เจอ นั่นคือการบอกว่า เราต้องสร้าง module ที่มี variable ชื่อว่า say ขึ้นมา เพื่อรับค่า 1 เข้าไป จากนั้นทำการ return "1" ออกมา

ขั้นตอนที่ 3 ทำการสร้าง module ใหม่ชื่อว่า Fizzbuzz อยู่ใน folder src

ทำการสร้างไฟล์ชื่อว่า Fizzbuzz.elm ซึ่งจะมี function/method ชื่อว่า say ได้ดังนี้ [gist id="44c5df38006c8f37da1b9996ca96c4ab" file="Fizzbuzz01.elm"]

ขั้นตอนที่ 4 ทำการแก้ไขไฟล์ FizzbuzzSpec.elm ให้เรียกใช้งาน Fizzbuzz module

ด้วยการ import module เข้ามาดังนี้ [gist id="44c5df38006c8f37da1b9996ca96c4ab" file="test02.elm"] จากนั้นทำการทดสอบสิ ได้ผลการทดสอบดังนี้ [gist id="44c5df38006c8f37da1b9996ca96c4ab" file="step03.txt"] ผลการทดสอบคือ fail นั่นเอง เนื่องจากคาดหวังว่าต้องได้ผลลัพธ์คือ 1

ขั้นตอนที่ 5 ทำให้การทดสอบผ่านแบบง่ายสุด ๆ

เขียน code ได้ดังนี้ [gist id="44c5df38006c8f37da1b9996ca96c4ab" file="Fizzbuzz02.elm"] จากนั้นทำการ run test ได้ผลดังนี้ [gist id="44c5df38006c8f37da1b9996ca96c4ab" file="step04.txt"] ผลที่ได้คือผ่านแล้วววววว

ขั้นตอนที่ 6 ทำการสร้าง test case ที่สองคือ 3 จะพูดว่า Fizz

[gist id="44c5df38006c8f37da1b9996ca96c4ab" file="test03.elm"] ผลการทดสอบไม่ผ่านแน่นอน แสดงดังนี้ [gist id="44c5df38006c8f37da1b9996ca96c4ab" file="step05.txt"]

ขั้นตอนที่ 7 มาเขียน code เพื่อให้ test ผ่านกันอีกรอบ

การแก้ไขปัญหามีหลายแบบ แล้วแต่จะเลือก โดยผมเลือกใช้ case expression ดังนี้ [gist id="44c5df38006c8f37da1b9996ca96c4ab" file="Fizzbuzz03.elm"]

ขั้นตอนที่ 8 ทำการเขียน test และเขียน code เพื่อให้ test ผ่านกันต่อไป

นั่นคือ case 5 จะพูดว่า Buzz สามารถเขียน code เพื่อแก้ไขปัญหาได้ดังนี้ [gist id="44c5df38006c8f37da1b9996ca96c4ab" file="Fizzbuzz04.elm"] นั่นคือ case 15 จะพูดว่า FizzBuzz สามารถเขียน code เพื่อแก้ไขปัญหาได้ดังนี้ [gist id="44c5df38006c8f37da1b9996ca96c4ab" file="Fizzbuzz05.elm"] ตัวอย่างของ source code ทั้งหมดอยู่ที่ Github :: Learn Elm

มาถึงตรงนี้ก็พอจะทำให้ผมสามารถเริ่มต้นเรียนรู้ภาษา elm

แบบงู ๆ ปลา ๆ ได้บ้างแล้ว จากนี้ก็ลองไปศึกษาส่วนอื่น ๆ กันต่อไป ขอให้สนุกกับการ coding นะครับ