Hyperappは本当にハイパーなのか
JavaScriptのフレームワーク・ライブラリ周りは相変わらず群雄割拠の様相を呈していますが、その中でも今年始め話題になったHyperappに触れてみようかと思います。
Hyperappとは
Hyperappは某プログラミング情報共有サイトに採用されたことでも話題になりましたが、約1KBととにかく軽量で、学習コストも低いことが特徴です。
同じJavaScriptライブラリとして有名なものにReactがありますが、Reactの方が機能が充実しているので、簡単なものをサクッと作ってしまいたいときはHyperappの方が小回りが利くというのが個人的な印象です。
HyperappのCDNで簡単に導入できます。つまり、HTMLに
<script src="https://unpkg.com/hyperapp"></script>
を書いてしまうとそれだけで導入できます。
また、HyperappにはHyperx記法とJSX記法の二種類の書き方が出来るのですが、それぞれコンパイラが必要なので、Hyperx記法であれば
<script src="https://wzrd.in/standalone/hyperx"></script>
を、JSX記法であれば
<script src="https://unpkg.com/babel-standalone"></script>
を記述する必要があります。
今回はJSX記法を用います。
h関数とapp関数
Hyperappにはh関数とapp関数という二つの主要な関数があります。
h関数は、仮想DOMのノードを生成する関数です。
第一引数にhtmlで用いるタグ名、第二引数に属性、第三引数に子要素、という形でh関数に渡すと仮装DOMが生成されます。
つまり、
h("div", {id: 'test'}, [
h("h1", {class: 'title'}, 'h1タグ'),
h("p",{},'pタグ' )
]);
と記述すると
<div id="test">
<h1 class="title">h1タグ</h1>
<p>pタグ</p>
</div>
というノードが生成されます。
app関数は、Hyperappを起動させる関数です。
これを呼ぶことによってアプリケーションが作動します。
第一引数にアプリケーションの状態、第二引数にアプリケーションによって管理する挙動、第三引数に仮想DOM、第四引数に反映させる先、を記述します。
性質ばかり書かれてもピンとこないと思うので、実際に書いてみたいと思います。
使ってみる
<body>
<script src="https://unpkg.com/hyperapp"></script>
<script src="https://unpkg.com/babel-standalone"></script>
<script type="text/babel">
const { h, app } = hyperapp
const state = {
count: 0
}
const actions = {}
const view =
h("div", {id: 'test'}, [
h("h1", {class: 'title'}, 'h1タグ'),
h("p",{},'pタグ' )
])
const main = app(state, actions, view, document.body)
</script>
</body>
これを適当な名前のhtmlファイルとして保存し、ブラウザで確認すると
結論
名に違わずハイパーでした。
