タプルの書き方をサクッと変える

(=>) = (,)

ElmのMLのとあるスレで貼られてたコードが初見で意味がわからず、なかなかググりにくい代物だった

• Struggling with Signals - Google グループ
• command_event2.elm

こんな感じ

-- VIEW

(=>) = (,)　-- こいつがわからん


view : Signal.Address Command -> Model -> Html
view address model =
  div [ style [ "width" => "200px" ] ]
    [ h2 [headerStyle] [text model.topic]
    , div [imgStyle model.gifUrl] []
    , button [ onClick address RequestMore ] [ text "More Please!" ]
    , button [ onClick address ChangeSubject ] [ text "ChangeSubject!" ]
    ]


headerStyle : Attribute
headerStyle =
  style
    [ "width" => "200px"
    , "text-align" => "center"
    ]


imgStyle : String -> Attribute
imgStyle url =
  style
    [ "display" => "inline-block"
    , "width" => "200px"
    , "height" => "200px"
    , "background-position" => "center center"
    , "background-size" => "cover"
    , "background-image" => ("url('" ++ url ++ "')")
    ]

少し手元で動かして、成程できた

(=>) = (,)は、タプル（がずらずら続くやつ）を書きやすくしてくれる

普通に書くと

imgStyle url =
  style
    [ ("display", "inline-block")
    , ("width", "200px")
    , ("height", "200px")|-|
    , ("background-position", "center center")
    , ("background-size", "cover")
    , ("background-image", ("url('" ++ url ++ "')"))
    ]

となる所を

imgStyle url =
  style
    [ "display" => "inline-block"
    , "width" => "200px"
    , "height" => "200px"
    , "background-position" => "center center"
    , "background-size" => "cover"
    , "background-image" => ("url('" ++ url ++ "')")
    ]

と書けるようになる。

• before:　("display", "inline-block")

• after: "display" => "inline-block"

• 丸括弧とカンマを毎回うつのがだるい人にはいいかも

• 自分としてはすぐに飛びつかなさそうだが、ちょいちょい試してみたい

これだけでなんでこんな風に書ける？

一通り把握してみると、マジックとかでなく、すごいシンプルな話だった

• ("display", "inline-block")
  • これがタプルの普通よくみる書きかた
• 実は(,) "display" "inline-block"とも書ける
  • Elm Syntax
  • 関数(,)をつかってタプルを生成してる、ということ
  • こっちがElm本来（？）の書きかた
  • ("hoge","fuga")は別途提供されたショートハンド、という位置付け
• (=>) = (,)はさらに自分でショートハンドを追加してる、と位置付けれる
• さらに、=>を使うと、タプルがメンバーのリストの中でカンマ,はリストのメンバーの区切りとしてのみ使用
  • てことで、()が外せる

次のように１から5のように式を変形できるということか、と理解した

-- 1
[
  ("font-size", "20px")
  ("display", "inline-block")
]

-- 2
[
  (,) "font-size" "20px",
  (,) "display" "inline-block"
]

-- 3 (=>) = (,)　追記後

[
  (=>) "font-size" "20px",
  (=>) "display" "inline-block"
]
--4  (=>) = (,)　追記後
[
  ("font-size" => "20px"),
  ("display" => "inline-block")
]

--5  (=>) = (,)　追記後
[
  "font-size" => "20px",
  "display" => "inline-block"
]

タプルの要素の数が３つなら関数は(,)でなく(,,)になり、４つになれば、...という感じになるので、好みがわかれるだろうけど、これを可能にする仕組みの片鱗に触れることができたよかった