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 Composition API
Search
texdeath
November 21, 2019
Programming
0
400
おさらいVue Composition API
Vue3.xのRFCに導入されるVue Composition APIの紹介です。
texdeath
November 21, 2019
Tweet
Share
More Decks by texdeath
See All by texdeath
コードメトリクス計測による課題可視化と品質確保 / Visualize issues and ensure quality by measuring code metrics
texdeath
0
240
クライアントワークと管理画面の話
texdeath
0
130
次世代ヘッドレス開発室が提供するヘッドレスEC
texdeath
0
600
中期プロジェクトで e2eテストを導入してみて感じたこと
texdeath
2
7.6k
React使いがVueと仲良くなるためにやったこと
texdeath
0
260
Optional Chainingについて
texdeath
3
150
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
100
Container Componentは必要なのか
texdeath
4
590
Kotlin/JSでReactアプリを作ってみた
texdeath
1
860
Other Decks in Programming
See All in Programming
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
930
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
23k
Mastering Dependencies in Kotlin Multiplatform
tomifabian
0
110
Re:ProS_案内資料
rect
0
380
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
9
970
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
470
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
110
Honoの来た道とこれから
yusukebe
19
3k
qmuntal/stateless のススメ
sgash708
0
120
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.3k
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
Featured
See All Featured
A designer walks into a library…
pauljervisheath
202
24k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Agile that works and the tools we love
rasmusluckow
327
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
39
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Building an army of robots
kneath
302
42k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
A Philosophy of Restraint
colly
203
16k
Optimizing for Happiness
mojombo
376
69k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Rails Girls Zürich Keynote
gr2m
93
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Transcript
͓͞Β͍ 7VF$PNQPTJUJPO"1* 1
๏ ాɹউॣ ๏ ϑϩϯτΤϯυΤϯδχΞ ๏ 3FBDU/PEF7VF /VYU ๏ 7VFྺϲ݄ͪΐ͍͘Β͍
๏ 5XJUUFS!UFYEFBUI 2
Agenda 1. What is Vue Composition API? 2. Better Type
Interface 3. Logic Extraction and Reuse 4. More Flexibility Requires More Discipline 5. まとめ 3
What is Vue Composition API Vue 3.xからRFCで組み込まれる関数ベースのAPI ロジックの再利用性を高め、より柔軟な構築を可能にする 4
جຊతͳྫ 5
جຊతͳྫ 6 ͜ͷؔ෦ͰσʔλؔͷఆٛΛߦ͏
جຊతͳྫ 7 ঢ়ଶͷએݴ ͜ͷؔ෦ͰσʔλؔͷఆٛΛߦ͏
جຊతͳྫ 8 ঢ়ଶͷએݴ ͜ͷؔ෦ͰσʔλؔͷఆٛΛߦ͏ ܭࢉͨ͠ঢ়ଶʢࢀরʣΛฦ͢
Better Type Interface TypeScriptへのサポートが大幅に向上 CreateComponentを定義すると型推論が効くようになる 9 import { createComponent }
from '@vue/composition-api'; const Component = createComponent({ // ͜ͷ෦Ͱܕਪ͕ޮ͘Α͏ʹͳΔ }); const Component = { // ͪ͜ΒͷίϯϙʔωϯτมͰܕਪ͕ޮ͔ͳ͍ // ʢTypeScript͕VueͷίϯϙʔωϯτͰ͋ΔͱஅͰ͖ͳ͍ͨΊʣ };
Logic Extraction and Reuse 関数化することで、任意の機能再利用が容易に 10
More Flexibility Requires More Discipline • 柔軟性を高めるためには、多くの規律が必要 • 適切に運用しないと品質は大きく下がってしまう •
VuexやRouterを組み合わせるとより難易度が上がる • JavaScriptのコアメカニズムに則った編成を心がける 11
ެࣜͷνϡʔτϦΞϧಈը͕Θ͔Γ͍͢ 12 https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/
·ͱΊ •Vue Composition APIを使えば •関数化が楽になる •TypeScriptでの型推論がしやすくなる •柔軟な構築が可能だが、それゆえより高度 な設計が必要 13