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
950
Composition API TypeScriptはVue.jsの夢を見るか?
KansaiTS#2の資料です!
jiko21
September 06, 2019
Tweet
Share
More Decks by jiko21
See All by jiko21
Array Grouping will soon be arriving at TypeScript
jiko21
0
23
Copying Array Methods arrived at TypeScript
jiko21
1
350
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
81
node:test will replace Jest?
jiko21
0
49
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
240
NestJS a progressive web framework
jiko21
3
1.8k
レガシーなフロントエンドをリプレイスする
jiko21
5
1.4k
Deep Dive Into Vue Composition API
jiko21
0
3.2k
VueでPWAするときに 気をつけておきたいTips
jiko21
2
480
Other Decks in Technology
See All in Technology
二刀流でWinActorを活用してみた話
tamai_63
0
120
SecurityCamp2023基板作るコース講義資料/Security Camp 2023 Lecture Materials
tnishinaga
5
1.3k
Command-line interface tool design / PHPerKaigi 2024
k1low
4
1k
進化する事業とデータ構造 ~Cloudbaseの場合~
tockn
2
230
fujiwara-ware OSSをひたすら紹介する/ya8-2024
fujiwara3
7
380
SwiftUIのpropertyWrapperをふんわり理解する
jambo_develop_team
0
110
Node-AI のリッチな WEB フロントエンドを支える技術
nenonaninu
2
970
AWS IAM の結果整合性を避けるためセッションポリシーを用いてポリシーの動作確認を行う、を解説する
yukihirochiba
0
370
Simplifying Data Analysis & Visualization with Developer Tools & AI
nitya
1
220
Proposal for a fictitious company presented by JAWS-UG DE&I team 'Naniwa Musume'
hiroramos4
PRO
0
120
令和最新版 ソフトウェアエンジニアのためのDJ入門、あるいはDJに学ぶ仕事術 #ya8
stefafafan
1
130
[AWS Expert Online for JAWS-UG]AWS SAW を使ったトラブルシューティング効率化のススメ
furuton
0
170
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
43
9.6k
Visualization
eitanlees
135
14k
Building Applications with DynamoDB
mza
88
5.5k
KATA
mclloyd
14
11k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
Producing Creativity
orderedlist
PRO
335
39k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
Git: the NoSQL Database
bkeepers
PRO
421
63k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
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