Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
VueでTypeScriptを始める 3つのStyle גࣜձࣾΏΊΈ ՌϦϯ 2020/01/23 Yumemi.vue #5
Slide 2
Slide 2 text
自己紹介 • ՌϦϯ • גࣜձࣾΏΊΈ • ϑϩϯτΤϯυΤϯδχΞ • Vue͍͍ͧ
Slide 3
Slide 3 text
ຊͷηογϣϯͷॾҙ • ࢲVueʹTypeScriptೖΕͨ͜ͱ͕͋Μ·Γͳ͍Ͱ͢ • ࠓͷͨΊʹ̏ύλʔϯશ෦ࢼͨ͠ • ϊϋͱ͔Yakͱ͔ڭ͑ͯԼ͍͞ • TypeScriptͦͷͷܕͷ͠·ͤΜ • Vuexʹ͍ͭͯ৮Ε·ͤΜ • Vue CLI v3Ͱ࡞ͬͨϓϩδΣΫτͰࢼͯ͠·͢
Slide 4
Slide 4 text
VueにTypeScriptを導入する方法3つ • Class Style Component • Vue.extendʢಛʹ໊લ͕͋ΔΘ͚Ͱͳ͍ʁʣ • Composition API(RFC as of 2020/1/23)
Slide 5
Slide 5 text
ൺͯΈΑ͏ʂ
Slide 6
Slide 6 text
ຊͷαϯϓϧϓϩδΣΫτ • vue.js + typescript = vue.ts ͜ͱ͡Ί - Qiita https://qiita.com/nrslib/items/be90cc19fa3122266fd7 ͜ͷهࣄͷίʔυΛશ໘తʹ࠾༻ • ࠓճͷίʔυ͜͜ͰݟΕ·͢ • Github fruitriin/vue-ts-test https://github.com/fruitriin/vue-ts-test
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
仕様 • ѫࡰͷϝοηʔδʮHelloʯͱΧϯτ͕දࣔ͞Ε͍ͯΔ • MyButtonΛԡͨ͢ͼʹΞϥʔτ͕දࣔ͞ΕΧϯτ͕૿͑Δ • ॳճMyButtonΛԡ͢ͱѫࡰϝοηʔδ͕ʮ͜ΜʹͪΘʯʹมΘΔ • Χϯτ͕̏ʹͳΔͱ͖ɺผ్Ξϥʔτ͕ͰΔ • Χϯτ͕̏Ҏ্ͷͱ͖ɺʮৗ࿈͞ΜͰ͢ʯͱදࣔ͞ΕΔ • ResetButtonΛԡ͢ͱѫࡰϝοηʔδ͕HelloʹΔ
Slide 9
Slide 9 text
サンプルプロジェクト概説 • Home.vueʢίϯϙʔωϯτʣ • MyButtonʢࢠίϯϙʔωϯτ1ʣ • ResetButtonʢࢠίϯϙʔωϯτ2ʣ
Slide 10
Slide 10 text
Home.vue • dataʹgreatText = “Hello” ͱ count = 0 • methodsʹonMyButtonClicked(count) • this.greatText = ͜ΜʹͪΘ, this.count = count • Computed ʹ isRegular = this.count >= 3 • Watch ʹ count === 3 ͳΒ alert()
Slide 11
Slide 11 text
MyButton.vue • data ʹ count: 0 • Props ʹ great :String • Methods ʹ onClcik() • this.great Λalert, this.countΛ +1 click ΠϕϯτͰ this.count Λ emit up
Slide 12
Slide 12 text
Reset.vue • data ʹ initialValue • Props ʹ value: String • Created Ͱ this.initialValue = this.value • Methods Ͱ • input(value) ͕ inputΠϕϯτͰvalueΛemit up • onClick() Ͱ this.input(this.initialValue)
Slide 13
Slide 13 text
·͊Vueͷओཁͳػೳ Χόʔͯ͠Δͬͯ͜ͱͩΑ
Slide 14
Slide 14 text
Class Style Component
Slide 15
Slide 15 text
TypeScriptの導入 • vue add typescript • ରܗࣜͰ࣭ʹ͑Δ • Use class-style component syntax ʹ “YES”
Slide 16
Slide 16 text
増える依存関係 • dependencies • vue-class-component • vue-property-decorator • devDpendencies • @vue/cli-plugin-typescript • typescript
Slide 17
Slide 17 text
自動生成されるファイル • tsconfig.json, shims-tsx.d.ts, shims-vue.d.ts ͕ࣗಈੜ͞ΕΔ
Slide 18
Slide 18 text
Let’s TSԽʂ
Slide 19
Slide 19 text
lang=ts と型注釈import • • Import { ܕऍ } from “vue-property-decorator”
Slide 20
Slide 20 text
@ComponentデコレータとVue継承クラス • @Component σίϨʔλΛॻ͍ͯͦͷதʹ components Λॻ͘ • σίϨʔλTypeScriptͷSyntax • export default class {ClassName} extends Vue ͱॻ͘
Slide 21
Slide 21 text
参照Componentsがないとき • @Componet σίϨʔλͷҾলུͰ͖Δ
Slide 22
Slide 22 text
クラスのプロパティとしてdataを定義 • ΫϥεͷϓϩύςΟͯ͢ϦΞΫςΟϒͳdataʹͳΔ
Slide 23
Slide 23 text
propsは@Props デコレータを使う • propsΫϥεͷϓϩύςΟʹ͢Δ • @Props() σίϨʔλΛ͚ͭΔͱPropsʹม͞ΕΔ • ෳprops͢Δͷ͕͋Ε @PropsΛ͚ͭΔ
Slide 24
Slide 24 text
methodsをクラスのメソッドとして定義 • methods ΦϒδΣΫτԼͷVueͷϝιου Ϋϥεͷϝιουͱͯ͠֎ʹग़͢
Slide 25
Slide 25 text
this.$emit(event) を @Emit() に • this.$emit(“event”, hoge) Λ @Emit() σίϨʔλ͖ͷผϝιουʹ͢Δ • this.$emit()ͷୈ2Ҿ @Emit()σίϨʔλΛ͚ͭͨϝιουͷୈ1Ҿʹ͢Δ
Slide 26
Slide 26 text
Computed は getter メソッドにする • Computed ΦϒδΣΫτͷϝιου͔Β Ϋϥεͷgetter ϝιουͱͯ͠ఆٛ͢Δ • getter ϝιουcomputed ͱͯ͠ม͞ΕΔ
Slide 27
Slide 27 text
@Watchデコレータ付きメソッドにする • watch ΦϒδΣΫτ@Watch({ࢹର}) σίϨʔλ • ࢹରͱಉ໊ͷϝιου͡Όͳͯ͘Α͍ • ࢹରͷΞΫηε thisܦ༝ͰΔͬΆ͍ʁ
Slide 28
Slide 28 text
͔ͳΓॻ͖ํ͕มΘΔ
Slide 29
Slide 29 text
Class Style Componentメリット • ֎෦͔ΒܕऍΛ༩͢ΔελΠϧ • VuejsͷެࣜαϒϓϩδΣΫτ • ݁ߏμΠφϛοΫʹॻ͖͑Δඞཁ͕͋Δ • Vue v0.0.1͔Β͋ΔͷͰࢿྉ͕ͨ͘͞Μ͋Δ • උߟʣVue v3ͷRFCʹڍ͛ΒΕͯ٫Լ͞Ε͍ͯΔ
Slide 30
Slide 30 text
Vue.extend
Slide 31
Slide 31 text
TypeScriptの導入 • vue add typescript • ରܗࣜͰ࣭ʹ͑Δ • Use class-style component syntax ʹ “No”
Slide 32
Slide 32 text
増える依存関係 • devDpendencies • @vue/cli-plugin-typescript • typescript
Slide 33
Slide 33 text
自動生成されるファイル • tsconfig.json, shims-tsx.d.ts, shims-vue.d.ts ͕ࣗಈੜ͞ΕΔ • ༰Class Style Componentͱಉ༷
Slide 34
Slide 34 text
Let’s TSԽʂ
Slide 35
Slide 35 text
lang=ts と import と Vue.extend • import ͢Δͷvue͔Β • ExtendedVue ܕͷΦϒδΣΫτΛฦ͢ϝιουΛexport͢Δ
Slide 36
Slide 36 text
componentsはそのまま • ಛʹॻ͖͑Δඞཁͳ͠
Slide 37
Slide 37 text
dataに型を付ける • data͕ฦ͢ܕΛ·Δͬͱ͚Δ
Slide 38
Slide 38 text
methods, comupted, watch 等に型を付ける • ҾฦΓʹܕΛՃ͢Δ
Slide 39
Slide 39 text
Ҏ্ʂ
Slide 40
Slide 40 text
Vue.extend メリット • Vue v2.4͔ΒVueຊମͷػೳͱͯ͠ొ • ඞཁͳՕॴʹܕΛՃ͢Δ͚ͩͰ͓खܰಋೖ • ͓खܰ͗ͯ͢᠘͕ͳ͍͔ා͍Μ͚ͩͲ…
Slide 41
Slide 41 text
Composition API(RFC) in 2.x
Slide 42
Slide 42 text
TypeScriptの導入 • vue add typescript • ରܗࣜͰ࣭ʹ͑Δ • Use class-style component syntax ʹ “No” • yarn add @vue/composition-api
Slide 43
Slide 43 text
依存関係、ファイルの自動生成 • ʢলུʣ
Slide 44
Slide 44 text
Let’s TSԽʂ
Slide 45
Slide 45 text
Vue.use(VueCompositionApi) • main.tsͰVue.use(VueCompositionApi)͢Δ
Slide 46
Slide 46 text
lang=tsとimportとcreateElement() • export default createComponent({}) ͰғΉ
Slide 47
Slide 47 text
setup() を生やす • createComponent({}) ͷதͰ setup() ϝιουΛੜ͢
Slide 48
Slide 48 text
• reactive()ͷฦΓΛsetup() ͷฦΓʹؚΊΔͷ͕ϙΠϯτ • ίϯϙʔωϯτʹreturnͨ͠ϓϩύςΟ͕ੜ͑Δ data()をreactive()にする
Slide 49
Slide 49 text
templateの参照を変える • reactive ͷฦΓΛreturn ͢ΔͱΦϒδΣΫτʹͳΔͷͰҙ {{count}} → {{state.count}}
Slide 50
Slide 50 text
data()はref()にもできる • refͰఆٛͨ͠ʹ .value Λॻ͖͑Δ • refͰఆٛ͢ΔͱςϯϓϨʔτ͔ΒϑϥοτʹΞΫηεͰ͖Δ
Slide 51
Slide 51 text
propsはsetup()の第一引数 • propssetup()ͷୈҰҾͱͯ͠͞ΕΔ • createComponentͷϓϩύςΟͷpropsΛࢀর͢Δ
Slide 52
Slide 52 text
methodsはsetupの中で定義してreturn • ؔΛఆٛͯ͠setup()ͷreturnͷதʹؚΊΔ
Slide 53
Slide 53 text
Emitはsetup()の第2引数の中 • setup()ͷୈ2Ҿͷதʹemit() ͕͋ΔͷͰஔ͖͑Δ
Slide 54
Slide 54 text
Computed は computed()を使ってreturn • computed(callback) ΛͬͯcomputedΛఆٛ͢Δ • ඞͣreturnʹؚΊΔ
Slide 55
Slide 55 text
watchはsetup()の中でwatch()をコールする • ୈ1ҾreactiveͷΛແ໊ؔͰϥοϓͯ͠ฦ͢ • ୈ2ҾʹϩδοΫΛॻ͘
Slide 56
Slide 56 text
setup() ͕ैདྷͷVueΠϯελϯεʹม
Slide 57
Slide 57 text
Composition APIメリット • ػೳ͝ͱʹίʔυΛͰ͖ΔΑ͏ʹͳΔ • ίϯϙʔωϯτ͕ଟػೳԽ͍ͯ͘͠ͱ data, methods… ͳͲͰ۠ΒΕ͍ͯͯ ݟ௨͕͠ѱ͘ͳΔͷΛͳΜͱ͔͍ͨ͠ • “ίʔυͷ৫Խ” • ʢࠓճίʔυͷΛαϯϓϧͯ͠ͳ͍ʣ
Slide 58
Slide 58 text
コードの機能ごとの組織化
Slide 59
Slide 59 text
型インターフェースが良くなる • σίϨʔλTC39ʹΑΔ༷͕֬ఆͯ͠ͳ͍ • →Class Style ComponentRFC͔ΒഇҊ • ैདྷͷํ๏Ͱthis͕ຐڥ • Composition APIͰશ͘thisΛ͍ͬͯͳ͍ • Pure JavaScriptͱͯ͠ਖ਼͘͠ॻ͍ͯػೳ͢Δ
Slide 60
Slide 60 text
easy͡Όͳ͍ʁ • ্ख͍ਓ͕ॻ͘ͱḿΔ͚Ͳ Լखͳਓ͕ॻ͘ͱࠞཚΛট͘͜ͱRFCͰةዧ͞Ε͍ͯΔ • ্ख͍ਓ͕ॻ͍ͯḿΔέʔεͷϝϦοτ͕ σϝϦοτΛ্ճΔͱ͍ͯ͠Δ • ެࣜυΩϡϝϯτͱ͔ӡ༻ͰΧόʔ
Slide 61
Slide 61 text
まとめ • Class Styled Component • ར༻ऀଟ͍ • Vue.extend() • ͓खܰͩ͠ݸਓతʹਪ͠ • Composition API • ෳࡶͳίϯϙʔωϯτͷݟ௨͠ΛΑ͘͢Δ
Slide 62
Slide 62 text
Let’͂ Vue.ts!