【Vue3】2つのAPI スタイル：Options APIとComposition API

はじめに

以前Vue2と3を勉強していた際、見ている教材によって書き方が違うことから躓いてしまったことがあった。
その躓いた点が2つのAPIスタイルの違いだったのだと先輩から教えてもらい、改めて整理することが必要だと感じた。

Vueのチュートリアルで学んだこと、自分で調べたことをまとめていく。
メリット・デメリットなどはGeminiに聞いてみた。

APIスタイルとは

• API (Application Programming Interface)とは
  異なるソフトウェア同士が互いに通信し、機能を利用するためのインターフェースのこと。

• Vue.jsで言われる「APIスタイル」とは
  Vue.jsが提供するコンポーネントを作成するための様々な機能やメソッド（つまりAPI）を利用するスタイル。

コンポーネントを作成する際に、これらのAPIをどのように組み合わせて使うかによって、コンポーネントの構造や書き方が変わる。

2つのAPIスタイル

Options API、Composition API と呼ばれる 2 種類の異なる API スタイルがある。

Options API

/*  Options API Vue公式ドキュメントより */
<script>
export default {
  // data() で返すプロパティはリアクティブな状態になり、
  // `this` 経由でアクセスすることができます。
  data() {
    return {
      count: 0
    }
  },

  // メソッドの中身は、状態を変化させ、更新をトリガーさせる関数です。
  // 各メソッドは、テンプレート内のイベントハンドラーにバインドすることができます。
  methods: {
    increment() {
      this.count++
    }
  },

  // ライフサイクルフックは、コンポーネントのライフサイクルの
  // 特定のステージで呼び出されます。
  // 以下の関数は、コンポーネントが「マウント」されたときに呼び出されます。
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

特徴

Vue.js 2.xから存在する従来からのスタイル。
data、methods、mounted といった数々のオプションからなる 1 つのオブジェクトを用いてコンポーネントのロジックを定義する。
これらのオプションによって定義されたプロパティには、コンポーネントのインスタンスを指す this を使って、関数内からアクセスできる。

メリット

直感的で理解しやすく、多くのチュートリアルやサンプルコードで採用されています。

デメリット

コンポーネントが大きくなると、オプションが散らばり、コードの可読性が低下する可能性があり、ロジックの再利用が難しい場合がある。

Composition API

/*  Composition API Vue公式ドキュメントより */
<script setup>
import { ref, onMounted } from 'vue'

// リアクティブな状態
const count = ref(0)

// 状態を変更し、更新をトリガーする関数。
function increment() {
  count.value++
}

// ライフサイクルフック
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

特徴

Vue.js 3.xで導入された新しいスタイルで、コンポーネントのロジックを関数として定義する。
これにより、ロジックを再利用しやすく、コードをよりモジュール化できる。

-- 下記理解しきれていないので今度調べる。

SFC において、Composition API は通常、<script setup> と組み合わせて使用します。setup という属性を付けることで、Vue にコンパイル時の変形操作を実行してほしいというヒントが伝えられます。これにより、定型的な書式の少ない Composition API を利用することができます。

メリット

コードの再利用性が高く、大規模なアプリケーションでもコードの管理がしやすい。
ロジックを関数の形で分割できるため、テストが容易になる。

デメリット

慣れるまで少し時間がかかるかも。

まとめ

どちらを選ぶべきか？をGeminiに聞いてみた。

• シンプルなアプリケーション: Options APIで十分
• 大規模なアプリケーション、複雑なロジック: Composition APIがおすすめ
• チームでの開発: チームで統一したスタイルを採用することが重要