Vue.js入門

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を１つの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を意識しよう