LoginSignup
106
86

Vue3のUIフレームワーク/UIライブラリ紹介と比較

Last updated at Posted at 2022-08-17

🕒 更新:2022-11-08
🎯 更新内容:Vuetify 3について更新

初めに

広い意味のUIフレームワーク(ライブラリ)は大きく三つの種類があると思います。

  • 1️⃣ ボタンなどのコンポーネントしかない、単純なUIコンポーネントライブラリ。区別はページのレイアウトはCSSを自分で書く必要。また、単純だが、React.jsSvelte.js通用できないこともある。例:Equal
  • 2️⃣ UIコンポーネントを加えて、Layout & CSS SystemもついているUIフレームワーク。区別は基本的に、ページのレイアウトはCSSを自分で書く必要はない。例:PrimeVue
    但し、独自のLayout Systemか、独自のCSS Systemを採用している場合、一部のCSSを自分で書く必要なUIフレームワークもある。例:Naive UI
  • 3️⃣ CSSフレームワーク、区別はUIコンポーネトを提供しない、Layout & CSS Systemだけを提供する。例:TailwindCSS

UIフレームワークリスト

🚧:開発中 ✅:できる ❌:できない

Vue 3 Nuxt 3* 種類 Breakpoint 日本語公式 TS MIT star
Vuetify 3 2️⃣ 35k
Quasar 2️⃣ 21.8k
Element+ 2️⃣ 16.7k
Ant Vue 2️⃣ 17k
PrimeVue 2️⃣ 2.7k
Vuestic UI 2️⃣ 1.6k
Naive UI 2️⃣ 10k
Vant UI 2️⃣ 20k
Bootstrap-vue 2️⃣ 14k
Bootstrap-vue 3 🚧 🚧 2️⃣ 511
Oruga 1️⃣ 824
BalmUI 2️⃣ 404
Daisy UI 2️⃣ 13.5k
Buefy 2️⃣ 9.3k
Equal 1️⃣ 830
Bulma 3️⃣ 45.9k
TailwindCSS 3️⃣ 59.7k

*Nuxt.js 3で使う場合、一部のUIフレームワークは外部ライブラリが必要

結論

  • なんでもいい、早めに成果物をみたい:Quasar Element+
  • レスポンシブサイトを構築したい:Quasar
  • 高度なカスタマイズができるUIフレームワークを使いたい:TailwindCSS PrimeVue
  • スマートフォンサイトだけを構築したい:Vant
  • IOSAndroidEXEアプリを作りたい:Quasar
補足
  • Vuetify 3はリリースしたばかりなので、結論に含まれていません
  • クロスプラットフォームについて本記事は特に話しません
  • SEOに気になれば、Nuxt.jsがおすすめです。SPAアプリは生まれた時からSEOに弱いです
  • 🔰 学習の初心者へ:
    Vuetify 2がおすすめです。参考資料が多くて、Vuetify 2の場合は公式サイトで日本語のドキュメントもありますので、勉強しやすいと思います。また、Vuetify 3がリリースされましたので、APIが似ているVuetify 2を勉強する価値があると思います。
  • GitHubのstarは参考まで:
    例えば、10kstarのNaive UIは中国で人気がありますが、日本で使う人があまりいないです。Evan Youさんのおすすめですが、日本でNaive UIを使えば、参考資料が少なくて、自分で問題を解決する覚悟が必要です
  • Bootstrap-vueBuefyについて:
    Vue3に対応していないですが、日本で人気があるフレームワークので、参考のためリストに追加しました。残念ですが、Buefyについては作者からVue3への対応はしません。Bootstrapについては詳しく下のBootstrap-vue 3を確認してください

こだわり

個人的なことですが、UIフレームワークに対して、Layout & CSS SystemとBreakpointの使いやすさは一番重視なポイントだと思います。そのため、この記事でUIフレームワークのLayout & CSS SystemとBreakpointについて特別に確認します。さらに、デフォルト✨Iconと🌏国際化(日本語化)についても紹介します。

Layout & CSS Systemの使いやすさとは

一般的に、UIフレームワークは独自のLayout & CSS Systemを使っています。その独自のシステムは理解しやすくて、余計なCSSを書く必要はないのが使いやすいLayout & CSS Systemだと思います。

