「CSS Library / Framework」をテーマに「BARフロントえんどう #2」を開催しました!

こんにちは。 フロントエンドエキスパートチームの Saji です

2024 年 4 月 19 日(金)にサイボウズのフロントエンドエンジニア主催で第 2 回 BARフロントえんどうを開催しました。 本記事では、当日の様子やセッションについて紹介します。

BARフロントえんどうとは

BARフロントえんどうは Web フロントエンドのトピックからテーマを選び、登壇者や参加者の間で情報を共有することで知見を深めてもらおうというコンセプトの勉強会です。 第 2 回を迎える今回は「CSS Library / Framework」をテーマとして開催しました。

フロントエンドリアーキテクトをテーマとした第 1 回の開催報告も併せて こちら でご覧になれます。

セッション内容

今回はメインセッションとして poteboy さん、株式会社はてなの mizdra さん、ピクシブ株式会社の f_subal さんのお三方に発表していただきました。

それぞれ知見のある領域やライブラリに関して詳しくお話ししてくださり、懇親会なども含めて多くの質問や議論が行われていました。

Tailwind CSS を本気でカスタマイズする方法

発表者 : ピクシブ株式会社 f_subal さん

「Tailwind のカスタマイズ」をテーマに、theme によるカスマイズだけでなく Tailwind の Plugin システムや presets、JSAPI など様々なカスタマイズ方法があることを紹介するセッションでした。さらに次のメジャーバージョンである v4.0 で起こる変化についても触れています。Tailwind をより深く使いこなしたい人、カスタマイズをしていきたい人に最適な発表でした。

f_subalさんの発表の様子

近代 CSS フレームワークの内部実装とその仕組み

発表者 : poteboy さん

現代の CSS フレームワークの仕組みを 3 種類に分類し、それぞれのメリット・デメリットから現在の CSS フレームワーク全体の抱えている課題を明らかにしつつ、それに対してどのような解決アプローチが考えられているのかを紹介するセッションでした。CSS のフレームワークの仕組みを知り、CSS フレームワークの今後を見ていく上で必要な知見の詰まった発表でした。

poteboyさんの発表の様子

はてな社内における CSS Modules、及び CSS Modules に足りないもの

発表者 : 株式会社はてな mizdra さん

はてな社内での利用ケースをもとに CSS Modules を採用した経緯や導入して困ったこと、その解決策などをまとめたセッションでした。CSS Modules の導入を検討している人や CSS Module を使っていて困っている人にぴったりのお話だったと思います。

mizdra さんの発表の様子

LT タイム

今回 LT での発表者を募集し、2 名の方に 5 分間の LT をしていただきました。

CSS セレクタを戦わせてみた

発表者:@tocomi さん

表示中の Web ページ上に存在する CSS セレクタを 2 つ表示し、どちらの詳細度がより強いかを当てるミニゲームを楽しめる Chrome 拡張「CSS セレクタ詳細度バトラー」の実装紹介や実演をしていただきました。

Google Slides

@tocomi さんの発表の様子

アクセシビリティを考慮した UI/CSS フレームワーク・ライブラリ選定

発表者:やじはむ さん

UI/CSS フレームワークやライブラリを選定する際、アクセシビリティへの対応のしやすさを指標に組み込むべき理由やそれを考慮した上で具体的にどのツールをお勧めするかという内容を発表していただきました。

やじはむさんの発表の様子

LT タイムでは質疑応答の時間を設けていませんでしたが、その後の懇親会で LT の内容に関する情報交換も行われていました。

また、当日の様子は有志の方々が X(旧 Twitter)にて、ハッシュタグ #BARフロントえんどう で実況してくれていましたので、当日の様子などを知りたい方はぜひ閲覧していただければと思います。

次回について

第 3 回 BARフロントえんどうも鋭意企画中です! 時期やテーマも含め決定次第 SNS や connpass 等で告知予定ですので、Cybozu Inside Out も含めてチェックしていただけると嬉しいです。

最後になりましたが、これからも BARフロントえんどうをよろしくお願いします!