Elm0.18で簡単なの作ったのでThe Elm Architectureをざっくり説明する

  • 21
    いいね
  • 0
    コメント

Elm Advent Calendar 5日目の記事です

この記事

タイトル通り
日本語で解説読みたい、緩い感じの説明読みたい人用
型とコードはある程度読めるのを想定

作ったもの

random-color-palette

説明

  • Rollボタンで色が変わります
  • 色タイルを押すと固定され変わらなくなります
  • 固定された色タイルは左上に集まっていきます
  • 右下にあるのは0.18の新機能のdebuggerです

なんで作ったの?

手を動かして何かを作る練習用に簡単なものを作りたかった
ついでに0.18きたので0.18で

The Elm Architecture

TEAと呼ばれたりする
フレームワークレベルの概念で、現在はElmのcoreに組み込まれている
Elmのアプリはこのアーキテクチャを使って書かれる
TEAのドキュメント

Signalはなくなった

0.17でElmからSignalはなくなりました。
TEAは前、Signalを使って実装されていたが、今は使われていません。
個人的には前よりすっきりしてわかりやすくなったと思います。

一枚岩のState

Elmのアプリケーションは1つのStateからできています。

Model.elm
type alias Fixed = Bool

type alias Model =
  { colors : List (Color, Fixed)
  }

アプリケーション全体で管理する状態は、このModelだけです
レコードにModelという別名をつけています
ColorとBoolのタプルのリストだけの簡単なModelですね

updateでModelの変更を定義

このModelを自分で新しい状態に更新することはありません。
代わりに更新関数作って渡します

type Msg
  = New (List Color)
  | Roll
  | ToggleFixed Int
  | NoOp


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Roll ->
      ..

    New colors ->
      ...

    ToggleFixed index ->
      ...

    NoOp ->
      ...

Msgとupdateを定義します.
Msgは前はActionと定義されていました。決まりはないので好きな名前で大丈夫です。
アプリの処理系にメッセージを投げて更新してもらうイメージで書いてます。
Msgと今のModelを投げて新しいModelを返す感じですね

状態は変化する値なので[model0 model1 model2 model3...]みたいな感じで表現できるぜってことです

viewで表示

view : Model -> Html Msg
view model =
  div
    [ style
      [ "display" => "flex"
      , "flex-wrap" => "wrap"
      , "width" => "500px"
      ]
    ]
    <| rollButton :: viewColors model.colors

Modelを引数にしてHtmlを返します
viewは関数ってやつですね。現在のModelが渡されます

デザインをいい感じにできると嬉しいんですけど、とりあえずflexboxを使って整列させたりしてます

Html Msgってなんだ

Html MsgはMsgを送ることのあるHtmlの型って意味です
どこにいつ送るかっていうと、clickイベントのときなどにMsgを処理系に送ります
つまり送られたMsgはupdateで処理します

SignalがあったときはMailBoxがあったりでよくわからなかったりしたんですけど、シンプルになったかなって思います

全体

Colors.elm
main : Program Never Model Msg
main = program
  { init = init 50
  , update = update 
  , view = view 
  , subscriptions = subscriptions
  }

今まで説明したものをprogram関数に渡してmainにしたらアプリが動きます
initとsubscriptionsは説明していませんが。

まとめ・雑感

Signalのときは、mailBoxを自分でハンドリングしていたので、理解できるまでつらい感じがありました
今は全部、処理系?にぶん投げているイメージでやっているので、自分でやらなくていいので楽です

バージョンが上がって前よりエラーメッセージがわかりやすくなっていてElmほんとすごいってなるのでおすすめです
前はtype aliasした型は元の型で表示されていたんですが、alias後の型で表示されるようになったりして(なってるよね?)わかりやすいです。

みんなもElmやろう

Advent Calendar、金曜も担当してます

この投稿は Elm Advent Calendar 20165日目の記事です。