<!-- Naive UI -->
<!--paddingはCSS感覚で自分で書く必要、API(n-layoutなど)の勉強と理解も必要 😐 -->
<n-layout has-sider>
   <n-layout-sider content-style="padding-top: 24px;"></n-layout-sider>
</n-layout>
    
<!--Quasar -->
<!--見れば大体分かる、padding-topはサイズのsm、CSSを書く必要もない 😆 -->
<div class="q-pt-sm"></div>
Breakpointの使いやすさとは

簡単に言うと、容器(divかコンポーネント)のBreakpointだけではなく、容器のpaddingmargingutterでもBreakpointでレスポンシブ対応できるのが使いやすいBreakpointだと思います。つまり、Layout SystemのBreakpointのことです。

<!-- Element+ -->
<!-- コンポーネントのBreakpointがありますが、
paddingなどは使えないので、paddingのCSSクラスpaddingの@mediaを書かないと 😐 -->
<el-col :md="4" :lg="3" class="padding">
   <div></div>
</el-col>

<!-- PrimeVue -->
<!-- paddingまでのBreakpointがありますので、余計なCSSを書く必要はない 😆 -->
<div class="lg:col-12 md:col-6 lg:p-8 md:p-6"></div>
ご注意!

BreakpointもLayout & CSS Systemも、良いUIフレームワークの判断基準ではありません。
一番ニーズに対応できて、問題が解決できるUIフレームワークが一番良いUIフレームワークではないかと思います。

Vuetify 3

公式サイト

コメント

日本で一番人気があるVue.js UIフレームワークです。
2022年11月1日、Vuetify 3がリリースされました。Googleのマテリアルデザインを採用して、レスポンシブ対応、SASSでカスタマイズ、RTLなどの機能もあって、様々なニーズに対応できる素晴らしいフレームワークです。
但し、現時点(2022年11月)の公式ドキュメントを見ると、Vuetify 2には約 70 個のコンポーネントがありますが、Vuetify 3には常用で基本的なコンポーネントしかなくて、コンポーネントのリストは最小限です。比較的にコンポーネントが充実とは言えないでしょう。

バージョンについて
  • Vuetify 2:Vue.js 2
  • Vuetify 3:Vue.js 3
まとめ
  • 👽 一言:王道
  • 😀 メリット:レスポンシブ、一番人気、長期サポート、テストしやすい
  • 🤔 デメリット:基本コンポーネントしかない、人気で似ているサイトが多い
  • 🚩 おすすめシーン:ECサイト、管理サイト、フォームサイト
こだわり
  • 😆 Breakpoint:コンポーネント、レイアウト両方対応
  • 😆 Layout & CSS System:普段のCSSと似ている、理解しやすい
  • ✨ デフォルトIcon:Material Icons、Font Awesome
  • 🌏 国際化:対応

Quasar

公式サイト

コメント

本来はVuetify代替品として使用すると思いますが、実際はVuetifyに負けない実力を持っています。
同じくGoogleのマテリアルデザインを採用しています。コンポーネントがすごく多いことで、基本的にQuasarを使えば、UIコンポーネントを自分で書く必要がなくなります。Quasar CLIを使えば簡単にIOSAndroidEXEアプリが作成できます。現時点一番おすすめUIフレームワークです。

まとめ
  • 👽 一言:Webデザイナーのあなたでも、IOSアプリが作れる
  • 😀 メリット:レスポンシブ、コンポーネントがとても豊富、クロスプラットフォーム、テストしやすい
  • 🤔 デメリット:設定が複雑、参照資料が少ない
  • 🚩 おすすめシーン:ECサイト、管理サイト、フォームサイト、クロスプラットフォーム
こだわり
  • 😆 Breakpoint:コンポーネント、レイアウト両方対応
  • 😆 Layout & CSS System:普段のCSSと似ている、理解しやすい
  • ✨ デフォルトIcon:Material Icons、Font Awesome、 Themify Iconsなど多数
  • 🌏 国際化:対応

Element+

公式サイト

コメント

Alibabaグループが開発したUIフレームワークです。
中国のVue開発者になる必須条件のようなElementは中国で凄い人気があります。独自のデザインでGoogleのマテリアルデザインと区別できて、新鮮な気持ちを与えることができます。ちなみに、Elementの中国語意味は「饿了么」です。

