jqueryはなんやかんや今も現役で、消えることはないんじゃないかと思っているnakazatoです。
これはそんな現役バリバリのjqueryをpicodomを使ってちょっと幸せに使いたい、という趣旨の記事です。
jqueryの辛いところ
「フォーム画面でリアルタイムに入力内容を反映させたいんですー。」という要望があったとします。
これをjqueryで実装しようと思った場合
- 結果反映用の要素をhtml側に用意し
- 各フォーム要素にイベントを張り
- 値を取得して保持し
- 結果反映用要素に変更を加える
という具合になると思います。この時辛いのが
４. 結果反映用要素に変更を加える
こいつです。
反映箇所が多ければ多いほど、class振ったり取得したりと辛いのです。
ここをpicodomを使って省略し、ちょっと幸せになってみます。
picodomについて
VDOMでページを操作する1 KBのJSライブラリ、ということで最近話題のhyperappの記事に登場していました。
参照：2018 年は Hyperapp の年だ
Picodom をベースにしたオリジナルビューライブラリや、VDOM 系ツールとか、ユーザーが楽しく簡単に作れたら嬉しいと思う。
ということで、VDOMの力をわずかばかり借りてみます。
やること
購入個数を変更したら即座に概算が出るような画面です。
実装
Githubにあげたコードを元に解説します。
まずざっくり、このようなhtmlがありました。（作り荒いですがデモなので・・・）
<body>
<div>
<label>
りんご（100円）
<input type="number" value="0" min="0" name="apple" data-price="100">個
</label>
</div>
<div>
<label>
なし（130円）
<input type="number" value="0" min="0" name="pear" data-price="130">個
</label>
</div>
<div>
<label>
ぶどう（350円）
<input type="number" value="0" min="0" name="grape" data-price="350">個
</label>
</div>
<div>
<button>購入する</button>
</div>
</body>
ここに、結果反映用の要素とscriptの読み込みをbodyの閉じタグ上に追加します。
<div id="result"></div>
<script src="index.js"></script>
index.jsは以下のようになっています。
import $ from 'jquery';
import { h, patch } from 'picodom';
const state = {
apple: 0,
pear: 0,
grape: 0
};
let node;
function render() {
patch(node, (node = view()), $('#result')[0]);
}
function view() {
let result = state.apple + state.pear + state.grape;
return h('div', null, null, [
h('p', null, `概算：${result}円`),
h('p', null, `（内訳：りんご - ${state.apple}円、なし - ${state.pear}円、ぶどう - ${state.grape}円、）`)
]);
}
render();
$('[type="number"]').on('change', (e) => {
state[e.currentTarget.name] = e.currentTarget.value * e.currentTarget.dataset.price;
render();
});
簡単に説明していきます。
state変数
状態を保持させます。
render関数
picodomの描画用関数です。
第1引数に前の状態の要素を、第2引数に新しい状態の要素を、第３引数に描画の対象となる要素を指定します。
（2018/1/5現在、picodomのreadmeと引数の順番が違ったのでちょっと注意です）
view関数
仮想DOMを作っている部分で、変数stateを使っていろいろと表示させています。
jqueryイベントバインド
最後にinput type="number"な要素にchangeイベントを張り、変数stateの値を変更後、render関数で仮想DOMを再描画させています。
html側のinput要素では、以下のようにname属性と変数stateのキーがマッチするようにしているので、これを使って値の変更をしています。
<input type="number" value="0" min="0" name="apple" data-price="100">個
これでデモのように各個数を変更することで概算やら内訳やらが更新されるようになります。
まとめ
ちょっと幸せになれたでしょうか？
pidocomはVDOMの基本機能を極シンプルに提供してくれている印象で、本家様の紹介にもあったように、これをベースに独自に作り込んでいくのが良さそうだと思いました。
私個人こういったシンプルなライブラリが大好きなので、上手く使っていきたいと思います。