Vueを学ぶ

第5章. コンポジションAPI

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

前の章では、古典的なOptions APIを使ってVueコンポーネントを構成する方法を学んだ。Vue 2以降、Vueコンポーネントを構成するための最も一般的なAPIであるにもかかわらず、Options APIを使用すると、不必要にコードが複雑になったり、大規模なコンポーネントコードが読めなくなったり、コンポーネント間のロジックが再利用できなくなったりする可能性がある。このようなユースケースのために、この章ではVueコンポーネントを構成するための別のアプローチ、Composition APIを紹介する。

この章では、Vueで機能的なステートフル要素を作成するために、さまざまなコンポジションフックを探求する。また、オプションAPIとコンポジションAPIを組み合わせることで、より優れたリアクティブ制御を実現し、アプリケーションのために再利用可能な独自のコンポーザブルを構成する方法を学ぶ。

Composition APIでコンポーネントをセットアップする

Vue では、Options API を使ってコンポーネントを構成するのが一般的だ。しかし、多くの場合、ミキシンのようにデータやメソッドの重複を気にせずにコンポーネントロジックの一部を再利用したい。¹のようにデータやメソッドの重複を気にせずにコンポーネントのロジックの一部を再利用したい場合や、より読みやすく整理されたコンポーネントを使いたい場合が多い。Composition APIは、そのような場面で役に立つ 。

Vue 3.0で導入されたComposition APIは、setup() フック（"setup"）や <script setup> タグを利用して、ステートフルなコンポーネントとリアクティブなコンポーネントを合成する代替方法を提供する。setup() フックは、コンポーネントのオプション・オブジェクトの一部で、コンポーネントのインスタンスを初期化して作成する前に一度だけ実行される（beforeCreate() フックの前）。

Composition API関数やComposable（「再利用可能なComposableの作成」）は、このフックまたは等価性構文<script setup> タグ内でのみ使用できる。この組み合わせは、ステートフルな機能コンポーネントを作成し、コンポーネントのリアクティブなステートとメソッドの定義、および他のライフサイクルフック（「ライフサイクルフックの使用」を参照）の初期化を、よりわかりやすいコード可読性で行うための優れた場所を提供する。

コンポーネントのリアクティブ・データを処理するためのref() とreactive() 関数から始めて、APIのパワーを探ってみよう。

ref()とreactive()でデータを扱う

第2章では、コンポーネントのデータを初期化するためのOptions APIのdata() 関数プロパティについて学んだ（「データ・プロパティによるローカル状態の作成」）。data() から返されるオブジェクトのデータ・プロパティはすべてリアクティブだ。つまり、Vueエンジンは宣言された各データ・プロパティの変更を自動的に監視する。しかし、多くのデータ・プロパティがあり、そのほとんどが静的である場合、このデフォルトの機能はコンポーネントにオーバーヘッドを引き起こす可能性がある。このような場合でも、Vueエンジンはこれらの静的な値に対してウォッチャーを有効にするが、これは不要である。過剰なデータ・ウォッチャーの数を制限し、どのデータ・プロパティを可観測するかをより制御できるようにするため、VueはComposition ...