Vue.jsの特徴

Transcript

1. Vue.jsの特徴 2017/12/28 岸野 大輔

2. 発音はViewと同じビュー Copyright (c) 2016 people software. All Rights Reserved. 2

3. 3 会津若松周遊アプリはVue.js製

4. 4 今日話さないこと • 記法とか • AngularJSやReactを知ってれば問題ナッシング

5. 5 コンポーネント指向 • コンポーネント化＝UIの部品化 • コンポーネントを組み合わせて、ページを構築する 実体は・・ • コンポーネント＝独自タグ+HTML/JS/CSSのパッケージ化

6. 6 コンポーネントとディレクティブ • AngularJS 1.xのディレクティブもコンポーネントとして使用できる が、既存タグへの独自の振る舞いを挟み込むこともできる。 • Vue.jsでは、コンポーネントとディレクティブは明確に役割が分かれ ている

7. 7 リアクティブ • 身近なリアクティブ＝Excel ここを3に すると… sumが再計算さ れて8になる こっちも再計 算されて32万

   になる

8. 8 ExcelみたいにDOMを構築 工数（人日） 画面 画面 画面 計 単価 合計金額

9. 9 ExcelみたいにDOMを構築 input (画面A) input (画面B) input (画面C) 計 input

   (単価) 合計金額 td td td td td td table table ここを3に すると… sumが再計算さ れて8になる こっちも再計 算されて32万 になる

10. 10 仮想DOM • 全部DOMをレンダリングしてたら重いよね～ • 仮想DOM（単なるJSのオブジェクトツリー）を再構成 • それを元に、実際のDOMを差分反映

11. 11 ビューライブラリ特化 • Ajaxとか、ルーティングとか、状態管理とか、は別ライブラリに任せる • Angularのような「フレームワーク」は、全部入り 組合せ例 • Ajax：Axios •

    ルーティング：vue-router、OnsenUIのv-ons-navigator • 状態管理：Vuex

12. それってReactと同じじゃね？ Copyright (c) 2016 people software. All Rights Reserved. 12

13. 13 テンプレート • 普通のHTMLの様に書ける • ReactはJSXという変態フォーマットがデファクト 工数（人日） 画面 画面 画面

    計 単価 合計金額

14. 14 ちなJSX

15. 15 シングルファイルコンポーネント • HTML(テンプレート)/JS/CSSを1ファイルに書ける • 実際はモジュールバンドラー(Webpackなど)でコンパイルして、 JS・CSSファイルに分かれる

16. 16 シングルファイルコンポーネント HTML JavaScript CSS

17. 17 Vuex • Fluxの実装 • ReactデファクトのReduxよりシンプル • 説明は長くなるのでまた別の機会に

18. 18 中国で人気 • 中国の人が、Reactと同じコンポーネントを開発してくれる • Google翻訳が賢くなったので、読みは問題なし

19. 19 日本語の公式ドキュメントがある • https://jp.vuejs.org/

20. 20 ちなみに・・ • Monaca(OnsenUI)の中の人曰く、Vue.jsにはリソースを割いてい るとのこと • つまるところVue.jsとは、AngularとReactの良いとこどりみたい な存在 • みんなもVue.js使おうぜ！

21. おわり Copyright (c) 2016 people software. All Rights Reserved. 21