今日覚えること

Element msgからHtml msgに変換する方法

layout : List (Attribute msg) -> Element msg -> Html msg

import Element exposing (..)
main = layout [] <| column [] [ text "Hello, elm-ui" ]

はじめに

elm-uiは新時代のすーぱーUIレイアウトライブラリなんですが初めてElmやっていきなりelm-uiやろうっていっても全然わかんないですよね

なので今日は0からはじめようと思います

Html msg型は触ったことありますよね？
elm-uiではHtml msgの代わりにElement msgという独自の型が使われます

Element msgはHTMLに逐語訳のように単純に変換されるわけではなく、styleタグが生えたり、うまくレイアウトされるようにdivを何個も重ねられたりします
HTMLとCSSをうまく抽象化（？）できてるところがelm-uiのいいところです

Browser.elementなどが受け入れるのはHtml msgだけなので必然変換しなければなりません

import Element exposing (..)

view : Model -> Html msg
view model =
    layout [] <| column [] [ text model.message ]

layout関数を使えば変換できます。特に解説することはありませんが型でも眺めてふんふんしましょう

layout : List (Attribute msg) -> Element msg -> Html msg

実はもう一つ変換する関数があります
packageサイトで-> Htmlとページ内検索してみましょう。（Html型に変換する関数なので当然型には-> Htmlが含まれるはずです）

layoutWith :
    { options : List Option }
    -> List (Attribute msg)
    -> Element msg
    -> Html msg

こっちはちょっと難しいですね。でも別に使わなくてもいいので特に解説なんてしないです。なんかオプションがつけられるんだなってことだけ覚えて帰ってください

layoutで変換できますからね。やってみましょう