おさらいVue Composition API

Transcript

1. ͓͞Β͍
   7VF
   $PNQPTJUJPO
   "1* 1

2. ๏ ৿ాɹউॣ
   ๏ ϑϩϯτΤϯυΤϯδχΞ
   ๏ 3FBDU/PEF7VF /VYU
   ๏ 7VFྺ͸ϲ݄ͪΐ͍͘Β͍
   

   ๏ 5XJUUFS
   !UFYEFBUI 2

3. Agenda 1. What is Vue Composition API? 2. Better Type

   Interface 3. Logic Extraction and Reuse 4. More Flexibility Requires More Discipline 5. まとめ 3

4. What is Vue Composition API Vue 3.xからRFCで組み込まれる関数ベースのAPI ロジックの再利用性を高め、より柔軟な構築を可能にする 4

5. جຊతͳྫ 5

6. جຊతͳྫ 6 ͜ͷؔ਺಺෦Ͱσʔλ΍ؔ਺ͷఆٛΛߦ͏

7. جຊతͳྫ 7 ঢ়ଶͷએݴ ͜ͷؔ਺಺෦Ͱσʔλ΍ؔ਺ͷఆٛΛߦ͏

8. جຊతͳྫ 8 ঢ়ଶͷએݴ ͜ͷؔ਺಺෦Ͱσʔλ΍ؔ਺ͷఆٛΛߦ͏ ܭࢉͨ͠ঢ়ଶʢࢀরʣΛฦ͢

9. Better Type Interface TypeScriptへのサポートが大幅に向上 CreateComponentを定義すると型推論が効くようになる 9 import { createComponent }

   from '@vue/composition-api'; const Component = createComponent({ // ͜ͷ಺෦Ͱܕਪ࿦͕ޮ͘Α͏ʹͳΔ }); const Component = { // ͪ͜Βͷίϯϙʔωϯτม਺಺Ͱ͸ܕਪ࿦͕ޮ͔ͳ͍ // ʢTypeScript͕VueͷίϯϙʔωϯτͰ͋Δͱ൑அͰ͖ͳ͍ͨΊʣ };

10. Logic Extraction and Reuse 関数化することで、任意の機能再利用が容易に 10

11. More Flexibility Requires More Discipline • 柔軟性を高めるためには、多くの規律が必要 • 適切に運用しないと品質は大きく下がってしまう •

    VuexやRouterを組み合わせるとより難易度が上がる • JavaScriptのコアメカニズムに則った編成を心がける 11

12. ެࣜͷνϡʔτϦΞϧಈը͕Θ͔Γ΍͍͢ 12 https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/

13. ·ͱΊ •Vue Composition APIを使えば •関数化が楽になる •TypeScriptでの型推論がしやすくなる •柔軟な構築が可能だが、それゆえより高度 な設計が必要 13