React.js+Fluxをやるなら今すぐElmを使うべき理由

皆さん、そろそろElmやりましょう。

Elmって何なの？

Webブラウザで動くFRP(Functional Reactive Programming)言語です。コンパイルするとHTMLやJavaScriptを吐き出します。

公式サイトに動くサンプルが大量にあるので見てみると面白いです。

どうして今やるの？

これまでElmと言えば、良くも悪くも理想を追求した言語で、一般的なWebの部品(HTML/CSS/JavaScript)と相性が悪く、「まぁちょっとCanvas使っておもちゃアプリでも作るかー」くらいが関の山だったのですが、最近になってその状況は一変しました。

HTMLライブラリのサポート
Ajaxなど非同期タスクのサポート
JavaScriptとAPIを通じて相互接続可能
エコシステムの登場

順序はちょっと忘れましたが、0.14とか0.15で色々出来るようになりました。

import Html exposing (..)
main = h1 [] [text "Hello, world!"]

Webブラウザで動くのにHTMLライブラリが無かったと言うのは意味が分からないかも知れませんが、実はElmは現在のWebの仕組みにとらわれずゼロから考えて作られています。冷静に考えると、そもそもマークアップ用の言語でアプリケーションを作るとか、そっちの方が意味が分かりませんよね？

本当は理想を突き進んでWebのしがらみを全部なくしてしまいたいのですが、現実問題としてはまだ普通にHTMLで組む方が楽できるよね、ということで使いましょうHTML。

あとはライブラリがそろっていない部分をNative(JavaScript)で補えるのも大きいです。これで既存資産も活用できます。ちょろっと試したところWebSocketも出来ました。

React.jsやFluxと何の関係があるの？

一言で言うと、書き方が似ています！！

一応リアクティブ繋がりではあるんですが、最近リアクティブという言葉がバズりすぎていて最早この言葉を使う意味がありません。どちらもHTMLを宣言的に記述できるようになっています。

見るのが早いので見に行ってください。言語作者が自前で書かれているTodoMVCのソースです。

https://github.com/evancz/elm-todomvc/blob/master/Todo.elm

わずか約350行でTodoアプリ全体が表現されています。

Elm作者のEvanという方は以前からMVC的な設計を強く意識していて、コードに色濃く現れています。冒頭のコメントを以下に抜粋します。

 1. Model  - a full definition of the application's state
 2. Update - a way to step the application state forward
 3. View   - a way to visualize our application state with HTML
 4. Inputs - the signals necessary to manage events

React.js+Flux流に解釈するとおよそ次のようになります。

名前	役割
Model	アプリケーションの状態を定義する。FluxのStoreに相当。
Update	状態を更新する。FluxのDispatcherに相当。
View	状態をHTMLとして表現する。ReactのComponentに相当し、FluxのActionを発行。
Inputs	入力を管理する。

と書いていますが、何か特別な言語仕様やフレームワークがあるわけではありません。単にそういう風に分けて設計しましたという話です。実際にはAjaxなどでサーバとやり取りする必要が出るはずですが、大枠は変わらないと思います。

そして、DOMのレンダリングを高速化するためにVirtual DOMが使われています。

実際、View部分の記述は本当にReact.jsのrender()そのままで、コンポーネントツリーの上から順にデータを渡して宣言的にHTMLを記述していきます。イベントをアクションとして発行して最終的にコンポーネントツリーにフィードバックさせる構造はFluxと同じです。

言語としてのアドバンテージ

React.jsをやっていると、JavaScriptの様々な言語仕様の壁にぶちあたります。その点でもElmには以下のような追加の恩恵があります。

Immutability

JavaScriptでは新旧の値を比較する時、古い値を誤って更新しないために並々ならぬ努力が必要です。Immutabilityを実現するためにはライブラリで頑張るしかありません。

Elmの言語仕様は細かい点を除いてHaskellとほとんど同じで、変数ももちろんImmutableです。

型付け

Elmはコンパイル時に静的に型チェックを行います。 JavaScriptとの接続部分に関しては、ブート時にAPIが定義されていることをチェックするのと、Elm側にオブジェクトを渡す際に型のチェックが動的に入ります。

まとめ

React.js+Flux的な事がしたい人にとってElmは既に有力な選択肢です。実際にプロダクションで使うには信頼と実績と見えない力が必要ですが、その辺は気合で何とかしましょう。

ついでと言っちゃなんですが、FRPの流儀が一緒に学べるのもおいしいところです。FRP単体のJavaScriptライブラリを導入するのはメリットが薄くて却下になることが多いと思うので。

というわけで、アーリーアダプターになってElmの実績を作っていきましょう。

以上。

ジンジャー研究室

長めのつぶやき。難しいことは書きません。