JavaScriptとの相互運用

ここまでElmについてのたくさんの事柄を見てきました。The Elm Architectureを学び、について学び、コマンドサブスクリプションを使って外の世界とやり取りする方法を学びました。いい調子です!

では、JavaScriptを使って何かしたくなったとしたらどうでしょう?どうしても必要なJavaScriptライブラリがあったとしたら?Elmを既存のJavaScriptアプリケーションに組み込みたいとしたら?この章では、そのためにElmが提供する選択肢を取り上げて、要点を解説します: フラグ、ポート、そしてカスタムエレメンツです。

どれを使うとしても、最初の一歩はElmプログラムを初期化することです。

Elmプログラムの初期化

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ファイルを書くことができます!例えばこうです:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Main</title>
  <link rel="stylesheet" href="whatever-you-want.css">
  <script src="main.js"></script>
</head>

<body>
  <div id="elm"></div>
  <script>
  var app = Elm.Main.init({
    node: document.getElementById('elm')
  });
  </script>
</body>
</html>

特に注意してほしい重要な行がいくつかあります。

最初に、ドキュメントの<head>の中では、なんでも好きなものを読み込むことができます!この小さな例ではwhatever-you-want.cssというCSSファイルを読み込んでいます:

<link rel="stylesheet" href="whatever-you-want.css">

あなたはCSSを手で書くかもしれませんし、他の方法で生成するのかもしれません。何にせよ、CSSを読み込んでElmで使うことができます(すべての CSSをElmで記述する素敵な方法も用意されていますが、それはまた別の話題です)。

第二に、コンパイルしたElmコードを読み込んでいるのは次の行です:

<script src="main.js"></script>

こうすることで、グローバルスコープからElmという名前のオブジェクトを利用できるようになります。MainというElmモジュールは、コンパイルすると、JavaScriptではElm.Mainになります。Elmモジュールの名前がHomeなら、JavaScriptからはElm.Homeとして扱う、といった具合です。

第三に、ドキュメントの<body>の中で、ほんの少しだけJavaScriptコードを走らせて、Elmプログラムを初期化します。

<div id="elm"></div>
<script>
var app = Elm.Main.init({
  node: document.getElementById('elm')
});
</script>

空の<div>要素を作りました。このノードの制御は、Elmプログラムに完全に任せたいところです。これがもっと大きなアプリケーションで、ほかのたくさんの要素に囲まれていたとしても、問題ありません!

それから、<script>タグでElmプログラムを初期化しています。Elmに任せたいノードを取得し、プログラムを開始するElm.Main.init関数に渡します。

これでHTMLドキュメントの中にElmプログラムを組み込むことができました。いよいよJavaScriptとやり取りする3つの方法、フラグ、ポート、Webコンポーネントについて見ていきましょう!

results matching ""

    No results matching ""