How do you like knockout?

合同勉強会 in 大都会岡山 -2014 Winter-2014/12/13

OITECきよくら ならみ

自己紹介

• きよくら ならみ–@kiyokura

–kiyokura.hateblo.jp

• NET系の開発やWebアプリ開発–Microsoft MVP for ASP.NET/IIS

• 近況： #Ｒ社

コミュニティ紹介

• Okayama IT Engineers Community

–OITEC

• .NET系・MS系のテクノロジが多い？

–特にしばりはないので、色々welcome

• http://oitec.vbstation.net/

本日のお品書き

• knockout.js のぼんやりした説明

• はじめての ばいんでぃんぐ

• バインディングの基本

• その他、色々

• もうちょっとだけ実用的かもしれない例

• まとめ

knockout.js のぼんやりした説明

Declarative Bindings

Automatic UI Refresh

Dependency Tracking

Templating

Simplify dynamic JavaScript UIs

with the

Model-View-ViewModel pattern

なんのこっちゃ

knockout.jsとは

• JavaScriptのライブラリ–フレームワークとも言われるが…

• AngularJSなどと違いフルスタックではない

• コンセプト–宣言型バインディング

–自動的なUIの更新

–依存性の追跡

–テンプレート

knockout.jsとは

• http://knockoutjs.com/

• OSS–MITライセンス

–https://github.com/knockout

こんなことができる（ようになる）

• 動的なUIをシンプルに構築

–JSとHTMLの依存関係を整理しやすく

–MVVMパターンの導入も視野に

非機能的な特徴

• 他のライブラリに依存しない– 取り回しが良い

• 機能がシンプル– 学習コストが低い

• 導入のハードルが全体的に低い– 「一部だけに使用」にも抵抗が少ない

– サーバサイドの言語・フレームワークを選ばない

– 古いブラウザでも動作

導入方法

• 取り込み– webからDL

• 公式サイト or github

– bower• bower install knockout

– NuGet• Install-Package knockoutjs

• CDN– https://cdnjs.com/– http://www.asp.net/ajax/cdn

四の五の言ってもあれなので

• knockoutの２大機能を中心に紹介

はじめての ばいんでぃんぐ

knockout 二大機能の一つ

• 「バインディング」をまずは軽く紹介

バインディングとは

• バインディング（binding）

–縛りつける・結びつける

• UIとJSのオブジェクトを結びつける

–「代入とは違うのだよ、代入とは！」

• バインド＝宣言的

• 代入＝手続的

例

var user = { name: "きよくら", age: 20 };

このオブジェクトの値を…

こんなHTMLに設定したい…とする

data-bind属性

• data-*属性を利用

• 「なにをどこにバインドするか」”宣言”

–なにを ： JSのオブジェクト

–どこに ： どの属性

data-bind="value:name"

ko.applyBindings()

• HTMLと紐づけるオブジェクトを用意

• ko.applyBindings()で紐づけを実行

ko.applyBindings(user);

knockoutによるバインディング

<script type="text/javascript">

$(function () {

var user = { name: "kiyokura", age: 20 };

ko.applyBindings(user);

});

</script>

<p>

name:<input type="text" data-bind="value:name" /><br />

age:<input type="text" data-bind="value:age" /><br />

</p>

one more thing,

• これは「単方向」バインディング

–Not “One time” , but “One way”

• UI側の更新が自動的にオブジェクトへ

JS側のオブジェクトの値を確認してみる

$("#btnCkeck").click(function () {alert(user.age);

});

<input type="button"value="check" id="btnCkeck" />

JS側のオブジェクトの値を確認してみる

単方向バインディング

• オブジェクトをHTMLに結びつける

– “代入”ではなく”宣言”

–UIの変更が自動的にオブジェクトへ

• 依存関係がシンプルに

–JSからHTML(DOM)参照が消滅

• 実際は0にならないケースあるが間違いなく減る

ごくシンプルな機能だが

• これだけでも有効な場合がある

–サーバサイドの比重が大きい場合など、JSのコード量を減らせる（可能性）

–HTMLとJSの依存関係を減らせる

• 生産性UP＆保守性UP につながる可能性

jQueryでやると…

<input type="text" id="name" /><input type="text" id="age" />

var user = {name: "kiyokura", age: 20 };$("#name").val(user.name);$("#age").val(user.age);

バインディングの基本

「監視」を絡めたバインディング

• 二大機能のもう一方、「監視」

• バインディングの真骨頂（たぶん）

Observable による状態の監視

var user = {name: ko.observable("kiyokura"),age: ko.observable(20)

};

Observable による状態の監視

var user = {name: ko.observable("kiyokura"),age: ko.observable(20)

};

オブジェクトを操作してみる

$("#btnYounger").click(function (){

var age = user.age();user.age(age - 1);

});

<input type="button"id="btnYounger" value="若返り" />

オブジェクトの変更がUIへ

