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
Composition API TypeScriptはVue.jsの夢を見るか?
Search
jiko21
September 06, 2019
Technology
1
1.6k
Composition API TypeScriptはVue.jsの夢を見るか?
KansaiTS#2の資料です!
jiko21
September 06, 2019
Tweet
Share
More Decks by jiko21
See All by jiko21
Creating a Next.js-style Framework with Bun and Hono
jiko21
0
130
Array Grouping will soon be arriving at TypeScript
jiko21
0
130
Copying Array Methods arrived at TypeScript
jiko21
1
650
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
130
node:test will replace Jest?
jiko21
0
86
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
370
NestJS a progressive web framework
jiko21
3
2.1k
レガシーなフロントエンドをリプレイスする
jiko21
5
1.5k
Deep Dive Into Vue Composition API
jiko21
0
3.2k
Other Decks in Technology
See All in Technology
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする~遊びやすさと競技性の両立~
cygames
PRO
1
290
20250807_Kiroと私の反省会
riz3f7
0
120
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
masayoshi
1
410
猫でもわかるQ_CLI(CDK開発編)+ちょっとだけKiro
kentapapa
0
3.4k
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
670
ホリスティックテスティングの右側も大切にする 〜2つの[はか]る〜 / Holistic Testing: Right Side Matters
nihonbuson
PRO
0
570
【2025 Japan AWS Jr. Champions Ignition】点から線、線から面へ〜僕たちが起こすコラボレーション・ムーブメント〜
amixedcolor
1
120
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
210
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
25
11k
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
layerx
PRO
8
2k
帳票構造化タスクにおけるLLMファインチューニングの性能評価
yosukeyoshida
1
230
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
bengo4com
0
1.8k
Featured
See All Featured
Side Projects
sachag
455
43k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Designing Experiences People Love
moore
142
24k
How GitHub (no longer) Works
holman
314
140k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Become a Pro
speakerdeck
PRO
29
5.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Done Done
chrislema
185
16k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Docker and Python
trallard
45
3.5k
4 Signs Your Business is Dying
shpigford
184
22k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
Composition API TypeScriptVue.jsͷເΛݟΔ͔? KansaiTS#2 @Daikids2
খౡ େج / Daiki Kojima @Daikids2 @daikikojima ژେֶେֶӃใֶݚڀՊM2 Server/Front, Mobile(iOS/Android)…
Vue fes JPࢀՃ͠·͢!! ࠷ۙRxJavaશʹཧղͨ͠
Posted on … IUUQTTQFBLFSEFDLDPNEBJLJETDPNQPTJUJPOBQJUZQFTDSJQUIBWVFEPUKTGBMTFNFOHXPKJBO SVLB
ࠓճͷωλ • Vue.jsͩͱਏ͔ͬͨTypeScriptʹ͍ͭͯɺ ͤʹͳΕΔ͔?͠Εͳ͍Composition APIΛ հ͠·͢! • VuexपΓ͝צหΛ!!
Vue.jsΛTSͩͱͲ͏ॻ͔͘?
Vue.extend import Vue from 'vue'; export default Vue.extend({ name: 'CountExtemd',
props: { msg: { Type: String, required: true, }, }, data() { return { count: 0, }; }, methods: { add() { this.count += 1; }, minus() { this.count -= 1; }, }, });
Vue.extend • ͍ͭͷVueͱ΄΅ಉ͡! • propsपΓͷܕ͕ গ͠ؾ࣋ͪѱ͍… import Vue from 'vue';
export default Vue.extend({ name: 'CountExtemd', props: { msg: { Type: String, required: true, }, }, data() { return { count: 0, }; }, methods: { add() { this.count += 1; }, minus() { this.count -= 1; }, }, });
Class Style (vue-property-decorator) import { Component, Prop, Vue } from
'vue-property-decorator'; @Component class CountClass extends Vue { @Prop() private msg!: string; count = 0; add() { this.count += 1; } minus() { this.count -= 1; } }
Class Style (vue-property-decorator) import { Component, Prop, Vue } from
'vue-property-decorator'; @Component class CountClass extends Vue { @Prop() private msg!: string; count = 0; add() { this.count += 1; } minus() { this.count -= 1; } } • Vue + TSͷਓ͕ Αͬͯ͘Δͭ • एׯσίϨʔλ͕ܳ ա͗Δؾ͕͢Δ…
িܸͷࣄ࣮… https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121
ඪ४Խ͔Β֎Ε·ͨ͠… • ʑͱཧ༝͕ॻ͔ΕͯΔ… • ͨͩɺvue-class-componentࣗମ ࠓޙͱαϙʔτ͍༷ͯ͘͠…
զʑʹرͳ͍ͷͩΖ͏͔…
Composition API!! https://github.com/vuejs/composition-api
Composition API!! import {createComponent, reactive} from '@vue/composition-api'; const Count =
createComponent({ props: ['msg'], setup() { const state = reactive({ count: 0, }); const add = () => { state.count += 1; }; const minus = () => { state.count -= 1; }; return { state, add, minus, }; }, });
What’s Composition API? • Vue 3.0Ͱಋೖ༧ఆͷAPI • Function APIͱ͍͏໊લͰͨ͠…
Why? • ैདྷͷVue-> `this`ʹґଘ • ܕਪΛߟ͑ͯσβΠϯ͞Εͯͳ͔ͬͨ… • Class Style •
ܕղܾͷͨΊʹσίϨʔλʹཔΒ͟ΔΛಘͳ͍…
Composition apiͩͱ… • ܕʹ͍͞͠ૉͷมؔΛ͑Δ • ܕਪʹ͍͞͠! • ੜͷTypeScriptɺJavaScriptͷΑ͏ͳίʔυ ʹͳΔ͔ΒIDEͷαϙʔτड͚͘͢ͳΔ!
ॻ͖ํ • createComponentͰίϯϙʔωϯτΛ࡞ͯ͠ setup()ʹdataͱ͔methodsͳͲΛॻ͍͍ͯ͘… const Count = createComponent({ props: ['msg'],
setup() {
ॻ͖ํ • datarefstate, methodsؔͱͯ͠ ॻ͍ͯ͋͛ΕOK • reactiveVue.observable()ͱ ಉ(Rxͱͬͪ͝ΌʹͳΔ͔Β վ໊ͨ͠Β͍͠…) setup()
{ const state = reactive({ count: 0, }); const add = () => { state.count += 1; }; const minus = () => { state.count -= 1; }; return { state, add, minus, }; },
Ͷɺ؆୯Ͱ͠ΐ?
·ͱΊ • Vue.jsΛTypeScriptͰॻ͘ʹ3ύλʔϯ • Vue.extend • Class • Composition •
Composition APIͳΒܕਪͳͲ͕Α͘ͳΔ͔… • ͨͩ͠ɺfunction-apiͷ࣌ͱൺͯ݁ߏมߋ͋ΔͷͰ ༷ࢠݟ͕ྑͦ͞͏…
ऴ ੍࡞ɾஶ࡞ ᴸᴸᴸᴸᴸ @Daikids2
Reference • https://github.com/vuejs/composition-api • https://vue-composition-api-rfc.netlify.com/ • https://github.com/vuejs/rfcs/pull/ 17#issuecomment-494242121