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
400
Monaca、WKWebViewに移行しようぜ!
kishino
0
870
Ionicあらまし@okayama-js
kishino
0
1k
MonacaアプリをネイティブのUXに近づけるために
kishino
0
820
Sign In with Appleを実装してみた
kishino
0
410
Fluid interfaces for Monaca
kishino
0
230
Monacaでアプリ名の多言語化
kishino
0
710
Other Decks in Programming
See All in Programming
Honoとフロントエンドの 型安全性について
yodaka
4
250
Unity Android XR入門
sakutama_11
0
140
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Honoをフロントエンドで使う 3つのやり方
yusukebe
5
2.2k
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Code Review Best Practice
trishagee
66
17k
Unsuck your backbone
ammeep
669
57k
Speed Design
sergeychernyshev
25
780
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
How to train your dragon (web standard)
notwaldorf
90
5.8k
For a Future-Friendly Web
brad_frost
176
9.5k
Making Projects Easy
brettharned
116
6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building Your Own Lightsaber
phodgson
104
6.2k
Designing Experiences People Love
moore
139
23k
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