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
69
ある日オレオレフレームワークを作りたくなったぞ/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
930
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Technology
See All in Technology
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7.6k
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
3k
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
4
2.8k
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
190
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
410
スタックチャン家庭用アシスタントへの道
kanekoh
0
120
Snowflake Intelligenceという名のAI Agentが切り開くデータ活用の未来とその実現に必要なこと@SnowVillage『Data Management #1 Summit 2025 Recap!!』
ryo_suzuki
1
160
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
5
750
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
460
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
110
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Code Review Best Practice
trishagee
69
19k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Invisible Side of Design
smashingmag
301
51k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How to Ace a Technical Interview
jacobian
278
23k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
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!