up:: Programming
same:: Haskell
純粋関数型言語。関数型言語による静的Webページ制作のために作られた。
Elm入門の入門 最初に読むページ Elm - Qiita
ヤギと振り返る恥ずかしいコード — 次のレベルに上がるために Elm - Qiita
できることは少ない。
ただいい書き方を強制し誰が書いてもだいたい同じコードにする。
もっとjsっぽいのがいいならPurescriptだろうか。
The Elm Architecture
ElmがHTMLを作り、HTMLからMsgをElmに送るという構造。
- Elm
- HTMLを作る
- HTML
- MsgをElmに送る
さらにElmの中では、Model・View・Updateの構造がある。
- Model
- アプリの状態
- View
- 状態をHTMLに変換(表示)
- Update
- メッセージを使い状態を更新する
わりといろんなところ(Redux)にもパクられているアーキテクチャ。
学んで損はない。
Elmでの実装
main =
Browser.sandbox { init = init, update = update, view = view }
main
に画面に表示するものをまとめて定義する。
アプリ初期化用のinit関数、
表示用のview関数、
更新・入力受け用のupdate関数をここで渡せばOK。
さっきの説明だとModelは静的データチックだったが、実際はこのように初期化関数という形で関数にしてまとめて渡す。
もちろんModelは別に定義する。変数でなく型エイリアスで。
init
type alias Model = Int
init : Model
init =
0
型エイリアスで表現力UP。
関数に一個だけ値がついてるときは戻り値。
表現力の話をするなら、
Update
-- UPDATE
type Msg = Increment | Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
カスタム型をenumとしてUpdate処理を分けるやつ。
View
elmではhtml要素を関数として持っている。
View関数でこれらを実行することでhtmlを生成する。これはelm-htmlと呼ばれている?
このおかげで型チェックなどが効く。
一応jsxをelm-htmlに書き換えるシンタックスシュガーライブラリがある。