バージョンについて
  • Element:Vue.js 2
  • Element+:Vue.js 3
まとめ
  • 👽 一言:中国UIフレームワークの王道
  • 😀 メリット:独自のデザイン、コンポーネントが豊富、テストしやすい
  • 🤔 デメリット:レスポンシブに向いていない、参照資料が少ない
  • 🚩 おすすめシーン:PCサイト側のECサイト、管理サイト、フォームサイト
こだわり
  • 😐 Breakpoint:コンポーネントのみ対応(指定容器のみ)
  • 😐 Layout & CSS System:独自のシステム、学習が必要。CSSを書く必要
  • ✨ デフォルトIcon:独自
  • 🌏 国際化:対応

Ant Design Vue

公式サイト

コメント

もう一つAlibabaグループが開発して、React.jsの人気UIフレームワークAnt Design ReactVue.js版です。
Ant Design Reactの経験があれば、Ant Design Vueをすぐに始めることができます。独自のデザインで、コンポーネントが豊富なUIフレームワークです。

まとめ
  • 👽 一言:ReactとVue両方作ればスタイルが統一できる
  • 😀 メリット:独自のデザイン、コンポーネントが豊富、テストしやすい
  • 🤔 デメリット:レスポンシブに向いていない、一部コンポーネント有料、React.jsのくせがある
  • 🚩 おすすめシーン:PCサイト側のECサイト、管理サイト、フォームサイト
こだわり
  • 😐 Breakpoint:コンポーネントのみ対応(指定容器のみ)
  • 😐 Layout & CSS System:独自のシステム、学習が必要。CSSを書く必要
  • ✨ デフォルトIcon:独自
  • 🌏 国際化:対応

PrimeVue

公式サイト

コメント

あまり有名ではないですが、おすすめしたいUIフレームワークです。
Vue.js版をはじめ、React.js版とAngular.js版もありますので、スタイルが統一しやすいです。
UIコンポーネントとLayout & CSS Systemと見た目のスタイル(テーマ)を分けて分離されています。これによって高度的なカスタマイズデザインによって独自のデザインが実現できます。現時点の公式テーマ:BootstrapMaterial DesignFluent UITailwindなど。

使用
まとめ
  • 👽 一言:素晴らしいテーマシステム
  • 😀 メリット:レスポンシブ、デザイナーに優しい、カスタマイズ性が高い、コンポーネントが豊富、比較的にテストしやすい
  • 🤔 デメリット:コンセプトへの理解が必要、SCSSでのカスタマイズが有料、CSSでのカスタマイズががやや面倒、コンポーネントが一部で固定なスタイルを使用
  • 🚩 おすすめシーン:ECサイト、管理サイト、フォームサイト
こだわり
  • 😆 Breakpoint:コンポーネント、レイアウト両方対応
  • 😆 Layout & CSS System:とても理解しやすい、書き方はTailwindCSSと似ている
  • ✨ デフォルトIcon:独自
  • 🌏 国際化:対応

Vuestic UI

公式サイト

コメント

比較的に新しいUIフレームワークです、独自のデザインでLayout & CSS Systemもしっかりしています。

まとめ
  • 👽一言:期待できるUIフレームワーク
  • 😀 メリット:レスポンシブ、独自デザイン
  • 🤔 デメリット:サポート、ほしいコンポーネントがない可能性があり、安定性問題
  • 🚩 おすすめシーン:個人プロジェクト
こだわり
  • 😆 Breakpoint:コンポーネント、レイアウト両方対応
  • 😆 Layout & CSS System:普段のCSSと似ている、理解しやすい。場合によってCSSを書く必要
  • ✨ デフォルトIcon:自由
  • 🌏 国際化:対応

Naive UI

公式サイト

コメント

Evan Youさんがおすすめして、最初の頃に個人で開発したUIフレームワークです。一部のコンポーネントで凄いこだわりがあって、使いやすいです。

まとめ
  • 👽 一言:Evan Youさんのおすすめ
  • 😀 メリット:独自のデザイン、コンポーネントが豊富、こだわり設計あり
  • 🤔 デメリット:サポート、レスポンシブに向いていない、参考資料が少ない
  • 🚩 おすすめシーン:PCサイト側の管理サイト、フォームサイト
