Tweet
Tweet

Slide 1

Slide 1 text

VueでTypeScriptを始める ３つの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を導入する方法３つ • 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()の第一引数 • props͸setup()ͷୈҰҾ਺ͱͯ͠౉͞ΕΔ • 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 Component͸RFC͔ΒഇҊ΁ • ैདྷͷํ๏Ͱ͸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!