Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CarelyでBuefy使ってみてどうだった_.pdf
Search
aokitakayukicare
January 16, 2020
Business
0
99
CarelyでBuefy使ってみてどうだった_.pdf
aokitakayukicare
January 16, 2020
Tweet
Share
More Decks by aokitakayukicare
See All by aokitakayukicare
CarelyのUIデザインで実際にコンポーネントを使用して業務を行ってみて良かった点_悪かった点.pdf
aokitakayukicare
1
28
Kubernetesでの_環境構築および_運用フロー構築のはなし.pdf
aokitakayukicare
0
140
Other Decks in Business
See All in Business
grabss会社案内 / grabss careerdeck
grabss
0
300
「強い」エンジニアと働く中で、新卒1年目・未経験プロダクトマネージャーが何に悩み、どこに自分の価値を見出したか
kassy1127
17
7.3k
【エンジニア採用】BuySell Technologies会社説明資料
buyselltechnologies
1
41k
VISASQ: ABOUT US
eikohashiba
14
420k
トーキトーク - 登記密着ヒューマンドラマ
takuro_nakajima
PRO
1
1.4k
アジャイルトランスフォーメーションが現場にもたらす価値と超えるべきいくつかの壁/Agile transformation and some impediments
ikuodanaka
4
670
Crisp Code inc. | わたしたちの事例/実績 - Portfolio
so_kotani
1
230
エムスリーキャリア エンジニア採用資料 / M3C Engineer Guide
m3c
1
76k
GitHubを使わずDatabricksだけで お手軽にライブラリ共有やCIが できる環境を作ってみた/Creating an Environment for Easy Library Sharing and CI Using Only Databricks Without GitHub
kakehashi
1
300
20240416_SuperMaskedDevOps
takusamar
1
320
東大放射線科2025年度入局者向け資料
utrad
0
460
Company Deck(会社紹介資料)_3Sunny, Inc.
3sunny
1
230
Featured
See All Featured
Atom: Resistance is Futile
akmur
259
25k
A Tale of Four Properties
chriscoyier
151
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Thoughts on Productivity
jonyablonski
58
3.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Fireside Chat
paigeccino
21
2.6k
A Philosophy of Restraint
colly
197
16k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Transcript
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