create-elm-app という便利なツールがあって、これを使うとコマンド一発でプロジェクトの雛形を作ってくれたり、アセットの最適化とか諸々うまくやってくれます。内部的には webpack が使われています。

create-elm-app 自体の説明はこちらの記事を参照してください。

一体何をしているのか

「確かに楽なんだけど、裏で何をしているのか分からなかったから調べてみた」というのがこの記事の主旨です。だいたいここに書いてありますが長くてしんどいので要点だけ並べておきます。

開発効率アップ編

HMR (Hot Module Replacement)

リロードしなくても画面が最新に置き換わる魔法です。

プロキシ機能

Dev Server を使いつつ API サーバーも同時に使うといったことが出来ます。elm-package.json に次のように設定を追加すると有効になります。

"proxy" : "http://localhost:3010"

これで、ブラウザ ==> localhost:3000 ==> localhost:3010 という状態です。CORS を気にする必要もないです。

エラーを画面に表示

コンパイルエラーや Debug.crash した時にエラーを画面に表示します。

デバッガーの有効化

デフォルトでは開発モードで ON 、本番で OFF 。環境変数 ELM_DEBUGGER=true/false で上書きします。

アセットのベース URL 変更

環境変数を使って PUBLIC_URL=./ のように設定できます。デフォルトは / です。

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

CSS や画像のインポート

バンドルしたいスタイルを JS からインポートできます。これは webpack 自体の機能です。

import './main.css';
import logoPath from './logo.svg';

HTML に直接タグを書くこともできますが、以下の点からこちらのほうが有利です。

リンク切れを検査できる
minify などの処理を通る
ファイル名にハッシュ値が入る
HTML の最適な位置でロードしてくれる

Elm のインポート

Elm の場合はこういう風に書けます。

import { Main } from './Main.elm';
Main.embed(
    document.getElementById('root')
  );

カスタムな環境変数の設定

ELM_APP_ というプレフィックス付きでカスタムな環境変数を設定できます。シェルまたは .env ファイルに書かれたものが読まれますが、両方で設定した場合はシェルで設定したほうが優先されます。

ELM_APP_API_KEY="secret-key"

本番用の最適化編

デッドコード除去

デフォルトでは無効。環境変数 DEAD_CODE_ELIMINATION=true/false で有効になります。

ファイル名にハッシュ値を含める

出力ファイルの名前が、例えば build/static/css/main.2e08f693.css や build/static/js/main.e8e77659.js のようになります。これによって、古いバージョンのファイルがキャッシュされたままになるトラブルを防ぎます。これは webpack 自体の機能です。

CSS のマルチブラウザ対応

CSS のプロパティにプレフィックスをつけてマルチブラウザ対応します。

>1%: シェア１％以上のブラウザ
last 4 versions: 最新 4 バージョン
Firefox ESR: Firefox ESR （延長サポート版）
not ie < 9: IE9 以上

JS のマルチブラウザ対応

Babel を通して ES5 でも動くようにします。

ie: 9: IE9 以上

Google の検索エンジンが古めなので、これで SEO 対策にもなるらしいです。

HTML / CSS / JS の最小化

HTML / CSS / JS のファイルサイズを小さくします。

画像の Data URI 化

10KB よりも小さい画像を Base64 エンコードした Data URI にして CSS に埋め込みます。

PWA 対応 (Service Worker)

Service Worker を使って、バンドルされた静的ファイルを事前キャッシュします。また、これによってオフラインで動作するようになります。あとは PWA 用のメタデータが用意されたりします。

本番モードでのみ有効です。

なぜこれを書いたのか

elm-app eject してみたら訳の分からない設定ファイルが沢山出てきて「うっ…」となったので、事前に一通り機能を知っておけばギリギリまで eject しないで済むはずと思って書きました。（本当は eject 後の拡張方法などを考察しようと思ったが激しく消耗して諦めた）

あとは、 Elm を導入されると色々とロックインされるイメージを持っている人がいそうなので、 JavaScript 以外はまあいつものフロントエンドのノウハウ使えますね、という感触を持ってもらえると良いかと思いました。

create-elm-app は何をしているのか