Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
46
Help us understand the problem. What is going on with this article?
@yoshiplur

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

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

Vue Community Guide

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

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

UIフレームワーク比較表

[2021年5月11日時点]

Vueフレームワーク GitHubスター LTS 日本語 マテリアル モバイルアプリ Nuxt
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 × × × ×

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

Vue3への対応状況

Vueフレームワーク Vue3 正式リリース
Ionic
Vuetify alpha 2021年Q3
Quasar beta 2021年Q2
Element+
Buefy × 未定
BootstrapVue × 未定

*CSSフレームワークはVueのバージョンに関係なく使用できます。

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

  • ウェブアプリ(マテリアルデザイン) Vuetify

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

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

  • CSSのみ必要 Bulma Tailwind

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

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

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

Vuetify

メリット:マテリアルデザイン 長期サポート 日本語の情報が豊富
デメリット:特になし

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

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

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

Vuetify3ではVue3のComposition APIを使用してフレームワークの再構築が行われています。

Vuetify 2
Vuetify 3
Vuetify LTSサポート

Ionic

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

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

バージョン3では3年程度のサポートを行っており、比較的長いサポートが期待できます。また、現時点でVue3に対応しており、最新バージョンへの対応が速いです。

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

Ionic Vue
Ionic Support Policy

Quasar

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

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

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

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

Quasar
Quasar Framework Roadmap

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のテンプレート構文は含まれていないため、自らコードを書く必要がありますが、Vueと棲み分けができるというメリットがあります。

Bootstrap

メリット:安定した開発が見込める 長期サポート
デメリット:Vueとの統合にやや難あり

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

Bootstrap4まではjQueryが含まれていましたが、Bootstrap5からはjQueryは使用されなくなりました。しかし、多くのコンポーネントはJavaScriptを使用しているため、Vueとの関係で問題が発生する可能性があります。

長期サポートは魅力ですが、VueとBootstrapを併用している情報は少なく、通常であればBootstrapVueを選択した方が無難です。

Bootstrap
Bootstrap Release

Bulma

メリット:デザインとロジックの分離 CSSコンポーネント
デメリット:日本語なし 長期サポートなし

人気のあるCSSフレームワークの一つです。JavaScriptを使用していないため、UIのデザインとロジックを分離できることが利点です。アップグレードをCSSとVueに分けて段階的に実施することもできます。

JavaScriptが得意または自分で書きたい場合に良い選択肢です。ただし、日本語と長期サポートがないのが難点です。

Bulma

Tailwind

メリット:デザインとロジックの分離 カスタマイズ性
デメリット:デザインスキルが必要 長期サポートなし

Vueコミュニティで広く受け入れられているフレームワークです。Bulma同様CSSのみなので、デザインとロジックを分離することができます。

従来のCSSではスタイルを適用する度にCSSを記述していましたが、Tailwindにはクラスのユーティリティが用意されており、それらを直接HTMLに適用します。「ユーティリティ・ファースト」というコンセプトの元に開発され、近年人気が上昇しています。

デザインのカスタマイズ性に優れているため、デザイン要求の高いアプリケーションに適しています。コミュニティによるコンポーネントが用意されていますが、基本的には自身でデザインを作成するため、デザインスキルが必要です。

Tailwind
Tailwindコンポーネント

まとめ

以上、VueのUIフレームワークについて紹介してきました。

ソフトウェアの開発・保守において、コストがかかるのがフレームワークのアップグレードです。

開発するアプリケーションが1年後に終了するのか、5年、10年と継続するかは予測できません。もし、採用したフレームワークが1年でアップグレードしたとすると、10年では10回アップグレードを実施しなければなりませんが、3年の長期サポートが提供されていれば3回で済みます。

そのため、LTSを提供しているフレームワークは運用コストを最小限に抑えることができます。初期開発コストはどのフレームワークも同程度と思われますが、運用コストは大きく変わってきます。

筆者の調べた限りでは、LTSを提供していないフレームワークはリリースサイクルも示されていない場合が多いです。LTSとリリースについて明確な指針を示しているフレームワークを選定することをおすすめします。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
46
Help us understand the problem. What is going on with this article?