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

f:id:doloopwhile:20141129182134p:plain

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

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の関数・レイアウトライブラリを使わなければなりません。

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

ただし、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の場合は状態変化はonmousemoveなどのcallbackを使って関数で明示的に扱うことになります。しかし、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に力を入れています。

f:id:doloopwhile:20141129200243p:plain

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

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

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

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

Examples

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

6. Haskellだけど怖くない

私はHaskellはこんなイメージです。 f:id:doloopwhile:20141129201705j:plain

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

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

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

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

既にクライアントサイドには様々なAltJSやライブラリがあるのに、なぜ新しくElmを学ぶのか？

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

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

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

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

一方、Elmはシンプルです。

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

ひょっとしたら、Elmにはクライアントサイドの未来の主流になるかもしれません。少なくともElmにヒントがあるのは確かです。

あとがき

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

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

*1:場合によってはCoffeeScript、Less、Slimなども学ばなければなりません。

*2:基本的には。HTMLやJavaScriptと連携すれば別です。

None is None is None

Elmとはどんな言語か？その７つの特徴【Elmアドベントカレンダー2014 1日目】