CompositionAPI VS ClassComponent！Vue3で推奨されたCompositionAPIについて実装経験者が深掘りします

こんにちは！

これから Vue3 を触る方は、Vue3 で標準実装された CompositionAPI、従来から存在する ClassComponent のどちらを採用するか悩みどころだと思います。

Vue3 公式では CompositionAPI を推しているとはいえ ClassComponent は Github のスター数が5.4k と多く、また VueCLI で新規にプロジェクトを立ち上げ時に、Use class-style component syntax?と聞かれるため、結局どちらを採用したら良いか迷われる方がいるのかなと感じます。

本記事では、CompositionAPI と ClassComponent それぞれのメリット・デメリットについて私たちの見解も交え解説したいと思います。

想定する読者

• Vue2 を ClassComponent で実装していたエンジニア
• Vue3 の CompositionAPI での実装を迷っているヒト

はじめに

本記事の前提

本記事は、数多くの Vue 3プロジェクトを経験してきたが私たちと、Github の Issue を参考に記事を執筆しております。

本記事は ClassComponent または CompositionAPI を批判するものでは有りません

ClassComponent、CompositionAPI それぞれユースケースで使い分けることが可能です。どちらが悪いということはお伝えしておりません。

結論 🚀

先に結論を以下に述べます。私たちの経験、GithubのIssue のやりとり、Vue3 の公式サイトなどを参考にしております。

• Vue3 の新規実装では CompositionAPI を使用し実装することを推奨
• ClassComponent で実装された Vue2 を Vue3 へ移行する際はそのまま ClassComponent の構文を引き継ぐのも有り

ClassComponent

私たちの見解と公式の Issue をもとに、ClassComponent についてのユースケース・メリット・デメリットを紹介いたします。

ユースケース

• ClassComponent による Class 構文実装に深いノウハウ・知見を有するチームメンバー多数のプロジェクト
• ClassComponent で実装された Vue2 を Vue3 へアップグレード時（ClassComponent を CompositionAPI へ移行するのは中々しんどいので ClassComponent のまま Vue3 へアップグレード）

メリット

• Vue2 時代でも使用可能な ClassComponent の構文がほぼそのまま使用可
• VueCLI で自動的にベース環境を構築可能（VueCLI にて ClassSyntax を指定）
• Vue3 の CompositionAPI の機能を使用可
• Class 構文（OOP）の経験者には親しみやすい構文
• Class 構文内で OOP 的なカプセル化を施すことが可能
• VueJS のライフサイクルの実装が簡単

デメリット

• CompositionAPI と比較して処理のオーバーヘッドが多いためパフォーマンスは Vue3 に劣る
• decorators で宣言された Props を参照する方法がないため、this.$props使用時に TS サポートが無効になる
• this によるスコープを要するので、コンストラクターに依存してしまう（コンストラクターによるブラックボックスな処理の存在を前提として実装）
• Vue3 とは別で独自にメンテナンスされており、長期開発を見据えると少々懸念あり

CompositionAPI

Vue3 の公式ドキュメント、私たちの実装経験をもとに以下に CompositionAPI についてのユースケース・メリット・デメリットを紹介いたします。

ユースケース

• Vue3 の新規実装時（VueCLI でプロジェクト作成が可能）
• 大規模化し保守困難になった Vue2 プロジェクトのリファクタリング（＝リプレース）
• Vue2 プロジェクトで、部分的にレンダリング及び JS 処理パフォーマンスを上げたい時（OptionAPI と CompositionAPI を併用し部分的にパフォーマンスを向上）

メリット

• 従来の OptionAPI の実装も扱えるのでアップデート時は OptionAPI・CompositionAPI を併用できる
• setup 関数内部のみで完結できるので、ネイティブ JS を書くような感覚
• 従来の Vue の暗黙的部分が排除され、Typescript の恩恵を享受できる
• Vue 内部の処理のオーバーヘッドが減少しレンダリングのパフォーマンスが大幅に向上
• Component 内の State のリアクティブが明示的なので状態を追いやすく、状態変化の見通しが良い
• setup 関数に大体のロジックが集約されるので、大規模化してもソースコードの見通しが良い

デメリット

• ClassComponent または Vue2 の OptionAPI の実装を CompositionAPI へリプレースするのは中々大変
• Vue2 からの移行時、多くのプロジェクトでは OptionAPI・CompositionAPI を併用することが多いため、ソースコードに統一感がなくなる

まとめ

私たちは、新規プロジェクトでは CompositionAPI を採用し、既存プロジェクトからの移行時は適宜 ClassComponent を採用しています。皆さんも Vue3 で大規模開発にぜひチャレンジしてみてください👍！

VueJS による堅牢・大規模開発は、お気軽にお問い合わせください。