かいてあるないよう：elm-live使ってみた
注：普通に機能について知りたいならREADME読みに行ってください
webpack好きですか？
webpackが好き、webpack.config.jsを書くのに何の抵抗もない、大好き、という方はお帰りください。
elm-liveはwebpack分からんさんに与えられたelm用のbuildツール、というわけではなくて1、HMR（Hot Module Replacement: オートリロードみたいなの）ができる開発サーバーです
elm-liveはすごく簡単に開発環境が整うなー
開発するとき、動作確認とかするのにdev server建てますよね。JSだとwebpack-dev-serverしか知らないんですが一択なんですかね。Elmでの選択肢は：
-
elm reactorを使う -
webpack系のものを使う - elm専用のものを使う
今回はelm専用のelm-liveを使うという話なんですが、普通にwebpackでいいという人はそれでいいですし、elm reactorもHMRはないですがelmいれればついてくるしそれなりにリッチなので悪くないです。
create-elm-appと比べて
create-elm-appはcreate-react-appみたいなやつです。つまり、設定はいじれないし、create-elm-appしたわけではない既存のプロジェクトにあとから入れるのは手間です
elm-liveはいつでも導入できるし、設定もある程度いじれます。そもそもやってることが少ないので設定も少ないです
ツールは単機能でいいんですよ
実際に使ってるとこを見てみよう
ここにmiyamoen/elm-local-packagesというリポジトリがあります
これはcarloを使ったElm用の開発ツールなのですが、ローカルにキャッシュされたelm packageのドキュメントを読み込んでElmのパッケージサイトの見た目で見ることができます。キャッシュを読んでいるのでオフラインで動作します。
よかったら使ってみてください。ちなみに今日マルチカラムできるようになりました2
package.jsonのこの行を見てみましょう
"bib": "elm-live src/elm/Views/Bib.elm --open --pushstate --start-page=bib.html --dir=public -- --output=public/bib.js",
bibはbiblipolaの略で、biblipolaはelm版のstorybookです。つまり上記スクリプトはstorybookの起動コマンドですね3
細かい使い方はREADME見ればいいと思うんですが、まずmakeするElmファイルを指定して、オプションをいくつか指定して、--の後ろにelm makeのオプションを指定するだけです
input, outputはelm makeをそのまま叩いている感じなので分かりやすいです
--start-pageでエントリーポイントを指定します（defaultはindex.html）。elm-liveはこのファイルにHMR用のコードを挿入してブラウザで開いてくれます。このHTMLとelmのbuild結果をバンドルなんてことはしません。HTML内で読み込むことを忘れずに
--pushstateはelmアプリケーションがルーティングしてたら付けるやつです。Browser.applicationを使ってたら付けてください
感想
かんたん
ちょっとREADME読んでinとout設定してちゃんと読み込むようにすればできるのでとてもよいです
create-elm-appはエントリーポイントが決まっちゃってるのでアプリケーション用とbibliopola用に分けて書けませんが、elm-liveなら複数書けるし
あとから簡単に導入できるし
JSのバンドルツール（とわたしは認識している）のwebpackさんを酷使しないで済むし
elm reactorでがんばってた人には特におすすめするので使ってみてください