Elm Reactor
Elm Reactor はインタラクティブな開発ツールです。Elm Platform に含まれています。
Elm Reactor により起動させた HTTP サーバーを通じて Elm で書いたプログラムを実行することにします。
別の方法として、トランスパイラーの elm-make を手動で実行して JavaScript に変換した上でブラウザーで実行する方法が挙げられます。
Elm に取り組む動機
Cycle.js (RxJS) や Redux の開発者やユーザーのあいだで Elm アーキテクチャ (日本語訳) が定期的に話題として触れられることから、Elm アーキテクチャに興味をもつようになりました。Android や Swift でも Elm アーキテクチャを実現するための取り組みがなされています。
Elm アーキテクチャを学ぶことで今後の仮想 DOM を前提としたライブラリやフレームワークの進化の方向性を占うのに役立つのではないかという期待をしています。
Elm の日本語チュートリアルは少ないですが、Haskell を学んでいればコードを読むことができるでしょう。私は以前「すごいHaskellたのしく学ぼう!」を読んでちょっとしたコードを書く練習を続けていました。
Elm に取り組む別の動機はドメイン駆動設計の練習として抽象型データを定義するコードを書く機会を増やしたいことです (ドメイン駆動設計 基本を理解する)。
Web API をもとにした SPA (Single Page Application) の開発に移行することで、従来はサーバーサイドが担っていた Model と View の責務がクライアントサイド JavaScript に移ってきているので、TypeScript や Flow などの型システムに対応しながら、Model の開発の方法論を学んでゆくことを今後の課題として考えています。
Elm Platform の導入
npm コマンドで Elm のコマンドツール一式を導入します。
npm install -g elm
プロジェクトをセットアップする
elm-make コマンドでプロジェクトをセットアップします。
mkdir elm-project
cd elm-project
elm-make --yes
パッケージを導入する
elm-package でパッケージを導入します。今回は elm-lang/html を導入します。
elm-package install elm-lang/html --yes
0.17 以前は evancz/elm-html でした。
コードを書く
import Html exposing (text)
main = text "Hello, World!"
HTTP サーバーを起動させる
HTTP サーバーを起動させましょう。オプションでポート番号を指定します。
elm-reactor --port 3000
ブラウザーで localhost:3000/Hello.elm にアクセスしてプログラムが動くのかを確認します。
elm-make でトランスパイルする
今度は elm-make を実行してトランスパイルしてみましょう。
elm-make Hello.elm
生成された index.html にブラウザーでアクセスしてプログラムが動くか確認しましょう。
プログラムをリファクタリングする
Elm アーキテクチャを学ぶことを想定して、プログラムをリファクタリングしてみましょう。こちらのチュートリアルを参考にさせてもらいました。
import Html exposing (..)
main : Html
main =
h1 [] [ text "Hello World" ]
今度は view 関数を定義してみよう。
import Html exposing (..)
view : String -> Html
view message =
h1 [] [ text message ]
main : Html
main =
view "Hello World!"
次に取り組むことは？
Elm アーキテクチャを挙げます。コードの例を試すために start-app パッケージを導入します。
elm-package install evancz/start-app --yes