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)。
FW | スター数 |
---|---|
View UI | 1.2k |
Buefy | 7.2k |
muse-ui | 8k |
Vue Material | 8.6k |
bootstrap-vue | 11k |
TailwindCSS | 20.6k |
Vuetify | 24.2k |
Element | 44.1k |
githubのスター数ではElement
がダントツで人気となっています。
これは、おそらくElementが中国製のライブラリということもあると思いますが、Elementのシンプルさが受け入れられているのだと思います。
こちらがそれぞれのコンポーネントセットがnpm
で過去6ヶ月でインストールされた数を視覚化したものです。(作成日2020/3/12)
name | stars🌟 | forks🍽 | issues⚠️ | size(KB)🏋️♀️ |
---|---|---|---|---|
buefy | 7189 | 768 | 85 | 45.7 |
vuetify | 24200 | 3813 | 1011 | 140.2 |
element-ui | 44116 | 10024 | 1622 | 167.3 |
bootstrap-vue | 11011 | 1502 | 92 | 133.2 |
quasar-framework | 13959 | 1549 | 244 | - |
muse-ui | 7965 | 910 | 152 | 53.2 |
vue-material | 8603 | 1046 | 240 | 62.4 |
iview | 23078 | 4127 | 1054 | 133.5 |
tailwindcss | 20609 | 922 | 55 | 0.773 |
他の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
こんな感じでしょう。