Vue.js 3 Composition API: グローバル開発者向けの徹底解説

Vue.jsは、その親しみやすい学習曲線と強力な機能のおかげで、現代的なWebアプリケーションを構築するための人気のある選択肢として急速に普及しました。Vue.js 3では、コンポーネントのロジックを整理する新しい方法であるComposition APIが導入され、これをさらに進化させました。この徹底解説では、Composition APIを効果的に理解し活用するための包括的なガイドを提供し、より保守性が高く、再利用可能で、テストしやすいVueアプリケーションを構築するスキルを身につけることができます。

Composition APIとは？

Composition APIは、オプションを宣言する代わりに、インポートされた関数を使用してVueコンポーネントを作成できるようにするAPIのセットです。基本的には、関連するロジックをテンプレート内のどこに現れるかに関わらず、一緒にグループ化することができます。これは、コードを事前定義されたカテゴリに基づいて整理することを強制するOptions API（data, methods, computed, watch）とは対照的です。Options APIはコードを*それが何か*（データ、メソッドなど）で整理するものと考えるのに対し、Composition APIはコードを*それが何をするか*で整理できるものと考えることができます。

Composition APIの中核はsetup()関数を中心に展開されます。この関数は、コンポーネント内でComposition APIを利用するためのエントリーポイントです。setup()内では、リアクティブな状態、算出プロパティ、メソッド、ライフサイクルフックをコンポーザブル関数を使用して定義できます。

なぜComposition APIを使用するのか？

Composition APIは、特に大規模で複雑なアプリケーションにおいて、従来のOptions APIに比べていくつかの利点を提供します：

• コード構成の改善： Composition APIを使用すると、関連するロジックをコンポーザブル関数にグループ化できるため、コードがより整理され、理解しやすくなります。関連するコードを異なるOptions APIのプロパティに散在させる代わりに、すべてを1か所にまとめることができます。これは、複数の機能を含む複雑なコンポーネントを扱う場合に特に有益です。
• 再利用性の向上： コンポーザブル関数は、簡単に抽出して複数のコンポーネント間で再利用できます。これにより、コードの再利用が促進され、重複が減少し、より効率的な開発につながります。これは、アプリケーション全体で一貫したユーザーエクスペリエンスを維持するためのゲームチェンジャーです。
• テストのしやすさの向上： Composition APIは、個々のコンポーザブル関数を単独でテストできるようにすることで、単体テストを容易にします。これにより、バグの特定と修正が容易になり、より堅牢で信頼性の高いアプリケーションが実現します。
• 型安全性： TypeScriptと共に使用すると、Composition APIは優れた型安全性を提供し、開発中に潜在的なエラーをキャッチします。これにより、コードベース全体の品質と保守性を大幅に向上させることができます。
• ロジックの抽出と再利用： Composition APIを使用すると、コンポーネントのロジック部分を簡単に抽出して再利用できます。これは、データフェッチ、フォームバリデーション、ユーザー認証の管理など、複数のコンポーネントで共有する必要がある機能を扱う場合に特に便利です。

コアコンセプトの理解

Composition APIを支える主要な概念について詳しく見ていきましょう：

1. setup()

前述の通り、setup()はComposition APIを使用するためのエントリーポイントです。これは、コンポーネントが作成される前に実行されるコンポーネントオプションです。setup()内で、リアクティブな状態、算出プロパティ、メソッド、ライフサイクルフックを定義し、テンプレートに公開したい値を含むオブジェクトを返します。

例：

            import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

            

              
                Copy
              
            
          

この例では、refを使用してcountというリアクティブな変数を作成しています。また、countの値を増やすincrementというメソッドを定義しています。最後に、countとincrementを含むオブジェクトを返し、これらをコンポーネントのテンプレートで利用できるようにします。

2. refとreactiveによるリアクティブな状態

Composition APIは、リアクティブな状態を作成するための2つの主要な関数、refとreactiveを提供します。

• ref: refはプリミティブな値（数値、文字列、ブール値など）を受け取り、リアクティブで可変なrefオブジェクトを返します。値はrefの.valueプロパティを通じてアクセスおよび変更されます。単一の値の変更を追跡したい場合に使用します。
• reactive: reactiveはオブジェクトを受け取り、そのオブジェクトのリアクティブなプロキシを返します。リアクティブなオブジェクトのプロパティへの変更は、コンポーネントの更新をトリガーします。オブジェクト内の複数のプロパティの変更を追跡したい場合に使用します。

refを使用した例：

            import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue!')

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

            

              
                Copy
              
            
          

reactiveを使用した例：

            import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      name: 'John Doe',
      age: 30
    })

    const updateName = (newName) => {
      state.name = newName
    }

    return {
      state,
      updateName
    }
  }
}

            

              
                Copy
              
            
          

3. computedによる算出プロパティ

算出プロパティは、他のリアクティブな状態から派生する値です。依存関係が変更されるたびに自動的に更新されます。computed関数は、ゲッター関数を引数として受け取り、読み取り専用のリアクティブなrefを返します。

