jqueryとpicodomを組み合わせてちょっと幸せになりたい

こwのw組wみw合wわwせwwwwww
今回はBL縛りにしようと思っていたんだけどいざキャラ完成すると このファザコンに恋人作れる展開があるのか・・・?など余計な事を色々考えすぎたので取り合ず部隊に入りたい(よそとは事前関係組んでないからまっさらではあるんだけど
生来ポリ公とは気が合わねェ。真選組(くろ)にも見廻組(しろ)にも混ざるつもりはねェ
フリーター組話合わなすぎて草
FGOイベント終わったから下総国続きやってたんだけど黒縄衆合組勝てる気がしな…
厨病激発ボーイでパニッシャーって意外と合…「来いよ、クレバーに抱いてやる(非童貞の余裕)」とか「俺色カラーに染め上げて(よく考えたら返り血だから俺色カラーじゃねぇ)」とか「愛する人を守るため(ここ守護者組の方が合うわ)」とかな!(ほぼ合ってねぇ)まあ調子こいてる感じは合ってるな
私立組明日頑張ってね💯🈴💮 応援してるよ~
沖|田|組が自主的に手|合|せをしている。
春組の中でも特に女性人気やばそうだけど春組の中で特に気が合わなそうな2人が「俺たち別に仲良くないけとどお前も俺もそれでいいよな」って結論出すためのイベがえすりの初イベってのも面白いし、アリスモチーフも最高だったしマジで1番好きなんだよ…
看到一則新聞是有個男A,他朋友B在群組貼男A前女友合照導致男A現任吵架,然後男A跑去砍男B。 #很可憐但無法同情他 #做人不能太白目
村正の頭の中でできてるのだけど一番ハードな作りになりそうで。 そして新撰組が合皮の壁…

jqueryはなんやかんや今も現役で、消えることはないんじゃないかと思っているnakazatoです。
これはそんな現役バリバリのjquerypicodomを使ってちょっと幸せに使いたい、という趣旨の記事です。

jqueryの辛いところ

「フォーム画面でリアルタイムに入力内容を反映させたいんですー。」という要望があったとします。
これをjqueryで実装しようと思った場合

  1. 結果反映用の要素をhtml側に用意し
  2. 各フォーム要素にイベントを張り
  3. 値を取得して保持し
  4. 結果反映用要素に変更を加える

という具合になると思います。この時辛いのが

4. 結果反映用要素に変更を加える

こいつです。
反映箇所が多ければ多いほど、class振ったり取得したりと辛いのです。
ここをpicodomを使って省略し、ちょっと幸せになってみます。

picodomについて

VDOMでページを操作する1 KBのJSライブラリ、ということで最近話題のhyperappの記事に登場していました。
参照:2018 年は Hyperapp の年だ

Picodom をベースにしたオリジナルビューライブラリや、VDOM 系ツールとか、ユーザーが楽しく簡単に作れたら嬉しいと思う。

ということで、VDOMの力をわずかばかり借りてみます。

やること

スクリーンショット 2018-01-05 14.11.40.png
デモ

購入個数を変更したら即座に概算が出るような画面です。

実装

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引数に新しい状態の要素を、第3引数に描画の対象となる要素を指定します。
(2018/1/5現在、picodomreadmeと引数の順番が違ったのでちょっと注意です)

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の基本機能を極シンプルに提供してくれている印象で、本家様の紹介にもあったように、これをベースに独自に作り込んでいくのが良さそうだと思いました。
私個人こういったシンプルなライブラリが大好きなので、上手く使っていきたいと思います。

[紹介元] jQueryタグが付けられた新着投稿 – Qiita jqueryとpicodomを組み合わせてちょっと幸せになりたい

  • コメント

    1. 匿名希望
      2018/01/21(日) 03:59:25

      こwのw組wみw合wわwせwwwwww

    2. 匿名希望
      2018/01/21(日) 03:59:25

      今回はBL縛りにしようと思っていたんだけどいざキャラ完成すると
      このファザコンに恋人作れる展開があるのか・・・?など余計な事を色々考えすぎたので取り合ず部隊に入りたい(よそとは事前関係組んでないからまっさらではあるんだけど

    3. 匿名希望
      2018/01/21(日) 03:59:25

      生来ポリ公とは気が合わねェ。真選組(くろ)にも見廻組(しろ)にも混ざるつもりはねェ

    4. 匿名希望
      2018/01/21(日) 03:59:25

      フリーター組話合わなすぎて草

    5. 匿名希望
      2018/01/21(日) 03:59:25

      FGOイベント終わったから下総国続きやってたんだけど黒縄衆合組勝てる気がしな…

    記事に戻る

関連記事