Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vue.js ハンズオン資料

4,707 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. ご清聴ありがとう ございました。

×