いわゆるリハビリ。自分用に書いたのですが、公開します。Elmのバージョンは0.17です。

なぜ書いたのか。

ググッて出てくるコードが複雑なものが多く、初心者にとって本当に必要なものを明示したかったから。

なので、0.17から盛り込まれたSubscribeについてはスキップします。

目的

MVCに馴染みのあるくらいのエンジニアが、ひとまずElmの世界にスムーズに移行できるようにする。

ファイル構成

ファイル構成はこんな感じ。

- simple-counter
-- elm-stuff
-- elm-package.json
-- index.html
-- Main.elm

とりあえず、Main.elmさえあればOK。それをindex.htmlにコンパイルします。

環境設定については、Elmに入門する（２）に書かせていただきました。

Main.elm

こちらが書いたコードです。作ったのは、シンプルなカウンタです。 ElmArchitectureのサンプルコードとほとんど同じになってしまいました。

// Main.elm

-- 必要なパッケージのインポート
import Html exposing (Html, button, div, text)
import Html.App as App
import Html.Events exposing (onClick)

-- エントリーポイント的なやつ。
main =
  App.beginnerProgram
    { model = model
    , view = view
    , update = update
    }

-- Model

type alias Model = Int

model : Model
model =
  0

-- Update

type Msg = Increment | Decrement

update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment ->
      model + 1
    Decrement ->
      model - 1

-- View

view : Model -> Html Msg
view model =
  div []
    [ div [][ text (toString model)]
    , button [ onClick Increment ][ text "+"]
    , button [ onClick Decrement ][ text "-"]
    ]

Modelとして数値を持ち、Updateは数値のインクリメントとデクリメントのアクションを持ち、そして、Viewでは数値と、数値操作のボタンを描画します。

Viewでボタンを押されると、Updateが発行されてModelが更新され、Viewが再レンダリングされます。

MVCがそれぞれ、Model, View, Updateのようなものだと考えれば、理解が早まるかもしれません。完全に対応しているわけではありませんが。。

次回は、ここにSubscriptionを盛り込んだコードを書いてみたいと思います。