11
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Elm3(予備)Advent Calendar 2018

Day 7

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

Last updated at Posted at 2018-12-04

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について適当に書く気がします

11
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?