Elm in Action, chapter 2: Your First Elm Application

• Elm Advent Calendar 2016 - Adventar 3日目
• Elmの勉強の記録
• 今回も読書ノート

読んだ章

• Richard Feldman, Elm in Action MEAP V03, pp.28-54
• the Elm Architectureに則ったサンプルアプリを作り上げる章
• 今回も再読

再読して今回学んだこと

Htmlモジュールの<タグ名> [...] [...]はヘルパー関数

• 例によって分かりやすい図
• Htmlをレンダーするために使われるHtmlモジュール
• node関数がベースになる関数で、div ...とかimg ...という関数がヘルパー関数

node "img" [ src "logo.png" ] []
      img  [ src "logo.png" ] []

• node関数の使いどころ
  • 実はヘルパー関数は全てのhtmlタグについて用意されてない
  • 非推奨タグ<blink>とかは用意されないない
  • ヘルパー関数がないときは、node関数を使う必要がある
• ヘルパー関数の引数は常に２つ
  • <img>は子要素持たないので、img [src '1.png'] []のように空ののリストを渡す
  • 属性も子要素もない<br>は、br [] []になる

the Elm Architectureの説明のしかたについて

• アプリケーションの状態管理を行う、説明はシンプルで分かりやすかった
• elmランタイムもthe Elm Architectureに沿ったアプリ向けに最適化してる
  • the Elm Architecture一択。ここがjsと違う

モジュールの関数の利用の仕方

• qualified style とunqualified styleという言い回しの意味を確認できた
  • みかける表現だが把握してなかった
  • Html.div [...] [...]というモジュール名を残した書き方が、qualified style
  • unqualified styleが、モジュール名を外した書き方 div [...] [...]
• qualifiedかどうかは、... exposing... されてるかどうか

import Html exposing (div, h1, img)

• これは、div, h1, imgだけが、Html.を外して書けるが、h2やspanはHtml.h2...とかかないとダメ

import Html.Attributes exposing (..)

• これだと全てのヘルパー関数がHtml.を外して書ける

基本的にqualified style（モジュール名.関数名）式で書くべきとアドバイスしてる

• filter とか複数のモジュールで同じ名前の関数が普通に使われてるので、どちらを呼び出してるかが曖昧になるため

カンマが前にくるスタイル

view model =
    div [ class "content" ]
        [ h1 [] [ text "Photo Groove" ]
        , div [ id "thumbnails" ]
            [ img [ src "http://elm-in-action.com/1.jpeg" ] []
            , img [ src "http://elm-in-action.com/2.jpeg" ] []
            , img [ src "http://elm-in-action.com/3.jpeg" ] []
            ]
        ]

• elm-formatにかけてしまえば、このスタイルに統一されてしまうので慣れるしかない
• 利点としてリストのメンバー追加とか、修正箇所が最小になるとか、述べてる
  • Evanはこのスタイルをチョイスした理由をforum(elm-discuss)で書いてたきがするがみつられず（見つけたら追記する）

elm makeのオプション

elm-make ./Main.elm --output elm.js

• --output オプションを使用してる
• html側は、この生成されたelm.jsを読み込む

htmlページにビルドされたソースを使う

<div id="elm-area"></div>
<script src="elm.js"></script>
<script>
  Elm.PhotoGroove.embed(document.getElementById("elm-area"));
</script>

• ビルドされたファイル（elmライタイムもバンドル）をロードすると、Elm.PohotoGroove..という形でElmオブジェクトにモジュールセットされる
• Elmオブジェクトにセットされたモジュールに生えた.embed()に「elmアプリを展開させるdomノード」を渡すかたちで、初期化してる
• Elmランタイムに出される指示
  • PhotoGrooveモジュールを開く
  • exposeされてるmainをエントリーポイントとして使う
  • no module, no mainなら、エラー

the Elm ArchitectureのModel, ViewとElmランタイムの関係

elmランタイム

• eventリスナーの登録削除の
• スケジュール（http通信、dom更新）
• stateの保存と管理

このあたりは、Elmのコードはすべてdescriptionであり、実行はelmランタイムに委譲される、と言われたりするので、なるほどと納得した

elmではカリー化がデフォルトである

• List.mapにModelと無名関数を渡す例で説明してる
• the Elm ArchitectureにおけるModelはデータの定義
• カリー化をここでは、部分適用可能な関数、と説明されてる
• Elmはカリー化がデフォルト
• その比較で言えば、jsはタプル化がデフォルト
  • 完全な引数のタプルがexpectされる
• ３つの引数を受ける関数に対して、２つだけ引数を渡した場合
  • 引数を一つ受け取る関数が生成される

viewThumbnail selectedUrl thumbnail =
    img
        [ src (urlPrefix ++ thumbnail.url)
        , classList [ ( "selected", selectedUrl == thumbnail.url ) ]
        , onClick (SelectByUrl thumbnail.url)
        ]
        []

この引数２つ受け取って、<img>（に相当するデータ）を返す関数 viewThumbnail をリストmodel.photosの目メンバーに順番に適用させるコードとして

List.map (\photo -> viewThumbnail model.selectedUrl photo) model.photos

が最初に紹介され、これをリファクタできるとして

List.map (viewThumbnail model.selectedUrl) model.photos

のように書き直しされる。(viewThumbnail model.selectedUrl)部分が、部分適用の例

• elmの関数呼び出しは引数をスペースで区切って並べる
• viewThumbnail model.selectedUrlでは、本来２つの引数を受け取る関数viewThumbnailが引数１つしか受け取っていない
  • その結果、(viewThumbnail model.selectedUrl)は評価されると、引数１つを受け取る関数を得る

(\photo -> viewThumbnail model.selectedUrl photo)

が

(viewThumbnail model.selectedUrl)

と書き直すことができるのは、省略記法とかではなく、部分関数を部分適用してるだけ

• jsでカリー化しようとすると、関数を返す関数、を返す関数、・・・と実装を変形しないといけないところ
• elmだと全くそういう操作なく、関数の部分適用ができる。
  • なので、「デフォルトでカリー化されてる」（curried by default)とか呼ばれたりする