Haskell風のAltJSであるElm言語を使ってみる。
P5.js風に、マウスの移動に合わせて円を追従させる。
円は、追従してくるものの他にもう一つあって、その円は普段は固定。
２つの円は線でつないであるので、固定の円を中心に棒がグネグネする感じ。
また、マウスをクリックすると、固定だった円がクリックした位置にジャンプする。
実行にはelm-reactorを使った。
elmは、npmでもbrewでもインストールできる。
reactorを実行して、ブラウザで
http://localhost:8000/Main.elm
を開けばOK。
elm-makeを使えば、HTMLやJSへもコンパイルできる。
描画にはSVGを使っている。
Elmは、Haskell風だが、where句がなかったり、
ガード文ができなかったり、パターンマッチがcase ofでしか
できなかったりと、わりと基本的な面でも違う。
型クラス的のような高等な機能は、当然できない。
あと、なぜかF#から借りてきた演算子がちらほらある。
Elmアーキテクチャという、独自の方針で プログラムを書くよう推奨されている。
main = Html.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
で見てわかるように、基本となるモデルを、
イベントに合わせて更新して、
それをHTMLに反映させるのが原則。
Haskellを知っている人でも、何かと慣れは必要。
描画は、React.jsやAngular.jsなどと比べても かなり高速とのこと。 React同様、Virtual DOMを使っているが、 副作用を減らして最適化しやすくなっているおかげで、より速いらしい。