hyperscript（h()）の使い方(ブラウザで利用する手順)

hyperscript(h()でDOM生成)をブラウザから利用するサンプルです。

利用イメージ

    root.appendChild(
        h("ul", {}, 
            [h("li", "list1"),h("li", "list2"),h("li", "list3")]
        )
    );

準備

npm init
npm install hyperscript
npm install -D http-server

http-serverは動作確認用のhttpサーバです。

サンプルの内容

1. ブラウザで利用可能とするため、jsファイル内でhyperscriptを読み込み、エクスポートします。
2. Browserifyでバンドルを行います。ブラウザからCommonJSモジュール形式のhyperscriptを呼び出すために必要です。
3. ブラウザからバンドル済みのjsファイルを読み込み、DOMの生成を行います。

実装の概要

1. jsファイルでhyperscriptを読み込みエクスポートする。

ブラウザが利用するjsファイル(main.js)

var h = require('hyperscript');

module.exports = {
    createSampleDom: ()=>{
        return h("div", {style:{color:"blue"}}, h("span", {}, "春はあけぼの"));
    },
    h: h,   // h()自体をエクスポート。ブラウザ側で直接利用できる。
}

hyperscriptとバンドルするためcommonjs形式(module.exports)でエクスポートを行います。

2. Browserifyでバンドルを行う

1. バンドルしたモジュール公開するため「-r」(--requireオプション)をつける。
2. モジュール名の指定(:app)を行う。(デフォルトのモジュール名が変なため)

    browserify -r ./main.js:app > app.js

:app がモジュール名指定　(require('app')でロードできる)

3. ブラウザ側で公開したメソッドを読み込み、実行してDOMに追加する。

    <script src=./app.js></script> 
    <script>
        window.onload = function() {
            var appModule = require('app');        
            const root = document.getElementById("rootNode")

            // modele.export されたfunctionを呼び出し、DOMを生成する。
            const node = appModule.creatoSampleDom();
            root.appendChild(node);

            // moduleで公開したh()を呼び出す。
            const h = appModule.h; //exportしたfunctionを変数に設定
            root.appendChild(
                h("ul", {}, 
                    [h("li", "list1"),h("li", "list2"),h("li", "list3")]
                )
            );
       }

---

ビルドと実行について

package.jsonの"scripts"に、下記を追加。

"build": "browserify -r ./main.js:app > app.js",`
"serve": "http-server",`

• ビルドと実行
  • npm run build
  • npm run serve