ElmのclassListが大変便利だと思った

今日やった事

Elm書いた

数日サボりまくっていたので今日はElmを書いた。

本当は、何か実用的なものを作りたいと思いつつも、何も思いつかないので、年明けから作っているTodoを今日も作っていた。

github.com

Todoの完了状態に応じてclassを当てるのに、Html.AttributesのclassListというのが便利だと感じた。

        todoItem : Todo -> Html Msg
        todoItem todo =
            li
                [ class "todo"
                , classList
                    [ ( "completed", todo.isCompleted )
                    , ( "high", todo.importance == High )
                    , ( "mid", todo.importance == Mid )
                    , ( "low", todo.importance == Low )
                    ]
                ]
                [ input [ type_ "checkbox", checked todo.isCompleted, onClick (ToggleCompleted todo.id) ] []
                , p [ onClick (ToggleCompleted todo.id) ] [ text todo.title ]
                ]

こんな感じで、クラス名とBoolのタプルのリストを渡すことで、クラスをつけたり外したりしてくれる。超便利じゃん。

今回は、偶然補完でこの関数を発見したので良かったが、知らずに冗長な書き方しているパターンとかもありそうなので、時間のある時にパッケージのドキュメントに目を通してみるといいかも、と思った。

明日の予定 / やること

• Elm
• 武道館
  • でんぱ組3回目の武道館!!!!!楽しみすぎる。

雑談

武道館わくわくするんじゃぁ〜〜〜