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
140
Array Grouping will soon be arriving at TypeScript
jiko21
0
130
Copying Array Methods arrived at TypeScript
jiko21
1
660
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
130
node:test will replace Jest?
jiko21
0
88
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
380
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
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
11
4.7k
テストを軸にした生き残り術
kworkdev
PRO
0
200
Android Audio: Beyond Winning On It
atsushieno
0
100
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
710
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
370
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
440
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.5k
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
1
370
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
430
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
390
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
200
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
Code Reviewing Like a Champion
maltzj
525
40k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Become a Pro
speakerdeck
PRO
29
5.5k
Making Projects Easy
brettharned
117
6.4k
BBQ
matthewcrist
89
9.8k
RailsConf 2023
tenderlove
30
1.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Visualization
eitanlees
148
16k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
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