Posted at

ビルド環境なしで Hyperapp をおためし

More than 1 year has passed since last update.

「1 kB JavaScript framework」を謳う Hyperapp をさくっとお試し。


確認環境


  • Google Chrome


    • バージョン: 66.0.3359.181(Official Build) (64 ビット)




ソースコード

Github 上の README に書いてある例をちょっと書き換える。

<!DOCTYPE html>

<html>
<body>
<script src="https://unpkg.com/hyperapp"></script>
<script type="text/javascript">
const state = {
count: 0
}

const actions = {
down: value => state => ({ count: state.count - value }),
up: value => state => ({ count: state.count + value })
}

const view = (state, actions) =>
hyperapp.h(
"div",
{},
[
hyperapp.h("h1", {}, state.count),
hyperapp.h("button", { onclick: () => actions.down(1) }, "-"),
hyperapp.h("button", { onclick: () => actions.up(1) }, "+")
]
)

hyperapp.app(state, actions, view, document.body)
</script>
</body>
</html>


動作確認

hyperapp.gif


ポイント


  • README に書いてある通り、CDN から読み込んだ場合 window.hyperapp を介してアクセスできる

  • JSX は解釈できないので代わりに h() を利用する