1. 最近のフロントエンド
よしだあつし@minami.rb

2. 自己紹介
• 名前: 吉田 篤(よしだ あつし)
• 年齢/性別: 31歳/男性
• Twitter: @yalab
• スリーサイズ: 秘密
• 職業: ゲームプログラマ(cocos-2d-x, c++, rails)
• rails contribute数: 2

3. jsフレームワーク
戦国時代

4. jsフレームワーク戦国時代
• Backbone.js
• Angular.js
• Ember.js
• Knockout.js
• Ractive.js and Rivets.js
• vue.js

5. なぜこれほどフレームワーク
が乱立した?

6. デファクトが
無いからさ

7. 一長一短

8. 一長一短
• 高機能だけど習得に時間がかかる？簡単に習得
できるけど機能が少ない？
• MVC? MVVM? MVW?
• 大規模向き？小規模向き？

9. そもそも js フレーム
ワークって必要？

10. 要件による

11. js フレームワークを
使うと良い点
• jQuery だけだとコードが乱雑になるところがま
とまる
• 高機能な事を簡単に実現できる
• Webアプリケーションの作り方の新しい発想が
持てる

12. jsフレームワークを
使うと悪い点
• 学習コストが要る
• 無駄にアニメーションとかしたくなる

13. Web アプリを作る技術者と
しては扱えたほうがいいのは
間違いない

14. そこで今日はvue.jsを
皆様に体験していただきます

16. vue.js?
• MVVM の VM を提供
• 双方向データバインディング
• 軽量、高速

17. 準備
$ git clone https://github.com/yalab/try_vue.git
• rails new して
• git 管理して
• rails-assets.org から vue.js をインストールして
• welcome#index を root にして
• bootstrap を適用したもの

18. step1. vue.js を読み込む
https://github.com/yalab/try_vue/compare/
master...step1

19. step1. のポイント
• el: にバインディングする DOM ノードを指定す
る
• data はそのまま出力される

20. step2. リスト表示
https://github.com/yalab/try_vue/compare/
step1...step2

21. step2. のポイント
• 繰り返し処理は v-repeat
• @$data に入れたデータは view に出力される
• created: は $el と $data を双方向バインディ
ングする直前に呼ばれる http://vuejs.org/api/
instantiation-options.html#created

22. step3. 検索
https://github.com/yalab/try_vue/compare/
step2...step3

23. step3. のポイント
• v-model を指定すると vue.js の data として扱
われる
• filterBy すごい

24. step4. フォーム
https://github.com/yalab/try_vue/compare/
step3...step4

25. step4. のポイント
• v-model を指定したフォームの値は即座に js の
オブジェクト(model)と DOM(view) に反映され
る
• 配列も同様に即座に反映される

26. vue.js の用途
• 小さなシングルページアプリケーション
• データのプリフェッチをする場合あまりデータ
量が多くないアプリケーション

27. vue.js の現状
• まだβ版(0.10.5)
• vue-router などの機能追加の予定あり
• IE9以上でしか動かない(今後もレガシーブラウザ
対応しない)

28. js は Web開発者には
必須の言語に(残念ながら)
なりました。

29. js 界隈も watch しておくと良いです。
(もう少し圧倒的なデファクトが
出てきたらうれしいのに。)

30. js 戦国時代に
取り残されるな!

31. ご清聴ありがとう
ございました。