Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

elm-liveで簡単開発サーバー構築

More than 1 year has passed since last update.

かいてあるないよう: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での選択肢は:

  1. elm reactorを使う
  2. webpack系のものを使う
  3. 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のこの行を見てみましょう

package.json
 "bib": "elm-live src/elm/Views/Bib.elm --open --pushstate --start-page=bib.html --dir=public -- --output=public/bib.js",

bibbiblipolaの略で、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でがんばってた人には特におすすめするので使ってみてください


  1. elmコマンドはバンドルもoptimizeもするのでそもそもElmだけならwebpackは絶対にいらないと思うんです 

  2. 自作ツールの宣伝でした 

  3. 自作ツールの宣伝でした。2回目 

miyamo_madoka
わたしの発言は一くろすすてっちゃ的発言であってー、ぷろぐらみんぐとかえすあいあーとかー所属企業とかー関係なくてーとりあえず何か作りたいなあっていつも思ってますー
elm-jp
主に日本で活動する Elm 利用者のコミュニティです。
https://elm-lang.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away