新Vue.js「Vue 3」でコンポーネント実装法を大きく変える「Composition API」

JavaScriptフレームワーク「Vue 3」の新機能紹介 第1回

Composition APIを利用したロジックの共通化

　Composition APIでは、JavaScriptの標準的な記法でデータ／メソッド／算出プロパティなどを記述できるため、ロジックの共通化が容易です。例えば、iOSとAndroidで共通の処理内容を、リスト8の通り切り出せます。リスト8のPhonesLogicメソッドでは、受け取った引数でデータの初期値を設定し、メソッドや算出プロパティと合わせて返却します。

［リスト8］共通ロジック（p005-refactor/src/components/PhonesLogic.js）

import { reactive, computed, toRefs } from 'vue'
export default function PhonesLogic(initialList) {
  // reactiveでデータを記述
  const state = reactive({
    terminals: initialList,
    newTerminal: ''
  })
  // メソッド
  function addNew() {
    state.terminals.push(state.newTerminal)
    state.newTerminal = ''
  }
  // 算出プロパティ
  const count = computed(function () {
    return state.terminals.length
  })
  // ここまで定義してきた内容を返却
  return {
    ...toRefs(state), addNew, count
  }
}

　リスト8の共通ロジックを利用するコンポーネントの実装はリスト9です。（1）でiOS／Androidの各処理を行うロジックを生成し、（2）で総端末数の算出プロパティを定義後、（3）で各ロジックと算出プロパティをまとめてreturnします。

［リスト9］共通ロジックの利用（p005-refactor/src/components/Phones.vue）

setup() {
  // PhoneLogicでiOS/Androidの各処理ロジックを生成 ...（1）
  const iOSLogic = PhonesLogic(['iPhone 11'])
  const androidLogic = PhonesLogic(['Galaxy S20 5G'])
  // 総端末数を計算する算出プロパティ ...（2）
  const countTotal = computed(function() {
    return iOSLogic.count.value + androidLogic.count.value
  })
  // ここまで定義してきた内容を返却 ...（3）
  return {
    iOSLogic, androidLogic, countTotal
  }
}

応用的なトピック：プロパティとライフサイクルフック

　以下では応用的なトピックとして、プロパティとライフサイクルフックをComposition APIで記述する方法を、図2のサンプルで説明します。このサンプルでは、プロパティで機種名／メーカー／重量を設定できるコンポーネントを表示します。コンポーネントがWebページに追加（マウント）された時のライフサイクルフックでログを出力します。

図2　プロパティとライフサイクルフックのサンプル（p006-options2、p007-composition2）

　Options APIで記述したコンポーネントはリスト10です。（1）のpropsで、String型のname（機種名）とvendor（メーカー）、Number型のweight（重量）プロパティを設定します。（2）ではvendorとnameを結合して取得する算出プロパティfullNameを記述していますが、プロパティ値を取得するには（3）の通り「this.<プロパティ名>」とします。（4）はコンポーネントの追加（マウント）時に実行されるmountedライフサイクルフックです。

［リスト10］図2をOptions APIで記述（p006-options2/src/components/OnePhone.vue）

<template>
  <div class="one-phone">
    <h3>{{ fullName }}</h3>
    <div>機種名：{{ name }}</div>
    <div>メーカー：{{ vendor }}</div>
    <div>重量：{{ weight }}g</div>
  </div>
</template>
<script>
export default {
  // プロパティの設定 ...（1）
  props: {
    name: String,
    vendor: String,
    weight: Number
  },
  // 算出プロパティ ...（2）
  computed: {
    fullName() {
      // thisでプロパティを参照 ...（3）
      return this.vendor + '：' + this.name
    }
  },
  // mountedライフサイクルフック ...（4）
  mounted() {
    console.log('コンポーネントがマウントされました')
  }
}
</script>

　同じコンポーネントをComposition APIで記述した<script>部はリスト11となります。<template>部はリスト10と同一です。

［リスト11］図2をComposition APIで記述（p007-composition2/src/components/OnePhone.vue）

export default {
  // プロパティの設定 ...（1）
  props: {
    name: String,
    vendor: String,
    weight: Number
  },
  // setupメソッドの引数propsにプロパティが含まれる ...（2）
  setup(props) {
    // 算出プロパティ ...（3）
    const fullName = computed(function() {
      // propsでプロパティを参照 ...（4）
      return props.vendor + '：' + props.name
    })
    // onMountedライフサイクルフック ...（5）
    onMounted(function() {
      console.log('コンポーネントがマウントされました')
    })
    return {
      fullName
    }
  }
}

　プロパティ設定（1）の記述はリスト10と同一です。setupメソッド（2）の引数propsにプロパティ値が含まれるため、fullName算出プロパティ（3）でプロパティ値を参照するには（4）の通り「props.<プロパティ名>」とします。

　ライフサイクルフックは（5）の通り、処理内容のfunctionをonMountedメソッドの引数に与えて記述します。なおVue 3では、利用できるライフサイクルフックがVue 2から細かく変更されています。詳細はComposition APIのドキュメントを参照してください。

まとめ

　本記事では、Vue.jsの次期バージョン「Vue 3」で導入される新機能のうち、新しいコンポーネント記述形式であるComposition APIについて説明しました。コンポーネント機能の実装が分散したり、再利用が難しかったりするといった、従来のコンポーネント記述形式（Options API）が抱える問題点を、Composition APIを利用して解決できます。Composition APIの利点を生かしてロジックを共通化する例を、記事内で紹介しました。

　次回は、Vue 3に導入されるComposition API以外の新機能を紹介していきます。

参考資料

• Vue.js
• GitHubのVue 3リポジトリ