CodeZine(コードジン)

特集ページ一覧

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

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

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)
図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以外の新機能を紹介していきます。

参考資料



  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

バックナンバー

連載:JavaScriptフレームワーク「Vue 3」の新機能紹介
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5