例：

            import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')

    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`
    })

    return {
      firstName,
      lastName,
      fullName
    }
  }
}

            

              
                Copy
              
            
          

この例では、fullNameはfirstNameとlastNameに依存する算出プロパティです。firstNameまたはlastNameのいずれかが変更されると、fullNameは自動的に更新されます。

4. watchとwatchEffectによるウォッチャー

ウォッチャーを使用すると、リアクティブな状態の変化に反応できます。Composition APIは、ウォッチャーを作成するための2つの主要な方法、watchとwatchEffectを提供します。

• watch: watchを使用すると、監視するリアクティブな依存関係を明示的に指定できます。最初の引数として1つ以上のリアクティブな参照（ref、算出プロパティ、またはリアクティブなオブジェクト）を取り、2番目の引数としてコールバック関数を取ります。指定された依存関係のいずれかが変更されるたびに、コールバック関数が実行されます。
• watchEffect: watchEffectは、コールバック関数内で使用されるすべてのリアクティブな依存関係を自動的に追跡します。コールバック関数は最初に実行され、その後、追跡されている依存関係のいずれかが変更されるたびに再実行されます。これは、依存関係を明示的に指定せずにリアクティブな状態の変化に基づいて副作用を実行したい場合に便利です。ただし、watchEffectは追跡する依存関係が多すぎるとパフォーマンスの問題を引き起こすことがあるため、注意が必要です。

watchを使用した例：

            import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`Count changed from ${oldValue} to ${newValue}`)
      }
    )

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

            

              
                Copy
              
            
          

watchEffectを使用した例：

            import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const message = ref('Hello')

    watchEffect(() => {
      console.log(`Message is: ${message.value}`)
    })

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

            

              
                Copy
              
            
          

5. ライフサイクルフック

Composition APIは、onMounted、onUpdated、onUnmountedなど、onで始まる関数を通じてコンポーネントのライフサイクルフックへのアクセスを提供します。これらの関数は、引数としてコールバックを取り、対応するライフサイクルフックがトリガーされたときに実行されます。

例：

            import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted')
    })

    onUnmounted(() => {
      console.log('Component is unmounted')
    })

    return {}
  }
}

            

              
                Copy
              
            
          

コンポーザブル関数の作成

Composition APIの真の力は、再利用可能なコンポーザブル関数を作成できることにあります。コンポーザブル関数とは、コンポーネントロジックの一部をカプセル化し、複数のコンポーネントで使用できるリアクティブな状態と関数を返す単なる関数です。

例：マウスの位置を追跡するコンポーザブル関数を作成してみましょう：

            import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  const updatePosition = (event) => {
    x.value = event.clientX
    y.value = event.clientY
  }

  onMounted(() => {
    window.addEventListener('mousemove', updatePosition)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', updatePosition)
  })

  return {
    x,
    y
  }
}

            

              
                Copy
              
            
          

これで、このコンポーザブル関数を任意のコンポーネントで使用できます：

            import { useMousePosition } from './useMousePosition'

export default {
  setup() {
    const { x, y } = useMousePosition()

    return {
      x,
      y
    }
  }
}

            

              
                Copy
              
            
          

実践的な例とユースケース

Composition APIが実際のシナリオでどのように使用できるか、いくつかの実践的な例を見ていきましょう：

1. データフェッチ

APIからデータを取得するためのコンポーザブル関数を作成するのは一般的なユースケースです。これにより、同じデータ取得ロジックを複数のコンポーネントで再利用できます。

            import { ref, onMounted } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  onMounted(async () => {
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  })

  return {
    data,
    error,
    loading
  }
}

            

              
                Copy
              
            
          

その後、このコンポーザブル関数をコンポーネントで次のように使用できます：

            import { useFetch } from './useFetch'

export default {
  setup() {
    const { data, error, loading } = useFetch('https://api.example.com/data')

    return {
      data,
      error,
      loading
    }
  }
}

            

              
                Copy
              
            
          

2. フォームバリデーション

フォームバリデーションは、Composition APIが非常に役立つもう1つの分野です。バリデーションロジックをカプセル化するコンポーザブル関数を作成し、さまざまなフォームで再利用できます。

            import { ref } from 'vue'

export function useValidation() {
  const errors = ref({})

  const validateField = (fieldName, value, rules) => {
    let error = null
    for (const rule of rules) {
      if (rule === 'required' && !value) {
        error = 'This field is required'
        break
      } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        error = 'Invalid email format'
        break
      }
    }

    if (error) {
      errors.value[fieldName] = error
    } else {
      delete errors.value[fieldName]
    }
  }

  return {
    errors,
    validateField
  }
}

            

              
                Copy
              
            
          

コンポーネントでの使用方法：

            import { useValidation } from './useValidation'
import { ref } from 'vue'

export default {
  setup() {
    const { errors, validateField } = useValidation()
    const email = ref('')

    const validateEmail = () => {
      validateField('email', email.value, ['required', 'email'])
    }

    return {
      email,
      errors,
      validateEmail
    }
  }
}

            

              
                Copy
              
            
          

3. ユーザー認証の管理

認証ロジックはしばしば複雑で、複数のコンポーネントで重複することがあります。Composition APIを使用すると、すべての認証ロジックをカプセル化し、コンポーネントが使用するためのクリーンなAPIを提供するコンポーザブル関数を作成できます。

例：（簡易版）

            import { ref } from 'vue'

export function useAuth() {
  const isLoggedIn = ref(false)
  const user = ref(null)

  const login = async (username, password) => {
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = true
    user.value = { username }
  }

  const logout = async () => {
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = false
    user.value = null
  }

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

            

              
                Copy
              
            
          

Composition APIを使用するためのベストプラクティス

Composition APIを最大限に活用するために、以下のベストプラクティスを検討してください：

• コンポーザブル関数は焦点を絞る： 各コンポーザブル関数は、単一の明確に定義された目的を持つべきです。これにより、理解、再利用、テストが容易になります。
• 説明的な名前を使用する： コンポーザブル関数の目的を明確に示す名前を選択します。これにより、コードがより読みやすく、保守しやすくなります。
• 必要なものだけを返す： コンポーネントで実際に必要なリアクティブな状態と関数のみを返します。これにより、コンポーネントの複雑さが軽減され、パフォーマンスが向上します。
• TypeScriptの使用を検討する： TypeScriptは優れた型安全性を提供し、開発プロセスの早い段階でエラーをキャッチするのに役立ちます。これは、Composition APIを扱う場合に特に有益です。
• コンポーザブル関数を文書化する： コンポーザブル関数にコメントを追加して、その目的、動作方法、および依存関係を説明します。これにより、他の開発者（および将来の自分）がコードを理解し、使用しやすくなります。
• コンポーザブル関数をテストする： コンポーザブル関数が正しく機能していることを確認するために単体テストを作成します。これにより、バグを早期に発見し、コードベース全体の品質を向上させることができます。
• 一貫したスタイルを使用する： コンポーザブル関数に一貫したスタイルを確立し、それを遵守します。これにより、コードがより読みやすく、保守しやすくなります。

一般的な落とし穴とその回避方法

Composition APIは多くの利点を提供しますが、注意すべき一般的な落とし穴もいくつかあります：

• コンポーザブル関数の過度な複雑化： 夢中になりすぎて、複雑すぎるコンポーザブル関数を作成しがちです。焦点を絞り、シンプルに保つようにしてください。コンポーザブル関数が大きくなりすぎた場合は、より小さく管理しやすい部分に分割することを検討してください。
• 偶発的なリアクティビティの問題： refとreactiveがどのように機能するかを確実に理解し、正しく使用してください。例えば、refのネストされたプロパティをアンラップせずに直接変更すると、予期しない動作につながる可能性があります。
• ライフサイクルフックの不適切な使用： ライフサイクルフックのタイミングに注意し、適切に使用していることを確認してください。例えば、onBeforeMountではDOM要素はまだ作成されていないため、アクセスしようとしないでください。
• watchEffectによるパフォーマンスの問題： watchEffectによって追跡される依存関係に注意してください。追跡する依存関係が多すぎると、パフォーマンスの問題につながる可能性があります。代わりにwatchを使用して、監視したい依存関係を明示的に指定することを検討してください。
• イベントリスナーの登録解除を忘れる： コンポーザブル関数内でイベントリスナーを使用する場合は、メモリリークを防ぐためにonUnmountedフックでそれらを登録解除するようにしてください。

Composition APIとグローバルチーム

Composition APIは、以下を促進することにより、グローバルな開発チーム内でのコラボレーションを育みます：

• 標準化されたコード構造： コンポーザブル関数に重点を置くことで、コードを整理するための明確で一貫したパターンが提供され、多様なバックグラウンドを持つチームメンバーがコードベースを理解し、貢献しやすくなります。
• モジュラーデザイン： 複雑なロジックを再利用可能なコンポーザブルに分割することで、よりモジュラーな設計が可能になり、異なるチームメンバーが互いの作業に干渉することなく、アプリケーションの独立した部分で作業できます。
• 改善されたコードレビュー： コンポーザブル関数の焦点が絞られているため、レビュー担当者は各コンポーザブルの目的と機能を簡単に理解でき、コードレビューが簡素化されます。
• 知識の共有： コンポーザブル関数は自己完結型の知識単位として機能し、異なるプロジェクトやチーム間で簡単に共有および再利用できます。

結論

Vue.js 3 Composition APIは、Vueアプリケーションの構成、再利用性、テスト可能性を大幅に向上させることができる強力なツールです。この徹底解説で概説されたコアコンセプトを理解し、ベストプラクティスに従うことで、Composition APIを活用して、グローバルなオーディエンス向けにより保守性が高くスケーラブルなアプリケーションを構築できます。Composition APIを取り入れて、Vue.js 3のポテンシャルを最大限に引き出しましょう。

自身のプロジェクトでComposition APIを試してみて、それが提供する広大な可能性を探求することをお勧めします。ハッピーコーディング！