あなたに必要なVue UIフレームワークはどれ 推移の調査・フレームワーク紹介

この記事の内容

Vueで利用できるUIフレームワークの機能や傾向について
これまでのVueの流れをみつつ調査したものを紹介
これから導入する場合どのような基準で選ぶべきかの提案

目次

• Vueが流行り始めた理由
• VueのUIフレームワークの推移
• VueのUIフレームワークの分類
• 今後の対応方針まとめ
• 余談 Vue3対応状況

Vueが流行り始めた理由

スマートフォンの流通により、より軽量に動くサイトが求められるようになり
シングルページアプリケーション（以下SPA）が流行り始めた

SPAではjavascriptによる通信処理が不可欠となり
それらを簡単に開発するためのJSライブラリの開発も進んだ
現時点有名なJSライブラリには、Angular、React、Vueが存在している

Gitを見る限り、VueはAngular、Reactよりも後に作られており
他競合二種よりも学習コストが低くかつ似たようなことができる
JSライブラリとして2019年頃から流行り出したとされている

参考： vue.jsが人気になった理由は何ですか？
https://jp.quora.com/vue-js-ga-ninki-ni-na-tsu-ta-riyuu-ha-nani-desu-ka

VueのUIフレームワークの推移

Vueの主要なフレームワーク

• BootstrapVue
• Element Ui
• Vuetify

現時点でVuetifyがダウンロード・star数ともに最上位となっている
ついでBootstrapVueがあり
その次がElementUI（および後継ElementPlus）となる

グラフを見る限り2019年前まではElementUI
2021年まではVuetifyとBootstrapVueが拮抗しており
それ以降はVuetifyのダウンロード数のみ伸び続けている

■ Vuetify
VuetifyはCSSの用意が不要でデザインの知識があまり必要ない
マテリアルデザインのコンポーネントを組み合わせることで
簡単に利用でき導入が非常に容易

■ BootstrapVue
「Bootstrap v4 CSSに精通していることを前提としている」と記載があるように
BootstrapVueはBootstrapCSSのコンポーネント
Vueの機能を付け加えた形でつくられている
CSSフレームワークから発展してきたものでカスタム性が高い

■ ElementUI
後継はVue3対応のElementPlus
ElementUIの場合VueだけではなくReactやAngularでも利用できる
element-react、element-angularが用意されており
javascriptフレームワークの切り替えが可能
BootstrapVueに類似しているが、モバイル向けのUIはない

VueのUIフレームワークの分類

• Vuetify
• BootstrapVue
• ElementUI/ElementPlus
• Buefy
• Primevue
• Vue Material
• Quasar

上記のUIフレームワークを調査し
大きく以下の分類に分けることができると考えた

タイプ１：VUEの機能を拡張するために作られたもの
タイプ２：CSSフレームワーク寄りにつくられたもの

フレームワークがどちら寄りに作られているかを踏まえておくことで
出来ることの特徴を捉えやすくなる

タイプ１であれば
用意されている機能が豊富で実装は楽だが
デザインは使用しているフレームワークのルールに縛られる

CSSフレームワークの発展系なら
カスタマイズ性にすぐれているものの
実装にはVueやCSSの知識が要求される　

サンプルコードを見て以下の点を確認してみた

1. CSSの使用を要求される頻度（高/中/低）
2. Classの使用を要求される頻度（高/中/低）
3. HTMLの使用を要求される頻度（高/中/低）
4. レスポンシブ対応されているか（○/△/×）
   （△: CLASSが用意されてるが自分でコーディングする必要がある）

高： 必ず必要
中： 複雑なことをする場合必要
低： 基本的に不要

	CSS	CLASS	HTML	レスポンシブ
Vuetify	低	中	低	○
ElementUI	低	中	低	×
ElementPlus	低	中	低	△
Quasar	低	中	中	○
Primevue	低	中	中	○
Buefy	低	中	中	○
Vue Material	中	高	中	○
BootstrapVue	中	高	高	△

まとめ

現在の仕事で求められていることの優先度を整理してから
上記を参考に適切なUIフレームワークを選ぶことを推奨

[筆者の例]

1. Mockの作成依頼 ⇨ 素早く実装したい
2. 複数人での作業 ⇨ 一定のクオリティを保ちたい
3. Vue3の導入 ⇨ 新しいバージョンを導入しやすくしたい

[1]と[2]を考慮するとより簡単に実装できるVuetifyが最も望ましい
しかしVuetifyの場合、Vue3の対応状況が遅く
なおかつpluginの依存性が高く
新しいバージョンのテストが難しいため[3]を満たせない

比較的似たような実装が可能（コンポーネントの種類）で
Vue3対応が進んでいるものとしてPrimevueがある

Vuetifyの対応状況を確認しつつ
Primevueへの移行を検討できるように
より詳しい調査や実装テストをを進めておくことが望ましい

Vue3対応状況

■ Vuetify

もともとvuetifyを利用していたので、可能ならそのまま移行したかったが
vuetify2で使えるコンポーネントの半分も移行できてない

移行できているように見えるコンポーネントもpropsなど機能が未実装なものが多い
もともとの機能が多い分作業量もすごいことになっている、issueを見る限り
完全な移行には時間がかかりそう
v-data-tableが使えないのが痛い

■ BootstrapVue

bootstrap-vue 3.0(bootstrap-vue-next)に置き換えられる予定だが
今のところ初期開発中でありまだ移行は現実的ではない
現在2023年2月時点で開発コミュニティでは更新されない可能性が示唆されている

■ ElementUI/ElementPlus

ElementPlusのGitを見るとissue数とPullリクエストが大量にある
公式サイトのコンポーネント数は豊富だが移行途中と見受けられる

■ Buefy

2022年から開発が止まっていてVue3対応は望めないと思われる

■ Primevue

導入テストを行なってみた限りは問題なく動作している
バグ報告はまだ多いがissueの更新頻度が高いため
Vue3対応のUIフレームワークの中では比較的推奨できるものだと思われる

■ Vue Material

issueを見る限り開発がほぼ停止している様子