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
2
700
甘い香りに誘われて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
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
650
Mermaid x AST x 生成AI = コードとドキュメントの完全同期への道
shibuyamizuho
1
260
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
360
テストケースの名前はどうつけるべきか?
orgachem
PRO
0
160
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
3
750
testcontainers のススメ
sgash708
1
130
フロントエンドのディレクトリ構成どうしてる? Feature-Sliced Design 導入体験談
osakatechlab
8
4.1k
fs2-io を試してたらバグを見つけて直した話
chencmd
0
240
return文におけるstd::moveについて
onihusube
1
1.3k
Spatial Rendering for Apple Vision Pro
warrenm
0
150
Fibonacci Function Gallery - Part 1
philipschwarz
PRO
0
230
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Six Lessons from altMBA
skipperchong
27
3.5k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Code Reviewing Like a Champion
maltzj
521
39k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
A Tale of Four Properties
chriscoyier
157
23k
Mobile First: as difficult as doing things right
swwweet
222
9k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
For a Future-Friendly Web
brad_frost
175
9.4k
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