2020年9月にVue.jsのバージョン3が正式にリリースされました。

Composition APIが正式に導入されるなどバージョン2と比較すると大きな変化を遂げました。

大きく変わったことで学び直しの学習コストもかかるので、まだ様子を見ているという方も多いかと思います。

今回はVue3の導入にまだ踏みとどまっている方のために、Vue公式パートナーであるSkilled編集部がVue3のメリットについてご紹介していきます。

実際に導入した際の開発フローの変化についてもまとめていますので、導入を検討されている方はぜひご覧ください。

1 Vue3で変わったことは何？
2 Vue3導入によるメリットは？
3 状態管理はどうすべきか？
4 Vue3 導入すべき？

Vue3で変わったことは何？

今回は細かい点は除いて大きく変わった点ついてご紹介します。

Vue3になり、大きく変わった点は以下の3点です。

Composition APIの正式導入
Fragmentsのサポート
推奨状態管理ライブラリがVuex➝Piniaに

それぞれ見ていきます。

① Composition APIの正式導入

最も大きな変更点と言っていいのが、このComposition APIの導入です。

Composition APIとは新しいコンポーネント形式のことです。

従来のコンポーネント形式であるOptions APIよりも簡潔に作成することができます。

Options APIの問題点として、コンポーネントが複雑につれて冗長化されてしまうことが問題点としてありました。

また、Options APIではdataやmethodsなど決められたプロパティに要素を記述していきますが、複雑なコンポーネントでは、要素が分散され見づらくなるという欠点もありました。

これらの問題を解決するために新たなコンポーネント設計として導入されたのがComposition APIです。

Composition APIではComposition Functionという機能があり、これはコンポーネントのロジックをViewに依存せずに切り出しが可能です。

ロジック部分をカプセル化し、インポートで呼び出して使用できるので分散せずに簡潔にロジックを書くことが可能になっています。

また、Composition APIでは記法なども大きく変わっており従来のOptions APIよりも簡潔に書くことができるようになっています。

詳細については以下の記事ご紹介していますので仕様については気になる方はぜひご覧ください。

Composition APIとは？Options APIとの違いを徹底解剖【Vue公式パートナーが解説】

② Fragmentsのサポート

Vue2ではroot要素は必ず１つという制約がありました。

そのため以下のように複数のコンポーネントをroot要素(templateタグの直下)に置くためにはdivタグなどでラップする必要がありました。

<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

3.x では、コンポーネントは複数のルートノードを持つことができるようになりました。しかし、これは開発者が属性をどこに割り当てるかを明示的に定義する必要があります。

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>

Vue3ではFragmentsの機能によりこの制約がなくなりroot要素でも複数の要素を定義できるようになりました。

③ 推奨状態管理ライブラリが Vuex➝Piniaに

従来のVueでは状態管理ライブラリとしてVuexが推奨されていましたが、Vue3ではPiniaというライブラリが推奨されています。

VuexとPiniaの大きな違いはmutationsの廃止です。

Vuexではstateの値を更新する際はmutationsを介して行っていましたが、Piniaではmutationはなくstateの値はどこからでも変更出来るという点です。

それ以外にも個々のstoreの呼び出しが可能になったなどの違いがあり、詳しくは以下の記事で紹介していますので、気になる方はぜひご覧ください。

Pinia 完全攻略ガイド：Vuexと違いや状態管理方法を徹底解説【Vue.js 公式パートナーが解説】

Vue3導入によるメリットは？

Vue3の変更点の中でも最も大きいのは『Composition API』だと思います。

Composition APIの機能中でもComposition Functionを使ったロジックの切り分けが行えるという点は大きなメリットだと導入して思いました。

弊社ではVue3導入にあたって、ロジック部分は完全に切り分けるようにしました。

Composition APIではsetup関数を使うだけでも簡潔にロジックを記述出来ますが、加えてロジック部分はComposableとして分けるように設計しました。
【例】

【Page】

これの良かった点は、今までよりも分割したタスクの振り分けを行えたという点です。