こだわり
  • 😐 Breakpoint:コンポーネントのみ対応(指定容器のみ)
  • 😐 Layout & CSS System:独自のシステム、学習が必要。余計なCSSを書く必要
  • ✨ デフォルトIcon:自由
  • 🌏 国際化:対応

Vant UI

公式サイト

コメント

スマートフォンに向けのUIフレームワークです。ライブラリでPCに対応可能で、デザインはIOSスタイルと似ています。

まとめ
  • 👽 一言:スマートフォン向けの王者
  • 😀 メリット:生まれた時からスマートフォンに優しい、コンポーネントが豊富
  • 🤔 デメリット:PCに厳しい、参考資料が少ない
  • 🚩 おすすめシーン:スマートフォンサイト
こだわり
  • 😐 Layout & CSS System:独自のシステム、学習が必要
  • ✨ デフォルトIcon:独自
  • 🌏 国際化:対応

BootstrapVue 3

公式サイト

コメント

BootstrapVueに基づいて開発したVue.js 3用のUIフレームワークで、現時点は🚧alpha版です。BootstrapVueの公式アップデートではないですが、使い方は同じで、経験があれば特に学習する必要がないです。
BootstrapVueのスタイルを実装したい場合はPrimeVueBootstrapテーマが使えます。外部ライブラリによってBootstrap-vueVue3で使うことが可能ですが、設定が面倒であまりおすすめしません。

まとめ
  • 👽 一言:BootstrapVue「3」
  • 😀 メリット:レスポンシブ対応、コンポーネントが多い、(Bootstrap)参考資料がたくさんある
  • 🤔 デメリット:現時点開発中、安定性問題、サポート
  • 🚩 おすすめシーン:ECサイト、管理サイト、フォームサイト
こだわり
  • 😆 Breakpoint:Bootstrapなので、対応
  • 😆 Layout & CSS System:Bootstrapなので、対応
  • ✨ デフォルトIcon:Bootstrap Icon
  • 🌏 国際化:対応
その他Vue3対応できるBootstrapのUIフレームワーク
  • Bootstrap Vue
  • MDB:GoogleのマテリアルデザインのBootstrapUIフレームワーク

Oruga

公式サイト

コメント

単純なUIコンポーネントライブラリです。Buefyの作者のプロジェクトです。
PrimeVueみたい、UIコンポーネントとLayout & CSS Systemと見た目のスタイル(テーマ)を分けて分離されていますが、公式のLayout & CSS Systemが現時点でないことで、CSS/SASSを書く必要があります。公式テーマはあります:BootstrapMaterial DesignBulmaTailwind

まとめ
  • 👽 一言:PrimeVueの無料版下位互換
  • 😀 メリット:デザイナーに優しい、カスタマイズ性が高い、コンポーネントが純粋
  • 🤔 デメリット:コンセプトへの理解が必要、CSS/SASSを書く必要、コンポーネントが少ない
  • 🚩 おすすめシーン:管理サイト、フォームサイト
こだわり
  • 😐 Breakpoint:なし、但し一部のコンポーネントはあり
  • 😐 Layout & CSS System:なし
  • ✨ デフォルトIcon:Material Icons FontAwesome
  • 🌏 国際化:なし

BalmUI

公式サイト

コメント

マテリアルデザインを採用したUIフレームワークです。よく勘違いかもしれませんが、Bulmaとは関係ないです。

まとめ
  • 👽 一言:少数派
  • 😀 メリット:マテリアルデザイン、比較的にコンポーネントが多い
  • 🤔 デメリット:参考資料が少ない、サポート、安定性問題
  • 🚩 おすすめシーン:管理サイト、フォームサイト
こだわり
  • 😐 Breakpoint:コンポーネントのみ対応
  • 😐 Layout & CSS System:独自のシステム
  • ✨ デフォルトIcon:Material Icons
  • 🌏 国際化:対応

Daisy UI

公式サイト

コメント

TailwindCSSのUIコンポーネントライブラリです。TailwindCSSについてはあとで詳しく紹介します。

