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
599
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

なんとなくVue.jsのUIフレームワークを紹介する

概要

僕が今まで使ってきたVue.jsのUIフレームワークを紹介していきたいと思います。

Vuetify

image.png

難易度 ★★★☆☆
ドキュメントの読みやすさ ★★☆☆☆
コンポーネントの数 ★★★★★
汎用性 ★★★★★
おすすめ度 ★★★★☆

感想

コンポーネントも多いし、デザインも綺麗なのでおすすめのフレームワークです。
でもドキュメントがすごく読みにくいです、何度読んでもVuetifyのグリッドレイアウトはよく分かりません。

Bootstrap-vue

image.png

難易度 ★☆☆☆☆
ドキュメントの読みやすさ ★★★★★
コンポーネントの数 ★★☆☆☆
汎用性 ★★★☆☆
おすすめ度 ★★★★★

感想

Bootstrap4というCSSフレームワークをVue.js向けに拡張したフレームワークになります。
Bootstrap-vueは初めてUIフレームワークに触る人におすすめです。
ドキュメントも比較的読みやすいし、何よりBootstrapのクラス(マージンとかパディングとか)をそのまま流用できるのがいいです。
何でもできるというタイプのフレームワークではないのですが、絶妙なシンプルさが気に入っています。

Buefy

image.png

難易度 ★★☆☆☆
ドキュメントの読みやすさ ★★★★★
コンポーネントの数 ★★☆☆☆
汎用性 ★★☆☆☆
おすすめ度 ★★★★☆

感想

BulmaというCSSフレームワークをVue.js向けに拡張したフレームワークになります。
BuefyとBootstrap-vueは結構似たUIフレームワークだと思っています
このフレームワークでよく躓くのはBulmaの仕様の方なので最終的にBulmaのドキュメントばっかり見るようになります。
なんとなくBootstrap-vueのほうが使いやすかったです。

Quasar Framework

image.png

難易度 ★★★★★
ドキュメントの読みやすさ ★★★☆☆
コンポーネントの数 ★★★★★
汎用性 ★★★★★
おすすめ度 ★★★☆☆

感想

一番何でもできるUIフレームワークだと思います。
コンポーネントの数も多いしドキュメントも充実していますが、使いこなすには時間がかかると思います。
難易度が高いのでおすすめ度は低いです。

Onsen UI 2

image.png

難易度 ★★☆☆☆
ドキュメントの読みやすさ ★★☆☆☆
コンポーネントの数 ★☆☆☆☆
汎用性 ★☆☆☆☆
おすすめ度 ★☆☆☆☆

感想

モバイルアプリケーション(cordovaやmonaca)向けのUIフレームワークですね。
個人的にはおすすめはしません。
AngularやReactにも対応させているせいか、なんか無理やりな感じのするフレームワークワークですね。
ドキュメントも読みにくいし、コンポーネントも器用貧乏でかゆいところに手がとどかない感じです。

Framework7

image.png

難易度 ★★☆☆☆
ドキュメントの読みやすさ ★★☆☆☆
コンポーネントの数 ★★★☆☆
汎用性 ★★☆☆☆
おすすめ度 ★★☆☆☆

感想

こちらもモバイルアプリケーション向けのUIフレームワークですね。
Onsen UI 2よりは多少マシです。
このフレームワークもAngularやReactにも対応させているせいか、なんか無理やりな感じがします。
ドキュメントは頑張れば読めます。
あとルーティングがVue-Routerが使えません、その点でマイナスです。

Element

image.png

難易度 ★☆☆☆☆
ドキュメントの読みやすさ ★★★★☆
コンポーネントの数 ★★★☆☆
汎用性 ★★☆☆☆
おすすめ度 ★★★☆☆

感想

Elementは昔からあるUIフレームワークですね。
ですがモバイル対応が微妙とのことですぐに使うのやめちゃいました。
ドキュメントも読みやすいし、デザインも綺麗なのでまた使ってみたいですね。

総評

如何だったでしょうか?
てめぇその評価はおかしぃだろうがYO!
みたいな意見もあるでしょうが多めに見てください〜。

今回紹介したもの以外もVue materialやMint UIなどなどたくさんありますので使う機会があったら更新したいと思います。

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
599
Help us understand the problem. What are the problem?