Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.jsの特徴

 Vue.jsの特徴

774a937b74096e82576b37678d00aeca?s=128

Daisuke Kishino

February 19, 2018
Tweet

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