Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Vue.jsの特徴
Daisuke Kishino
February 19, 2018
Programming
0
530
Vue.jsの特徴
Daisuke Kishino
February 19, 2018
Tweet
Share
More Decks by Daisuke Kishino
See All by Daisuke Kishino
kishino
1
140
kishino
0
340
kishino
0
400
kishino
0
280
kishino
0
110
kishino
0
120
kishino
0
320
Other Decks in Programming
See All in Programming
manfredsteyer
PRO
0
130
legalforce
PRO
0
630
watilde
4
1.3k
tourismgeek
1
130
lovee
2
190
grapecity_dev
0
170
mizotake
2
290
emmaglorypraise
0
130
grapecity_dev
0
170
ryokbt
2
290
antonshilov
1
100
takahi5
1
420
Featured
See All Featured
rmw
11
810
dougneiner
55
5.4k
jmmastey
10
610
chrislema
231
16k
ufuk
56
5.4k
samanthasiow
56
6.4k
destraynor
146
19k
lauravandoore
10
1.5k
tmm1
61
9.3k
nonsquared
81
3.4k
michaelherold
225
8.5k
dougneiner
118
7.9k
Transcript
Vue.jsの特徴 2017/12/28 岸野 大輔
発音はViewと同じビュー Copyright (c) 2016 people software. All Rights Reserved. 2
3 会津若松周遊アプリはVue.js製
4 今日話さないこと • 記法とか • AngularJSやReactを知ってれば問題ナッシング
5 コンポーネント指向 • コンポーネント化=UIの部品化 • コンポーネントを組み合わせて、ページを構築する 実体は・・ • コンポーネント=独自タグ+HTML/JS/CSSのパッケージ化
6 コンポーネントとディレクティブ • AngularJS 1.xのディレクティブもコンポーネントとして使用できる が、既存タグへの独自の振る舞いを挟み込むこともできる。 • Vue.jsでは、コンポーネントとディレクティブは明確に役割が分かれ ている
7 リアクティブ • 身近なリアクティブ=Excel ここを3に すると… sumが再計算さ れて8になる こっちも再計 算されて32万
になる
8 ExcelみたいにDOMを構築 工数(人日) 画面 画面 画面 計 単価 合計金額
9 ExcelみたいにDOMを構築 input (画面A) input (画面B) input (画面C) 計 input
(単価) 合計金額 td td td td td td table table ここを3に すると… sumが再計算さ れて8になる こっちも再計 算されて32万 になる
10 仮想DOM • 全部DOMをレンダリングしてたら重いよね~ • 仮想DOM(単なるJSのオブジェクトツリー)を再構成 • それを元に、実際のDOMを差分反映
11 ビューライブラリ特化 • Ajaxとか、ルーティングとか、状態管理とか、は別ライブラリに任せる • Angularのような「フレームワーク」は、全部入り 組合せ例 • Ajax:Axios •
ルーティング:vue-router、OnsenUIのv-ons-navigator • 状態管理:Vuex
それってReactと同じじゃね? Copyright (c) 2016 people software. All Rights Reserved. 12
13 テンプレート • 普通のHTMLの様に書ける • ReactはJSXという変態フォーマットがデファクト 工数(人日) 画面 画面 画面
計 単価 合計金額
14 ちなJSX
15 シングルファイルコンポーネント • HTML(テンプレート)/JS/CSSを1ファイルに書ける • 実際はモジュールバンドラー(Webpackなど)でコンパイルして、 JS・CSSファイルに分かれる
16 シングルファイルコンポーネント HTML JavaScript CSS
17 Vuex • Fluxの実装 • ReactデファクトのReduxよりシンプル • 説明は長くなるのでまた別の機会に
18 中国で人気 • 中国の人が、Reactと同じコンポーネントを開発してくれる • Google翻訳が賢くなったので、読みは問題なし
19 日本語の公式ドキュメントがある • https://jp.vuejs.org/
20 ちなみに・・ • Monaca(OnsenUI)の中の人曰く、Vue.jsにはリソースを割いてい るとのこと • つまるところVue.jsとは、AngularとReactの良いとこどりみたい な存在 • みんなもVue.js使おうぜ!
おわり Copyright (c) 2016 people software. All Rights Reserved. 21