#はじめに
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もどきをしてみたいと思います。
<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>
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/