8
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

Vue.jsで早くWebサービスを作るならBuefyが良い

本記事はiCARE Advent Calender 2020 の6日目です。

Buefyとは?

BuefyとはBULMAVue.js を組み合わせた UI コンポーネントです。
オープンソースとして公開されています。MIT ライセンスです。

要はコンポーネントが用意されていて、使い方としてもpropsに適切な値を渡してあげれば、ある程度のデザインが効率的に作成できます。

tailwindcssではダメなの?

2020年12月現在のnpm trends

npm trends

npm trendsを見てみると、tailwindcssが群を抜いているのが分かります。

ここでBuefyとtailwindcssを比較することがそもそもナンセンスですが、タイトルの通りVue.jsで早くWebサービスを作ることを最優先にするのであればコンポーネントが既に用意されているので、機能を重視した開発が可能です。

ちなみにtailwindcssは、よく使うCSSが変数化、共通化されているので拡張性が非常に高いです。
スクラッチでstyleを組むのは大変だけど、自分たちで独自のコンポーネントを作りたいときはtailwindcssが良いかと思います。

Buefyの具体例

ボタンの例

b-buttonというコンポーネントが用意されているのでtypeにis-darkを、booleanでroundedをpropsで渡します。

画面に表示するとこんな感じ↓

テーブルの例

dataとcolumnsをpropsで渡してあげれば、テーブルが完成します。
ソート機能も追加可能です。

こんな感じ↓

気になるVue3対応は?

Vuejs 3 (vue-next) support #2505
GitHub上で議論は行われていますが、新しいBranchやPull Requestは存在しないようです😭
プロジェクトを作って、アップデートする気はありそうなので積極的にコミットしていきたいところです。

iCAREのフロントエンドはVue.js+Buefy+TypeScript+GraphQLで構成されている

10月にiCAREにジョインしたため、技術採用の歴史的背景を深く理解していませんが、モダンな技術スタックな印象です。
サーバーサイド側で定義されたスキーマを元にGraphQL、Vue.js側の型も縛っているので型安全です。

採用も行っているので気になる方よろしくおねがいします!
DMからでも採用担当に繋ぐことができます!

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