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入門

15,910 views

Published on

Vue.jsについての紹介と、1.0の変更点について

Published in: Engineering
  • Be the first to comment

Vue.js入門

  1. 1. Vue.js入門(1.0対応) UUUM株式会社 システムユニット 佐藤琢哉
  2. 2. UUUMではエンジニア積極採用中! Web インフラ(AWS) サーバ(PHP) クライアント(HTML/CSS/JS) アプリ(iOS/Android) 詳細は でhttp://www.uuum.jp/recruit/
  3. 3. Vue.jsとは JavaScriptのMVVMフレームワーク 軽量 フルスタックではない
  4. 4. MVVM? Model-View-ViewModel View=UI、つまりHTML Model=データ、JavaScriptのオブジェクト ViewModel=UIとデータを繋ぐ部分、Vue.jsのオブジェ クト
  5. 5. jQueryは何が悪かったのか? プレゼンテーションとロジックが混ざりやすい 手続き型 「データをセットする」という処理を明記しないとい けない どこで何のデータが管理されているのかわからなくなる 表示のロジックを変更したいのか、データに関するロジ ックを変更したいのかがわからない ただし用途を間違えなければ今でも十分使える
  6. 6. MVVMの設計 表示に関することはViewで データに関することはModelで データと表示のつなぎ込みはViewで わかりやすい リアクティブ・プログラミングによる実現
  7. 7. リアクティブ・プログラミング Reactive=反応的な データの変更がそのままViewにすぐ同期される 普通:data = 1; view.setData(data); リアクティブ:data = 1; // この時点でviewにはもう反映 されている ビジネスロジックが、ModelとViewの対応を知らなくて も良い
  8. 8. Vue.jsは何が優れているか 軽量 余計な機能やMVVMと関係ない機能は搭載されていな い ドキュメントも少ないため、学習コストが低い (かつ)拡張性が高い コンポーネントシステム フィルタ mixin ほどほどに使いやすい(重要) 好みとも言える
  9. 9. 1.0での変更点 テンプレート記法の追加 普通のHTML属性に「:」を足すとv-bindに <a :href="someURL"></a> 普通のHTML属性に「@」を足すとv-onに <button @click="onClick"></button>
  10. 10. 1.0での変更点 新記法v-foo:barの追加 NG : <div v-on="click: doThis, keyup: doThat"> OK : <div v-on:click="doThis" v- on:keyup="doThat"> Mustache記法がVue.jsのプロパテイ下で使えなくなった NG : <component is="{{view}}"></component> OK : <component v-bind:is="view"></component> OK : <a href="{{baseURL}}/abc"></a>
  11. 11. 1.0での変更点 stopPropagation()やpreventDefault()が簡単に呼べる <a v-on:click.stop="doThis"></a> <form v-on:submit.prevent></form>
  12. 12. 1.0での変更点 checkboxを1つのv-modelで扱えるようになった ↑の場合、checkedNamesはArrayであること <input type="checkbox" value="Jack" v-model="checkedNames"> <input type="checkbox" value="John" v-model="checkedNames"> <input type="checkbox" value="Mike" v-model="checkedNames">
  13. 13. 1.0での変更点 v-elseの追加 直前のv-ifやv-showに対するelseを実行できる <div v-if="Math.random() > 0.5"> Sorry </div> <div v-else> Not sorry </div>
  14. 14. 1.0での変更点 詳細は http://vuejs.org/2015/10/26/1.0.0-release/ https://github.com/vuejs/vue/releases/tag/1.0.0
  15. 15. 使ってみよう!
  16. 16. 基本 <div id="view">ここがVue.js管理領域</div> <script src="vue.js">< /script> <script> new Vue({ el: '#view' }); < /script>
  17. 17. 基本 new Vue(); で作成されたオブジェクトがViewModel el プロパティで、DOMのどの領域をVue.jsの管理領域に するか決める(=View) 管理外の領域に対しては何もしない
  18. 18. データバインディング <div v-text="message"></div> new Vue({ data: { message: 'hello!' } });
  19. 19. データバインディング data プロパティがModel そのものになる ただしちょっと癖がある data.message に何かを指定すると、 v-text="message" の 領域の中身が即座に書き換えられる
  20. 20. イベントの取得 <button @click="submit">決定</button> new Vue({ methods: { submit: function() { alert('hello!'); } } });
  21. 21. イベントの取得 JSのイベント名の前に@を付けた属性に、実行メソッド を指定 v-on="click: submit"でも可 引数も指定できる それってHTMLにロジック書いてない?関心の分離 (SoC)はどこに行った? Vue.jsの管理メソッドにしかバインドできない ViewModel内からDOM構造っぽいもの(イベントハン ドラ)を排除できる HTMLを見るだけでどこにイベントがあるのかわかる ようになる
  22. 22. リスト表示 <ul> <li v-for="item in items">{{ item.value }}</li> </ul> new Vue({ data: { items: [ { value: 1}, { value: 2} ]} });
  23. 23. リスト表示 v-for でループ式を指定すると、それの中身が繰り返され て展開される v-for="one in list" orderも指定できる リストへのデータの追加は、 $set や$remove で行う必要 がある 普通に追加すると変更がViewに通知されない はまりやすいポイント
  24. 24. Mustache記法 ますたっしゅ? 様々な言語に移植されているメジャーなテンプレートエ ンジン Vue.js 管理下のDOMでこの記法を使うと、Modelの変数 をその位置に表示することができる {{ }} が他のテンプレートエンジンの記法と被る時は Vue.config.delimiters = ['{%', '%}']; のようにして変更す ることが可能 ただしVue.jsの初期化が完了するまでは{{ message }} のよ うな表示がそのまま画面に表示されてしまうため、可能 な限りv-text等を使うのが良い 1.0になって使える場面が減った
  25. 25. フォーム <input type="text" v-model="name" /> <button @click="hello"></button> new Vue({ data: { name: null }, // 省略可 methods: { hello: function() { alert('hello ' + this.name); } } });
  26. 26. フォーム v-model で、フォーム要素のvalueの値へのバインディン グができる < select >もv-modelで HTMLにnumber プロパティがあると数値型になる
  27. 27. フィルタ <div v-text="message | uppercase"></div> | で繋ぐと、フィルタメソッドが実行されて表示される 組み込みのフィルタは多くないが、自作は簡単なので、 複雑なフィルタも作成できる
  28. 28. inline expressions <div v-text=”last_name + ' ' + first_name”></div> v-textやテンプレート等の中で簡単な演算ができる 難しいことをしたい場合はcomputed propertiesで
  29. 29. computed properies <div v-text="full_name"></div> new Vue({ data: { first_name: 'sato', last_name: 'takuya' }, computed: { full_name: function() { return last_name + ' ' + first_name; } } });
  30. 30. コンポーネントシステム Vue.js管理下のHTML内に独自タグを定義することができ る 独自タグの中身は別の箇所のHTMLをはめ込むことがで きる WebComponentsっぽい!(気がする) React.jsっぽい!(そうか?) 何回も使うようなHTML集合をコンポーネントとして汎 用化することができる
  31. 31. 表示制御 <div v-show="isVisible">show!</div> new Vue({ data: { isVisible: false } });
  32. 32. 表示制御 v-show の中身がtrue と判定される場合のみに表示する false の場合はdisplay: none にする v-if の場合は要素が削除される CSSのアニメーション制御も可能 CSSのクラスやHTMLのプロパティのON/OFF制御も可能
  33. 33. 実践例 管理画面に適用するとすぐ使える 例えば、入力欄Aが特定の値の場合のみ入力欄Bを表示 する 例えば、金額を入力すると即座に消費税込みの金額を 表示する
  34. 34. 入力欄Aが特定値の場合入力欄Bを表示 <select v-model="type"> <option value="user">ユーザー</option> <option value="admin">管理者</option> </select> <div v-show="type == 'admin'"> <h3>管理者限定の設定</h3> <p>管理者ID : <input type="text"></p> </div>
  35. 35. 金額を入力すると消費税込の値を表示 <p>金額 <input type="text" v-model="price" number></p> <p>税込 : <span v-text="priceWithTax"></span></p> new Vue({ computed: { priceWithTax: function() { return Math.floor(price * 1.08); } } });
  36. 36. 管理画面で使う ほとんどJavaScriptを書く必要がない Vue.jsの組み込み機能だけで表示非表示の制御ができ る ちょっとした編集値の表示もすぐできる 入力数が可変のフォームを作るのも簡単 v-forとリストの組み合わせ
  37. 37. 複雑なことをする場合 Browserify等を使ってモジュール化しよう 通信は搭載されていないので他のライブラリを使おう 公式でvue-resource コンポーネントが用意されている jQueryでもいい テストを書こう プレゼンテーションとロジックが分離されているので 書きやすいはず
  38. 38. Vue.jsを使う上で避けたいこと Vue.js内でDOMの書き換えを直接書く ほとんどの場合で必要ない ドラッグ&ドロップ等で必要になることはあるが、な るべくcomponent化などで最小限にすべき
  39. 39. Vue.jsを使う上で避けたいこと methodsを書きすぎる methods=Controllerに近い テストのしやすさを考える 通信が入る部分などはPromiseを使いうまく分離する methodsが太り過ぎる場合は外部に逃す
  40. 40. Vue.jsを使う上で避けたいこと Vue.js管理外のDOMを操作する 管理されている箇所以外を操作してしまうと、何が何 だかわからなくなる そもそも直接書き換えが入っている時点で駄目 画面内に複数のVue.js領域がある場合、それらは個別のも のとして扱う 連携が必要な場合はコンポーネントで
  41. 41. まとめ Vue.jsは特に管理画面などで強力 Vue.jsを使っても書き方によっては汚くなる 画面表示に関するロジックはMVVMを意識しよう

×