• これはElm Advent Calendar 2014の1日目です。

Elmはクライアントサイド向けの関数型言語です。一体どんな言語なのでしょうか？

1. HTML/CSS/JSにコンパイルされる

ElmはHTML/CSS/JSにコンパイルして使用します。 この辺はJavaScriptにコンパイルされるAltJSに似ています。 AltJS同様、Elmも特別なランタイムライブラリは不要です。

ただし、Elmは1つのソースでHTML/CSS/JSをすべてまかなえるのが特徴です。

2. 独自の抽象化レイヤーを提供している

代表的なAltJSであるCoffeeScriptは"It's just JavaScript"をモットーにしています。すなわち、文法を改良するのみで、中身はJavaScript以上でも以下でもありません。

一方、Elmでは直接JSやCSSをいじることはできません。 基本的にすべてElmの関数・レイアウトライブラリを使わなければなりません。

これはとっつきにくいのですが、逆に見れば、CSSの「歴史的なしがらみによる汚さ」を扱う必要が無いと言うことです。

ただし、Portsを通じてJavaScriptとやりとりしたり、Canvas風にHTMLに埋め込んで使うこともできます。

3. Haskellベースである

ElmはHaskellを元に若干の修正を加えた独自言語です。

当然Elmは強力な静的型を備えています。 「0に.nameというプロパティはありません」的なエラーとは無縁です。

またあらゆるものは関数です。Array.some Array.every どころか、foldl, map, etc.. 使い放題です。

4. FRP(Functional Reactive Programing)に対応している

ElmはHaskellベースなので 状態や変数はありません。

もちろん、クライアントには状態変化がありまくりです。 マウスの動きや、ウィンドウサイズの変更、APIからのレスポンス etc...

JavaScriptの場合はcallback関数で明示的に扱うことになります。callback地獄です。

一方Elmでは組み込みの<~と~を使います。

main =
  renderScene
  <~imageAPIResp
  ~ Mouse.position
  ~ Window.width
  ~ pagingAPIResp
  ~ (fps 30)

更新の処理はElmが勝手に行ってくれます。

FRPについてはこちらのスライドが大変優れているので、こちらをご覧ください。

http://www.slideshare.net/maedaunderscore/elmfunctional-reactive-programming

5. Playgroundが充実している

ElmはPlaygroundに力を入れています。

GoなどにもPlaygroundはありますが、Elmのは、

• シンタックスハイライトあり
• 型の候補の表示あり
• 自動でコンパイル
• 右側でコンパイル結果を操作可能

と、かなり機能が充実しています。

また、Exampleも基本文法から、応用までそろっています。

Examples

ElmのPlaygroundのゆるかわほっこり感は、Haskellの取っ付きにくさを打ち消してあまりあるものがありますね。

6. Haskellだけど怖くない

私はHaskellはこんなイメージです。

確かに、JavaScriptとはシンタックスが全然違うのでとっつきにくくはあります。 最初はコンパイルが通らなくて苦労します。

しかし、ElmはPlaygroundで簡単にトライ＆エラーを繰り返す事ができます。 また、「最初の100個の素数を求める」のような人工的な例ではなく、目に見えて実際に動くアプリを作る事ができます。Haskellよりモチベーションを保ちやすいと思います。

また、ElmにはFRPがあるかわり、Elmにモナドはありません。

7. ElmはAnglarJSを置き換える言語である？

既にクライアントサイドにはTypeScriptやらAngularJSがあるのに、なぜ新しくElmを学ぶのか？

私の場合はAngularJSへの疑問でした。

AngularJSは優れたライブラリで、実際に仕事で使ってもいるんですが、 難しすぎる！

• ３つの異なる言語（HTML/CSS/JavaScript）を同時に扱わなくてはならない。*1
• 特定の使われ方(CRUD)に特化していて、汎用性が欠けているように見える
• ngBind, ngResource, ngDirective etc… 多すぎる

WEBは10年20年先も存在し続けると思いますが、AngularJSが10年使われるか疑問です。

一方、Elmはシンプルです。 - 言語は1つだけ*2 - FRPの仕組みは汎用的（フォーム入力にも、APIコールにも、アニメーションにも何にでも使える） - 「すべてが関数」関数は容易に組み合わせられる

ひょっとしたら、Elmにはクライアントサイドの未来があると思います。

関連リンク

POSTDにElm関連の翻訳記事があります。

まず、これらをよんでモチベーションを高めてから始めるといいと思います。

• 【翻訳】フロントエンドのプログラミング言語をゼロから設計した理由 | POSTD
• 【翻訳】抽象化と組み合わせができるレイアウト言語があれば、CSSは必要ない | POSTD
• 【翻訳】爆速HTML – Elmでの仮想DOM | POSTD

あとがき

明日2日目は「Elmをインストールする」です。

Elm Advent Calendar 2014にはまだ空きがあります。ふるってご参加ください。