Buefy の良さを多くの人に体感して欲しいので なるべく簡単に紹介します
何回かに分けて構成する予定
対象
- Vue.js エンジニアでデザインを考えるのがめんどくさい人
- Bootstrap に飽きた人
- UI コンポーネント多くてどれがいいかわからない人
Buefy とは
Bulma という CSS フレームワークを Vue.js で使えるようにしたもの
似たような物に Vuetify や Bootstrap-vue、Vue Material 等がある
↓ 参考にさせていただきました
なんとなく Vue.js の UI フレームワークを紹介する
何故 Buefy にしたの？
インストールが簡単
npm/yarn でインストールして app.js で Vue.use するだけで OK！
超簡単なインストール方法に感動した
軽い！（気がする）
公式 docsでも
Lightweight UI components for Vue.js based on Bulma
と書かれてるように、とても軽量
ドキュメントが読みやすい
個人的にサイドメニューの子メニュー？が常に表示されている方が便利と感じるからそれが好き
後述のコンポーネントの少なさも相まって欲しいものが見つけやすい
ただ、Bulmaが元になっているのもあり、Buefy のドキュメントからリンクが貼られて、「詳しくはこちら」と Bulma ドキュメントに飛ばされることがあるのは少しめんどくさい・・・
コンポーネント数が少ない
少数精鋭で（個人的に）よく使うが揃えられているため、ドキュメントもみやすいし使い方も覚えやすかった
もちろんこれは、細かいところに手が届かないデメリットにもなりうる
その場合は他の UI コンポーネントや、個別のコンポーネントを採用するべき
例えば Buefy のカレンダーコンポーネントで実装が難しかったので、v-calendarを使ったりした
スタイルを簡単に変更できる
Buefy コンポーネントのデフォルトスタイルを scss でインポートすることで自由にスタイルを変えることができるのも魅力の一つだと思う
html タグに type 要素で指定できるコンポーネントの色合いを統一できるのが素晴らしい
詳しくは別の記事で（鋭意執筆中）
英語が結構簡単
残念ながらドキュメントは日本語には対応していない
でも英語がそこそこ簡単なので頑張れば読めると思う
なお翻訳は・・・・ぴえん
公式ドキュメント以外でも日本語の文献が少ないのは難点
つまり・・・
- ラーニングコストが低い
- ドキュメントが読みやすいためストレス少なめ
- 少数精鋭で欲しいものが揃っている
- 自分の好きなスタイルを適用しやすい
つまり Buefy はとてもいい！！
後書き
個人的な見解なので、ここはメリットじゃないとか、もっとこういうところが良いんだよ！とか
あればコメントで指摘してもらえると助かります
Vue.js を勉強して、とりあえず何か作ろう！と思ったけどデザインを考えるのが大変・・・
という時にとりあえずお試しで使って、UI コンポーネントってなんなのかを知るにはとてもいいものだと思います
Buefy の使い方とかコツとか、実際に使ってみてハマったことを記事にしていこうと思ってるので興味があったら見てください
余談
Buefy に行き着くまでの流れをまとめました
興味のある方もない方もおまけ程度に読んでください
なお全て個人的な感想なので悪しからず
初めての UI コンポーネント
Vue.js を使い始めてしばらくしてから Vuetify を使ってみた
当時のドキュメント
今はドキュメントが変わっているみたい
新ドキュメント
ロゴがかっこいいからとりあえず使ってみた
活字嫌いドキュメントとかちゃんと読むのが苦手・・・
そんな僕には Vuetify の公式ドキュメントが読みづらくてしょうがなかった
あとインストール（vue add vuetify）すると毎回何かしらエラーが起きてめんどくさかった
これは環境のせいもあるけど・・・
迷走期
会社で作っているシステムを Vue.js で今風の画面にリプレースする時にデザイン面をどう実装しようか考えていた
デザイン自体は決まっていたので折角だし新しい UI コンポーネントを探そうかと思い
なんとなく Vue.js の UI フレームワークを紹介する
ここを見ながら色々試していた
-
Bootstrap-vue
Bootstrap がそもそも
生理的に好きじゃないためパス -
Quasar Framework
やれること多すぎてドキュメントは読みやすいけど理解が大変だったのでパス
-
Vue Material
上記リンクにはないけど気になったので使ってみた
見た目かっちょいいけど Buefy と比べて導入がめんどくさかったのでパス
と色々試した結果 Buefy に行き着いた
リンク集
参考記事
なんとなく Vue.js の UI フレームワークを紹介する
公式 Docs
Buefy
Bulma
Vuetify
Bootstrap-vue
Quasar Framework
Vue Material