全部試しました

明らかに使わないものを除いて、全部試してみました
HTMLの機能ズラーッっと並んでるのでよければoutput見てみてほしい
ellie-app.com

この記事を読む前に　言っておくッ！　おれは今　Elmを　ほんのちょっぴりだが　勉強した
い…いや…　勉強したというよりは　出来る人に　教わっていただけだが……
あ…ありのまま今　起こった事を話すぜ！
「おれは　Htmlモジュールの勉強をしていたと
思ったら　いつのまにかHTMLの勉強をしていた」
な…　何を言っているのか　わからねーと思うが
おれも　何をしているのか　わからなかった…
頭がどうにかなりそうだった…　Elmだとかモジュールだとか
そんなチャチなもんじゃあ　断じてねえ
もっと恐ろしいものの片鱗を　味わったぜ…
f:id:nekorollykk:20200822043246p:plain

覚えたこと

Htmlモジュールの記法

だいたいこれ
タグ名 [タグの属性] [タグの要素]

<div name="hoge">
  <p>text</p>
</div>

これを作りたかったらこう書く

view : Model -> Html Msg
view model =
    div [ name "hoge" ]
      [ p [] [ text "text" ] ]

最初混乱したけど、慣れたらスラスラ書けるようになった
全てを制覇した今、この構文は目を瞑っても書けるであろう

Html.Attributesに存在しない属性

