JavaScriptとの相互運用
ここまででThe Elm Architecture、型、コマンド、サブスクリプションについて学び、いよいよローカルにElmをインストールしました。
では、JavaScriptと一緒に使いたくなったとしたらどうでしょう？ 使いたいブラウザーAPIがまだElmのパッケージになっていなかったとしたら？ Elmで作ったアプリケーションの中にJavaScriptのウィジェットを組み込みたいとしたら？ この章では、そのためにElmが提供する以下の3つの相互運用の方法を取り上げて、要点を解説します。
実際にこの3つの方法の中身に入る前に、まずはElmのプログラムをJavaScriptにコンパイルする方法を知る必要があります！
Note: Elmを仕事で使うことを検討しているなら、上に示したこの3つの方法が、あなたの要件を満たしているかどうか確かめておくことをおすすめします。この3つの方法について本章で解説している内容は、こちらの例からざっと概要をつかむことができます。何かわからないことがあったら、ここから質問してみましょう1。それでも自信が持てないときは、時間をおいてみて、あとでもう一度Elmを試してみるのもいいでしょう。
JavaScriptにコンパイルする
elm makeコマンドは、デフォルトでHTMLファイルを生成します。つまり、次のようなコマンドを打つと:
elm make src/Main.elm
すぐに開いていろいろと試すことのできるindex.htmlファイルが生成されます。しかしJavaScriptとの相互運用性を試すときには、JavaScriptファイルが欲しいはずです:
elm make src/Main.elm --output=main.js
こうすれば、Elm.Main.init()関数を公開するJavaScriptファイルが生成されます。main.jsファイルが手に入ったので、自分で好きなようにHTMLファイルを書くことができます！
HTMLに埋め込む
コンパイルして作成したmain.jsを動かしてブラウザで表示させるために必要な最小限のHTMLが以下のものです。
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<script src="main.js"></script>
</head>
<body>
<div id="myapp"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById('myapp')
});
</script>
</body>
</html>
特に注意してほしい重要な行がいくつかあります。
<head>ではコンパイルしたmain.jsを読み込んでいます。この行は必須です！ElmからMainという名前でコンパイルしたモジュールは、JavaScriptからElm.Main.init()という関数として使うことができます。もし、ElmのHomeというモジュールをコンパイルしたなら、Elm.Home.init()関数になる、というぐあいです。<body>では2つのことを行ないます。最初に、Elmに制御させるための<div>を作ります。Elmが操作できるのはこの<div>の中に限られていますので、もしこれが他のたくさんの要素に囲まれた大きなアプリケーションの中だったとしても心配は要りません！ 次に、Elmを初期化するための<script>タグがあります。ここでElm.Main.init()関数を呼び出し、nodeという引数にElmに制御させたい要素を渡してプログラムを開始します。
さあ、HTMLドキュメントの中にElmプログラムを組み込むやりかたを学んだところで、いよいよJavaScriptとやり取りする3つの方法、フラグ、ポート、カスタムエレメンツについて見ていきましょう！
Note: これはごくふつうのHTMLファイルなので、なんでも好きなものを配置することができます！
<head>で追加のJSやCSSを読み込むことはよくあります。つまり、手で書いたり、他の方法で生成したりしたCSSを使うのに、何も問題はありません。<head>の中に<link rel="stylesheet" href="whatever-you-want.css">というようなタグを追加するだけでよいのです（CSSの記述を Elmの中だけで 完結させる素敵な方法も用意されていますが、それはまた別の話題です）。
1. 訳注: elm-jpでは日本語でElmについてやりとりできるdiscordを用意していますので、ぜひ招待リンクから参加して感想をお聞かせください ↩