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
340
Monaca、WKWebViewに移行しようぜ!
kishino
0
750
Ionicあらまし@okayama-js
kishino
0
870
MonacaアプリをネイティブのUXに近づけるために
kishino
0
680
Sign In with Appleを実装してみた
kishino
0
330
Fluid interfaces for Monaca
kishino
0
200
Monacaでアプリ名の多言語化
kishino
0
580
Other Decks in Programming
See All in Programming
使ってみよう Azure AI Document Intelligence
kosmosebi
2
320
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1k
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
540
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
330
Ruby Pattern Matching
bkuhlmann
0
930
Hanami and htmx
bkuhlmann
0
210
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
930
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
770
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
ゆるい個人開発のススメ
kuroppe1819
10
990
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Optimizing for Happiness
mojombo
370
69k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Six Lessons from altMBA
skipperchong
21
3k
Scaling GitHub
holman
457
140k
How STYLIGHT went responsive
nonsquared
92
4.8k
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