弊社ではVueプロジェクトの場合バックエンドチームとフロントエンドチームで開発チームを分けて行うようにしていました。

また、フロントエンド部分は一つのコンポーネントのマークアップからロジック部分まで一人の開発者が行う、もしくはマークアップ後に別の開発者が行うようにしていました。

オーソドックスな開発体制だと思いますが、グラフィカルなUIや複雑なロジックがあるコンポーネントでは、コンポーネント単位でも担当した開発者に負担がかかってしまうのは課題でもありました。

今回はこの課題を解決するべくComposition Functionを利用し『マークアップ、ロジック、API開発』の3つのカテゴリーにタスクを振り分けて開発を行いました。

この体制の良かった点は

共同でコンポーネント開発がやりやすい
マークアップならVueの知識がなくても実装可能
バックエンドとフロントエンドの垣根を超えた開発

という3つの点です。

共同でのコンポーネント開発がやりやすい

まずロジックの分離によって、一つのタスクに対するヘルプが入りやすいという点です。

グラフィカルなコンポーネントではロジックだけでなく、マークアップだけでも手間がかかることもあります。

そういったコンポーネントでは予めにマークアップとロジックで別々に割り振ったり、マークアップに時間がかかっているならロジックを先に進めてしまうといったことも可能です。

コンポーネント単位でも個々の進捗によっては他部分の開発に影響が出てしまうこともあり、そういった面でコンポーネント開発においてのヘルプに入りやすくなった点はメリットに感じました。

マークアップならVueの知識がなくても実装可能

ロジックを切り分けることによって、マークアップ部分はVueの知識がない方でもある程度のマークアップスキルがあればお任せ出来てしまうというのもメリットの一つでした。

どういったロジックかを踏まえてマークアップするかという点もありますが、ロジックを分離すればHTML、CSSといった知識があればマークアップは出来てしまうというのもの、メリットの一つだと思います。

バックエンドとフロントエンドの垣根を超えた開発

ロジック部分を切り分けたことで、バックエンドの開発者にもロジック部分の開発に携われる開発体制となりました。

具体的にはAPIの繋ぎ込み部分です。

APIを繋ぎこむ上で型の確認など、実装には往々にしてコミュニケーションコストが発生していました。

そこで今回のプロジェクトではAPIの繋ぎ込み部分まではバックエンド側が行うようにしたことで、コミュニケーションコストが下がり、バックエンド側でもフロントエンド側に関わることで認識の差異が減ったというのも付随的なメリットがありました。

状態管理はどうすべきか？

Vue2までは状態管理はVuexを使うことが主流でした。

しかし、Vue3では

Vuex
Pinia
Composition API、Provide/injectを使う

の3パターンがありましたが、Piniaを導入しました。

導入の判断の理由としては、

Vue3 公式でPiniaが推奨されている
Vuexにあったmutationの概念がない
provide/injectを使うとstoreとコンポーネントに依存関係が出来てしまう

この3つが挙げられます。

まずPiniaはVue3公式で推奨されている状態管理ライブラリというのが大きい点と、Vuexにあったmutationの概念がなく、簡潔にStoreを書けるようになっているという点も理由になります。

また、Composition APIではprovide/injectの機能があり、この機能を使えばstateを代替することは可能ですが、コンポーネントとstoreが依存関係になり、設計を考え直す必要があるためこの案も見送りました。

Piniaを導入した感想としては、mutationの廃止によりstore周りを簡潔に書くことが出来るのは大きなメリットでした。

以下はVuexを使ったストアの記述です。

import { createStore } from "vuex";
const useCounterStore = createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    setCount(state, count) {
      state.count = count;
    },
  },
  actions: {
      increments({ commit }, currentNum) {
        commit('setCount', currentNum++)
      }
  },

続いてこちらが、Piniaのストアです。

import { defineStore } from "pinia";
 
export const useCounterStore = defineStore("counter", {
  state: () => ({
    count: 0,
  }),
  actions: {
    increments({ state }, currentNum) {
      state.count = currentNum;
    },
  },
});