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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Daisuke Kishino
February 19, 2018
Programming
620
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Vue.jsの特徴
Daisuke Kishino
February 19, 2018
More Decks by Daisuke Kishino
See All by Daisuke Kishino
Flutterコンテストを開催した話
kishino
1
460
Monaca、WKWebViewに移行しようぜ!
kishino
0
950
Ionicあらまし@okayama-js
kishino
0
1.1k
MonacaアプリをネイティブのUXに近づけるために
kishino
0
970
Sign In with Appleを実装してみた
kishino
0
440
Fluid interfaces for Monaca
kishino
0
260
Monacaでアプリ名の多言語化
kishino
0
780
Other Decks in Programming
See All in Programming
3Dシーンの圧縮
fadis
1
780
Creating Composable Callables in Contemporary C++
rollbear
0
140
ふつうのFeature Flag実践入門
irof
7
4k
Webフレームワークの ベンチマークについて
yusukebe
0
170
Oxcを導入して開発体験が向上した話
yug1224
4
320
その問い、本当に正しいですか?AI時代のエンジニアに必要な哲学と認知科学 / ai-philosophy-cognitive-science
minodriven
11
5.7k
ADKを使って簡単にAIエージェントを作ってみよう
k1mu21
0
270
AI 時代のソフトウェア設計の学び方
masuda220
PRO
29
13k
Mujeres en SEO Summit 2026 - Greatest Disaster Hits en Web Performance
guaca
0
180
例外の正しい扱い方 そのエラー try-catchして大丈夫?
jinwatanabe
0
250
Spec Driven Development | AI Summit Lisbon
danielsogl
PRO
0
190
LLM本来の能力を解き放つサンドボックス技術とAI民主化への適用
yukukotani
3
4.2k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
3.5k
Unsuck your backbone
ammeep
672
58k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
150
Designing for Performance
lara
611
70k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
420
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.3k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
1
200
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
118
120k
KATA
mclloyd
PRO
35
15k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
200
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.3k
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