VueでTypeScriptを始める 3つのStyle/3 style to start vue with typescript

Transcript

1. VueでTypeScriptを始める ３つのStyle גࣜձࣾΏΊΈ Ռ෺Ϧϯ 2020/01/23 Yumemi.vue #5

2. 自己紹介 • Ռ෺Ϧϯ • גࣜձࣾΏΊΈ • ϑϩϯτΤϯυΤϯδχΞ • Vue͸͍͍ͧ

3. ຊ೔ͷηογϣϯͷॾ஫ҙ • ࢲ͸VueʹTypeScriptೖΕͨ͜ͱ͕͋Μ·Γͳ͍Ͱ͢ • ࠓ೔ͷͨΊʹ̏ύλʔϯશ෦ࢼͨ͠ • ϊ΢ϋ΢ͱ͔Yakͱ͔ڭ͑ͯԼ͍͞ • TypeScriptͦͷ΋ͷ΍ܕͷ࿩͸͠·ͤΜ •

   Vuexʹ͍ͭͯ͸৮Ε·ͤΜ • Vue CLI v3Ͱ࡞ͬͨϓϩδΣΫτͰࢼͯ͠·͢

4. VueにTypeScriptを導入する方法３つ • Class Style Component • Vue.extendʢಛʹ໊લ͕͋ΔΘ͚Ͱ͸ͳ͍ʁʣ • Composition API(RFC

   as of 2020/1/23)

5. ൺ΂ͯΈΑ͏ʂ

6. ຊ೔ͷαϯϓϧϓϩδΣΫτ • vue.js + typescript = vue.ts ͜ͱ͸͡Ί - Qiita


   https://qiita.com/nrslib/items/be90cc19fa3122266fd7
 ͜ͷهࣄͷίʔυΛશ໘తʹ࠾༻ • ࠓճͷίʔυ͸͜͜ͰݟΕ·͢ • Github fruitriin/vue-ts-test 
 https://github.com/fruitriin/vue-ts-test
7. None

8. 仕様 • ѫࡰͷϝοηʔδʮHelloʯͱΧ΢ϯτ਺͕දࣔ͞Ε͍ͯΔ • MyButtonΛԡͨ͢ͼʹΞϥʔτ͕දࣔ͞ΕΧ΢ϯτ͕૿͑Δ • ॳճMyButtonΛԡ͢ͱѫࡰϝοηʔδ͕ʮ͜ΜʹͪΘʯʹมΘΔ • Χ΢ϯτ͕̏ʹͳΔͱ͖ɺผ్Ξϥʔτ͕ͰΔ •

   Χ΢ϯτ͕̏Ҏ্ͷͱ͖ɺʮৗ࿈͞ΜͰ͢ʯͱදࣔ͞ΕΔ • ResetButtonΛԡ͢ͱѫࡰϝοηʔδ͕Helloʹ໭Δ

9. サンプルプロジェクト概説 • Home.vueʢ਌ίϯϙʔωϯτʣ • MyButtonʢࢠίϯϙʔωϯτ1ʣ • ResetButtonʢࢠίϯϙʔωϯτ2ʣ

10. Home.vue • dataʹgreatText = “Hello” ͱ count = 0 •

    methodsʹonMyButtonClicked(count) • this.greatText = ͜ΜʹͪΘ, 
 this.count = count • Computed ʹ isRegular = this.count >= 3 • Watch ʹ count === 3 ͳΒ alert()

11. MyButton.vue • data ʹ count: 0 • Props ʹ great

    :String • Methods ʹ onClcik() • this.great Λalert, this.countΛ +1
 click ΠϕϯτͰ this.count Λ emit up

12. Reset.vue • data ʹ initialValue • Props ʹ value: String

    • Created Ͱ this.initialValue = this.value • Methods Ͱ • input(value) ͕ inputΠϕϯτͰvalueΛemit up • onClick() Ͱ this.input(this.initialValue)

13. ·͊Vueͷओཁͳػೳ͸
 Χόʔͯ͠Δͬͯ͜ͱͩΑ

14. Class Style Component

15. TypeScriptの導入 • vue add typescript • ର࿩ܗࣜͰ࣭໰ʹ౴͑Δ • Use class-style

    component syntax ʹ “YES”

16. 増える依存関係 • dependencies • vue-class-component • vue-property-decorator • devDpendencies •

    @vue/cli-plugin-typescript • typescript

17. 自動生成されるファイル • tsconfig.json, shims-tsx.d.ts, 
 shims-vue.d.ts ͕ࣗಈੜ੒͞ΕΔ

