コマンドとサブスクリプション
これまでに本書ではThe Elm Architectureがマウスやキーボードとのやり取りをどのように扱うかを見てきました。しかしサーバーと話したり、乱数を生成するにはどうしたら良いでしょうか?
これらの疑問に答えるために、The Elm Architectureが背後でどの様に働くのかをもっと学ぶことが理解の助けになります。そしてなぜJavaScript、Pythonやその他の言語と少し異なった働きをするのかを説明してくれるでしょう。
sandbox
今まで多くは触れませんでしたが、これまでのプログラムは全て Browser.sandbox
から生成されていました。初期値としてのModel
を与え、どのようにそれをupdate
してview
するのかを説明してきました。
Browser.sandbox
ではシステムを下記のように構成すると考えることができます:
我々はElmの世界(上図のブルーの部分)の中にとどまり、いろいろな関数を書いたりデータを変換したりします。そしてこの世界がElmのランタイムシステムとつながります。このランタイムシステムはHtml
をどのように効率的に描画するのかを計算してくれます。例えば、なんらかの変化があったら?必要とされる最小限のDOMの変更はなんでしょうか?また、誰かがボタンをクリックした時や、テキストフィールドになにかをタイプした際にも計算し、その結果をMsg
に変換した上であなたのElmコードに送り出します。
全てのDOM操作を明確に分離することにより、極めて積極的な最適化が実現可能となります。そしてElmが利用可能なフレームワークの中で最速の選択肢の一つとなる大きな理由がElmのこのランタイムシステムです。
element
続くいくつかの例ではプログラムを作るためにBrowser.element
を使っていきます。そこでは外の世界とのやり取りを可能とするためのコマンドとサブスクリプションの概念を導入していきます。
Browser.element
ではシステムを下記のように構成すると考えることができます:
このプログラムではHtml
という値に加えて、Cmd
とSub
なる値をランタイムシステムに送り出します。ここでは我々のプログラムがランタイムシステムに対してHTTPリクエストを送ったり乱数を生成するよう指示することができます。また現在時刻をランタイムシステムから待ち受けて我々のプログラムで使うこともできます。
いくつかの例を見ていくと、コマンドとサブスクリプションについての理解が深まると思いますので、やってみましょう!
Note 1: アセットの大きさについて心配する方がいるかもしれません。“ランタイムシステムって大きいもんでしょ!” いいえ、そんな事はありません。実際には競合となる他のフレームワークと比べてもElmのアセットは非常に小さいのです。
Note 2: 続く例ではパッケージを
package.elm-lang.org
から利用していきましょう。すでに次の二つを使用しています:引き続きいくつかのさらにイカしたパッケージについて取り組んで行きましょう:
その他にも非常に沢山のパッケージが
package.elm-lang.org
に存在します。ローカル環境で自分のElmプログラムを作る際には、次のようなコマンドをターミナル上で実行することになるでしょう:elm init elm install elm/http elm install elm/random
これにより
elm/http
とelm/random
を依存関係として持つelm.json
ファイルが用意されます。続く例の中で我々が使用するパッケージについて触れていきますので、これらがどんな役割を果たすか判明するでしょう!
Note 3:「指示する」を意味する英語のCommandが
Cmd
の語源です。英語のSubscriptionがSub
の語源で、主に定期購読と訳されますが、Elmでのイメージは外部から来るメッセージを定期的に待ち受けるところからから来ています 。