はじめに

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/

Knockout.jsをなぞる