Elm-Architecture入門（４） - コンパイラかく語りき

引き続き、Elm-Architectureのサンプルを見ていきます。

前回は、複数のカウンターを作成しました。

今回は動的なカウンターを作成します。

カウンターモジュール

カウンター自体は前回作成したものを再利用します。便利ですね。

カウンターを複数格納するカウンターリストモジュールを作成します。

まずはモデルを作成します。

ここで、Listを用いました。これは、ユニークなIDをもつカウンターを複数格納できます。

ユニークなIDを持つので、更新のための目印となります。

さらに、nextIDという項目があり、新しいカウンターを作成する際に用いられます。

カウンターに対するアクションとして、作成・削除・更新ができるようにします。

以下が定義するアクション一覧です。

カウンターの新規作成は以下のようになります。

まずは新しいカウンターを作成して、カウンターリストに追加しています。

そして、nextIDを次の作成に備えてインクリメントしています。

削除はシンプルですね。

カウンターリストの最初のカウンターを削除します。

最後に修正アクションです。

全カウンターを走査して、マッチするカウンターを探します。マッチしたら、与えられたアクションを適用します。

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

ここでviewCounterという関数が登場しました。

これはCounterのもつview関数を利用していますが、フォワーディングアドレスというものを与えています。フォワーディングアドレスは、レンダリング時に特定のIDを紐付ける関数です。