次世代 JavaScript フレームワークが百花繚乱で戦国時代な今、自分が求めているのは Elm なんじゃないかとおもってきて環境つくるところからやった。
install
cabal でやるか pkg からインストールするか迷ったが、最終的に brew cask にした
_
% brew cask install elm-platform
evancz/elm-examples
_
% 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 環境
Syntax Reference
Example の
Hello.elm
には
(elm)
main : Element
main =
flow down
[ helloWorld
, welcomeGraphics
]
(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 の構成でドキュメント構造考えて...スタイル考えて...スクリプト書いて...というようなはっきり言ってめんどくさいことをやらずに済むことが分かる。
とりあえず今日はこの辺で。
jigsaw(ジグソウ、1991年6月12日-)は日本のプログラマ、会社代表。本名は小林貴也(こばやし たかや)。主にウェブ、フロントエンド領域で活動している。カミング・スーン合同会社の代表社員。