Vue.js ハンズオン資料

4,453 views

Published on

Published in: Technology

Vue.js ハンズオン資料

  1. 1. 最近のフロントエンド よしだあつし@minami.rb
  2. 2. 自己紹介 • 名前: 吉田 篤(よしだ あつし) • 年齢/性別: 31歳/男性 • Twitter: @yalab • スリーサイズ: 秘密 • 職業: ゲームプログラマ(cocos-2d-x, c++, rails) • rails contribute数: 2
  3. 3. jsフレームワーク 戦国時代
  4. 4. jsフレームワーク戦国時代 • Backbone.js • Angular.js • Ember.js • Knockout.js • Ractive.js and Rivets.js • vue.js
  5. 5. なぜこれほどフレームワーク が乱立した?
  6. 6. デファクトが 無いからさ
  7. 7. 一長一短
  8. 8. 一長一短 • 高機能だけど習得に時間がかかる?簡単に習得 できるけど機能が少ない? • MVC? MVVM? MVW? • 大規模向き?小規模向き?
  9. 9. そもそも js フレーム ワークって必要?
  10. 10. 要件による
  11. 11. js フレームワークを 使うと良い点 • jQuery だけだとコードが乱雑になるところがま とまる • 高機能な事を簡単に実現できる • Webアプリケーションの作り方の新しい発想が 持てる
  12. 12. jsフレームワークを 使うと悪い点 • 学習コストが要る • 無駄にアニメーションとかしたくなる
  13. 13. Web アプリを作る技術者と しては扱えたほうがいいのは 間違いない
  14. 14. そこで今日はvue.jsを 皆様に体験していただきます
  15. 15. vue.js? • MVVM の VM を提供 • 双方向データバインディング • 軽量、高速
  16. 16. 準備 $ git clone https://github.com/yalab/try_vue.git • rails new して • git 管理して • rails-assets.org から vue.js をインストールして • welcome#index を root にして • bootstrap を適用したもの
  17. 17. step1. vue.js を読み込む https://github.com/yalab/try_vue/compare/ master...step1
  18. 18. step1. のポイント • el: にバインディングする DOM ノードを指定す る • data はそのまま出力される
  19. 19. step2. リスト表示 https://github.com/yalab/try_vue/compare/ step1...step2
  20. 20. step2. のポイント • 繰り返し処理は v-repeat • @$data に入れたデータは view に出力される • created: は $el と $data を双方向バインディ ングする直前に呼ばれる http://vuejs.org/api/ instantiation-options.html#created
  21. 21. step3. 検索 https://github.com/yalab/try_vue/compare/ step2...step3
  22. 22. step3. のポイント • v-model を指定すると vue.js の data として扱 われる • filterBy すごい
  23. 23. step4. フォーム https://github.com/yalab/try_vue/compare/ step3...step4
  24. 24. step4. のポイント • v-model を指定したフォームの値は即座に js の オブジェクト(model)と DOM(view) に反映され る • 配列も同様に即座に反映される
  25. 25. vue.js の用途 • 小さなシングルページアプリケーション • データのプリフェッチをする場合あまりデータ 量が多くないアプリケーション
  26. 26. vue.js の現状 • まだβ版(0.10.5) • vue-router などの機能追加の予定あり • IE9以上でしか動かない(今後もレガシーブラウザ 対応しない)
  27. 27. js は Web開発者には 必須の言語に(残念ながら) なりました。
  28. 28. js 界隈も watch しておくと良いです。 (もう少し圧倒的なデファクトが 出てきたらうれしいのに。)
  29. 29. js 戦国時代に 取り残されるな!
  30. 30. ご清聴ありがとう ございました。

×