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

コンパイラかく語りき

import { Fun } from 'programming'

Elm-Architecture入門(4)

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

 

chuckwebtips.hatenablog.com

 

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

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

github.com

 

カウンターモジュール

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

 

カウンターリスト

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

 

モデル

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

gist569a849e7ef00032e65e2bb5dd286c2f

 

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

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

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

 

アクション

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

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

gistf0f985028d15d09b3edb2f4bc8fae194

 

作成

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

gistcda856b6ee73b5f31793f6390f49c736

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

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

 

削除

gist98b684db8a567ccf7d312e24a15db487

削除はシンプルですね。

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

 

修正

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

gist9b806528b851836478f6344dbc795456

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

 

ビュー

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

gistccd2d22185023f8c0cc5222ce7c00e60

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

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

 

DEMO

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

 

写経

github.com