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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

⾃⼰紹介株式会社ログラス開発部エンジニア浅井雅彦 / Masahiko Asai フロントエンドエンジニアとしてWeb制作会社、ベンチャー企業2社を経て、2021年10⽉にログラスに⼊社。 UIデザインを含む、フロントエンド開発全般を主に担当。 TypeScriptよりもCSSが得意。現在は機能開発チームのエンジニアとして、主要機能の開発とチームの⽣産性向上の活動を⾏う傍ら、フロントエンド基盤やデザインシステムの構築も担っている。（X: @mixplace）

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

©2024 Loglass Inc. はじめに: Loglass をご利⽤になるユーザーは ● to B 向けの業務Webアプリケーションです ○ ほぼすべてのページが、ログインしてお使いいただくページ ● 予算管理・予実分析という業務の特性上、PCで利用するWebアプリ ○ 高速なネット回線、モバイルやタブレットでは利用しない ● 一度アクセスすると、長時間ページに滞在、操作される傾向 ○ 数十分〜数時間使われることが多いです

Slide 10

Slide 10 text

©2024 Loglass Inc. Loglass フロントエンドの変遷 2019年 ● プロダクトのβ版をAngular で構築 2020年後半〜 ● 将来を見据えて Angular から React + Next.js へ移行を開始 2022年 ● 複数の開発チームで機能開発を行っていく体制へ ● UIコンポーネント部分において、デザイナーとデザインシステムの運用開始 2023年 ● React, Next.js を最新バージョンにアップデート ○ ルーティングでは引き続き Page Router を使用

Slide 11

Slide 11 text

©2024 Loglass Inc. スタイリングライブラリ ● emotion を採用 ● なぜ emotion を採用したのか ○ 生のCSSライクで書くことができる ■ スタイリングのWeb標準（CSS）で書ける ○ Angular時代のscssをなるだけ低コストで移植したい意図もあった ■ 機能開発を進めていく中で、 Tailwind等ユーティリティファーストの記述に書き直すのは非現実的だった ■ 意図したデザインにするために CSSで書けるメンバーがいる ○ 同一Component内でスタイリングを完結できる「ログラスのReactの技術選定について🐳 」より引⽤‧補⾜加筆 https://zenn.dev/yuitosato/articles/9db2a0fe90313e

Slide 12

Slide 12 text

©2024 Loglass Inc. CSS スタイリングアプリ全体で使うCSS変数は、Next.js の App Component で読み込み ● スタイル原則にあたる定数を、グローバルCSS変数 CSS Variables で定義 ○ カラー、スペーシング、フォントファミリ、フォントサイズなど ● emotion の Global Styles は使わない ○ グローバルであれば CSS Variablesを定義したCSSファイルを読み込ませれば十分で、過度にemotionのライブラリに依存しない

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

©2024 Loglass Inc. ● 3年運用してきたが、総じてポジティブな印象 ○ スタイリングライブラリを移行したくなるほどの課題感はない ○ 他の CSS in JS ライブラリに移行することになっても載せ替えやすいようにしている ● フロントエンドメインのエンジニアにとっては ○ CSSで記述やスタイル微調整には慣れているため、これまでの知見や書き方が活かせる ● バックエンドメインのエンジニアにとって ○ 共通で使うUIコンポーネントの整備（デザインシステムの構築）を進めていったことで、ほぼCSSスタイリングを書かなくて良い世界に emotion で良かった

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

©2024 Loglass Inc. CSS in JS スタイリングライブラリのリリース変遷 JSS treat Tailwind CSS (Utility First CSS) Griﬀel 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 ※初期リリース年を調査

Slide 19

Slide 19 text

Slide 20

Slide 20 text

©2024 Loglass Inc. まとめ ● スタイリングライブラリは、時とともに変わっていく ○ サービスを続けていくならば、入れ替える可能性がある前提でいること ● Web標準に準拠したものか。Web標準からかけ離れていないか ○ スタイリングはCSSという中で、 JSではなくCSSネイティブで書ける部分は書いた方が良い ● 既存の資産を移行しやすいか ○ 将来、スタイリングの書き直しが少なく移行ができるか ● 外部ライブラリの依存度は少なく保てるか

Slide 21

Slide 21 text

No content