Elm Advent Calendar 5日目の記事です
この記事
タイトル通り
日本語で解説読みたい、緩い感じの説明読みたい人用
型とコードはある程度読めるのを想定
作ったもの
説明
- 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からできています。
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があったりでよくわからなかったりしたんですけど、シンプルになったかなって思います
全体
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、金曜も担当してます