_
% brew cask install elm-platform
_
% 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 の名の通り入力を巻き戻したりできるのだ。スパナのアイコンを押すとこのデバッガが立ち上がってデバッグできる。すごい。Hello.elm には (elm)
main : Element
main =
flow down
[ helloWorld
, welcomeGraphics
]
flow という構文?関数?があってなんじゃらホイとなったが、 http://elm-lang.org/edit/examples/Elements/FlowDown1a.elm を見てあっさりわかった。 (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.
right とか left をつけると inline style で float left とか float right が勝手に設定されて意図したデザインとなる。ここだけ取ってみても従来の HTML + CSS + JavaScript の構成でドキュメント構造考えて...スタイル考えて...スクリプト書いて...というようなはっきり言ってめんどくさいことをやらずに済むことが分かる。