タイトルは煽りです申し訳ありません
要約
再掲
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とあります
type alias Todo =
String -> Never
この型はDebug.todoのaliasと書いてあります
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について適当に書く気がします