双方向バインディング

• 「監視」という機能

–observableオブジェクトでラップ

• オブジェクトを監視し、UIに通知

–UIを自動更新

ko.observable()ko.observableArray()

ついでに、もうちょっと

• バインドできるのは“値”だけではない

• その一例を少しだけ

“計算結果” をバインド

var User = function () {var self = this;self.name = ko.observable("kiyokura");self.age = ko.observable(20);self.message = ko.computed(

function () {return self.name() + ", " +

self.age() + "さい";});

};var user = new User();

<span data-bind="text:message"></span>

イベントにメソッドをバインド

self.toYounger = function () {var age = user.age();user.age(age - 1);

};

<input type="button" value="若返り"data-bind="click:toYounger" />

双方向バインド

• “監視”と”バインド”のko 2大機能で

• オブジェクトとUI双方向で監視・更新

• “状態”と”コマンド”可能な機構

–これを生かしてPDSの観点で設計・実装

• それ、MVVMいけるんじゃね

その他、色々

いろんなバインディング

• テキストとか表現的な

–visible

–text

–html

– css

–style

–attr

いろんなバインディング

• 制御構文的な

–foreach

– if

– ifnot

–with

– component

いろんなバインディング

• フォーム部品関係

– click

–event

–submit

–enable

–disable

–value

いろんなバインディング

• フォーム部品関係

–textInput

–hasFocus

– checked

–options

–selectedOptions

–uniqueName

いろんなバインディング

• テンプレーティング

–template

カスタマイズや拡張

• カスタム・バインディング

–バインディングをカスタマイズ可能

• extend

–拡張メソッド（みたいな感じ）

もうちょっとだけ実用的かもしれない例

もうちょっとだけ実用的かもしれない例

• 例：json形式のデータを出し入れ

• 例：WebStorageへの保存機能を後付

例：json形式のデータを出し入れ

• 先ほどまでの例だと…「実際つかえるの？」と思うかもしれません

• ko.observableでイチイチラップしたオブジェクトを毎回定義するの？

• 大丈夫、無問題。

ko.mappingプラグイン

• オブジェクトやJSONをko.observableでラップされたオブジェクトを生成するvar jsData = {name: "foo",age:20};var vm = ko.mapping.fromJS(jsData);

ko.mappingプラグイン

• 逆にプレーンなオブジェクトにマッピングしなおすことも可能

var json = ko.mapping.toJSON(vm);

なので…こんなことも割と楽に可能

• ajaxでデータを取得してモデル作成

• モデルをJSON化してajaxで送信

例：WebStorageへの保存機能を後付

• koは「ちょっとココだけ使う」ことも比較的楽

• その一例

–https://github.com/kiyokura/komappingdemo

何の変哲もないwebフォーム

• 「localStorageに一時保存させて」と言われたたら？

<form action="register.php" method="post"><p>姓: <input type="text" name="lastName" />名: <input type="text" name="firstName" /><br />tel: <input type="text" name="tel" /><br />e-mail: <input type="text" name="email" /><br /><hr /><input type="submit" value="登録" />

</p></form>

それ、knockoutで

JSからDOMを見てるが、こんな

パターンなら別にいいんじゃないかと思う（個人的には）

まとめ

knockoutとは

• UIとオブジェクトの双方向バインディングを実現するJSライブラリ

• 主要機能は監視とバインディング

• "部分利用" から "フレームワーク"まで場面に応じて利用可能

knockout とは

• OSS

–gihub

–MITライセンス

• 依存関係もシンプル

–ほかのJSライブラリに依存しない

–サーバサイドのテクノロジにも依存しない

• （RubyでもPHPでも.NETでも）

個人的な感想

• つまみ食いしやすい

–アプリのアーキテクチャに食い込まない（ような使い方が可能）

• サーバサイドのフレームワークとも相性がいいと思う

–学習コストが低い

参考・リソース

公式サイト

• http://knockoutjs.com/

• ドキュメントとチュートリアルが充実

–ここの情報だけだいたいどうにかなる

–チュートリアルもとっつきが良い

おすすめ資料

• 『Knockout.jsの概要』

–by Mayuki Sawatari

–https://speakerdeck.com/mayuki/knockout-dot-jsfalsegai-yao

• knockoutの二大機能の仕組みを丁寧にわかりやすく解説。おすすめ。

• 動画もあります。

– https://www.youtube.com/watch?v=U-TRaV3IU6A

気軽に試すならjsfiddleで

• http://jsfiddle.net/

• ブラウザでJavaScriptを試せる

–保存やシェアもできるよ

• メジャーなライブラリを標準サポート

–knockoutも対応

番外編 - JSFiddleのポイント（？）

• jQueryとknockoutを使うなら

– ［Frameworks & Extensions］

• jQueryを選択

–［External Resources］

• knockoutのCDNを指定

– http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js

ご清聴ありがとうございました