VueのUIフレームワーク選定

Vueコミュニティで推奨されているフレームワークを中心に紹介していきます。

Vue Community Guide

VueのUIフレームワークは、Vueを拡張したフレームワークとCSSフレームワークに分けることができます。また、マテリアルデザインとそうでないものとに分けることができます。

＊この記事ではVueを拡張したフレームワークをVueフレームワークと呼びます。

UIフレームワーク比較表

[2021年5月11日時点]

	スター	マテリアル	モバイルアプリ	Nuxt	SEO	LTS	日本語
Vueフレームワーク
Ionic	44.1K	○	○	×	△	○	○
Vuetify	30.8K	○	×	○	△	○	○
Quasar	18.4K	○	○	×	△	○	×
Element+	9.8K	×	×	○	△	×	○
Buefy	8.6K	×	×	○	△	×	×
BootstrapVue	1.7K	×	×	×	△	×	×
CSSフレームワーク
Bootstrap	150K	×	×	○	○	○	○
Bulma	43.4K	×	×	×	○	×	×
Tailwind	41.4K	×	×	○	○	×	×

＊IonicやBootstrapなどVueに限らないフレームワークはスター数が多くなっています。
＊LTS（long-term-support）は長期サポートのことです。
＊Nuxtはcreate-nuxt-appコマンドでインストールできるかを示しています。

条件別のおすすめは以下の通りです。

• ウェブアプリ（マテリアルデザイン）　Vuetify

• ウェブアプリ（フラットデザイン）　Buefy　BootstrapVue

• モバイルアプリが必要　Ionic　Quasar

• CSSのみ必要　Bulma　Tailwind

＊Vueコミュニティのユーザーチョイス　Vuetify　Quasar

Vueフレームワーク（マテリアルデザイン）

Vueを拡張して作成されているフレームワークには、Vueのコード、JavaScript、CSSすべてが含まれているため、素早く簡単にUIを構築することができます。ただし、フレームワークに対する依存度が高く、アップグレード時には変更されたすべてのディレクティブを修正する必要があります。

Vueフレームワーク全般に言えることですが、SEOやAdSenseと相性が良いとは言えません。SSR、SSG、プリレンダリング等を使うことでSEOを改善することができますが、パフォーマンスや管理コスト等について考慮する必要があります。

Vuetify

メリット：マテリアルデザイン　長期サポート　日本語の情報が豊富
デメリット：SEOやAdSenseを重視する場合はレンダリングの方法を検討すべき

Vueコミュニティの中で最も人気があるフレームワークです。Googleのマテリアルデザインに則った豊富なUIコンポーネントが用意されています。日本語のドキュメントがあり、ウェブ上での日本語記事も多く、日本で最も採用されていると思われます。

レスポンシブに対応していますし、VueCLIのプラグインを使ってPWA（Progressive Web Apps）を作成することもできます。

メジャーリリース後、直前のバージョンがLTSとなり12ヶ月サポートが続きます。メジャーバージョンリリース直後に採用すると3年程度のサポートが期待できます。

Vuetify

Ionic

メリット：クロスプラットフォーム　マテリアルデザイン　長期サポート
デメリット：ウェブアプリのデザインがしずらい

Ionicは元々Angular用のUIフレームワークとして作成され、現在ではVueやReaactにも対応しています。最大の特徴はWebの技術を使ってモバイルアプリを開発できるという点です。1つのコードベースでウェブアプリ、モバイルアプリとクロスプラットフォームに展開できます。

バージョン3では3年程度のサポートを行っており、比較的長いサポートが期待できます。

デメリットとしては、公式ドキュメントがモバイルアプリを想定して作られているため、ウェブアプリのデザインがしずらいという点があります。また、モバイルアプリの開発にはReactNativeやFlutter等とはメカニズムが異なるCapacitorを使用するため、モバイルアプリを重視する場合は検討が必要です。

Ionic Vue
Ionic Support Policy

Quasar

メリット：クロスプラットフォーム　マテリアルデザイン
デメリット：学習コストがやや高い　日本語の情報が少ない

QuasarもIonicと同様、ウェブアプリ、モバイルアプリとクロスプラットフォーム開発ができます。Ionicと違ってウェブアプリのデザインをする場合にも、ドキュメントは見やすくなっています。何でもできる万能フレームワークで、SSR、PWA、デスクトップアプリ等にも対応しています。

