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
甘い香りに誘われてVanilla Extractを1年間運用してみた
Search
Miyazaki Keiji
March 27, 2024
Programming
1
120
甘い香りに誘われてVanilla Extractを1年間運用してみた
フロントエンド技術選定 ~ゼロランタイムCSS in JSとTailwind CSS編~
https://findy.connpass.com/event/312625/
Miyazaki Keiji
March 27, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
try! Swift Tokyo 初参加報告LT
hinakko2
0
230
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
470
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
290
"config" ってなんだ? / What is "config"?
okashoi
0
240
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
390
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1k
AmperとFleetを使ったAndroidアプリ
yoppie
0
240
使ってみよう Azure AI Document Intelligence
kosmosebi
2
350
見た目から始める生産性向上
ikumatadokoro
8
1k
Ruby GitHub Packages
bkuhlmann
0
630
雑に思考を整理する技術と効能
konifar
61
30k
Featured
See All Featured
Visualization
eitanlees
137
14k
Typedesign – Prime Four
hannesfritz
36
2.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Making Projects Easy
brettharned
109
5.5k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Automating Front-end Workflow
addyosmani
1357
200k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
5
1.3k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Clear Off the Table
cherdarchuk
85
310k
Transcript
甘い香りに誘われて Vanilla Extractを1年間運用してみた ラクスル事業本部 ダンボールワン開発部 宮﨑 圭司 (@miyahkun) 2024.03.27 フロントエンド技術選定 ~ゼロランタイムCSS
in JSとTailwind CSS編~ 社外公開 Public
© RAKSUL, inc. All rights reserved. プロフィール 宮﨑 圭司 (Miyazaki
Keiji) X, GitHub: @miyahkun 2021年 ラクスル新卒入社 吸収合併したダンボールワンという梱包資材ECの開発・運用を行う 趣味: ゲーム (League of Legends, Valorantなど)、ねこと戯れる 2
© RAKSUL, inc. All rights reserved. ・諸々の背景 ・Vanilla Extractについて軽く紹介 ・技術選定をする上で考慮した観点
・1年間運用してどうだった? ・まとめ このLTで話すこと 3
© RAKSUL, inc. All rights reserved. 背景 - 対象のサービス ・ネット印刷EC
・社内デザインシステムを運用 ある程度のデザインルールがある 4 ・2023年にラクスルが吸収合併 ・ダンボールなどの梱包材EC ・これまでラクスルとは完全に独立した デザインルールで運用されてきた 今回はこちらがメイン✋
© RAKSUL, inc. All rights reserved. 背景 - サービス要件など ・2023年4月ごろからECサイトのフロントエンド部分を段階的に移行中
・サイトの性質は参照系が多く、認証必須ページは少ない ・パフォーマンス要件はそこまで高くない ・ダークモード対応は将来的にも想定していない ・Next.js App Router (SSR), React Server Components (以下、RSC) を利用 ・Vanilla Extractを採用 5
© RAKSUL, inc. All rights reserved. ゼロランタイムCSS in JS ビルド時にCSSファイルを生成
コンポーネントとは別ファイルで記述 例: Hero.css.ts “Sprinkles” 機能でUtility Classを定義できる Vite, Next.js, Astro など主要ツールを公式サポート Vanilla Extractとは 6
© RAKSUL, inc. All rights reserved. JSランタイム環境が必須なツールはRSCで利用不可(例: Chakra UI) 技術選定の判断材料
7 吸収合併の関係でUIは徐々に変化 どんなUIを目指し、どんな時間軸で進めていくのかが不明確 ラクスル側のデザインシステムを利用するか、独自に進めるか ダンボールワン専任の正社員デザイナーが退職、業務委託1名だけに (今は専任デザイナーがいます!)
© RAKSUL, inc. All rights reserved. 理想と現実、そこからの決定 8 理想 本当はデザイントークンを定義・運用したい(特に
Color, Spacing, Typographyあたり) ライブラリは問わずUtility Firstで実装したい(Tailwind CSSやCSS in JSなど) 現実 吸収合併されたサービスであり、今後のUI方針で不確定要素が多い デザイントークンはエンジニアとデザイナーが協働して作っていくもの 当時はこれらを推進する余裕がなかった 柔軟にスタイリングできて CSS Modules よりも便利な Vanilla Extract を採用 (Linariaも有力候補だったが、正直どちらでも良かった) 採用候補 ・CSS Modules (w/ typed-css-modules) ・Tailwind CSS ・Linaria ・Vanilla Extract
© RAKSUL, inc. All rights reserved. 9 あれから1年
© RAKSUL, inc. All rights reserved. 強いて不満を挙げるなら Stylelintエコシステムの恩恵を受けられない(例: プロパティソート) (Next.js側の問題)
ページ遷移時のちらつき、重複したスタイル定義 我々の導入方針 Vanilla Extractの多様な機能の中で、本当に必要なものしか使わない ・学習コストが低い(未経験でもオンボーディングが楽) ・ただのJavaScriptオブジェクトなので、IDE拡張機能が不要 Vanilla Extractに対する振り返り 10 利用しているAPIは4つだけ RSC起因の問題は特に無し ✅ 書き心地を一言で表すなら、Better CSS Modules
© RAKSUL, inc. All rights reserved. Tailwind CSSは制約を導入するツール(例:デザイントークン必須、arbitrary valueは避けたい) 制約にはメリデメがある。デザイントークンを例に挙げると、
メリット:UIの細かい調整が減り、UIデータ作成・実装が高速に デメリット:一度定義したデザイントークンは変えにくい。2重管理はもっとツライ 最初から独自のTailwind CSSを導入していたら、今頃大変な思いをしていたかも 😌 ここからの学び 不確定要素が多い中で、最初に柔軟性を重視したことが、後からの制約を受け入れやすくなった 後からTailwind CSSを導入(現在進行中) 11 UI方針と組織体制が整い始めた。議論の末、 ラクスルのTailwind CSS製デザインシステムを 導入することに。
© RAKSUL, inc. All rights reserved. アプリ側reset.css vs Tailwind CSS
Preflight ページ内で特定のclassの子孫要素にだけTailwindのスタイルを適用 (例: .kamii-element) ・Preflightのスタイルを手動で上書き(おそらくpluginとして実現可能) ・①アプリ側のreset.css、②Tailwind Preflight の順で定義する ・tailwind.config.js の “important” を設定。 .kamii-elenent 配下のみをTailwind CSSの有効範囲に remの基準が異なる アプリ側は 1rem = 10px、デザインシステム側は 1rem = 16px remを使用したスタイルが全て崩れる → tailwind.config.js で “theme” 設定を上書きして対応 後からTailwindを導入しデフォルトスタイルが競合 12
© RAKSUL, inc. All rights reserved. 技術選定当時 ・フレームワーク・吸収合併・組織の観点を考慮してVanilla Extractを採用 1年後の現在
・Vanilla Extract は “Better CSS Modules” のように使えている ・後から社内デザインシステムを導入し、Vanilla ExtractとTailwind CSSを併用 ・柔軟性を重視した技術選定が、後の選択肢を広げた まとめ 13
© RAKSUL, inc. All rights reserved. 14 https://techblog.raksul.com/ RAKSUL TechBlog
社員インタビュー https://recruit.raksul.com/story/archives/engineer/ RAKSUL 公式connpass https://raksul.connpass.com/ https://www.youtube.com/channel/UCyihWcvrHmE e-edcqdcJFsQ/ RAKSUL 公式YouTube RAKSUL 公式X https://twitter.com/raksuldev RAKSUL をもっと詳しく RAKSUL 紹介 https://speakerdeck.com/raksulrecruiting/raksul-introduction