18. Let’s TSԽʂ

19. lang=ts と型注釈import • <script lang=ts> • Import { ܕ஫ऍ }

    from “vue-property-decorator”

20. @ComponentデコレータとVue継承クラス • @Component σίϨʔλΛॻ͍ͯͦͷதʹ components Λॻ͘ • σίϨʔλ͸TypeScriptͷSyntax • export

    default class {ClassName} extends Vue ͱॻ͘

21. 参照Componentsがないとき • @Componet σίϨʔλͷҾ਺͸লུͰ͖Δ

22. クラスのプロパティとしてdataを定義 • ΫϥεͷϓϩύςΟ͸͢΂ͯϦΞΫςΟϒͳdataʹͳΔ

23. propsは@Props デコレータを使う • props͸ΫϥεͷϓϩύςΟʹ͢Δ • @Props() σίϨʔλΛ͚ͭΔͱPropsʹม׵͞ΕΔ • ෳ਺props͢Δ΋ͷ͕͋Ε͹౎౓ @PropsΛ͚ͭΔ

24. methodsをクラスのメソッドとして定義 • methods ΦϒδΣΫτ഑ԼͷVueͷϝιου͸
 Ϋϥεͷϝιουͱͯ͠֎ʹग़͢

25. this.$emit(event) を @Emit() に • this.$emit(“event”, hoge) Λ
 @Emit() σίϨʔλ෇͖ͷผϝιουʹ͢Δ

    • this.$emit()ͷୈ2Ҿ਺͸
 @Emit()σίϨʔλΛ͚ͭͨϝιουͷୈ1Ҿ਺ʹ͢Δ

26. Computed は getter メソッドにする • Computed ΦϒδΣΫτͷϝιου͔Β
 Ϋϥεͷgetter ϝιουͱͯ͠ఆٛ͢Δ •

    getter ϝιου͸computed ͱͯ͠ม׵͞ΕΔ

27. @Watchデコレータ付きメソッドにする • watch ΦϒδΣΫτ͸@Watch({؂ࢹର৅}) σίϨʔλ • ؂ࢹର৅ͱಉ໊ͷϝιου͡Όͳͯ͘Α͍ • ؂ࢹର৅΁ͷΞΫηε͸ thisܦ༝Ͱ΍ΔͬΆ͍ʁ

28. ͔ͳΓॻ͖ํ͕มΘΔ

29. Class Style Componentメリット • ֎෦͔Βܕ஫ऍΛ෇༩͢ΔελΠϧ • VuejsͷެࣜαϒϓϩδΣΫτ • ݁ߏμΠφϛοΫʹॻ͖׵͑Δඞཁ͕͋Δ •

    Vue v0.0.1͔Β͋ΔͷͰࢿྉ͕ͨ͘͞Μ͋Δ • උߟʣVue v3ͷRFCʹڍ͛ΒΕͯ٫Լ͞Ε͍ͯΔ

30. Vue.extend

31. TypeScriptの導入 • vue add typescript • ର࿩ܗࣜͰ࣭໰ʹ౴͑Δ • Use class-style

    component syntax ʹ “No”

32. 増える依存関係 • devDpendencies • @vue/cli-plugin-typescript • typescript

33. 自動生成されるファイル • tsconfig.json, shims-tsx.d.ts, 
 shims-vue.d.ts ͕ࣗಈੜ੒͞ΕΔ • ಺༰͸Class Style

    Componentͱಉ༷

34. Let’s TSԽʂ

35. lang=ts と import と Vue.extend • import ͢Δͷ͸vue͔Β • ExtendedVue

    ܕͷΦϒδΣΫτΛฦ͢ϝιουΛexport͢Δ

36. componentsはそのまま • ಛʹॻ͖׵͑Δඞཁͳ͠

37. dataに型を付ける • data͕ฦ͢ܕΛ·Δͬͱ෇͚Δ

38. methods, comupted, watch 等に型を付ける • Ҿ਺΍ฦΓ஋ʹܕΛ௥Ճ͢Δ

39. Ҏ্ʂ

40. Vue.extend メリット • Vue v2.4͔ΒVueຊମͷػೳͱͯ͠ొ৔ • ඞཁͳՕॴʹܕΛ௥Ճ͢Δ͚ͩͰ͓खܰಋೖ • ͓खܰ͗ͯ͢᠘͕ͳ͍͔ා͍Μ͚ͩͲ…

