Edited at

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

elm-ui

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


要約

explainのdocument

再掲

Ellie

image.png

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


Element.elm

type alias Todo =

String -> Never

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

Debug.elm


Debug.elm

todo : String -> a

todo =
Elm.Kernel.Debug.todo

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

さて型TodoですがString -> NeverなのでString -> atodoで満たせますね。

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


まとめ

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

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