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
460
おさらい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
330
クライアントワークと管理画面の話
texdeath
0
220
次世代ヘッドレス開発室が提供するヘッドレスEC
texdeath
0
640
中期プロジェクトで e2eテストを導入してみて感じたこと
texdeath
2
7.8k
React使いがVueと仲良くなるためにやったこと
texdeath
0
290
Optional Chainingについて
texdeath
3
180
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
110
Container Componentは必要なのか
texdeath
4
630
Kotlin/JSでReactアプリを作ってみた
texdeath
1
910
Other Decks in Programming
See All in Programming
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
PicoRuby on Rails
makicamel
2
130
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
210
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
830
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
Porting a visionOS App to Android XR
akkeylab
0
480
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
91
30k
Featured
See All Featured
Designing for Performance
lara
610
69k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Gamification - CAS2011
davidbonilla
81
5.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Statistics for Hackers
jakevdp
799
220k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
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