プログラマーな日々

プログラマーをやっています。好きなものは、C#, TaskChute Cloud, WorkFlowy, Backlog, AWSです。

「第一回 knockoutjsハンズオン」に行ってきた(その6 ハンズオン)

f:id:JHashimoto:20140409044240j:plain

5/17に、「第一回 knockoutjsハンズオン」に行ってきたので、6回に分けて勉強会の内容を紹介します。

初心者向けJavaScript入門からテラ・コーティングまで!JavaScriptフレームワークの主流、MVVMアーキテクチャパターンを採用しているknockoutjsを堪能する! : ATND

 

今回は6回目です。最後はハンズオンでした。

ハンズオンの形式

ハンズオンは3つのグループに分かれて行われました。

  • Aグループ:knockoutjsの基本的なチュートリアル
  • Bグループ:Visual Studioを使ってknockoutjs
  • Cグループ:knockoutjsテラコーティング

私はBグループを選びました。

ハンズオンでは、チューターの野呂清二さんと河内俊浩さんに教えてもらいながら、足し算アプリとTODOアプリを作りました。

ハンズオン資料

ハンズオンで使った資料です。

20140517 knockoutjs hands-on

チューターから教えてもらったこと

  • 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 鈴木健太さん) - プログラマーな日々