Vue.jsの特徴 - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

9 ExcelみたいにDOMを構築 input (画面A) input (画面B) input (画面C) 計 input (単価) 合計金額 td td td td td td table table ここを3にすると… sumが再計算されて8になるこっちも再計算されて32万になる

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

14 ちなJSX

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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