JavaScript
knockoutjs
More than 3 years have passed since last update.


はじめに

fkskです。qiitaでは初めての投稿で緊張しています。

よろしくお願いします。

さて、巷ではjavascriptのフレームワークで賑わっているようです。

いかんせん、そういったモノに触れたことが無いので、今回の投稿を期にほんの気持ち程度やっていこう思います。

今回は数あるフレームワークの中でも、最も強そうな名前のKnockout.jsが気になったので、ぼちぼちやっていきます。


まずKnockout.jsって

Knockout.jsはMVVMのパターンをサポートするためのもので、データバインドを使って、ViewとViewModelを宣言的に関連付けるものらしいです。

そうすると何ができるかって話ですけど、ViewとViewModelのどちらか一方を変更すると、もう一方にその変更が自動的に反映されるそうです。

また、Viewのhtmlのボタンをクリックするなどのアクションも、データバインドを使ってViewModelのメソッドと関連付けることができるそうな。


そもそもMVVMって

MVCモデルしか知らない自分は「なんでModel2つあんの?なんでView2つあんの?Controllerどこ?」とか思います。

まぁ調べると「Model」「View」「ViewModel」の意で、

ModelではJavaScriptでWebサービス呼び出しなどを行うドメインロジックを実装している

ViewではHTMLでUIのテンプレートを定義している

ViewModelではJavaScriptで、ViewへのデータバインドのためにViewの状態を保持し、プレゼンテーションロジックを実装する

ほかにもたくさん書いてましたが、ゴチャゴチャしててわからなかったので省きます。


使ってみたい

Knockout.jsの導入は簡単で

http://knockoutjs.com/downloads/index.html

↑ここからJSファイルを落としてきて、scriptタグで読み込めばいいみたいです。

楽勝ですね。

ということで、ちょっとHelloWorldもどきをしてみたいと思います。


example.html

<html>

<head>
<!-- さっき落としてきたknockoutをインポート -->
<script src="knockout-3.2.0.js"></script>
<!-- 下に表示してるViewModelのファイルをインポート -->
<script src="example.js"></script>
</head>
<body>
<p>FirstName: <input data-bind="value: firstName" /></p>
<p>LastName: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
</body>
</html>


example.js

window.onload = function () {

var ViewModel = function(first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
};
// このViewModelとView(上のexample.html)を関連付け
ko.applyBindings(new ViewModel("showk", "fksk"));
}

こうすることで、KnockoutはUIの更新を検知し、firstNameとlastNameのどちらを編集してもfullNameの内容が更新されるようになります。

つまり、firstNameには"fksk"、lastNameには"showk"が初期値として出ていますが、変更するとfullNameの"showk fksk"にそれが反映されるということです。

デモをした方が分かりやすいのですが、サーバ動かないのでやめます。

察してください。


感想とか

そもそもjsフレームワークの知識がありませんでした。

当然、調べていくと更に分からないものがでてきます。

未知の世界。勉強不足を痛感。一つ一つモノにしていきたいですね。


参考記事

[Knockout] MVVMパターンでアプリケーションを構築する

 http://www.buildinsider.net/web/bookjslib111/89

MVVMパターンの常識 ― 「M」「V」「VM」の役割とは?

 http://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_02/greatblogentry_02_01.html

Knockout.js入門

 http://tech.aainc.co.jp/archives/5346

Knockout.js 日本語ドキュメント

 http://kojs.sukobuto.com/tips/helloWorld

[Knockout.js基本編]最低限の構成で「Hello World」してみる

 http://analogic.jp/knockout-usage/