boast frontend 2023/04/14

Transcript

1. 俺たちのフロントエンド”⼤”⾃慢⼤会 2023/04/1 4 by Oku from Classmethod inc
2. Intoroduction toB、toCをスクラム開発した経験を話します。 私: とてもやさしい。えらくない。 toB、toC 開発で感じる違い React 周りの話 コードの深掘り 紹介する技術の詳細
3. Development スクラム開発をベースに⾏なっています。 1w / 2w のタスク量が明確 スプリントでデザインも含められると… ふりかえり → 改善の流れが良い デイリーが⼤変
4. Development スクラム開発をベースに⾏なっています。 1w / 2w のタスク量が明確 次スプリントに調整を⼊れる ふりかえり → 改善の流れが良い 慣れるしかなかった
5. Development 次スプリントに調整を⼊れる n スプリントはとりあえず実装 n+1 スプリント で調整と修正 1スプリントで完璧を求めない
6. Architecture React がコアなライブラリ Storybook とかよくあるものも⼀式 SPA なら Vite で SSR ならNext.js Bullet Proof React を参考に構成
7. Bulletproof React ディレクトリ構造をどうするか Bulletproof Reactの導⼊ components や hooks が⼀番の親ではない 機能 (features) 単位でディレクトリを分ける 機能 (features) の中に components や hooks を内包
8. Bulletproof React ディレクトリ構造をどうするか ボタンとかの汎⽤的なコンポーネント 特定ページでのみ利⽤するコンポーネント コンポーネントの粒度が明確になる 依存するコードが近い場所にある コードが散らばらないのでレビューしやすい
9. Bulletproof React ディレクトリ構造をどうするか Vite を利⽤するならおおむねそのまま活⽤ Next.js なら /pages/{name} を feature に ビジネスロジックよりUIが多い場合など app dir または 「pageExtensions」 API Routes のコードをどこに置くか
10. Styling Tailwind CSS で実装 SSR でも CSR でも設定少なく動くので快適 CSS クラス名の設計が不要 レビューするのも指摘するのも⾮常に楽 プラグインが便利 tailwind-clip-path と typography line-clamp が本体に追加された
11. Styling Tailwind CSS で実装 spacing が途中から4px 単位ではない デザイナーとの共通認識を作れていない 18px など m-[18px] みたいなのが頻発する
12. Styling spacing を4pxにするように調整
13. Styling’s future Tailwind CSS で実装 color / line-height など 標準クラスで表現できない デザイナーとの共通認識を作れていない Figma のプラグインなど積極的に使うと良さそう Design Tokens Community Group の取り決めを活⽤
14. Care About (toB) toB と toC で複雑さと課題が異なる 複雑なドメイン知識の理解 フォームやテーブルのパフォーマンス 業務でしか起こり得ないバリデーション 項⽬の多いフォーム 複雑なバリデーション
15. Care About (toC) toB と toC で複雑さと課題が異なる パフォーマンス 多種多様な端末の想定 Core Web Vitals の改善 など レスポンシブ対応 複雑なアニメーション
16. To Closly 話せてないことも改善できてないこともたくさん Figma との連携、⾃動化 Storybook 7 中⼼にテスト改善 SVG アイコンや画像の管理