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
380
おさらい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
150
クライアントワークと管理画面の話
texdeath
0
120
次世代ヘッドレス開発室が提供するヘッドレスEC
texdeath
0
590
中期プロジェクトで e2eテストを導入してみて感じたこと
texdeath
2
7.5k
React使いがVueと仲良くなるためにやったこと
texdeath
0
250
Optional Chainingについて
texdeath
3
150
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
100
Container Componentは必要なのか
texdeath
4
590
Kotlin/JSでReactアプリを作ってみた
texdeath
1
850
Other Decks in Programming
See All in Programming
iOSDC 2024 SMBファイル共有をSwiftで実装する
kishikawakatsumi
1
110
オートマトン学習しろ / Do automata learning
makenowjust
3
100
LangChainの現在とv0.3にむけて
os1ma
3
650
Rubyのobject_id
qnighy
6
1.3k
デザインシステムとコンポーネント指向によるフロントエンド開発プロセスの革新 / Innovation in Frontend Development Processes through Design Systems and Component-Oriented Architecture
nrslib
7
5k
iOSDC 2024
auramagi
3
590
フロントエンドカンファレンス北海道2024 『小規模サイトでも使えるVite 〜HTMLコーディングをよりスマートに〜』長谷川広武(ハム)
h2ham
1
2.5k
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
840
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
250
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
120
Scala におけるコンパイラエラーとの付き合い方
chencmd
1
150
詳解UIWindow
natmark
3
2k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
65
4.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Producing Creativity
orderedlist
PRO
340
39k
The Brand Is Dead. Long Live the Brand.
mthomps
53
37k
A better future with KSS
kneath
235
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Speed Design
sergeychernyshev
18
400
Fireside Chat
paigeccino
31
2.9k
We Have a Design System, Now What?
morganepeng
48
7.1k
GitHub's CSS Performance
jonrohan
1029
450k
Designing with Data
zakiwarfel
98
5k
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