これからのスタイリング、どう向き合っていく？

2024年3月27日開催「フロントエンド技術選定 ~ゼロランタイムCSS in JSとTailwind CSS編~」でお話した資料となります。
https://findy.connpass.com/event/312625/

2021年時点での技術選定観点と、これからスタイリングライブラリを導入する・入れ替えるにあたっての視点で発表しました。

Transcript

1. ©2024 Loglass Inc. これからのスタイリング、どう向き合っていく？ 〜技術選定と事業成⻑の狭間で〜 2024/3/27 フロントエンド技術選定 ~ゼロランタイムCSS in JSとTailwind CSS編~ Masahiko Asai / Loglass, Inc.
2. ⾃⼰紹介 株式会社ログラス 開発部 エンジニア 浅井 雅彦 / Masahiko Asai フロントエンドエンジニアとしてWeb制作会社、ベンチャー企業2社を 経て、2021年10⽉にログラスに⼊社。 UIデザインを含む、フロントエンド開発全般を主に担当。 TypeScriptよりもCSSが得意。 現在は機能開発チームのエンジニアとして、 主要機能の開発とチームの⽣産性向上の活動を⾏う傍ら、 フロントエンド基盤やデザインシステムの構築も担っている。 （X: @mixplace）
3. ©2024 Loglass Inc. 3 次世代型 経営管理クラウド
4. ©2024 Loglass Inc. 4
5. ©2024 Loglass Inc. 本⽇話したいこと 1 2021年、Loglass プロダクトにおけるスタイリング技術選定 2 実際に運⽤してみてどうだったか 3 今後スタイリングライブラリとの向き合うには
6. ©2024 Loglass Inc. ゼロランタイム CSS in JS がテーマですが スタイリングライブラリ中⼼で Lightning Talkします
7. ©2024 Loglass Inc. 今⽇のLTで伝えたいこと • スタイリングライブラリは移ろうものである • “既存プロダクトにおいて、今の資産は移行しやすいか”を観点に • 外部ライブラリの依存度は少なく保とう
8. ©2024 Loglass Inc. 1 2021年、Loglass プロダクトにおける フロントエンド スタイリング技術選定
9. ©2024 Loglass Inc. はじめに: Loglass をご利⽤になるユーザーは • to B 向けの業務Webアプリケーションです ◦ ほぼすべてのページが、ログインしてお使いいただくページ • 予算管理・予実分析という業務の特性上、PCで利用するWebアプリ ◦ 高速なネット回線、モバイルやタブレットでは利用しない • 一度アクセスすると、長時間ページに滞在、操作される傾向 ◦ 数十分〜数時間使われることが多いです
10. ©2024 Loglass Inc. Loglass フロントエンドの変遷 2019年 • プロダクトのβ版をAngular で構築 2020年後半〜 • 将来を見据えて Angular から React + Next.js へ移行を開始 2022年 • 複数の開発チームで機能開発を行っていく体制へ • UIコンポーネント部分において、デザイナーとデザインシステムの運用開始 2023年 • React, Next.js を最新バージョンにアップデート ◦ ルーティングでは引き続き Page Router を使用
11. ©2024 Loglass Inc. スタイリングライブラリ • emotion を採用 • なぜ emotion を採用したのか ◦ 生のCSSライクで書くことができる ▪ スタイリングのWeb標準（CSS）で書ける ◦ Angular時代のscssをなるだけ低コストで移植したい意図もあった ▪ 機能開発を進めていく中で、 Tailwind等ユーティリティファーストの記述に書き直すのは非現 実的だった ▪ 意図したデザインにするために CSSで書けるメンバーがいる ◦ 同一Component内でスタイリングを完結できる 「ログラスのReactの技術選定について🐳 」より引⽤‧補⾜加筆 https://zenn.dev/yuitosato/articles/9db2a0fe90313e
12. ©2024 Loglass Inc. CSS スタイリング アプリ全体で使うCSS変数は、Next.js の App Component で読み込み • スタイル原則にあたる定数を、グローバルCSS変数 CSS Variables で定義 ◦ カラー、スペーシング、フォントファミリ、フォントサイズなど • emotion の Global Styles は使わない ◦ グローバルであれば CSS Variablesを定義したCSSファイルを読み込ませれば十分で、 過度にemotionのライブラリに依存しない
13. ©2024 Loglass Inc. UI コンポーネント群 原則、外部のUI ライブラリには頼らずすべて自作している 要件が複雑なUI コンポーネントのみ、部分的に外部UIライブラリを導入している 一例 • Calendar: react-day-picker • Select: react-select
14. ©2024 Loglass Inc. 2 実際に運⽤してみてどうだったか
15. ©2024 Loglass Inc. • 3年運用してきたが、総じてポジティブな印象 ◦ スタイリングライブラリを移行したくなるほどの課題感はない ◦ 他の CSS in JS ライブラリに移行することになっても載せ替えやすいようにしている • フロントエンドメインのエンジニアにとっては ◦ CSSで記述やスタイル微調整には慣れているため、これまでの知見や書き方が活かせる • バックエンドメインのエンジニアにとって ◦ 共通で使うUIコンポーネントの整備（デザインシステムの構築）を進めていったことで、 ほぼCSSスタイリングを書かなくて良い世界に emotion で良かった
16. ©2024 Loglass Inc. 3 今後スタイリングライブラリとの向き合うには
17. ©2024 Loglass Inc. これまで CSS in JSライブラリは 年々変遷している
18. ©2024 Loglass Inc. CSS in JS スタイリングライブラリのリリース変遷 JSS treat Tailwind CSS (Utility First CSS) Griffel Macaron 2014 Panda CSS Kuma UI StyleX 2015 2023 2017 2022 2016 2018 2019 2020 2021 vanilla- extract Compiled Astroturf Glamorous emotion linaria Fela Glamor styled-components styled-jsx Radium Rebass CSS Modules CSJS Aphrodite ※初期リリース年を調査
19. ©2024 Loglass Inc. 既存のライブラリから インスピレーションを受けて より洗練されたものが 新たに⽣まれていく世界
20. ©2024 Loglass Inc. まとめ • スタイリングライブラリは、時とともに変わっていく ◦ サービスを続けていくならば、入れ替える可能性がある前提でいること • Web標準に準拠したものか。Web標準からかけ離れていないか ◦ スタイリングはCSSという中で、 JSではなくCSSネイティブで書ける部分は書いた方が良い • 既存の資産を移行しやすいか ◦ 将来、スタイリングの書き直しが少なく移行ができるか • 外部ライブラリの依存度は少なく保てるか