Edited at

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


概要

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


Vuetify

難易度
★★★☆☆

ドキュメントの読みやすさ
★★☆☆☆

コンポーネントの数
★★★★★

汎用性
★★★★★

おすすめ度
★★★★☆


感想

コンポーネントも多いし、デザインも綺麗なのでおすすめのフレームワークです。

でもドキュメントがすごく読みにくいです、何度読んでもVuetifyのグリッドレイアウトはよく分かりません。


Bootstrap-vue

難易度
★☆☆☆☆

ドキュメントの読みやすさ
★★★★★

コンポーネントの数
★★☆☆☆

汎用性
★★★☆☆

おすすめ度
★★★★★


感想

Bootstrap4というCSSフレームワークをVue.js向けに拡張したフレームワークになります。

Bootstrap-vueは初めてUIフレームワークに触る人におすすめです。

ドキュメントも比較的読みやすいし、何よりBootstrapのクラス(マージンとかパディングとか)をそのまま流用できるのがいいです。

何でもできるというタイプのフレームワークではないのですが、絶妙なシンプルさが気に入っています。


Buefy

難易度
★★☆☆☆

ドキュメントの読みやすさ
★★★★★

コンポーネントの数
★★☆☆☆

汎用性
★★☆☆☆

おすすめ度
★★★★☆


感想

BulmaというCSSフレームワークをVue.js向けに拡張したフレームワークになります。

BuefyとBootstrap-vueは結構似たUIフレームワークだと思っています

このフレームワークでよく躓くのはBulmaの仕様の方なので最終的にBulmaのドキュメントばっかり見るようになります。

なんとなくBootstrap-vueのほうが使いやすかったです。


Quasar Framework

難易度
★★★★★

ドキュメントの読みやすさ
★★★☆☆

コンポーネントの数
★★★★★

汎用性
★★★★★

おすすめ度
★★★☆☆


感想

一番何でもできるUIフレームワークだと思います。

コンポーネントの数も多いしドキュメントも充実していますが、使いこなすには時間がかかると思います。

難易度が高いのでおすすめ度は低いです。


Onsen UI 2

難易度
★★☆☆☆

ドキュメントの読みやすさ
★★☆☆☆

コンポーネントの数
★☆☆☆☆

汎用性
★☆☆☆☆

おすすめ度
★☆☆☆☆


感想

モバイルアプリケーション(cordovaやmonaca)向けのUIフレームワークですね。

個人的にはおすすめはしません。

AngularやReactにも対応させているせいか、なんか無理やりな感じのするフレームワークワークですね。

ドキュメントも読みにくいし、コンポーネントも器用貧乏でかゆいところに手がとどかない感じです。


Framework7

難易度
★★☆☆☆

ドキュメントの読みやすさ
★★☆☆☆

コンポーネントの数
★★★☆☆

汎用性
★★☆☆☆

おすすめ度
★★☆☆☆


感想

こちらもモバイルアプリケーション向けのUIフレームワークですね。

Onsen UI 2よりは多少マシです。

このフレームワークもAngularやReactにも対応させているせいか、なんか無理やりな感じがします。

ドキュメントは頑張れば読めます。

あとルーティングがVue-Routerが使えません、その点でマイナスです。


Element

難易度
★☆☆☆☆

ドキュメントの読みやすさ
★★★★☆

コンポーネントの数
★★★☆☆

汎用性
★★☆☆☆

おすすめ度
★★★☆☆


感想

Elementは昔からあるUIフレームワークですね。

ですがモバイル対応が微妙とのことですぐに使うのやめちゃいました。

ドキュメントも読みやすいし、デザインも綺麗なのでまた使ってみたいですね。


総評

如何だったでしょうか?

てめぇその評価はおかしぃだろうがYO!

みたいな意見もあるでしょうが多めに見てください〜。

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