vue.jsで手っ取り早くアプリを作りたいけど、フロントにそんな時間をかけないでそれなりのデザインを作りたい。

何かvue.jsで新しいアプリを作ったりするときは、バックエンド側に集中したりしたいので、このような悩みが出てきますよね。

もし今、UIフレームワークを使ってvue.jsのアプリを作るなら。。。

私はTailwindCSSかVuetifyを選びます

理由としては、以下のような理由で選択しています。

• コミュニティがある程度の規模があり、継続して管理される可能性がある
• レスポンシブ対応している
• 軽い
• Nuxtのcreate-nuxt-appでUI Frameworkとして採用されている

私が作成するアプリは、大体Vuetifyを使用して作っていますが、自分で書くcssはどれも200行以内に収まっているので、その分バックエンド側に集中することができます。

さらに、デザインを学んでいない場合、下手に凝ったデザインにするよりもマテリアルデザインを取り入れた方が万人受けしやすいものを作ることができ、デザインにおけるミスを減らすことができます。

create-nuxt-appとはNuxtの公式が出している、素早くNuxtプロジェクトを作成し始めるための足場ツールのことです。

これに採用されているということはUI フレームワーク導入のコストが少し下がるということなので、素早く作成したい場合には、このポイントは大事になってきます。

それぞれのUIフレームワークのコミュニティの大きさは?

ここからは比較を行っていきます。

上記のそれぞれのgithubのスター数で比較してみます(2020/3/12)。

githubのスター数ではElementがダントツで人気となっています。

これは、おそらくElementが中国製のライブラリということもあると思いますが、Elementのシンプルさが受け入れられているのだと思います。

こちらがそれぞれのコンポーネントセットがnpmで過去6ヶ月でインストールされた数を視覚化したものです。(作成日2020/3/12)

他のUIフレームワークと比較

これが素晴らしいと言われても他のものと比較しなければ、使う理由にはなりませんよね。なので他のUIフレームワーク(コンポーネントセット)と比較して見たいと思います。

Element

Elementはスター数も多くデザインも素晴らしいのですが、レスポンシブではないので、少々使い勝手が悪いです。少々というか、導入しない理由がこれになるくらい勿体無いポイントでもあります。

レスポンシブに関する問題が解決されれば、VuetifyやBuefyからの乗り換えも考えるのですが、レスポンシブになることはないと思います。

ドキュメントも非常に読みやすく綺麗なのでレスポンシブが要件に入っていない場合(あるかわかりませんが笑)は、有力候補になると思います。

Bootstrap-vue

可もなく不可もなく。本当に普通といった感じ。マテリアルっぽさが足りないのでそこが惜しいポイント。

Quasar Framework

Vuetifyとできることはほとんど同じ。できることもとても豊富

ただNuxt公式のcreate-nuxt-appにUIフレームワークとして選択肢に入っていなことが残念ポイント！！

Vue Material

◎レスポンシブ

こちらも非常に良いのですが、できることがVuetifyと似ており、Vuetifyの下位互換のような印象です。Vue Material使うならVuetify使うかなと思います。

Muse-UI

中国版Vuetifyのような印象。ドキュメントを読んだ感じではできることは大体Vueityfと同じな感じ。

これ使うならVuetify使いますかね。

View UI

❌レスポンシブ

こちらは以下のような中国のなどの名だたる企業が使用しているコンポーネントセット。雰囲気はElementと似たような柔らかい印象。

• 阿里巴巴
• 百度
• 腾讯
• 今日头条
• 滴滴出行

デザインは素晴らしいのですが、レスポンシブ非対応になっています。

なぜ、中国系のライブラリはレスポンシブ対応しないものが多いのでしょうか？文化的なものなんですかね？

Buefy

◎レスポンシブ

Bulma + vue.js

githubのスター数38.8kの大人気cssフレームワークのbulmaをとvue.jsを組み合わせたUIコンポーネント

私は結構好きなんです。しかし、デザインが少しだけ独特な部分もあったりするので、いい意味でBuefyっぽさが出てしまうところもある。レスポンシブ対応で、使い勝手がいいです。Buefyを使うこともよくあります。Vuetifyとはtabやinputが違ったりするので、作りたいアプリのイメージに合わせて使い分けています！

こちらもcreate-nuxt-appのセットアップに入っているので簡単に導入することができます。

TailwindCSS

◎レスポンシブ

今回挙げた中ではVuetifyと同じくらい良いコンポーネントセットだと思っています。

Popular components - The most popular tailwindcss components といった形で多くのユーザーにcomponentが作成されており、素晴らしいみんなのコンポーネントを使うことができます！

こちらはVuetifyと違っていい意味でカスタマイズ性が高いので、少し凝ったデザインのものを作るときに自分たちでコンポーネントを作ったりしてやるときには良い選択かと思います。

Vuetify

今回一番進めたいUIコンポーネント！

Pre-made layoutsなどがありとにかく早く整ったデザインのアプリを作ることができます。

さらにこちらに有料レイアウトなどもあります。それほど自信を持ってレイアウトを勧めていることがわかります。確かに可もなく不可もなくではなく、ある程度綺麗に作ることができます。

さらにLight and Darkで簡単にライトモードとダークモードを切り替えることもできます！！

awesome-vuetifyというリポジトリには、Vuetifyで作られた様々な作品が見つけられます。

こちらには継続的なアップデートがされていることがわかります。

さらにはエンタープライズ向けにもサポートを行っており、これらからコミュニティの大きさがわかります。

多くのユーザーに使用されており、管理するコミュニティも大きく、汎用性の高いマテリアルデザインを使っているVuetifyが今の所良い選択なのではないかなと思います。

まとめ

UIフレームワーク群雄割拠といった印象です。

いくつか試して見てしっくりくるものを選んで行けば良いと思います。おそらくVuetifyかBuefyかTailwindCSSに落ち着くと思います。

• ほとんどCSSも書きたくないし、マテリアルデザインでいいという人はVuetify
• ある程度のカスタマイズ性は欲しいけど、CSSのルールはしっかり欲しいという方にはTailwindCSS

こんな感じでしょう。