俺たちのフロントエンド”⼤”⾃慢⼤会 2023/04/1 4 by Oku from Classmethod inc 

Intoroduction toB、toCをスクラム開発した経験を話します。 私: とてもやさしい。えらくない。 toB、toC 開発で感じる違い React 周りの話 コードの深掘り 紹介する技術の詳細 

Development スクラム開発をベースに⾏なっています。 1w / 2w のタスク量が明確 スプリントでデザインも含められると… ふりかえり → 改善の流れが良い デイリーが⼤変 

Development スクラム開発をベースに⾏なっています。 1w / 2w のタスク量が明確 次スプリントに調整を⼊れる ふりかえり → 改善の流れが良い 慣れるしかなかった 

Development 次スプリントに調整を⼊れる n スプリントはとりあえず実装 n+1 スプリント で調整と修正 1スプリントで完璧を求めない 

Architecture React がコアなライブラリ Storybook とかよくあるものも⼀式 SPA なら Vite で SSR ならNext.js Bullet Proof React を参考に構成 

Bulletproof React ディレクトリ構造をどうするか Bulletproof Reactの導⼊ components や hooks が⼀番の親ではない 機能 (features) 単位でディレクトリを分ける 機能 (features) の中に components や hooks を内包 

Bulletproof React ディレクトリ構造をどうするか ボタンとかの汎⽤的なコンポーネント 特定ページでのみ利⽤するコンポーネント コンポーネントの粒度が明確になる 依存するコードが近い場所にある コードが散らばらないのでレビューしやすい 

Bulletproof React ディレクトリ構造をどうするか Vite を利⽤するならおおむねそのまま活⽤ Next.js なら /pages/{name} を feature に ビジネスロジックよりUIが多い場合など app dir または 「pageExtensions」 API Routes のコードをどこに置くか 

Styling Tailwind CSS で実装 SSR でも CSR でも設定少なく動くので快適 CSS クラス名の設計が不要 レビューするのも指摘するのも⾮常に楽 プラグインが便利 tailwind-clip-path と typography line-clamp が本体に追加された 

Styling Tailwind CSS で実装 spacing が途中から4px 単位ではない デザイナーとの共通認識を作れていない 18px など m-[18px] みたいなのが頻発する 

Styling spacing を4pxにするように調整 

Styling’s future Tailwind CSS で実装 color / line-height など 標準クラスで表現できない デザイナーとの共通認識を作れていない Figma のプラグインなど積極的に使うと良さそう Design Tokens Community Group の取り決めを活⽤ 

Care About (toB) toB と toC で複雑さと課題が異なる 複雑なドメイン知識の理解 フォームやテーブルのパフォーマンス 業務でしか起こり得ないバリデーション 項⽬の多いフォーム 複雑なバリデーション 

Care About (toC) toB と toC で複雑さと課題が異なる パフォーマンス 多種多様な端末の想定 Core Web Vitals の改善 など レスポンシブ対応 複雑なアニメーション 

To Closly 話せてないことも改善できてないこともたくさん Figma との連携、⾃動化 Storybook 7 中⼼にテスト改善 SVG アイコンや画像の管理