Elmに慣れるために、まずはインタラクティブではないHTMLをElmで書いてみる練習してみた。
HTMLを生成する関数を練習
さっそくHTMLを生成する関数を練習してみる。
私は、最近札幌旅行にいったので、その日記をHTMLとElmで比べながら書いて比較した。
まずHTMLで書く
HTMLのシンタックスでは、次のような構文で入れ子構造を構築する。
<h2 id="sapporo">札幌の美味しいお店</h2>
| 用語 | この例での指定 | 備考 |
|---|---|---|
| 要素(ノードともいう) | h2 |
DOMは、要素によるツリー構造がメモリ上に保持されたもの。 |
| 属性 | id="sapporo" |
要素は0個以上の属性を指定できる。 |
| 子要素 | 札幌の美味しいお店 |
要素は0個以上の子要素を持てる。 |
| テキストノード | 札幌の美味しいお店 |
要素の子要素として、ただの文字列を指定する場合、それはテキストノードとなる。 |
<div>
<h1>札幌旅行に行ってきました。</h1>
<p>夏休みを利用して札幌へ行ってきました。
コロナ禍ともあり他観光客は例年と比べて1/10の人の少なさ！
東京と大阪の友達と札幌で現地集合現地解散の旅行で最高の旅が出来ました。</p>
<h2>札幌の美味しいお店</h2>
<p><a href="http://toriton-kita1.jp/" target="_blank">トリトン</a>という回転寿司がバカウマ！！ここは刺し身のネタが本当に良い！特にサーモン。これはどこの寿司屋よりもうまい！
トリトンのライバルとして根室はなまるという寿司屋もあるがここまもめちゃくちゃうまい。しかし刺し身のネタはトリトンの勝ちかあ。しかしアラ汁は根室はなまるの圧勝です。</p>
<h2>楽しかった思い出ランキング</h2>
<ol>
<li>モエレ沼公園</li>
<li>トリトン</li>
<li>モール系温泉</li>
</ol>
</div>
CodePen: https://codepen.io/atsu6/pen/NWNvddP
それをElmに変換
module Main exposing (main)
import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
view : Html ()
view =
div []
[ h1 [] [ text "札幌旅行に行ってきました。" ]
, p [] [ text "夏休みを利用して札幌へ行ってきました。コロナ禍ともあり他観光客は例年と比べて1/10の人の少なさ！東京と大阪の友達と札幌で現地集合現地解散の旅行で最高の旅が出来ました。" ]
, h2 [] [ text "札幌の美味しいお店"]
, p []
[ a [ href "http://toriton-kita1.jp/"
, target "_blank"
] [text "トリトン"]
, text "という回転寿司がバカウマ！！ここは刺し身のネタが本当に良い！特にサーモン。これはどこの寿司屋よりもうまい！トリトンのライバルとして根室はなまるという寿司屋もあるがここまもめちゃくちゃうまい。しかし刺し身のネタはトリトンの勝ちかあ。しかしアラ汁は根室はなまるの圧勝です。"
]
, h2 [] [ text "楽しかった思い出ランキング" ]
, ol []
[ li [] [text "モエレ沼公園" ]
, li [] [text "トリトン" ]
, li [] [text "モール系温泉" ]
]
]
main = view
Ellie: https://ellie-app.com/9QZ9PvZZFNxa1
つまづいたポイント
-
h2 [] [text "札幌の美味しいお店"]のように、HTML属性がないのに空リストを渡す必要があるかわからなかった。-> [解答] : h2は２つの引数を受け取るから、要素が0個だったとして空リストは指定しないといけない。これは関数には型があるからである。 - リストを囲みすぎたり、なさすぎたりした。-> Elmでのリストの書き方になれていなかったのが原因(かも?)
- テキストの文字列の中で、リンク化しようとしてしまった -> テキストノードという概念を意識していなかったから(かも?)
感想
今の所HTMLで直接書くほうが、楽と感じた。
しかしElmでHTMLを書くことを慣れればそちらのほうが曖昧さを許さないため安全性が高いらしい。
今後もうちょっと追ってみる！！