Vue Academy · レッスン

Composition APIを使う理由

Q: 「Composition APIを使う理由」で何を学びますか？

Options APIの制限、ロジック再利用の問題、Composition APIの利点について学習します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Options APIの制限、ロジック再利用の問題、Composition APIの利点について学習します。

「Composition APIを使う理由」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

Vueの書き方は2通り

Vue 3には、コンポーネントのロジックを記述する2つのスタイルがあります。Options APIとComposition APIです。どちらも同じ結果を生み出しますが、コードの整理方法は大きく異なります。

それぞれのトレードオフを理解すると、適切なツールを選び、既存のコードベースも自信を持って読めるようになります。

Options APIによるコード整理の仕組み

Options APIでは、コンポーネントをdata、computed、methods、watch、ライフサイクルフックという固定されたセクションに分けます。1つの機能を構成する各部分が、それぞれ異なるセクションに置かれます。

1つの小さな機能を追加するだけでも、ファイル内の4つの別々のブロックを編集することがあります。

export default {
  data() {
    return { count: 0 }
  },
  computed: {
    doubled() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ }
  }
}

問題点：関心事が分散する

コンポーネントが大きくなると、1つの関心事（たとえば検索ボックス）のロジックがdata、methods、computed、watchに分散します。1つの機能を追うために、常にファイルを上下にスクロールすることになります。

これを断片化問題と呼びます。

Composition API：機能ごとにまとめる

Composition APIでは、1つの論理的な関心事に関するコードをすべてまとめて配置できます。リアクティブな状態、派生値、それらを変更する関数を横並びに置けます。

上から下へ読み進めるだけで、1つの機能全体を1か所で確認できます。

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)
    function increment() { count.value++ }
    return { count, doubled, increment }
  }
}

並べて比較

2つ目の例では、countと、そこから派生するdoubled、そしてincrementが一緒に置かれていることに注目してください。Options APIでは、この3つは別々のセクションに分かれていました。

Options API：オプションの種類ごとに整理
Composition API：論理的な関心事ごとに整理

ロジックの再利用：mixins（従来の方法）

Composition APIが登場する前は、主な再利用手段はmixinsでした。mixinは、そのオプションをコンポーネントにマージします。

しかし、mixinsには実際の問題があります。名前の衝突、プロパティの出所が不明確になること、mixins間の暗黙的な依存関係などです。

const counterMixin = {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}

export default {
  mixins: [counterMixin]
  // Where did count come from? Not obvious.
}

ロジックの再利用：composables（新しい方法）

composableとは、リアクティビティ APIを使用してリアクティブな状態を返す関数にすぎません。通常の関数と同じように呼び出せるため、各値の出所が明示されます。

マジックなマージも、隠れた名前の衝突もありません。

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
}

composableを使う

composableをインポートして呼び出すと、countとincrementがuseCounterから渡されていることが明確になります。分割代入の際に名前を変更して、衝突を避けることもできます。

import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

composableがmixinより優れている理由

出所が明示的 — すべての値が、目に見える関数呼び出しから渡されます。
名前の衝突がない — 分割代入して自由に名前を変更できます。
合成可能 — 1つのcomposableから別のcomposableを呼び出せます。
型に適している — TypeScriptが返り値の型を自動的に推論します。

TypeScriptとツール対応の向上

Composition APIは通常の関数と変数で構成されているため、TypeScriptは特別なツール対応なしで型を推論できます。手作業で型を定義して保守するthisもなく、エディターによる自動補完も正確です。

どちらを使うべきか

Composition APIは、中規模から大規模のコンポーネントや、再利用したいロジックで特に力を発揮します。Options APIも十分有効で、小さなコンポーネントでは読みやすい場合があります。

新しくVue 3のコードを書く場合は、一般的にComposition APIが選ばれます。特に、これから学ぶ<script setup>と組み合わせる場合はそうです。

理解度チェック

Composition APIが存在する理由について、学んだことを確認しましょう。

まとめ

このレッスンでは、次のことを学びました。

Options APIはオプションの種類ごとにコードを整理するため、1つの機能が複数のセクションに分散します。
Composition APIは論理的な関心事ごとにコードをまとめます。
Mixinsはロジックを再利用できますが、名前の衝突や隠れた出所を引き起こします。
Composablesはリアクティブな状態を返す通常の関数です。出所が明示的で、衝突がなく、組み合わせて使えます。

よくある質問

「Composition APIを使う理由」レッスンは無料ですか？

はい。「Composition APIを使う理由」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「Composition APIを使う理由」で何を学びますか？

Options APIの制限、ロジック再利用の問題、Composition APIの利点について学習します。ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「Composition APIを使う理由」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る