軽量HtmlレンダリングのPlainBind.jsを作成

概要

シンプルなHtmlでJavaScript経由でレンダリングするライブラリを作ってみました。通常用途ではあまり利用することがないと思いますが、ローカル環境でjsonファイルを準備しておくとそのデータを使ってレンダリングしてくれる機能があります。

制作物

GitHub - tanakamasayuki/plainbind
Contribute to tanakamasayuki/plainbind development by creating an account on GitHub.
github.com

上記のリポジトリで公開してあります。nmpにも登録してありますのでCDN経由で利用も可能です。

Just a moment...
www.npmjs.com

上記がnmpのページになります。パッケージ公開のテスト的な意味合いもあるプロジェクトとなります。

使い方

<h1 data-bind="title"></h1>

<ul>
  <li data-repeat="user in users" data-class-when="user.active:active">
    <span data-bind="user.name"></span>
    <span data-bind="user.age" data-format="number"></span>
  </li>
  <li data-empty="users">データがありません</li>
</ul>

<script id="plainbind-data" type="application/json">
{
  "title": "ユーザー一覧",
  "users": [
    { "name": "田中", "age": 25, "active": true },
    { "name": "佐藤", "age": 30, "active": false }
  ]
}
</script>

<script src="plainbind.js"></script>

上記のようにタグにdata属性を追加しておき、それをplainbind-dataのデータか、ファイル名＋.jsonファイルを読み込んでレンダリングしてくれる仕組みです。

一般的にはこの手のレンダリングはサーバーサイドで実行する事が多いです。plainbind-dataのデータを変数に入れて、レンダラーにわたすことでレンダリングが実行されます。サーバーサイドのレンダリングの場合にはローカルでのデザイン確認が非常に面倒になります。

このPlainBind.jsの場合にはindex.htmlファイルの場合には同じフォルダにindex.html.jsonをおいておくことで実際に埋め込んだデザインを確認が可能です。jsonファイルを編集してどのように変わるのかをデザイナーが確認できることと、なるべく素のHtmlとして表示できることを目的としてテンプレート化してあります。

レンダリング機能

属性役割
data-bindテキスト（エスケープ済み）を挿入
data-bind-htmlHTML として挿入（サニタイズは利用者責務）
data-bind-attr-*任意の属性へバインド
data-show真値のとき表示
data-hide真値のとき非表示
data-repeat配列をループして要素を複製
data-empty配列が空または値が falsy のとき代替要素を表示
data-class-when式:class 形式で複数クラスを切り替え
data-format事前登録したフォーマッタを適用
data-placeholder値が空のとき代替文字列を表示
data-linka 要素の href をショートカットで設定

上記のような制御が可能です。data-repeatを使うことで、配列の中身で表やリストなどをレンダリングできますし、showなどを使うことで表示、非表示を切り替え可能です。

実際の利用用途

あまりないのですが、自作の他のライブラリで利用する想定で作っています。本当はサーバーサイドでレンダリングしたいのですが、サーバーサイドの処理を減らし、なるべくブラウザ側で処理をしたい場合に適しています。

ただし、データを渡す方法はHtmlの中に埋め込むか、.jsonファイルを動的に自動生成するかになります。個人的にはローカル確認はpython -m http.server 8000などでローカルサーバーを立ち上げてjsonファイルを編集しながら確認。本番環境ではHtmlの中にデータだけを埋め込む形を想定しています。

まとめ

こちらも実利用者がいなさそうなライブラリですが、自作ライブラリの利用例として欲しかったので作ってみました。どちらかというとnmpにパッケージ登録の方法を学べたのが楽しかったです。

コメント