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

コンパイラかく語りき

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

Elm-architecture入門(2)

前回に引き続き、Elm-architectureの例を消化していきます。

 

chuckwebtips.hatenablog.com

 

例2 ペアカウンター

前回は単一のカウンターを作成しましたが、今回はペアのカウンターを作成していきます。

github.com

 

カウンターが2つということは、カウンターをモジュールした方が良さそうですね。

Elmの素晴らしいところは、まったく変更なしにコードを再利用できるところだそうです。

 

機能性を適切に露出させ、実装を隠すのが良いらしいですね。

 

ここで、CounterPairを作成します。

 

モデル

まずはモデルから。

gist8d21d754c7cc68218979

モデルが2つのレコードを持っていますね。

新しいModelを作成する時はいつでも、init関数が必要です。

 

Action

次にActionを作ります。

アクションは「全てのカウンターのリセット、1つ目のカウンターの更新、2つ目のカウンターの更新」の3つになります。

gist072ed2b493b26fc48077

 

ここで、Counter.Actionは、CounterのActionを指しているわけですがこのコードからは詳細はわかりません。

update関数を作った時に、Counter.Actionは適切に配置されます。

 

VIew

最後に、ビューを作成します。

2つのカウンターと、リセットボタンを表示します。

gist503a7163fb1ef9220598

 

ここでも、Counter.viewが再利用されていますね。そこで、forwarding addressというものを作成しています。それぞれのカウンターの違いを明記しているようなもの。だとか。

 

ペアカウンターについては、これでおしまいです。

もちろん、PairCounterをさらに拡張して、PairPairCounterを作ることもできます。

 

ブラウザで確認するとこのとおり。きちんとカウンターが2つできていますね。

f:id:chuck0523:20160329083523p:plain

DEMO

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

 

写経したコードはこちら

github.com