Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.jsの特徴
Search
Daisuke Kishino
February 19, 2018
Programming
0
600
Vue.jsの特徴
Daisuke Kishino
February 19, 2018
Tweet
Share
More Decks by Daisuke Kishino
See All by Daisuke Kishino
Flutterコンテストを開催した話
kishino
1
430
Monaca、WKWebViewに移行しようぜ!
kishino
0
910
Ionicあらまし@okayama-js
kishino
0
1.1k
MonacaアプリをネイティブのUXに近づけるために
kishino
0
900
Sign In with Appleを実装してみた
kishino
0
430
Fluid interfaces for Monaca
kishino
0
250
Monacaでアプリ名の多言語化
kishino
0
750
Other Decks in Programming
See All in Programming
Devoxx BE - Local Development in the AI Era
kdubois
0
130
CSC305 Lecture 08
javiergs
PRO
0
230
Introduce Hono CLI
yusukebe
6
2.8k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
910
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
33k
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
480
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
250
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
220
CSC305 Lecture 04
javiergs
PRO
0
270
CSC509 Lecture 06
javiergs
PRO
0
260
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Building Adaptive Systems
keathley
44
2.8k
Being A Developer After 40
akosma
91
590k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
870
The Invisible Side of Design
smashingmag
302
51k
How to train your dragon (web standard)
notwaldorf
97
6.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
It's Worth the Effort
3n
187
28k
A designer walks into a library…
pauljervisheath
209
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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