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.5k
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
77
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
120
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
870
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
250
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
940
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
360
Other Decks in Technology
See All in Technology
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
gree_tech
PRO
0
430
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
420
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
32
12k
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
2k
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
2
1.6k
AWSで推進するデータマネジメント
kawanago
0
780
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
13
4k
JuniorからSeniorまで: DevOpsエンジニアの成長ロードマップ
yuriemori
2
350
JavaScript 研修
recruitengineers
PRO
6
1.4k
モダンフロントエンド 開発研修
recruitengineers
PRO
9
6.1k
Vault meets Kubernetes
mochizuki875
0
150
生成AI時代のデータ基盤
shibuiwilliam
3
1.8k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
For a Future-Friendly Web
brad_frost
179
9.9k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Agile that works and the tools we love
rasmusluckow
330
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
KATA
mclloyd
32
14k
Code Review Best Practice
trishagee
70
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
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!