まとめ
  • 👽 一言:TailwindCSSと相性がいい
  • 😀 メリット:独自のデザイン、レスポンシブ、カスタマイズ性高い、汎用性高い
  • 🤔 デメリット:サポート、TailwindCSSへの理解が必要、自分でコンポーネトのJS/TSを書くことが必要
  • 🚩 おすすめシーン:デザイン要求の高いプロジェクト
こだわり
  • 😆 Breakpoint:TailwindCSSなので、対応
  • 😆 Layout & CSS System:TailwindCSSなので、対応
  • ✨ デフォルトIcon:Heroicons
  • 🌏 国際化:なし

Equal

公式サイト

コメント

この記事で一番無名のUIフレームワークですが、独自のデザインでコンポーネントがきれいで紹介になりました。UIフレームワークというより、単純なUIコンポーネントライブラリです。

まとめ
  • 👽 一言:目立たないですが、美しい
  • 😀 メリット:独自のデザイン、ソースコードが勉強しやすい
  • 🤔 デメリット:サポート、安定性問題、コンポーネント少ない、レスポンシブ対応していない
  • 🚩 おすすめシーン:個人プロジェクト
こだわり
  • 😐 Breakpoint:なし
  • 😐 Layout & CSS System:なし
  • ✨ デフォルトIcon:Material Icons
  • 🌏 国際化:なし

Bulma

公式サイト

コメント

HTMLなら使えて、人気があるCSSフレームワークです。Layout & CSS Systemを提供している同時に少しUIコンポーネントもあります。

まとめ
  • 👽 一言:クラス名が分かりやすい
  • 😀 メリット:独自のデザイン、レスポンシブ、カスタマイズ性高い、汎用性高い、テストしやすい
  • 🤔 デメリット:サポート、場合によって設定が複雑、クラス名が分かりやすい反面は長くて、覚えにくい
  • 🚩 おすすめシーン:個人プロジェクト
こだわり
  • 😆 Breakpoint:CSSフレームワークなので、対応
  • 😆 Layout & CSS System:CSSフレームワークなので、対応
  • ✨ デフォルトIcon:Material Icons、Font Awesome

TailwindCSS

公式サイト

コメント

個人的に一番好きなCSSフレームワークです。
独自のデザインで、カスタマイズ性も高くて、デザインガイドラインの通りに実装することが可能です。HTMLなら使えて、インストールも簡単、デザイナーも開発者も最適なCSSフレームワークです。

まとめ
  • 👽 一言:CSSフレームワークの王道
  • 😀 メリット:独自のデザイン、レスポンシブ、カスタマイズ性高い、汎用性高い、テストしやすい
  • 🤔 デメリット:CSSへの理解が必要、コード量が多くなる可能性がある
  • 🚩 おすすめシーン:デザイン要求の高いプロジェクト
こだわり
  • 😆 Breakpoint:CSSフレームワークなので、対応
  • 😆 Layout & CSS System:CSSフレームワークなので、対応
  • ✨ デフォルトIcon:Heroicons
基本レイアウト

FlexとGridの基本レイアウトなら、↓ご参照いただけますと幸いです。

コンポーネントライブラリ

TailwindCSSは純粋なCSSフレームワークでコンポーネントを提供しないですが、外部コンポーネントライブラリを使えば簡単にサイトを構築することが可能です。

リスト
関連ライブラリ

TailwindCSSの補足、似ているライブラリもあります。

その他のVue.js3対応UIフレームワーク

まだ詳しく確認していないUIフレームワークです。

  • Chakra UI:種類2️⃣、React.js版もあります。
  • Varlet:種類2️⃣、Vant UIと同じ、スマートフォン専用。
  • Wave UI:種類2️⃣、ドキュメントだけを見ていい感じ。
  • Qui Max:種類1️⃣、単純なUIコンポーネントライブラリ。
  • ArcoDesign:種類2️⃣、ByteDance(TikTok)が開発したUIフレームワークで、React.js版もあります。コンポーネントも充実な気がします。
  • Inkline:種類2️⃣、ロゴはねこ🐈
  • View Design:種類2️⃣、一部機能は有料
  • AgnosticUI:種類1️⃣、単純なUIコンポーネントライブラリ。React.jsSvelte.js通用
  • Semantic UI :種類3️⃣、CSSフレームワーク(Semantic UI VueというUIフレームワークがありますが、Vue.js 3非対応です)
106
86
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
106
86