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
82
次世代ヘッドレス開発室が提供するヘッドレスEC
texdeath
0
570
中期プロジェクトで e2eテストを導入してみて感じたこと
texdeath
2
7.4k
React使いがVueと仲良くなるためにやったこと
texdeath
0
230
Optional Chainingについて
texdeath
3
140
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
97
Container Componentは必要なのか
texdeath
4
590
Kotlin/JSでReactアプリを作ってみた
texdeath
1
800
Other Decks in Programming
See All in Programming
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
920
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
180
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
Hanami and htmx
bkuhlmann
0
210
Apache Hive 4 on Treasure Data
ryukobayashi
0
340
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.1k
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
340
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
250
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
210
Goのエラースタックトレースの歴史と今後
sonatard
9
1.5k
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Featured
See All Featured
Designing with Data
zakiwarfel
96
4.8k
Why Our Code Smells
bkeepers
PRO
331
56k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
Teambox: Starting and Learning
jrom
128
8.4k
Code Review Best Practice
trishagee
55
15k
Documentation Writing (for coders)
carmenintech
60
3.9k
Designing Experiences People Love
moore
136
23k
Visualization
eitanlees
136
14k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
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