javascriptでhtmlを生成する魔界技術「hyperscript」

masquetteは学習コストが低いそうです。
でもね、その前にhyperscriptの学習コストが必要でした。

hyperscriptはJSのスクリプトからHTMLを吐き出す怖さのある技術で、
mercuryというVirtualDOM系フロントエンドフレームワークで採用されているものです。

公式のサンプルはこんな感じ。

var h = require('hyperscript')
h('div#page',
  h('div#header',
    h('h1.classy', 'h', { style: {'background-color': '#22f'} })),
  h('div#menu', { style: {'background-color': '#2f2'} },
    h('ul',
      h('li', 'one'),
      h('li', 'two'),
      h('li', 'three'))),
    h('h2', 'content title',  { style: {'background-color': '#f22'} }),
    h('p',
      "so it's just like a templating engine,\n",
      "but easy to use inline with javascript\n"),
    h('p',
      "the intension is for this to be used to create\n",
      "reusable, interactive html widgets. "))

スタイルから、各タグまで全部JS製関数hで吐き出す仕様のようです。怖いなぁ
順番としては

function h(selector, properties, children) // returns a virtual node object

となっており、マトリョシカ構造の如く、子構造にh関数をつなげることでネストを記述できます。