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