ReactやVue、Riot.js、Angular2などバーチャルDOMを使ったフレームワークが増えています。個人的にはVueが好きなのですが、多くのビューライブラリは大型化し、ちょっとした表示に使いたいというニーズにはマッチしなくなります。 そこで使ってみたいのがHyperAppです。1KBのJavaScriptライブラリと銘打ったビューライブラリです。

HyperAppの使い方

ごく基本的な使い方は次のようになります。modelとviewが基本になります。

app({
    model: "Hi.",
    view: model => <h1>{model}</h1>
})

ボタンを押した時のアクションを定義する場合は次のようにreducersを定義します。

app({
    model: 0,
    reducers: {
        add: model => model + 1,
        sub: model => model - 1
    },
    view: (model, actions) =>
        <div>
            <button onClick={actions.add}>+</button>
            <h1>{model}</h1>
            <button onClick={actions.sub} disabled={model <= 0}>-</button>
        </div>
})

一例としてTodoアプリです。

テキストボックスに入力したカラーコードが適用されるデモ。

SVGにも使えます。

HyperAppの良いところは軽量であることと、表示処理に特化していることでしょう。個人的にはVueを使ってしまうとは思いますが、ちょっとしたWebアプリケーション風の表示であれば便利そうです。何より表示に特化していることで、ルーティングライブラリなど他のライブラリとも組み合わせが容易そうです。

HyperAppはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

HyperApp Examples hyperapp/hyperapp: 1kb JavaScript library for building frontend applications.