前回まではElm入門と題して、Elmの基本について学びました。
今回からは、Elmの重要概念となるElm architectureについて学びます。
ここからの学習は、以下のレポジトリに沿って行います。
Elm-architectureとは
Elm architectureにおいては、ロジックを３つのパートに分けます。
model, update, viewの３つです。
以下のスケルトンが最小構成となります。
例１ カウンター
ここからは、Elm-architectureを採用した場合の例を見ていきます。例は７つあるので、たぶんこの記事だけでは終わらない気がします。
まず、カンタンなインクリメント・デクリメントができるカウンターを作成します。
パッケージのインストール
まずは必要なパッケージをインストールします。
$ elm-package install evancz/elm-html
$ elm-package install evancz/start-app
１つ１つ指定せずとも、elm-package.jsonの内容をコピペして、
$ elm-package install
すればいいんですけどね。
モデル
まずは、モデルの記述です。elm-architectureのモデルってMVCにおけるMと一致する概念なのでしょうか？気になります。
カウンターにおいては、シンプルに１つの数字だけを保持します。なので、モデルは以下のようになります。
アップデート
モデルの次に、アップデートに関する記述を書きます。
今回は、アップデートも比較的シンプルです。
Actionの記述は単なるアクション一覧です。アクションが新規追加されたら、記述を追加すればいいみたいですね。
１つ目のupdateは型に関する記述で、２つ目のupdateが実際の処理文になります。actionの内容によって、処理を分岐させています。reduxに似てる気がします。というか、Elmに影響を受けたのがreduxなんでしたっけ。
ビュー
最後にビューを書きます。
ビューはモデルの表示です。
ここでは、elm-htmlパッケージを利用して、DOMを生成しています。それぞれ、デクリメントボタン、表示、インクリメントボタンに充てます。
Addressというのがやや厄介ですね。次の例で解説がされるようです。
ここで、DOMを手動で変更しないので、レンダリングが速くなるとか。
参考：http://elm-lang.org/blog/blazing-fast-html
viewは単純な関数なので、elmモジュールシステムやテストフレームワーク、ライブラリをフル活用できるとか。
スタイル
おまけ程度の話ですが、ビューにスタイルを充てます。
プログラムのスタート
さて、今までの記述をまとめると以下のようになります。
１行目で、module Counter whereという記述があります。この記述のおかげで、Counterをモジュール化できます。
Main.elmを作成して、以下のように書きます。
Counterモジュールのupdateとviewを持ってきています。
さらに、StartAppパッケージを使って、初期モデルをupdateとviewにひも付けます。
StartAppはElmのSignalのラッパーらしく、まだそのコンセプトを気にする必要はないらしいです。
アプリケーションのコンセプトとなるのは、Addressのようです。view関数におけるすべてのイベントハンドラは、特定のaddressを差し出すんですね。これにとって、データの塊が送られるらしいです（謎）。
StartAppパッケージは、これらのデータの塊をウォッチして、update関数に伝えます。その結果、modelが更新されて、elm-htmlがレンダリングを行ってくれます。
DEMO
さて、Main.elmをコンパイルします。
$ elm-make Main.elm --output=index.html
次に、ローカルサーバを立ち上げて確認します。
$ elm-reactor
すると以下のとおり。
カウンターが機能しています。
github pagesにDEMOを置きましたので、ご確認ください。
http://chuck0523.github.io/JSPractise/elm/counter/index.html
今回は、elm-architectureの基本部分を学びました。
次回は例２からスタートします。
