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
VueでTypeScriptを始める 3つのStyle/3 style to start v...
Search
果物リン
January 23, 2020
Technology
2
1.4k
VueでTypeScriptを始める 3つのStyle/3 style to start vue with typescript
VueでTypeScriptを始めたくなった!
で、どうすればいいのか知りたいし比較したくなったんだよ
果物リン
January 23, 2020
Tweet
Share
More Decks by 果物リン
See All by 果物リン
Electron+Vue+Swift=真のデスクトップアプリ / How to create "Really" desktop app using Electron
fruitriin
0
68
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
120
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
850
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
170
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
140
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
240
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
920
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Technology
See All in Technology
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
170
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
110
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
180
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
270
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
120
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
380
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
300
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
180
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
How to train your dragon (web standard)
notwaldorf
95
6.1k
BBQ
matthewcrist
89
9.7k
Navigating Team Friction
lara
187
15k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Gamification - CAS2011
davidbonilla
81
5.4k
Rails Girls Zürich Keynote
gr2m
95
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Transcript
VueでTypeScriptを始める 3つのStyle גࣜձࣾΏΊΈ ՌϦϯ 2020/01/23 Yumemi.vue #5
自己紹介 • ՌϦϯ • גࣜձࣾΏΊΈ • ϑϩϯτΤϯυΤϯδχΞ • Vue͍͍ͧ
ຊͷηογϣϯͷॾҙ • ࢲVueʹTypeScriptೖΕͨ͜ͱ͕͋Μ·Γͳ͍Ͱ͢ • ࠓͷͨΊʹ̏ύλʔϯશ෦ࢼͨ͠ • ϊϋͱ͔Yakͱ͔ڭ͑ͯԼ͍͞ • TypeScriptͦͷͷܕͷ͠·ͤΜ •
Vuexʹ͍ͭͯ৮Ε·ͤΜ • Vue CLI v3Ͱ࡞ͬͨϓϩδΣΫτͰࢼͯ͠·͢
VueにTypeScriptを導入する方法3つ • Class Style Component • Vue.extendʢಛʹ໊લ͕͋ΔΘ͚Ͱͳ͍ʁʣ • Composition API(RFC
as of 2020/1/23)
ൺͯΈΑ͏ʂ
ຊͷαϯϓϧϓϩδΣΫτ • vue.js + typescript = vue.ts ͜ͱ͡Ί - Qiita
https://qiita.com/nrslib/items/be90cc19fa3122266fd7 ͜ͷهࣄͷίʔυΛશ໘తʹ࠾༻ • ࠓճͷίʔυ͜͜ͰݟΕ·͢ • Github fruitriin/vue-ts-test https://github.com/fruitriin/vue-ts-test
None
仕様 • ѫࡰͷϝοηʔδʮHelloʯͱΧϯτ͕දࣔ͞Ε͍ͯΔ • MyButtonΛԡͨ͢ͼʹΞϥʔτ͕දࣔ͞ΕΧϯτ͕૿͑Δ • ॳճMyButtonΛԡ͢ͱѫࡰϝοηʔδ͕ʮ͜ΜʹͪΘʯʹมΘΔ • Χϯτ͕̏ʹͳΔͱ͖ɺผ్Ξϥʔτ͕ͰΔ •
Χϯτ͕̏Ҏ্ͷͱ͖ɺʮৗ࿈͞ΜͰ͢ʯͱදࣔ͞ΕΔ • ResetButtonΛԡ͢ͱѫࡰϝοηʔδ͕HelloʹΔ
サンプルプロジェクト概説 • Home.vueʢίϯϙʔωϯτʣ • MyButtonʢࢠίϯϙʔωϯτ1ʣ • ResetButtonʢࢠίϯϙʔωϯτ2ʣ
Home.vue • dataʹgreatText = “Hello” ͱ count = 0 •
methodsʹonMyButtonClicked(count) • this.greatText = ͜ΜʹͪΘ, this.count = count • Computed ʹ isRegular = this.count >= 3 • Watch ʹ count === 3 ͳΒ alert()
MyButton.vue • data ʹ count: 0 • Props ʹ great
:String • Methods ʹ onClcik() • this.great Λalert, this.countΛ +1 click ΠϕϯτͰ this.count Λ emit up
Reset.vue • data ʹ initialValue • Props ʹ value: String
• Created Ͱ this.initialValue = this.value • Methods Ͱ • input(value) ͕ inputΠϕϯτͰvalueΛemit up • onClick() Ͱ this.input(this.initialValue)
·͊Vueͷओཁͳػೳ Χόʔͯ͠Δͬͯ͜ͱͩΑ
Class Style Component
TypeScriptの導入 • vue add typescript • ରܗࣜͰ࣭ʹ͑Δ • Use class-style
component syntax ʹ “YES”
増える依存関係 • dependencies • vue-class-component • vue-property-decorator • devDpendencies •
@vue/cli-plugin-typescript • typescript
自動生成されるファイル • tsconfig.json, shims-tsx.d.ts, shims-vue.d.ts ͕ࣗಈੜ͞ΕΔ
Let’s TSԽʂ
lang=ts と型注釈import • <script lang=ts> • Import { ܕऍ }
from “vue-property-decorator”
@ComponentデコレータとVue継承クラス • @Component σίϨʔλΛॻ͍ͯͦͷதʹ components Λॻ͘ • σίϨʔλTypeScriptͷSyntax • export
default class {ClassName} extends Vue ͱॻ͘
参照Componentsがないとき • @Componet σίϨʔλͷҾলུͰ͖Δ
クラスのプロパティとしてdataを定義 • ΫϥεͷϓϩύςΟͯ͢ϦΞΫςΟϒͳdataʹͳΔ
propsは@Props デコレータを使う • propsΫϥεͷϓϩύςΟʹ͢Δ • @Props() σίϨʔλΛ͚ͭΔͱPropsʹม͞ΕΔ • ෳprops͢Δͷ͕͋Ε @PropsΛ͚ͭΔ
methodsをクラスのメソッドとして定義 • methods ΦϒδΣΫτԼͷVueͷϝιου Ϋϥεͷϝιουͱͯ͠֎ʹग़͢
this.$emit(event) を @Emit() に • this.$emit(“event”, hoge) Λ @Emit() σίϨʔλ͖ͷผϝιουʹ͢Δ
• this.$emit()ͷୈ2Ҿ @Emit()σίϨʔλΛ͚ͭͨϝιουͷୈ1Ҿʹ͢Δ
Computed は getter メソッドにする • Computed ΦϒδΣΫτͷϝιου͔Β Ϋϥεͷgetter ϝιουͱͯ͠ఆٛ͢Δ •
getter ϝιουcomputed ͱͯ͠ม͞ΕΔ
@Watchデコレータ付きメソッドにする • watch ΦϒδΣΫτ@Watch({ࢹର}) σίϨʔλ • ࢹରͱಉ໊ͷϝιου͡Όͳͯ͘Α͍ • ࢹରͷΞΫηε thisܦ༝ͰΔͬΆ͍ʁ
͔ͳΓॻ͖ํ͕มΘΔ
Class Style Componentメリット • ֎෦͔ΒܕऍΛ༩͢ΔελΠϧ • VuejsͷެࣜαϒϓϩδΣΫτ • ݁ߏμΠφϛοΫʹॻ͖͑Δඞཁ͕͋Δ •
Vue v0.0.1͔Β͋ΔͷͰࢿྉ͕ͨ͘͞Μ͋Δ • උߟʣVue v3ͷRFCʹڍ͛ΒΕͯ٫Լ͞Ε͍ͯΔ
Vue.extend
TypeScriptの導入 • vue add typescript • ରܗࣜͰ࣭ʹ͑Δ • Use class-style
component syntax ʹ “No”
増える依存関係 • devDpendencies • @vue/cli-plugin-typescript • typescript
自動生成されるファイル • tsconfig.json, shims-tsx.d.ts, shims-vue.d.ts ͕ࣗಈੜ͞ΕΔ • ༰Class Style
Componentͱಉ༷
Let’s TSԽʂ
lang=ts と import と Vue.extend • import ͢Δͷvue͔Β • ExtendedVue
ܕͷΦϒδΣΫτΛฦ͢ϝιουΛexport͢Δ
componentsはそのまま • ಛʹॻ͖͑Δඞཁͳ͠
dataに型を付ける • data͕ฦ͢ܕΛ·Δͬͱ͚Δ
methods, comupted, watch 等に型を付ける • ҾฦΓʹܕΛՃ͢Δ
Ҏ্ʂ
Vue.extend メリット • Vue v2.4͔ΒVueຊମͷػೳͱͯ͠ొ • ඞཁͳՕॴʹܕΛՃ͢Δ͚ͩͰ͓खܰಋೖ • ͓खܰ͗ͯ͢᠘͕ͳ͍͔ා͍Μ͚ͩͲ…
Composition API(RFC) in 2.x
TypeScriptの導入 • vue add typescript • ରܗࣜͰ࣭ʹ͑Δ • Use class-style
component syntax ʹ “No” • yarn add @vue/composition-api
依存関係、ファイルの自動生成 • ʢলུʣ
Let’s TSԽʂ
Vue.use(VueCompositionApi) • main.tsͰVue.use(VueCompositionApi)͢Δ
lang=tsとimportとcreateElement() • export default createComponent({}) ͰғΉ
setup() を生やす • createComponent({}) ͷதͰ setup() ϝιουΛੜ͢
• reactive()ͷฦΓΛsetup() ͷฦΓʹؚΊΔͷ͕ϙΠϯτ • ίϯϙʔωϯτʹreturnͨ͠ϓϩύςΟ͕ੜ͑Δ data()をreactive()にする
templateの参照を変える • reactive ͷฦΓΛreturn ͢ΔͱΦϒδΣΫτʹͳΔͷͰҙ {{count}} → {{state.count}}
data()はref()にもできる • refͰఆٛͨ͠ʹ .value Λॻ͖͑Δ • refͰఆٛ͢ΔͱςϯϓϨʔτ͔ΒϑϥοτʹΞΫηεͰ͖Δ
propsはsetup()の第一引数 • propssetup()ͷୈҰҾͱͯ͠͞ΕΔ • createComponentͷϓϩύςΟͷpropsΛࢀর͢Δ
methodsはsetupの中で定義してreturn • ؔΛఆٛͯ͠setup()ͷreturnͷதʹؚΊΔ
Emitはsetup()の第2引数の中 • setup()ͷୈ2Ҿͷதʹemit() ͕͋ΔͷͰஔ͖͑Δ
Computed は computed()を使ってreturn • computed(callback) ΛͬͯcomputedΛఆٛ͢Δ • ඞͣreturnʹؚΊΔ
watchはsetup()の中でwatch()をコールする • ୈ1ҾreactiveͷΛແ໊ؔͰϥοϓͯ͠ฦ͢ • ୈ2ҾʹϩδοΫΛॻ͘
setup() ͕ैདྷͷVueΠϯελϯεʹม
Composition APIメリット • ػೳ͝ͱʹίʔυΛͰ͖ΔΑ͏ʹͳΔ • ίϯϙʔωϯτ͕ଟػೳԽ͍ͯ͘͠ͱ data, methods… ͳͲͰ۠ΒΕ͍ͯͯ ݟ௨͕͠ѱ͘ͳΔͷΛͳΜͱ͔͍ͨ͠
• “ίʔυͷ৫Խ” • ʢࠓճίʔυͷΛαϯϓϧͯ͠ͳ͍ʣ
コードの機能ごとの組織化
型インターフェースが良くなる • σίϨʔλTC39ʹΑΔ༷͕֬ఆͯ͠ͳ͍ • →Class Style ComponentRFC͔ΒഇҊ • ैདྷͷํ๏Ͱthis͕ຐڥ •
Composition APIͰશ͘thisΛ͍ͬͯͳ͍ • Pure JavaScriptͱͯ͠ਖ਼͘͠ॻ͍ͯػೳ͢Δ
easy͡Όͳ͍ʁ • ্ख͍ਓ͕ॻ͘ͱḿΔ͚Ͳ Լखͳਓ͕ॻ͘ͱࠞཚΛট͘͜ͱRFCͰةዧ͞Ε͍ͯΔ • ্ख͍ਓ͕ॻ͍ͯḿΔέʔεͷϝϦοτ͕ σϝϦοτΛ্ճΔͱ͍ͯ͠Δ • ެࣜυΩϡϝϯτͱ͔ӡ༻ͰΧόʔ
まとめ • Class Styled Component • ར༻ऀଟ͍ • Vue.extend() •
͓खܰͩ͠ݸਓతʹਪ͠ • Composition API • ෳࡶͳίϯϙʔωϯτͷݟ௨͠ΛΑ͘͢Δ
Let’͂ Vue.ts!