サポートは2年程度と比較的長く設定されています。

デメリットとしては、日本語のドキュメントがないことと、習熟するまでの学習コストがやや高いという点が挙げられます。また、こちらもIonic同様、モバイルアプリの開発にCapacitorを使うため、モバイルアプリを重視する場合は慎重に検討する必要があります。

Quasar

Vueフレームワーク（フラットデザイン）

続いて、マテリアルデザインではないVueフレームワークを紹介していきます。

Element+

メリット：デスクトップ用ウェブアプリが作りやすい
デメリット：レスポンシブ対応ではない

コードの記述がわかりやすく、デスクトップ用のウェブアプリの開発に適した中国産のフレームワークです。ただし、レスポンシブに対応していないため、モバイル対応したアプリを開発するには不向きです。

中国ではウェブアプリとモバイルアプリを分けて開発するようで、Element+はデスクトップ向けのウェブアプリに最適化されているようです。

Element+

Buefy

メリット：BulmaをVueに対応させることができる
デメリット：新バージョンへの対応が遅い　長期サポートがない

人気のCSSフレームワークであるBulmaをVueに対応させたものです。Bulmaのデザインを簡単にVueに組み込むことができます。

デメリットとしては、BulmaとVueの両方に対応させるため、新バージョンへの対応が遅いという点があります。また、長期サポートやリリースに関する記述がなく、バージョンアップのタイミングが読みずらいという欠点もあります。

Buefy

BootstrapVue

メリット：BootstrapをVueに対応させることができる
デメリット：新バージョンへの対応が遅い　長期サポートがない

BootstrapをVueに対応させるフレームワークです。Bootstrapの使用経験がある場合は、開発コストを抑えることができるため良い選択肢になると思います。

ただし、こちらもBuefyと同じく、新バージョンへの対応が遅いという欠点があります。また、長期サポートもないようです。

BootstrapVue

CSSフレームワーク

CSSフレームワークにはVueのコードは含まれていないため自らコードを書く必要がありますが、UIとロジックを分離できるというメリットがあります。また、ファイルの容量が小さいため、パフォーマンスや転送量についてはVueフレームワークよりも優れています。

SEOやAdsenseを重視してVueをSPAとして構築しない場合、CSSフレームワークは良い選択肢となります。

Bootstrap

メリット：安定した開発が見込める　長期サポート
デメリット：JavaScriptを使う場合は注意が必要

Bootstrapはスターの数が150Kもあり、最も人気のあるCSSフレームワークです。Twitterが開発しているため安定した開発が見込めますし、長期サポートもあります。使用経験があれば開発コストを抑えることができます。

Bootstrap4まではjQueryが含まれていましたが、Bootstrap5からはjQueryは使用されなくなりました。いくつかの動的なコンポーネントはJavaScriptを使用するため、それらを使う際はVueとの併用で問題ないか確認する必要があります。

Bootstrap
Bootstrap Release

Bulma

メリット：デザインとロジックの分離　CSSコンポーネント
デメリット：長期サポートやロードマップがない

人気のあるCSSフレームワークの一つです。JavaScriptを使用していないため、UIのデザインとロジックを分離できることが利点です。

モダンなデザインを備え、簡単で使いやすいフレームワークです。BootStrapのデザインに飽きてしまって、何か違うものを使ってみたいという場合にもおすすめです。

開発のロードマップや長期サポートがないのがやや気になるところです。

Bulma

Tailwind

メリット：デザインとロジックの分離　カスタマイズ性
デメリット：デザインスキルが必要　可読性が良くない

Vueコミュニティで広く受け入れられているフレームワークです。Bulma同様CSSのみなので、デザインとロジックを分離することができます。また、Laravelのパッケージのデザインにも使用されているため、Laravelを使用する人にとっては良い選択肢です。

従来のCSSではスタイルを適用する度にCSSを記述していましたが、Tailwindにはユーティリティクラスが用意されており、それらを直接HTMLに指定します。

デザインのカスタマイズ性に優れているため、デザイン要求の高いアプリケーションに適しています。ただし、自分で色やサイズなどユーティリティクラスを使って指定していくため、コード量が多くなり可読性があまり良くないところが欠点です。

Tailwind
Tailwindコンポーネント