5/17に、「第一回 knockoutjsハンズオン」に行ってきたので、6回に分けて勉強会の内容を紹介します。
初心者向けJavaScript入門からテラ・コーティングまで!JavaScriptフレームワークの主流、MVVMアーキテクチャパターンを採用しているknockoutjsを堪能する! : ATND
今回は6回目です。最後はハンズオンでした。
ハンズオンの形式
ハンズオンは3つのグループに分かれて行われました。
- 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と分離できるかがわかりました。
第二回の開催を検討しているそうなので、興味のある人は参加してはどうでしょうか。
リンク
第1回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた(その1「JavaScript入門」by 坂巻瑞穂さん) - プログラマーな日々
第2回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた(その2「ASP.NETの変遷とKnockout.js」by 日本マイクロソフト松崎剛さん) - プログラマーな日々
第3回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた(その3「プロジェクトにMVVMを適用する狙い」by 河内俊浩さん) - プログラマーな日々
第4回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた(その4「タイトル未定」by 田中豪さん) - プログラマーな日々
第5回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた(その5「knockoutでグラフを描こう!Viewを極めるMVVM」by 鈴木健太さん) - プログラマーな日々