Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Composition API TypeScriptはVue.jsの夢を見るか?
jiko21
September 06, 2019
Technology
1
490
Composition API TypeScriptはVue.jsの夢を見るか?
KansaiTS#2の資料です!
jiko21
September 06, 2019
Tweet
Share
More Decks by jiko21
See All by jiko21
NestJS a progressive web framework
jiko21
3
1.3k
レガシーなフロントエンドをリプレイスする
jiko21
5
1.2k
Deep Dive Into Vue Composition API
jiko21
0
3.1k
VueでPWAするときに 気をつけておきたいTips
jiko21
2
420
知ってました?Firebase Cloud FunctionsでTypeScriptが使えるよ!
jiko21
2
670
Function API You will use in future
jiko21
2
1.5k
TypeScriptでVueを書いてみよう!
jiko21
1
430
TypeScriptとVue
jiko21
4
1.7k
May Python Prevail Everyone
jiko21
0
780
Other Decks in Technology
See All in Technology
#JP_Stripes Sapporo Stripeの活用例を色々ご紹介します!
miu_crescent
0
110
Implementing Kubernetes operators in Java with Micronaut - TechWeek Java Summit 2022
alvarosanchez
0
110
多様な成熟度のデータ活用を総合支援するKADOKAWA Connectedのデータ組織について
kadokawaconnected
PRO
0
190
Design for Humans: How to make better modernization decisions
indualagarsamy
2
110
1人目QAエンジニアよもやま話 / QA Test Talk Vol.1
nametake
4
220
Build 2022で発表されたWindowsアプリ開発のあれこれ振り返ろう
hatsunea
1
370
What's new in Vision
satotakeshi
0
180
QiitaConference2022
fuwasegu
0
150
スクラムのスケールとチームトポロジー / Scaled Scrum and Team Topologies
daiksy
1
410
ひとりでも安定して 組織を変える活動を続けていくための ストレスマネジメント
pastelinc
0
780
サーバレスECにおける Step Functions の使い方 〜ステートマシン全部見せます!〜
miu_crescent
0
180
PUTとPOSTどっち使う?
hankehly
0
180
Featured
See All Featured
Clear Off the Table
cherdarchuk
79
280k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.5k
Docker and Python
trallard
27
1.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.7k
Atom: Resistance is Futile
akmur
255
20k
Making Projects Easy
brettharned
98
4.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
940
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
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