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.3k
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
84
Array Grouping will soon be arriving at TypeScript
jiko21
0
73
Copying Array Methods arrived at TypeScript
jiko21
1
540
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
110
node:test will replace Jest?
jiko21
0
69
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
300
NestJS a progressive web framework
jiko21
3
2k
レガシーなフロントエンドをリプレイスする
jiko21
5
1.5k
Deep Dive Into Vue Composition API
jiko21
0
3.2k
Other Decks in Technology
See All in Technology
LINEスキマニにおけるフロントエンド開発
lycorptech_jp
PRO
0
330
社外コミュニティで学び社内に活かす共に学ぶプロジェクトの実践/backlogworld2024
nishiuma
0
250
CustomCopを使ってMongoidのコーディングルールを整えてみた
jinoketani
0
220
re:Invent 2024 Innovation Talks(NET201)で語られた大切なこと
shotashiratori
0
300
組織に自動テストを書く文化を根付かせる戦略(2024冬版) / Building Automated Test Culture 2024 Winter Edition
twada
PRO
11
3.3k
複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計
righttouch
PRO
0
110
Jetpack Composeで始めるServer Cache State
ogaclejapan
2
160
プロダクト開発を加速させるためのQA文化の築き方 / How to build QA culture to accelerate product development
mii3king
1
250
Turing × atmaCup #18 - 1st Place Solution
hakubishin3
0
470
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
620
2024年にチャレンジしたことを振り返るぞ
mitchan
0
130
サーバレスアプリ開発者向けアップデートをキャッチアップしてきた #AWSreInvent #regrowth_fuk
drumnistnakano
0
190
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
How to train your dragon (web standard)
notwaldorf
88
5.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.3k
The Cult of Friendly URLs
andyhume
78
6.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Building Applications with DynamoDB
mza
91
6.1k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
YesSQL, Process and Tooling at Scale
rocio
169
14k
The Invisible Side of Design
smashingmag
298
50k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
510
Why Our Code Smells
bkeepers
PRO
335
57k
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