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

コンパイラかく語りき

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

Elm-architecture入門(3)

前回までは、Elm-architecturの基本について学びました。

 

chuckwebtips.hatenablog.com

 

今回はちょっとだけ自分で手を動かしてみます。

 

トリプルカウンター

作成するのは3つのカウンターです。とはいえ、前回2つのカウンターを作ったのでホントにカンタンな応用ですが。

 

パッケージインストール

何はともあれパッケージインストール。既存のelm-packageを転用します。

gist8d214e59a307f515bcf8

 

インストール。

$ elm-package install -y

 

ファイル作成

必要なファイルを作成します。

$ touch Main.elm, Counter.elm, TripleCounter.elm

 

コーディング

ざっくりですみませんが、以下のようなファイルになりました。

 

Counter.elm

gistf70eb2204bc33478fc4f

 

TripleCounter.elm

gist8b6eb2c63f9f92bd1a31

 

Main.elm

gist91c6493224a94e6e3f77

 

ちなみに、コンパイル時にきちんとエラーが出ました。

f:id:chuck0523:20160329091447p:plainコンパイル時にエラーが出るってありがたいことですね…とElmを学んでから思うようになりました。

 

Demo

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

 

書いたコード

github.com