25
15

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.

ElmのBrowser.*の使い分け

Last updated at Posted at 2018-12-16

概要

Browser.sandbox, element, document, applicationの違いは?どう使い分けるの?
という疑問にふんわり答えます

2回くらい聞かれたので書いておきます
詳しいことはElm Guideやpackage documentをみればいいので詳しいこともコードも、参考リンクも載せません

Elmは0.19
elm/browserは1.0.1

そもそも使い分けるものじゃない

基本的にはできることが増えていく感じだと思ってください
増える機能を使いたいなら上げる感じです

sandboxより前

実はelmのmainはHtml型でも受け入れてくれます

main : Html msg
main = Html.text "Hello, world"

コード書いちゃった…。最初にちゃんと静的ハローワールドやった人なら知ってるよって感じでしょうが意外と忘れます
Stringはだめです

sandbox

純粋な世界にようこそ!
CmdとSubが使えません。いわゆる副作用ですね
とはいえユーザーのクリックとか入力とか取れるので何もできないわけではないです。何が純粋だ

具体的には乱数とかAPIたたくとかJSとやりとりするとかができません
あなたのアプリがAPIたたくわけではないならこれでいいのでは?

element

APIがたたけるよ!
ついに外界とやり取りできるようになりました
あなたが望むのならJSで起動するときにFlagsと呼ばれる初期値みたいなものを渡すことができます。またサイコロもふれるし、ユーザーのアクションの5秒後に何か起こすことだってできます

CmdとSubの概念は最初はなじみのないものでしょうからちゃんとガイドを読むといいと思います

document

このDOMの世界はわたしのものです!
今までは起動時にあるnodeを渡すことでそのnode下をマウントしていましたが、ここからはbodyタグ直下をマウントします
ついでにtitleタグをいじれるようになります。

注意:documentとapplicationではReactアプリケーションにElmを埋め込むということができなくなります
主導権が完全にElmになるので、ElmにReactを埋め込むならできます

application

ルーティングしたい

あなたのアプリケーションでルーティングをしたいなら間違いなくこれです。
elementではルーティングはできません。つまりElmが主導権を握る必要があります。

applicationではaタグでのリンククリックがElmのランタイムに捕まえられ、updateで処理することができます。pushしてもいいですし、loadしてもいいです。あなたのコード次第です。
特別なタグ(NavLinkみたいな)を使う必要はありません

終わり

ガイドとパッケージドキュメント読んでください

25
15
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
25
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?