読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

Elm-architecture入門(1)

Elm

前回まではElm入門と題して、Elmの基本について学びました。 

chuckwebtips.hatenablog.com

 

今回からは、Elmの重要概念となるElm architectureについて学びます。 

ここからの学習は、以下のレポジトリに沿って行います。

github.com

 

Elm-architectureとは

Elm architectureにおいては、ロジックを3つのパートに分けます。

model, update, viewの3つです。

以下のスケルトンが最小構成となります。

gist6df7830b73af055017c7

 

例1 カウンター

ここからは、Elm-architectureを採用した場合の例を見ていきます。例は7つあるので、たぶんこの記事だけでは終わらない気がします。

まず、カンタンなインクリメント・デクリメントができるカウンターを作成します。

github.com

 

パッケージのインストール

まずは必要なパッケージをインストールします。

$ elm-package install evancz/elm-html

$ elm-package install evancz/start-app

 

1つ1つ指定せずとも、elm-package.jsonの内容をコピペして、

$ elm-package install

すればいいんですけどね。

 

モデル

まずは、モデルの記述です。elm-architectureのモデルってMVCにおけるMと一致する概念なのでしょうか?気になります。

カウンターにおいては、シンプルに1つの数字だけを保持します。なので、モデルは以下のようになります。

gist5a8b783bbd9cb838ad87

 

アップデート

モデルの次に、アップデートに関する記述を書きます。

今回は、アップデートも比較的シンプルです。

gistfce6e38f58c9d6674454

 

Actionの記述は単なるアクション一覧です。アクションが新規追加されたら、記述を追加すればいいみたいですね。

1つ目のupdateは型に関する記述で、2つ目のupdateが実際の処理文になります。actionの内容によって、処理を分岐させています。reduxに似てる気がします。というか、Elmに影響を受けたのがreduxなんでしたっけ。

 

ビュー

最後にビューを書きます。

ビューはモデルの表示です。

gist6c98b1f340cf398d5b67

ここでは、elm-htmlパッケージを利用して、DOMを生成しています。それぞれ、デクリメントボタン、表示、インクリメントボタンに充てます。

 

Addressというのがやや厄介ですね。次の例で解説がされるようです。

ここで、DOMを手動で変更しないので、レンダリングが速くなるとか。

参考:http://elm-lang.org/blog/blazing-fast-html

 

viewは単純な関数なので、elmモジュールシステムやテストフレームワーク、ライブラリをフル活用できるとか。

 

スタイル

おまけ程度の話ですが、ビューにスタイルを充てます。

gistd1c7feceb01dabf73702

 

プログラムのスタート

さて、今までの記述をまとめると以下のようになります。

gist8035aa1e9abed1828c8d

1行目で、module Counter whereという記述があります。この記述のおかげで、Counterをモジュール化できます。

 

Main.elmを作成して、以下のように書きます。

gist24460c90251a9584c3e1

 

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

すると以下のとおり。

f:id:chuck0523:20160328081759p:plain

カウンターが機能しています。

 

github pagesにDEMOを置きましたので、ご確認ください。

http://chuck0523.github.io/JSPractise/elm/counter/index.html

 

今回は、elm-architectureの基本部分を学びました。

次回は例2からスタートします。