第18回　岡山Ruby, Ruby on Rails勉強会での発表資料

1. RailsでKnockout.js
逸見 誠(@mako_wis)

2. 自己紹介
• 逸見 誠(へんみ まこと)
• Twitter:@mako_wis
• 株式会社クレオフーガ
• フロントエンド/iOSアプリエンジ
ニア

3. 近況
・Knokout.js + .Net MVCでお仕事
・フットサルしてます

4. 勉強会スタッフ
岡山Ruby, Ruby on Rails勉強会（雑用）
Okayama.rb(イベント作成係）
中国地方DB勉強会（雑用）
オープンセミナー岡山（会計・雑用）

5. アジェンダ
Knockout.jsとは
Railsに導入してみる
使うと楽できる所
使ってみた感想

6. Knockout.jsとは

7. 主な特徴
※日本語ドキュメントから引用
エレガントな依存トラッキング
- データモデルが変更される度に、UIの関連付けられた部分を更新し
ます。
宣言型 バインディング
- データモデルとUIを関連付ける、シンプルで明確な方法です。複雑な
動的UIも、バインディング・コンテキストを階層化させることで簡単に
作成できます。
拡張が容易
- 新たなバインディングの仕組みを実装することも、最小限のコード量
で実現できます。

8. その他のメリット
※日本語ドキュメントから引用
純粋な JavaScript ライブラリである
- サーバサイド, クライアントサイドの技術を選びません。
既存のWebアプリケーションにも投入できる
- アーキテクチャに大きな変更を必要としません。
コンパクト
- gzip圧縮済みであればおよそ13KB程度です。

9. その他のメリット
※日本語ドキュメントから引用
メインストリームのブラウザをサポート
- ( IE6以降, Firefox2以降, Chrome, Safari 等 )
ビヘイビア駆動開発に向いている
- ビヘイビア駆動開発（テストコードが仕様書と
ほぼ同義となる開発手法）を用いて、新しいブラ
ウザやプラットフォームでの動作検証を簡略化す
ることができます。

10. とりあえず使ってみよう

11. Railsに導入してみる

12. 導入方法
・JSファイルをダウンロードして追加
・gemを使う

13. 今回はgemを使います

14. knockoutjs-rails
・JSファイルをダウンロードして追加
・gemを使う

15. これで使える・・・

16. と思ったら罠が

17. Rails4そのままだと動かない

18. 原因は・・・

19. ＿人人人人人人人＿
＞ turbolinks ＜
￣Y^Y^Y^Y^Y^Y￣

20. Rails4デフォルトで動かない
・どうやらturbolinksが原因っぽい
・turbolinksとknockoutが競合してる？
・turbolinksを無効にすると動きます

21. さようならturbolinks

22. これで使える

23. 導入方法まとめ
・プロジェクトにknockoutを追加
・turbolinksを無効にする←大事！

24. 使うと楽できる所

25. 入力値を同期したい

26. 入力値を同期する
%input(type="text" data-bind="value: message")
%br
%span(data-bind="text: message")
$ ->
TestappViewModel = ->
self = this
self.message = ko.observable("Hello World!!")
ko.applyBindings new TestappViewModel()
return
coffescript
haml

27. デモ

28. クリックに対して何かしたい

29. クリックでカウントアップ
%span(data-bind="text: numberOfClicks")
回クリックしました
%button(data-bind="click: incrementClickCounter")
クリックしてください
$ ->
TestappViewModel = ->
self = this
self.numberOfClicks = ko.observable(0)
self.incrementClickCounter = ->
previousCount = this.numberOfClicks()
this.numberOfClicks(previousCount + 1)
ko.applyBindings new TestappViewModel()
return
coffescript
haml

30. デモ

31. 配列に入ってるデータを表示

32. 配列のデータを出力
%ul(data-bind="foreach: users")
%li
%span(data-bind="text: name”)
：
%span(data-bind="text: type")
$ ->
TestappViewModel = ->
self = this
self.users = ko.observableArray([
{ name: "太郎", type: "長男" },
{ name: "二郎", type: "次男" },
{ name: "花子", type: "長女" }
]);
ko.applyBindings new TestappViewModel()
return
coffescript
haml

33. デモ

34. 詳しい情報は
日本語ドキュメントで
http://kojs.sukobuto.com/

35. 実際使ってみてどうなの？

36. 個人的にいいなと思ってる所
・画面周りの制御に特化してる
・CSSの付け替え、表示切り替えが楽
・Javascript用のクラスを付けなくていい
・Webフレームワークの領域と喧嘩しない

37. まとめ

38. Knockout.js便利！

39. プロジェクトにも入れやすい

40. まだCSSの
切り替えで消耗してるの？

41. ぜひ使ってみてください

42. おわり

43. はまり所
・2重バインドでエラー
・否定の場合は()が必要

44. 多重バインドでエラー
%ul(data-bind="foreach: users")
%li
%span(data-bind="text: name”)
：
%span(data-bind="text: type")
$ ->
TestappViewModel = ->
self = this
self.users = ko.observableArray([
{ name: "太郎", type: "長男" },
{ name: "二郎", type: "次男" },
{ name: "花子", type: "長女" }
]);
ko.applyBindings new TestappViewModel()
return
coffescript
haml