関数型リアクティブプログラミング言語Elmに学ぶ フロントエンド開発の新しい形 【前編】

Webアプリケーション開発技術の新潮流スタディーズ　第4回

ここ数年のWebフロントエンド開発の要求は、以前よりかなり高度なものになりました。 特に大規模なWebアプリ開発では、AngularJSやReact.jsなどのフレームワークを使うことが当たり前になってきています。 一方で、最近では新たなプログラミング手法として「関数型リアクティブプログラミング」（Functional Reactive Programming：以下、FRP）が注目を浴びており、前述のようなフレームワークと組み合わせて使う例も出てきました。 本稿では、FRPを専門に扱うプログラミング言語「Elm」について2回に分けて解説します。

• 前編では、Elm言語の基礎とFRPのエッセンスについてコードを通じて学びます。
• 後編では、実際にElmを使ってアプリケーションを作る方法と、その際に重要になるアーキテクチャを学びます。

なお、執筆時点でのElmのバージョンは0.15.1です。

注意！

　Elmはバージョン0.17で大きな変更がありました。現在は「関数型リアクティブプログラミング」のための言語ではありません。

• 参考：A Farewell to FRP（さらば FRP）

　また、言語自体のシンタックスやライブラリのAPIも以前とは大きく変わっています。これからElmを始める方は、必ず公式ドキュメントを参照してください。

• 公式ガイド

FRPとは何か

リアクティブプログラミングの直感的な説明としてよく挙げられるのが、Excelのような表計算ソフトです。 例えば、セルの間にC1 = A1 + B1という関係があるとします。 このように宣言しておけば、A1またはB1の値を更新したときに、C1の値は自動的に再計算されます。

表計算ソフトはある種のリアクティブプログラミング

リアクティブプログラミングは、簡単に言ってしまえば、このような何かに反応して別の何かが変化するような問題をスマートに解くことを目的とした手法です。リアクティブプログラミングの応用範囲は、GUIからDBまで様々です。

「関数型」リアクティブプログラミング

さらに「関数型リアクティブプログラミング（FRP）」では、関数型プログラミングの力をフルに発揮することによって、より高度なプログラムの記述を可能にします。

FRPでは、時間に応じて変化する値を「Signal」と呼びます。上の例でいえば、A1、B1などの値はそれぞれ時間の経過に応じて変化していくので、全てSignalです。これら2つのSignalを合成して新たなSignalC1を生み出すことは、FRPならば容易です。 例えば、Elmでは次のように、簡潔に記述できます。

c = map2 (+) a b

それぞれのセルをSignalとして表現してみる

FRPの歴史

FRPの発祥は、Conal ElliottとPaul Hudakによる論文「Functional Reactive Animation(1997)」といわれています。当初のFRPはロボット制御などにもフォーカスした一般的なものでしたが、その後は離散的なイベントを扱うものが主流になり、さらに現実的な実装に落とし込むために簡素化されるなど、進化を続けています。 興味のある方は、Elm作者の論文に詳細が書かれていますので、参照してください。

FRPの本命Elm

Elmは2012年に生まれたプログラミング言語で、作者のEvan Czaplicki氏は現在プレゼンソフト会社のPreziにてフルタイムでElmを開発しています。 Elmは次のような特徴を持っています。

• 静的型付き関数型言語
• Haskellゆずりのモダンな言語機能
• JavaScriptにコンパイルされ^[1]、ブラウザ内で動作
• Virtual DOMによる高速なHTML描画
• FFI^[2]を通じたJavaScriptとの相互運用

静的型のメリットは、なんといってもコンパイル時に型検査が入ることでしょう。多くの静的型言語同様、自信を持ってリファクタリングができます。 また、シンタックスはHaskellに非常に似ていますが、Elmは言語機能を必要最小限に絞るように注意深く設計されており、入門の敷居はかなり低くなっています。

雰囲気を手っ取り早くつかむためには、公式サイトに用意されている豊富なサンプルを試すのがよいでしょう。

[1]: HTML/JS/CSSを一括で生成することでもできます。

[2]: Foreign function interface（Wikipedia）

いよいよ実用段階へ

以前からElmを知っている方の中には、Elmをいまだ実験言語のように思っている方がいらっしゃるかもしれません。 しかし、Elmはここ1年ほど大きく進化しました。もう実用段階に入ってきたといえます。 例えば、Elmは次のような進化を遂げています。

Virtual DOMを搭載したライブラリ「elm-html」の登場

React.jsで注目を浴びたVirtual DOMを用いて、宣言的な記述で高速なHTML描画を実現しています。

非同期処理の記述を容易にする「Task」の登場

JavaScriptのPromiseのような仕組みが導入され、Ajaxなどのライブラリが整備されました。

インストール・環境構築が容易に

Windows/Mac用にインストーラが用意されました。また、elm-make、elm-packageなど、ビルドやライブラリを管理するためのツールも用意されています。

MVCやFluxの思想と親和性のあるアーキテクチャ

Elmが提供するのは言語機能だけではありません。 大規模なアプリケーションを構築するのに欠かせない優れたアーキテクチャ（The Elm Architecture）が公式に提案されています。 TodoMVCのサンプルに目をやれば、綺麗に役割ごとにコードが分割されているのが見て取れると思います。 詳しくは次回説明しますが、React.jsとセットで用いられるFluxにも近く、人気フレームワークの「Redux」にインスピレーションを与えるなど、注目に値するアーキテクチャになっています。

ここまで、ElmとFRPの特徴や最新動向についてお話ししました。 次ページからいよいよ、Elmの文法やFRPの基礎の説明に入ります。