41. Composition API(RFC) in 2.x

42. TypeScriptの導入 • vue add typescript • ର࿩ܗࣜͰ࣭໰ʹ౴͑Δ • Use class-style

    component syntax ʹ “No” • yarn add @vue/composition-api

43. 依存関係、ファイルの自動生成 • ʢলུʣ

44. Let’s TSԽʂ

45. Vue.use(VueCompositionApi) • main.tsͰVue.use(VueCompositionApi)͢Δ

46. lang=tsとimportとcreateElement() • export default createComponent({}) ͰғΉ

47. setup() を生やす • createComponent({}) ͷதͰ setup() ϝιουΛੜ΍͢

48. • reactive()ͷฦΓ஋Λsetup() ͷฦΓ஋ʹؚΊΔͷ͕ϙΠϯτ • ίϯϙʔωϯτʹreturnͨ͠ϓϩύςΟ͕ੜ͑Δ data()をreactive()にする

49. templateの参照を変える • reactive ͷฦΓ஋Λreturn ͢ΔͱΦϒδΣΫτʹͳΔͷͰ஫ҙ {{count}} → {{state.count}}

50. data()はref()にもできる • refͰఆٛͨ͠஋ʹ͸ .value Λॻ͖׵͑Δ • refͰఆٛ͢ΔͱςϯϓϨʔτ͔ΒϑϥοτʹΞΫηεͰ͖Δ

51. propsはsetup()の第一引数 • props͸setup()ͷୈҰҾ਺ͱͯ͠౉͞ΕΔ • createComponentͷϓϩύςΟͷpropsΛࢀর͢Δ

52. methodsはsetupの中で定義してreturn • ؔ਺Λఆٛͯ͠setup()ͷreturnͷதʹؚΊΔ

53. Emitはsetup()の第2引数の中 • setup()ͷୈ2Ҿ਺ͷதʹemit() ͕͋ΔͷͰஔ͖׵͑Δ

54. Computed は computed()を使ってreturn • computed(callback) Λ࢖ͬͯcomputedΛఆٛ͢Δ • ඞͣreturnʹؚΊΔ

55. watchはsetup()の中でwatch()をコールする • ୈ1Ҿ਺͸reactiveͷ஋Λແ໊ؔ਺Ͱϥοϓͯ͠ฦ͢ • ୈ2Ҿ਺ʹϩδοΫΛॻ͘

56. setup() ͕ैདྷͷVueΠϯελϯεʹม׵

57. Composition APIメリット • ػೳ͝ͱʹίʔυΛ෼཭Ͱ͖ΔΑ͏ʹͳΔ • ίϯϙʔωϯτ͕ଟػೳԽ͍ͯ͘͠ͱ
 data, methods… ͳͲͰ۠੾ΒΕ͍ͯͯ
 ݟ௨͕͠ѱ͘ͳΔͷΛͳΜͱ͔͍ͨ͠

    • “ίʔυͷ૊৫Խ” • ʢࠓճ͸ίʔυͷ෼཭Λαϯϓϧͯ͠ͳ͍ʣ

58. コードの機能ごとの組織化

59. 型インターフェースが良くなる • σίϨʔλ͸TC39ʹΑΔ࢓༷͕֬ఆͯ͠ͳ͍ • →Class Style Component͸RFC͔ΒഇҊ΁ • ैདྷͷํ๏Ͱ͸this͕ຐڥ •

    Composition APIͰ͸શ͘thisΛ࢖͍ͬͯͳ͍ • Pure JavaScriptͱͯ͠ਖ਼͘͠ॻ͍ͯػೳ͢Δ

60. easy͡Όͳ͍ʁ • ্ख͍ਓ͕ॻ͘ͱḿΔ͚Ͳ
 Լखͳਓ͕ॻ͘ͱࠞཚΛট͘͜ͱ͸RFCͰ΋ةዧ͞Ε͍ͯΔ • ্ख͍ਓ͕ॻ͍ͯḿΔέʔεͷϝϦοτ͕
 σϝϦοτΛ্ճΔͱ͍ͯ͠Δ • ެࣜυΩϡϝϯτͱ͔ӡ༻ͰΧόʔ

61. まとめ • Class Styled Component • ར༻ऀଟ͍ • Vue.extend() •

    ͓खܰͩ͠ݸਓతʹਪ͠ • Composition API • ෳࡶͳίϯϙʔωϯτͷݟ௨͠ΛΑ͘͢Δ

62. Let’͂ Vue.ts!