objectのdata属性とoptgroupの`label｀属性がなかったのでこうやって対応した

, object
    [ attribute "data" "https://~~"
    , width 500
    , height 300
    ]
    []
, select []
    [ optgroup [ attribute "label" "animals" ]
        [ option [] [ text "dog" ]
        , option [] [ text "cat" ]
        , option [] [ text "crocodile" ]
        ]
    ]
]

dataに限らずdata-属性どうするんだろう？と思って調べたら出てきた
stackoverflow.com

モジュール内の名前がかぶった場合

-- 良くないと思うけど全部インポートしたいので(..)した
import Html.Attributes exposing (..)

progress
    [ value "80"
    , max "100"
    ]
    []

以下のエラーが出た

mbiguous name
This usage of `max` is ambiguous:

243|             , max "100"
                   ^^^
This name is exposed by 2 of your imports, so I am not sure which one to use:

    Basics.max
    Html.Attributes.max

I recommend using qualified names for imported values. I also recommend having
at most one `exposing (..)` per file to make name clashes like this less common
in the long run.

Note: Check out <https://elm-lang.org/0.19.1/imports> for more info on the
import syntax.

意訳

Basics.maxとHtml.Attributes.maxがぶつかってて  
Elmはどっちを使っていいかわからないよ、助けて＞＜；

どうやらimport方法には色々あるらしい
uehaj.hatenablog.com

とりあえず今回は使う側で完全修飾名(?)で対応することにした

import Html.Attributes exposing (..)

progress
    [ value "80"
    , Html.Attributes.max "100"
    ]
    []

間違っている気もするので、調べて適切なやり方を覚える予定

typeとtype_

, input
    [ type_ "search"
    , list "input-list"
    ]
    []

特に何も考えずinput typeのtypeを決めようとしたらエラーが出た

unfinished list
I am partway through parsing a list, but I got stuck here:

169|                     [ type "search"
                           ^
I was expecting to see a closing square bracket before this, so try adding a ]
and see if that helps?

Note: When I get stuck like this, it usually means that there is a missing
parenthesis or bracket somewhere earlier. It could also be a stray keyword or
operator.

意訳

閉じ]ないからつけてみて！
で、その結果うまく行ったか確認してみて！

こういう時大体はカッコがない、キーワードか演算子間違ってるだよん

実はtypeではなくtype_だった
Html.Attributes - html 1.0.0
言われてみれば納得
Elmの型定義typeと被るから分けてるのかな

出力したHTMLの解説とか面白さとか

Elm要素薄いので折りたたみ

pre

, pre [] [ text """
    5pb. x Nitroplus
    There is no end though there is a start in space. ---Infinity.
    It has own power, it ruins, and it goes though there is a start also in the star. ---Finite.
    Only the person who was wisdom can read the most foolish one from the history.
    The fish that lives in the sea doesn't know the world in the land. It also ruins and goes if they have wisdom.
    It is funnier that man exceeds the speed of light than fish start living in the land.
    It can be said that this is an final ultimatum from the god to the people who can fight.
      ,, ,,
    ヽ(*ﾟдﾟ)ノ ＜ ｶｲﾊﾞｰ
    """ ]

整形されたテキストをそのまま貼れるpreタグ
長くて整形されてて…って思いついたのは
Steins;Gateのスカイクラッドの観測者の映像の文章でした
https://www.youtube.com/watch?v=i-uyoAHzRUY さらに整形といえばAAなのでそのまま貼り付けて実験してみた

ol li

[ text "APPENDE A HACER SUSHI"
, ol []
    [ li [] [ text "Ingredients: Seaweed, Smoked salmon, Rice, Soy sauce" ]
    , li [] [ text "First, roll the salmon in rice. Then..." ]
    , li [] [ text "Holy shit, you ruined everything. Like everything you do" ]
    , li [] [ text "This sushi is like your life" ]
    , li [] [ text "※Begining a lot of things, left undone" ]
    , li [] [ text "And nobody loves you." ]
    ]
]

順番があるテキストを定義するol``liタグ
順番があるテキスト…で思いついたのは
手巻き寿司作るmemeでした
誰もお前を愛さない (だれもおまえをあいさない)とは【ピクシブ百科事典】

iframe

, iframe [ src "https://www.google.com/" ] []

初めてHTML触った時ぶりに触った
まだ生きてたのか

form周り

, Html.form []
    [ fieldset []
        [ legend [] [ text "legend" ]
        , input
            [ type_ "text"
            , placeholder "placeholder text"
            ]
            []
        , button [] [ text "form button" ]
        , input [ id "form-input" ] []
        , label [ for "form-input" ] [ text "form-input-label" ]
        , input
            [ type_ "search"
            , list "input-list"
            ]
            []
        , datalist [ id "input-list" ]
            [ option [ value "seach-a" ] []
            , option [ value "seach-b" ] []
            , option [ value "seach-c" ] []
            ]
        , select []
            [ optgroup [ attribute "label" "animals" ]
                [ option [] [ text "dog" ]
                , option [] [ text "cat" ]
                , option [] [ text "crocodile" ]
                ]
            ]
        ]
    ]

f:id:nekorollykk:20200822051345p:plain
そういえばfieldset全然使ったことなかったので触ってみた

fieldset

formの入力項目をグループ化するのに使うらしい
使わなくても動いたけど、SEO?的には意識したほうがいいのかな

legend

fieldset内のグループに名前つけるやつ
なんでlegendなんだろうってずっと思ってる

datalist

, input
    [ type_ "search"
    , list "input-list"
    ]
    []
, datalist [ id "input-list" ]
    [ option [ value "seach-a" ] []
    , option [ value "seach-b" ] []
    , option [ value "seach-c" ] []
    ]

input要素の入力候補をdatalistとlistで定義できるの初めて知った
しかも選択できる
jsライブラリでこれを更に絞り込めるやつがあった気がする

optgroup

, select []
    [ optgroup [ attribute "label" "animals" ]
        [ option [] [ text "dog" ]
        , option [] [ text "cat" ]
        , option [] [ text "crocodile" ]
        ]
    ]
]

optionリストをグループ化出来る
これ関数使ってListから出力する時、意識して出せたらカッコいいよね

ouput

[ Html.form []
    [ p [] [ text "add number (ugokanai)" ]
    , input
        [ name "a"
        , id "a"
        , type_ "number"
        ]
        [ text "+" ]
    , input
        [ name "b"
        , id "b"
        , type_ "number"
        ]
        [ text "=" ]
    , output
        [ name "o"
        , id "o"
        , for "a b"
        ]
        []
    ]
]

output要素にjsの結果を出力できるらしい
とりあえず覚えるために土台だけ定義した

main

, main_ []
    [ article []
        [ header [] [ text "header" ]
        , nav []
            [ ul []
                [ li [] [ text "nav 1" ]
                , li [] [ text "nav 2" ]
                , li [] [ text "nav 3" ]
                ]
            ]
        , section [] [ h1 [] [ text "section" ] ]
        , section []
            [ h1 [] [ text "section-h1" ]
            , p [] [ text "section paragraph-1" ]
            , p [] [ text "section paragraph-2" ]
            ]
        , footer [] [ text "footer" ]
        , address [] [ text "https://twitter.com/nek0roll" ]
        ]
    ]

全く意識してなかったけど、丁寧な文章構造作るなら必須だなと思った

progress mater

, progress
    [ value "80"
    , Html.Attributes.max "100"
    ]
    []
, p [] [ text "meter" ]
, meter
    [ value "80"
    , Html.Attributes.max "100"
    ]
    []

f:id:nekorollykk:20200822052833p:plain
範囲と現在地設定するだけでバーが出るの凄すぎる
css-animationとかupdate(?)組み合わせて、データん変動に合わせて増えたらすごいカッコいいと思う

video embed object

, p [] [ text "steins;gate op fatima ※音が出ます" ]
, video [ controls True ] [ source [ src "https://animethemes.moe/video/SteinsGateZero-OP1.webm" ] [] ]
, p [] [ text "embed gif" ]
, embed
    [ src "https://64.media.tumblr.com/1d471b04f2f2def1e78c389214d72228/tumblr_ornzk3fWxw1wn2b96o1_500.gifv"
    , width 500
    , height 300
    ]
    []
, p [] [ text "object gif" ]
, object
    [ attribute "data" "https://64.media.tumblr.com/b8eabb3c49077329ec20b042d24524ee/tumblr_pe0dsl4f1W1vmzfszo1_500.gifv"
    , width 500
    , height 300
    ]
    []

webmとgif埋め込んだだけで表示された
control属性がすごくてTrue渡すだけで操作パネルが出た
動画を埋め込む場合ベストな選択肢だと思う
svg(?)css-animationあたりをこれに埋め込んだらどうなるのか気になるところ

まとめ

脳が適応してviewの構造読みやすくなった
おまけでjsにHTMLタグ書くの何か嫌だアレルギーが治った
意図せずHTMLを学び直す機会になった
適切な文章構造って難しいネ
HTMLを直書きするよりElmから出力したほうが良い
- 文章構造が適切になる
- (学習進めたら)もっと効率よく吐き出せそう
- DOM意識しなくていいっていいよね
記法と困ったときの対応法を覚えた
公式Github覗いたり似たような書き方調べたり

今後

attributeも見てみる
Html.Attributes - html 1.0.0
cssも見てみる
ライブラリとかあるのかな？
そこの選定か、ライブラリ無しでやってみるかは要検討
css-animationも触ってみたい(動かしたい)
moduleの適切なimport方法
まだ単にHTMLゴリゴリしただけなので、関数からHTML吐き出したい
Listからtable吐き出したりしたい

わにろぐ

Elm/Html/1.0.0全部試した