Options APIの課題とComposition APIが解決したこと

Transcript

1. Vue.js Options APIの課題と Composition APIが解決したこと 1
2. 背景 前職でVue2のOptions APIを使っていた Vue3でCompositionAPIが何をもたらしたのかが気になった 2
3. Options APIとは Vue2から使われている従来のコンポーネントの書き方 data、methods、computedなどのオプションごとにコードを書く export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } }, computed: { doubled() { return this.count * 2 } } } 3
4. Composition APIとは Vue3で導入された新しいコンポーネントの書き方 Vueが提供しているrefなどの関数を使ってコードを書く import { ref, computed } from 'vue' const count = ref(0) const doubled = computed(() => count.value * 2) const increment = () => count.value++ 4
5. これだけみても何がよくなったかわかりずらい 実際に解決したこと順番にみていく 5
6. 課題1: コードが散在する 同じ機能に関するコードがdata, methods, computedなどに分散 ロジックを理解する時にあちこち探す必要がある 6
7. 解決1: コードをまとめて書ける Composition APIなら関連ロジックをまとめて書ける まとまっているので理解しやすい 7
8. 課題2: 機能の再利用が難しい ユーティリティ関数：状態(optionsAPIでいうdata)の共有ができない ミックスイン：名前の衝突や、どのミックスインが何を提供しているか分かりづらい export default { // どのミックスインが何を提供しているか把握しづらい mixins: [validationMixin, formMixin, userMixin], methods: { // コンポーネント独自の実装があるとミックスインとの関係が複雑に validateEmail() { /* オーバーライドのロジック */ } } } 8
9. 解決2: 機能の再利用が簡単 コンポーザブル関数として状態とロジックをセットで切り出せる 再利用しやすく、名前の衝突も回避できる import { useValidation } from './useValidation' ... const { value, error, validate : validateUser } = useValidation() 9
10. 課題3: TypeScriptとの相性が悪い Options APIでTypeScriptを使うと型定義が煩雑 推論・型安全が弱い(存在しないプロパティにアクセスしても型エラーにならない) interface ComponentData { user: { name: string } } interface ComponentMethods { updateUser(name: string): void } export default Vue.extend({ data(): ComponentData { return { user: { name: '' } } }, methods: { updateUser(newName: string) { this.user.name = newName this.user.age++ // 実行時にエラー } } }); 10
11. 解決3: TypeScriptとの相性が良い Composition APIは標準的なTypeScript機能がそのまま使える import { ref } from 'vue' const user = ref({ name: '' }) const updateUser = (newName: string) => { user.value.name = newName user.value.age++ //　型エラーになる } 11
12. まとめ CompositionAPIはOptionsAPIの下記の課題を解決した 関連ロジックを直感的にまとめやすくなった 状態とロジックの再利用がよりシンプルに TypeScriptがより自然に使える みなさんも新規ロジックを書くときはCompositionAPIを利用してください！ 12
13. ご清聴ありがとうございました！ 13