Vue UI ライブラリ
Vue プロジェクトを作るとき、UI コンポーネントライブラリの選定はたいてい着手前の最初の決断になります。うまく選べばボタン、フォーム、モーダルの繰り返し作業を大幅に省けますし、選び間違えると後からライブラリを乗り換えるコストはかなり高くつきます。ここでは、普段よく目にする Vue UI ライブラリをいくつか整理し、それぞれの位置づけと印象を記録しておきます。今後の選定時に見返せるように。
まず、選定時に私が普段注目するポイントを挙げておきます。コンポーネントのカバレッジが十分か(テーブル、フォーム、日付選択といった高頻度コンポーネントの完成度)、ドキュメントとコミュニティが活発か、デザインスタイルがプロダクトの方向性に合っているか、そしてプロジェクトが継続的にメンテナンスされているか。以下、この視点でひとつずつ見ていきます。
View Design
Vue.js 3 ベースのエンタープライズ向け UI コンポーネントライブラリ兼フロントエンドソリューションで、数万人の開発者に利用されています。
その前身は iView で、Vue 2 の時代からすでに多くのユーザーを獲得しており、スタイルはシンプルな管理画面(バックオフィス)路線です。コンポーネントライブラリ本体のほかに、公式が付属のテンプレートとツールも提供しており、バラバラのコンポーネントではなく管理画面のソリューション一式が欲しいユースケースに向いています。
iView / View Design 一套企业级 UI 组件库和前端解决方案
Element UI
Vue 3 ベースの、デザイナーと開発者向けのコンポーネントライブラリです。
Element シリーズはおそらく中国国内の Vue プロジェクトで最も登場頻度の高いコンポーネントライブラリで、Vue 3 対応バージョンは Element Plus と呼ばれます。強みは中国語ドキュメントの充実、コンポーネントの網羅性、コミュニティの大きさで、問題に遭遇してもたいてい既存の回答が検索で見つかります。中規模・大規模の管理システムを作るなら、ほぼデフォルトの選択肢のひとつです。
A Vue 3 UI Framework | Element Plus
Vuetify
Vuetify は Vue UI ライブラリで、美しく手作りされたマテリアルコンポーネントを備えています。デザインスキルは一切不要——優れたアプリケーションを作るために必要なものがすべて手の届くところにあります。
Google の Material Design 仕様に厳格に準拠しており、ビジュアルスタイルは統一感があり、はっきりとした Material の特徴を持っています。プロダクト自体が Material スタイルで行くつもりなら、あるいは海外ユーザー向けなら、Vuetify は中国国内のライブラリよりも適しています。逆に、独自のビジュアル体系へ大幅にカスタマイズしたい場合は、変更にかなり手間がかかります。
Vuetify — A Material Design Framework for Vue.js
Ant Design Vue
Ant Design 仕様に準拠して開発された Vue UI ライブラリで、リッチでインタラクティブなユーザーインターフェースを構築するための高品質なコンポーネントとデモが揃っています。
Ant Design 自体は Ant(螞蟻)チームが React エコシステム向けに策定したデザインシステムで、Ant Design Vue はその Vue 側の実装です。利点は、デザイン仕様が大量の中規模・大規模バックオフィスプロダクトで検証済みであることと、テーブルやフォームといった複雑なコンポーネントの機能が非常に充実していることです。チーム内に React と Vue のプロジェクトが併存しているなら、同じデザイン言語を使うことでコミュニケーションコストも下げられます。
Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js
Vuesax
スタイルとアニメーションは素晴らしいのですが、残念ながらすでにメンテナンスが停止しています。
Vuesax のコンポーネントは、配色とインタラクションアニメーションにおいて確かに上記のどのライブラリよりも遊び心があり、ビジュアルに若々しさを求めるプロジェクトに向いています。しかしメンテナンス停止は、新しいバージョンの Vue への互換性もバグ修正も保証されないことを意味します。新規プロジェクトでの採用はもうおすすめしません。ここに挙げたのは主に参考としてです。
ハマりどころと注意点
1)メンテナンス状況を先に確認すること。Vuesax のようにメンテナンスが停止したライブラリを新規プロジェクトに入れるのは、未来に地雷を埋めるようなものです。選定前にリポジトリのコミット履歴と issue への反応状況を見ておきましょう。
2)Vue 2 と Vue 3 のバージョンを見分けること。これらのライブラリの多くは Vue 2 から Vue 3 への移行を経ており、パッケージ名とドキュメントが 2 系統に分かれていることがよくあります(たとえば Element UI と Element Plus)。バージョンを間違えてインストールすると、そもそも動きません。
3)オンデマンドインポートを使うこと。UI ライブラリはどれもフルパッケージだとサイズが小さくありません。本番プロジェクトではオンデマンドロードを設定し、使用するコンポーネントだけをバンドルすることをおすすめします。
デモや社内ツールを書くだけなら、ドキュメントが一番しっくりくるものを選べば十分で、悩む必要はありません。選定にコストをかけるべきなのは、長期的にメンテナンスしていく本番プロジェクトのほうです。
まとめ
中規模・大規模の管理システムなら迷わず Element Plus か Ant Design Vue。どちらもコミュニティは十分大きいです。Material スタイルが欲しい、あるいは海外向けなら Vuetify を検討。View Design は管理画面のソリューション一式が欲しいチームに向いています。Vuesax はメンテナンス停止のため参考程度に。選定に標準的な正解はなく、チームの習慣とプロダクトのスタイルに合っているものこそが良い選択です。
COMMENTS