Elmの環境構築ガイド（2021）
Elm の開発環境を構築する方法はどのくらいあるでしょうか？
- elm reactor
- Ellie (Elm Live Editor)
- elm-live
- webpack
- Parcel
- vite
- snowpack
1 つずつ見ていきましょう。
elm reactor
elm のサブコマンド elm reactor を実行すると、開発サーバが起動します。とりあえず Elm を触ってみたい場合は、これを使ってみると良いでしょう。
特徴
- Elm をインストールするだけで使える
- 開発を進めると物足りなくなってくる
- CSS の組み込みに手間がかかる
-
flagsやportsを使えない など
elm reactorを使うと、ターミナルで毎度ごちゃごちゃ頑張らなくても Elm プロジェクトをビルドできます。次のように、プロジェクトのルートディレクトリで以下のコマンドを入力してみてください。elm reactorサーバーが
http://localhost:8000で起動します。このサイトではどの Elm ファイルにも移動できて、どんな感じになるか見ることができます。elm reactorを実行して、localhost へのリンクを開き、src/Main.elmファイルを確認してみてください！（Elm 公式のガイド「Elm をインストールする（日本語版）」より引用）
環境構築例
Ellie (Elm Live Editor)
elm reactor と同等の機能をオンラインで利用できます。ローカルに開発環境を構築するのが面倒な場合にはこちらが便利です。
Ellie(Elm Live Editor)はオンラインで Elm アプリを作成・シェアできるサイトです。
（書籍『基礎からわかる Elm』より引用）
特徴
- Elm Packages に公開されているパッケージも利用できる
- コードのフォーマット機能やシェア用のリンク発行機能あり
elm-live
開発サーバーを起動し、Elm ファイルの変更をリアルタイムに検知してレンダリングしてくれます。elm makeコマンドをelm-liveに置き換えて、簡単に使い始めることができます。
特徴
- CSS の読み込みや、Hot Module Replacement など、必要十分な開発環境を構築できる
-
elm makeのオプションを同じように使える - Elm 以外のライブリロードはサポートしていない
環境構築例
※ Elm 以外のビルドには他のライブラリを使用し、 npm scripts で実行を管理しています。
webpack
webpack で Elm を扱うためのプラグイン elm-webpack-loader が公開されています。既に webpack を使い慣れている場合は、これを活用すると良いでしょう。
特徴
- 設定次第で環境を細かく制御できる
-
webpack.config.jsの設定が大変
環境構築例
細かい設定は、create-elm-app などを参考にしてください。
Parcel
特徴
- 設定ファイル不要（zero config）で動作する
- Elm もサポートされている（ https://parceljs.org/languages/elm/ ）
環境構築例
vite
特徴
- esbuild を使ったビルドが早い
- 設定ファイルに vite-plugin-elm を追加することで Elm を使うことができる
- 作者さんのブログ記事 https://text.hmsk.me/entries/2020-10-19/
環境構築例
snowpack
特徴
- esbuild を使ったビルドが早い
- 設定ファイルに snowpack-plugin-elm を追加することで Elm を使うことができる
- ES Modules を使うので、 IE11 を対象とする場合は不向き
環境構築例
そして 2022 年へ
『Setting up an Elm project in 2022』という記事が公開されているので、参考にしてみてください。私の記事の対象には含めていませんが、elm-spa や elm-pages も非常に強力です。
まとめ
開発環境は目的に合わせて選択すると良いでしょう。
この記事を書くにあたって elm-app-templates というリポジトリを作りました。esbuild 単体での環境構築なども試しているのでご覧いただけると嬉しいです（私自身の理解がまだ浅く、この記事には含めませんでした）。また、紹介している方法以外の環境構築方法をご存知の方は、ぜひ構築方法を共有いただけると嬉しいです！
Discussion