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
340
クライアントワークと管理画面の話
texdeath
0
230
次世代ヘッドレス開発室が提供するヘッドレスEC
texdeath
0
650
中期プロジェクトで e2eテストを導入してみて感じたこと
texdeath
2
7.8k
React使いがVueと仲良くなるためにやったこと
texdeath
0
290
Optional Chainingについて
texdeath
3
180
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
110
Container Componentは必要なのか
texdeath
4
640
Kotlin/JSでReactアプリを作ってみた
texdeath
1
920
Other Decks in Programming
See All in Programming
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.2k
TDD 実践ミニトーク
contour_gara
1
290
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
100
Deep Dive into Kotlin Flow
jmatsu
1
300
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
8
3.4k
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
400
Laravel Boost 超入門
fire_arlo
2
210
OSS開発者という働き方
andpad
5
1.7k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
320
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
66k
It's Worth the Effort
3n
187
28k
Site-Speed That Sticks
csswizardry
10
810
Practical Orchestrator
shlominoach
190
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Code Review Best Practice
trishagee
70
19k
Rails Girls Zürich Keynote
gr2m
95
14k
Bash Introduction
62gerente
615
210k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
KATA
mclloyd
32
14k
Building Adaptive Systems
keathley
43
2.7k
Side Projects
sachag
455
43k
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