5/17に、「第一回 knockoutjsハンズオン」に行ってきたので、６回に分けて勉強会の内容を紹介します。
初心者向けJavaScript入門からテラ・コーティングまで！JavaScriptフレームワークの主流、MVVMアーキテクチャパターンを採用しているknockoutjsを堪能する！ : ATND
今回は６回目です。最後はハンズオンでした。
ハンズオンの形式
ハンズオンは３つのグループに分かれて行われました。
- Aグループ：knockoutjsの基本的なチュートリアル
- Bグループ：Visual Studioを使ってknockoutjs
- Cグループ：knockoutjsテラコーティング
私はBグループを選びました。
ハンズオンでは、チューターの野呂清二さんと河内俊浩さんに教えてもらいながら、足し算アプリとTODOアプリを作りました。
ハンズオン資料
ハンズオンで使った資料です。
チューターから教えてもらったこと
- ViewModelはFunctionオブジェクトなので、使う時は必ず「new ViewModel()」すること
- ViewModelでは、thisを変数に入れてその変数を参照した方がよい（self = this;）
- 「$(function() { });」と書くと、ページをロードし終わったときに実行される
- applyBindingしたときにcomputedが一度呼ばれるので注意
- 監視対象のプロパティの初期化に注意
- 「self.title = '';」は不可。「self.title('');」とする
感想
私はKnockoutjsを使い始めた段階ですが、「Bグループ：Visual Studioを使ってknockoutjs」を選んで、レベル感はちょうどよかったです。
MVVMを学び始めた頃、ViewとModelは何となくイメージできても、ViewModelをどのように作ったらよいかわかりませんでした。
今回、TODOアプリを作成してみて、ViewModelをどのように作れば、きれいにViewと分離できるかがわかりました。
第二回の開催を検討しているそうなので、興味のある人は参加してはどうでしょうか。
リンク
第１回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた（その１「JavaScript入門」by 坂巻瑞穂さん） - プログラマーな日々
第２回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた（その２「ASP.NETの変遷とKnockout.js」by 日本マイクロソフト松崎剛さん） - プログラマーな日々
第３回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた（その３「プロジェクトにMVVMを適用する狙い」by 河内俊浩さん） - プログラマーな日々
第４回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた（その４「タイトル未定」by 田中豪さん） - プログラマーな日々
第５回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた（その５「knockoutでグラフを描こう！Viewを極めるMVVM」by 鈴木健太さん） - プログラマーな日々
