タイトルは煽りです申し訳ありません

要約

再掲

view : Element msg
view =
    row [ width fill, height fill, spacing 16, explain Debug.todo ]
        [ el [ centerX ] <| text "hello"
        , el [ centerX ] <|text "world"
        , el [ centerX ] <|text "🐐🐐🐐🐐🐐"
        ]

explain Debug.todoをattributeに追加するとその要素と子要素にボーダーがついてUIデバッグするのに便利だよ

内容は以上です。以下あまり情報はないので気を付けてください

「elm-ui使ってdom見てみたらいっぱいdivがいるんですけど！」

elm-uiはHTMLとCSSの歴史を隠蔽し、平和と秩序をもたらしたUIフレームワークです。
といってもHTMLとCSSで構成されていることに変わりはないしelm-uiの気持ちを全て察することなどできません

そのうちなんかうまくいかなくてdevtool開いてdomの構造みることになります。しょうがない
elm-uiは書いてるElementと実際のdomに差が出るので慣れないとどれが自分で書いたelか、それとも暗黙的に生成されたものかわかりません。

ということで最初はexplain Debug.todoしましょう！

使い方

    row [ width fill, height fill, spacing 16, explain Debug.todo ]
        [ text "hello"
        , text "world"
        ]

explain Debug.todoを見たい要素のattributesに追加するだけ。

「Debug.todoってどういうこと？どういう仕組み？」

枠線だすだけでなんでDebug.todoなんて出てくるかというと、Debugモジュールを使っていると--optimizeつけてcompileできなくなるからなんです

つまりpublishやリリースビルド時にexplainが混ざらないことが保証されています

仕組み

explainの型にはTodo -> Attribute msgとあります

Element.elm

type alias Todo =
    String -> Never

この型はDebug.todoのaliasと書いてあります

Debug.elm

todo : String -> a
todo =
  Elm.Kernel.Debug.todo

この型変数aはどの型にもなれます。だからtodoは任意の位置に書けるわけですね

さて型TodoですがString -> NeverなのでString -> aのtodoで満たせますね。
このNeverですが要するに値を生成できない型です。つまりString -> Neverという関数の実装は絶対に書けないわけですね。なのでexplainの引数にはDebug.todoしか置けないということになります

まとめ

explain Debug.todoの説明をしましたがNeverの使い方すごくないですか。そう使うんだーって感じです

次は多分padding, spacingについて適当に書く気がします

要素の検証はもういらない！？elm-uiで簡単UIデバッグ！

要約

「elm-ui使ってdom見てみたらいっぱいdivがいるんですけど！」

使い方

「Debug.todoってどういうこと？どういう仕組み？」

仕組み

まとめ