最近のフロントエンドよしだあつし@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 戦国時代に 取り残されるな!

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