こんにちは、つばさ（@tsubasa123）です。
おもしろそうというか便利そうなjQueryブラグインを見つけたのでご紹介です。JavaScriptフレームワーク戦国時代の今日、どれを使うべきなのか非常に悩ましい問題ではありますが、ちょっとしたコードを書くだけならプラグインで済ませるというのも選択肢の1つとしてありなのかなと思っています。
あと最近、ほんとにプログラミングネタの記事しか書けなくなってきました。これも結構悩ましい。
公式サイトがめっちゃキレイ
見ていただければわかりますが、様々な種類のデモが用意されており、実際にプラグインでどんなことができるか動かしながら確認できるようになっています。コードも一緒に紹介されているので非常に分かりやすい構成になっています。
機能が豊富すぎで覚えきれない
APIリファレンスも用意されています。これも非常に見やすいんですが、ちょっと多機能すぎ。プラグインの域を超えるくらい豊富な機能が提供されています。
すべてを使いこなすには結構時間がかかりそう。でもUIとデータ構造間でのデータバインディングを行うだけならそこまで難しくないので大丈夫です。
インストールと初期設定
難しいことは抜きにして、単純な双方向バインディングをするだけのやり方です。jQueryのプラグインなので当然jQueryは必要になるのですが、もうひとつ、Sugar.jsというユーティリティライブラリにも依存しているのでこちらの読み込みを必要になります。
文字列や配列、あと日付関連の操作をサポートしてくれるライブラリのようで、ポリフィル的な役割をしてくれます。JSのコアオブジェクトを拡張して機能提供してくれるものなので好みが別れそうなところですが、プラグインが依存しているので使いたい場合は読み込みが必要になります。
Sugar.jsを読み込む際には、最新の2.x系ではなく、1.4.x系のものを読み込む必要があるので注意が必要です。過去のリリースノートからリンクをたどることができるようになっています。これを見つけるのに苦労しました。下記にリンクも貼っときます。
最新じゃないバージョンのライブラリに依存しているというは少し不安が残りますが、まぁ遊びで使う分には問題ないかなと。業務や開発で使う際にはこの辺はよく調べたほうがよさそうですね。
jQueryに関しては2.x以上と書かれていました。2系、3系の両方を試してみましたが、どちらでも動作するようです。
Sugar.jsとjQueryとjquerymy.jsの3つを読み込ませたら、初期化処理を行います。今回は公式サンプルにならって、#nameと#ageのinput要素があると仮定します。
<script src="./sugar.min.js"></script> <script src="./jquery-3.1.1.min.js"></script> <script src="./jquerymy-1.2.8.js"></script> <script> var data = { name: "tsubasa123", age: 100 }; $("#form").my({ui:{ "#name": "name", "#age": "age" }}, data); </script>
これで初期化完了です。プラグインのメソッドにuiというプロパティをもったオブジェクトを渡します。uiプロパティにはキーにセレクタ、バリューにデータをセットしたオブジェクトを指定します。言葉にするとわかりにくいですが、コードを見れば雰囲気は掴めると思います。
この後は、ユーザーがUIから入力値を変更すればデータオブジェクトにも変更が反映されますし、ビジネスロジック側でデータオブジェクトの値を変更するとUIにも反映されるようになります。便利ですね。（UIの変更はchangeイベントを監視しているようです）
また、
$('#form').my('data');
と呼び出すと現在の値を取得（ゲッターとして動作）でき
data = {
name: 'hogeohoge',
age: 10,
};
$('#form').my('data', data);
と呼び出すとデータを上書き（セッターとして動作）することもできます。セッターは微妙ですがゲッターはそこそこ使い機会があるかもしれません。
さいごに
jQueryプラグインによる双方向データバインディングの基礎的な使い方の紹介でした。軽い気持ちで書き始めましたが、想像以上にプラグインの機能が豊富だったため、本当に初歩的なところしかまとめ切れませんでした。あとインストールに時間がかかった。
UI->データへのバインディングは様々なフレームワークでも使われていますが、そのためだけにフレームワークを導入するのはオーバースペックな時もあったりします。そんなときに使うと色々捗りそうです。もう少しレベルアップしたら私も何かに使ってみます。
ではでは、最後までお付き合いいただきありがとうございました。
コメント