Elm に本腰を入れてみようと
次世代 JavaScript フレームワークが百花繚乱で戦国時代な今、自分が求めているのは Elm なんじゃないかとおもってきて環境つくるところからやった。
install
cabal でやるか pkg からインストールするか迷ったが、最終的に brew cask にした
% brew cask install elm-platform
evancz/elm-examples
ひとまず evancz/elm-examples を clone して試した。
% cd elm-examples
% elm-reactor
Elm Reactor 0.3
Listening on http://0.0.0.0:8000/
この elm-reactor
がスゴくて、起動すると
というようなページが立ち上がって Hello.elm
をクリックするとコンパイルされた実行結果のページが表示される。さらにすごいのが、Elm には Time Traveling Debugger っていう機能があって (http://debug.elm-lang.org/edit/Stamps.elm) Time Traveling の名の通り入力を巻き戻したりできるのだ。スパナのアイコンを押すとこのデバッガが立ち上がってデバッグできる。すごい。
Atom 環境
https://github.com/edubkendo/atom-elm を入れればシンタックスハイライト効くしだいたいオッケー。WebStorm にもプラグインがあるようなのでいずれ試す。
Syntax Reference
基本的に http://elm-lang.org/learn/Syntax.elm あたりを見ればオッケー。
Example の Hello.elm
には
main : Element
main =
flow down
[ helloWorld
, welcomeGraphics
]
というような flow
という構文?関数?があってなんじゃらホイとなったが、 http://elm-lang.org/edit/examples/Elements/FlowDown1a.elm を見てあっさりわかった。
{-------------------------------------------------------------
Elements can be combined into more complex layouts using
the flow function:
flow : Direction -> [Element] -> Element
It is easy to change the direction of flow. Just use a
different value for the direction!
down, up, left, right, inward, outward : Direction
Try switching "down" in the code below with "up".
-------------------------------------------------------------}
import Graphics.Element (..)
import Text (..)
main : Element
main =
flow right
[ plainText "By using the \"flow\" function,"
, plainText "we can stack elements"
, plainText "on top of other elements."
]
flow
の定義は flow : Direction -> [Element] -> Element
で、Direction
(down, up, left, right, inward, outward : Direction
) と [Element]
から Element
をつくる関数のようだ。なので up
とすると
on top of other elements.
we can stack elements
By using the "flow" function,
になるし right
にすると
By using the "flow" function,we can stack elementson top of other elements.
横に連結するような定義になっているようだ。実際に生成される html を見てみると right
とか left
をつけると inline style で float left
とか float right
が勝手に設定されて意図したデザインとなる。ここだけ取ってみても従来の HTML + CSS + JavaScript の構成でドキュメント構造考えて...スタイル考えて...スクリプト書いて...というようなはっきり言ってめんどくさいことをやらずに済むことが分かる。
とりあえず今日はこの辺で。