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
340
おさらいVue Composition API
Vue3.xのRFCに導入されるVue Composition APIの紹介です。
texdeath
November 21, 2019
Tweet
Share
More Decks by texdeath
See All by texdeath
クライアントワークと管理画面の話
texdeath
0
85
次世代ヘッドレス開発室が提供するヘッドレスEC
texdeath
0
570
中期プロジェクトで e2eテストを導入してみて感じたこと
texdeath
2
7.4k
React使いがVueと仲良くなるためにやったこと
texdeath
0
230
Optional Chainingについて
texdeath
3
140
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
98
Container Componentは必要なのか
texdeath
4
590
Kotlin/JSでReactアプリを作ってみた
texdeath
1
810
Other Decks in Programming
See All in Programming
WebGLで始める コンピュータグラフィックス入門
heller77
0
220
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
460
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
610
slow types ってなんだろう?
karad
0
100
Apache Hive 4 on Treasure Data
ryukobayashi
1
420
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
520
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
390
Elm Form Validation
bkuhlmann
0
510
Try creating your own orderedmap
kazamori
1
210
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
180
Git Rebase
bkuhlmann
11
1.6k
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
890
Featured
See All Featured
What the flash - Photography Introduction
edds
64
11k
Fireside Chat
paigeccino
22
2.6k
Code Reviewing Like a Champion
maltzj
515
39k
[RailsConf 2023] Rails as a piece of cake
palkan
27
4k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
How to name files
jennybc
65
93k
How STYLIGHT went responsive
nonsquared
92
4.8k
GraphQLとの向き合い方2022年版
quramy
33
12k
Infographics Made Easy
chrislema
238
18k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Agile that works and the tools we love
rasmusluckow
325
20k
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