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

5397 ワード
hyperapp JavaScript JavaScript テキストリンク

「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>

動作確認

ポイント

  • README に書いてある通り、CDN から読み込んだ場合 window.hyperapp を介してアクセスできる
  • JSX は解釈できないので代わりに h() を利用する