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
Connect 100+を支える技術
kanyamaguc
0
200
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
680
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.8k
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
21k
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
4
13k
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
340
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
250
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
460
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
9
4.2k
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
130
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Unsuck your backbone
ammeep
671
58k
Building an army of robots
kneath
306
45k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
A Modern Web Designer's Workflow
chriscoyier
695
190k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Navigating Team Friction
lara
187
15k
Typedesign – Prime Four
hannesfritz
42
2.7k
Code Review Best Practice
trishagee
69
18k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Pragmatic Product Professional
lauravandoore
35
6.7k
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!