CarelyでBuefy使ってみて どうだった？

自己紹介 2

名前：安田俊之 関わってきた技術： Linux, Docker, K8s, Terraform, Ansible, Chef, Ruby On Rails, Vue.js, AngularJS, Symfony, FuelPHP, CakePHP Androidアプリ, Spring(Java), Perl/CGI PostgreSQL, MySQL, Oracle, PL/SQL Vim, Zsh, etc. 3

本題 4

みなさん、Buefyってご存知で すか？ 質問 5

https://buefy.org/ Buefyとは 6

https://buefy.org/ Buefyの特徴 7

https://bulma.io/ ではBulmaとは？ 8

https://bulma.io/ Bulmaの特徴 9

ではなぜBuefyを導入した か？ Buefy導入の経緯 10

ではなぜBuefyを導入した か？ Buefy導入の経緯 11

Buefy導入前、Carelyでは Material Design Lite を利用していました。 Buefy導入の経緯 12

https://material.io/ Material Designとは 13

Material Design Lite 14

Material Design Liteプロジェクトが Material Componentsに移行したの に伴い、Carelyもどういう方針をとる かの判断を迫られた Material Design Liteの後継 15

1. 見て見ぬ振りをする 2. Material Design Componentsを採用する 3. ゼロベースでその他のCSSフレームワークを検 討、採用する Material Design Liteの後継 16

1. 見て見ぬ振りをする 2. Material Design Componentsを採用する 3. ゼロベースでその他のCSSフレームワークを検 討、採用する Material Design Liteの後継 17

CSSフレームワーク検討資料 18

Buefy採用決定！ いろいろあって 19

Buefyが適用されたCarelyの画面 20

ただ、選定にあたったメンバーが既にいないため、 数ある候補の中からBuefyを選定した詳しい事情 はドキュメントに残っておらず・・・ 21

選定にあたっての詳細な事情が最も期待されてい たのかもしれませんが、そのご期待には沿うことが できないので、エンジニアにBuefyに関するアン ケートをとり、赤裸々な真実を語ってもらいました！ 22

Buefyアンケート in iCARE!!! 題して 23

Buefyのファーストインプレッション（はじめて使った ときの感触、感動）を教えてください ファーストインプレッション 24 いっせい 旧来使っていたCSSのフレームワークより 楽に実装できて感触よかった。 すん ほとんどのUIコンポーネントが揃っていて cssを書く手間が減った 。 たかさん （デザイナー） ほう、ようするにbootstrapですね(小並感) まさきち Element UIをよく使っていたが、使い勝手はそんなに変わらない かな、という感じ スタイル部分のドキュメントが Bulma側なので、ちょっと全体の把握はしづらかった きはら propsさえ正しく与えれば綺麗なボタンが実装できる って素敵やん おきな Bulma自体は結構良いなと思ってたけど、全コンポーネントを自分で書くの結構めんどくさいなと思ってました。 Buefyはbulmaベースで出来の良いコンポーネントを作っといてくれる ので、とても良いと思いました。 また、bulmaベースなので、Buefyにはないオリジナルな奴も bulmaのルールに乗って書くだけで作れるので、 スピード・柔軟性・スケーラビリティ全て兼ね備えていると思います。

Buefyを使うようになって（もしくはBuefyをCarelyに 適用して）何が変わりましたか？ 何が変わったか？ 25 いっせい 旧来のものはCSSのスタイルが長くなっていたので 見通しがよくなった気がします。 すん UIコンポーネントdefalut cssをカスタマイズ（cssのoverride）も可能だが、、 全体デザインの統一性を考えるとなるべくしない方がいいと思った。 たかさん （デザイナー） パーツの一貫性を意識するようになった 。 まさきち Buefyを使うようになってからしか知らないが、 MDL部分はつらみの塊な感触はある きはら いい感じのデザインの Buefyコンポーネントが多数用意されているので、 CSSに関する心配事が減った 。 おきな やはり実装速度ですね。 Buefyのコンポーネントをそのまま使うだけでも大体の画面は作れる所とか。

Buefyを使って良かった（良くなった、楽しくなった） と思うことを教えて下さい 良かった点 26 いっせい 当たり前ですが、Vue との相性がいいのでフロントの構築が楽 になったと思います。 すん ・各UIコンポーネントでVue.js dataハンドリングがしやすい。（ template側のコードが短くて済む ） たかさん （デザイナー） デザイン的な具体的な指示がなくても、 頭ん中でイメージをもって話せるようになった 。 まさきち UIやコンポーネント設計にある程度一貫性が出てきたのでは？ エンジニア側から、こういうデータ構造ならこのコンポーネント使うのが良さそうですね、という提案がしやすい と思う きはら Buefyコンポーネントの中身の実装を考えることで、コンポーネント間のデータのやりとりに対する理解が深まった。 おきな スピード・簡潔さ・柔軟性のある開発ができてる ところ

Buefyに関して不満に思うことは何ですか？ 不満な点 27 いっせい 各コンポーネントでオプションや slotがたくさんあるので、見つけられず車輪の再発明をしてしまうことがある。 ドキュメントが日本語であるとうれしい すん ・バージョンアップが早い が、古いバージョンとの互換性はどうなのか。。（不満というより懸念） たかさん （デザイナー） とくに今のところはありません！ まさきち CSSフレームワーク、UIフレームワーク全般に言えることだが、 気軽にバージョンアップ、などはしづらい とはいえ追随しておかないと、後々苦しくなる 特にCSSフレームワーク側の命名ポリシーとか、そもそもの UIの方向性が変わると厄介（ Bootstrap3→4みたいな）なので、その辺りは今後懸念される 特にBuefyはBulmaに依存しているので、ちょっとややこしそう きはら b-table&slot-scopeの実装例を公式ドキュメントに載せておいてほしい 。 おきな 凄く良いところしかないので、 コンポーネントカタログをもっと増やしてくれても良いかな と思います。

アンケート結果ではUIコンポーネントライブラリを導 入すると、こんな風に変わるよ、ってところはわかっ ていただけたかと思います。 ただ、他のコンポーネントライブラリとの比較みた いな点を浮き彫りにできませんでしたので、その点 はおまけとしてお話させてください。 おまけ 28

なんとなくVue.jsのUIフレームワークを紹介する https://qiita.com/yusuke_ten/items/4103f032dd0c6fbe5607 上記サイトでは、おすすめ度が Bootstrap-vueが★★★★★ Vuetify, Buefyが★★★★ でした。弊社メンバーの評価はどうなんでしょうね？ そこは、この後の懇親会で聞いてみてください！ おまけ 29

https://www.npmtrends.com/bootstrap-vue-vs-buefy-vs-v uetify もうひとつおまけ 30

Buefyがんばれ！ ご清聴ありがとうございました！ 最後に一言 31