Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Agenda 1. What is Vue Composition API? 2. Better Type Interface 3. Logic Extraction and Reuse 4. More Flexibility Requires More Discipline 5. まとめ 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

جຊతͳྫ 5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Better Type Interface TypeScriptへのサポートが大幅に向上 CreateComponentを定義すると型推論が効くようになる 9 import { createComponent } from '@vue/composition-api'; const Component = createComponent({ // ͜ͷ಺෦Ͱܕਪ࿦͕ޮ͘Α͏ʹͳΔ }); const Component = { // ͪ͜Βͷίϯϙʔωϯτม਺಺Ͱ͸ܕਪ࿦͕ޮ͔ͳ͍ // ʢTypeScript͕VueͷίϯϙʔωϯτͰ͋Δͱ൑அͰ͖ͳ͍ͨΊʣ };

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

More Flexibility Requires More Discipline • 柔軟性を高めるためには、多くの規律が必要 • 適切に運用しないと品質は大きく下がってしまう • VuexやRouterを組み合わせるとより難易度が上がる • JavaScriptのコアメカニズムに則った編成を心がける 11

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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