急成長期の品質とスピードを両立するフロントエンド技術基盤

2024/12/04 開催イベント「スタートアップ5社集合！開発スピードと品質における各社の取り組み」のLT資料です。

Transcript

1. Shodai Suzuki @SoartecL スタートアップ5社集合！開発スピードと品質における各社の取り組み 2024.12.04 急成長期の品質とス ピードを両立するフロ ントエンド技術基盤
2. 鈴木翔大 X @SoartecL ソフトウェアエンジニア Productivityチーム( 技術基 盤チーム) 趣味 OSS Orvalメンテナ ダイビング
3. 今日話す事・話さない 事 MOSHで直面してる課題 課題に対してのフロント エンドの取り組み 話すこと 技術課題の全体像 バックエンドの取り組み 技術選定の詳細な背景や 説明 話さないこと
4. 急成長期の事業
5. 事業成長2年連続YoY3倍 🚀
6. 直近2年 事業成長2年連続YoY3倍 🚀
7. 急成長期に直面している課題
8. 急成長期に 直面している課題 PMFまでは辿り着いた 1 直近2年でPMFまでたどり着 くことができた
9. 急成長期に 直面している課題 PMFまでは辿り着いた まだまだ探索と安定性の両面 が必要 品質とスピード 1 2 直近2年でPMFまでたどり着 くことができた
10. 急成長期に 直面している課題 PMFまでは辿り着いた まだまだ探索と安定性の両面 が必要 品質とスピード これまで手をつけられなかっ た熟成された技術課題に直面 技術基盤の改善が急務 1 2 3 直近2年でPMFまでたどり着 くことができた
11. 急成長期に 直面している課題 PMFまでは辿り着いた 1 2 3 直近2年でPMFまでたどり着 くことができた まだまだ探索と安定性の両面 が必要 品質とスピード これまで手をつけられなかっ た熟成された技術課題に直面 技術基盤の改善が急務 熟成された技術課題！！
12. 急成長期に 直面している課題 PMFまでは辿り着いた まだまだ探索と安定性の両面 が必要 品質とスピード これまで手をつけられなかっ た熟成された技術課題に直面 技術基盤の改善が急務 1 2 3 直近2年でPMFまでたどり着 くことができた 技術基盤の改善が急務！！
13. 熟成された技術課題 こっち
14. その中でも今日はフロントエン ド技術基盤について話します 🚀
15. フロントエンドの課題例
16. フロントエンド課題例 非効率な APIデータ取得、不 必要に分離されたコンポーネ ント設計、一貫性の無いディ レクトリ設計など アーキテクチャ 1
17. フロントエンド課題例 非効率な APIデータ取得、不 必要に分離されたコンポーネ ント設計、一貫性の無いディ レクトリ設計など アーキテクチャ 内製のUIコンポーネントはス ピードと品質を向上するまで 昇華できていなく置き場所も バラバラ UIコンポーネント 1 2
18. フロントエンド課題例 非効率な APIデータ取得、不 必要に分離されたコンポーネ ント設計、一貫性の無いディ レクトリ設計など アーキテクチャ 内製のUIコンポーネントはス ピードと品質を向上するまで 昇華できていなく置き場所も バラバラ UIコンポーネント ほとんどない テストコード 1 2 3
19. 具体例 不要なNXプロジェクトの分離 ①APIアクセス ②共通UIコンポーネント ③ページ毎の実装 が分離されているので機能開発で常に複数パッケージの参照が必要 レイヤーの過度な分割によるボイラーテンプレート量産 呼び出しを中継するだけの関数群があるファイル ページ描画前に必要なデータを全てロードする制約のため描画時間が長い ページ単位の関心であるにも関わらず共通化してしまったUI構築用の関数 データ定義を元にformのinput要素を返却する共通関数 その他早すぎる最適化により共通化され変更が難しくなった共通関数が多数
20. 具体例 不要なNXプロジェクトの分離 ①APIアクセス ②共通UIコンポーネント ③ページ毎の実装 が分離されているので機能開発で常に複数パッケージの参照が必要 レイヤーの過度な分割によるボイラーテンプレート量産 呼び出しを中継するだけの関数群があるファイル ページ描画前に必要なデータを全てロードする制約のため描画時間が長い ページ単位の関心であるにも関わらず共通化してしまったUI構築用の関数 データ定義を元にformのinput要素を返却する共通関数 その他早すぎる最適化により共通化され変更が難しくなった共通関数が多数 🤮
21. スピードと品質向上の取り組み として、様々な観点から検討を 重ねゼロベースで技術選定を行 うことを決断しました 😇
22. スピードと品質向上の取り組み
23. スピードと品質向上の 取り組み 技術基盤として、Angular → React/Remix(ReactRouter)や 周辺技術の刷新 技術基盤スタック刷新 1
24. スピードと品質向上の 取り組み 技術基盤として、Angular → React/Remix(ReactRouter)や 周辺技術の刷新 技術基盤スタック刷新 開発プロセスとして、スキー マ駆動開発と自動生成ツール の活用 スキーマ駆動開発 1 2
25. スピードと品質向上の 取り組み 技術基盤として、Angular → React/Remix(ReactRouter)や 周辺技術の刷新 技術基盤スタック刷新 開発プロセスとして、スキー マ駆動開発と自動生成ツール の活用 スキーマ駆動開発 組織的なアプローチとして、 イネイブリングを最優先にす るチーム体制 イネイブリング 1 2 3
26. 技術基盤スタック刷新
27. 技術基盤スタック刷新 プログラミング言語・FW Typescript React Remix(React Router) Runtime Bun Build Vite Data Fetcher SWR UIコンポーネント / style shadcn/ui TailwindCSS Testing Bun test ReactTestingLibrary MockServiceWorker Linter / Formatter Biome APIスキーマ管理 OpenAPI Orval Hosting Cloudflare Pages CI Github Actions その他 zod react-hook-form
28. Remixによる規約 File-basedルーティングを使った一 貫性のあるディレクトリ構成 app/routes配下にページ単位で ディレクトリを作成 route.tsxがページコンポーネント に、その他のtsxがページ内での関 心毎のコンポーネントに分離 例えば、「/naruse-seller/inquiry」の場合
29. UIコンポーネント shadcn-ui + TailwindCSSを ベースとしたUIコンポーネン ト 自作のコンポーネントも共存 Headless UIを使用して最小限 のUIコンポーネントを揃えな がら漸進的な拡張を行う
30. テスト React Testing Libraryによる Integration test OrvalによりOpenAPI定義から自動 生成されたMock Service Workerの mock関数を使いAPIアクセスの mockを簡素化 ① APIリクエストのmock (Arrange) ② コンポーネントのrender (Arrange) ③ クリックイベント (Act) ④ 振る舞いの確認 (Assert) ① ② ③ ④
31. スキーマ駆動開発
32. OpenAPI定義からソースコー ドを自動生成することによ り、client/server間での不整 合を除去 API通信での型安全 1 ＋ zod msw swr + fetch API Orval OpenAPI
33. OpenAPI定義からソースコー ドを自動生成することによ り、client/server間での不整 合を除去 API通信での型安全 OrvalでAPIアクセスのカスタ ムフック、zodスキーマ、 テ スト用モックのmswを自動生 成する事で開発生産性を向上 自動生成による生産性 1 2 ＋ zod msw swr + fetch API Orval OpenAPI
34. OpenAPI定義からソースコー ドを自動生成することによ り、client/server間での不整 合を除去 API通信での型安全 OrvalでAPIアクセスのカスタ ムフック、zodスキーマ、 テ スト用モックのmswを自動生 成する事で開発生産性を向上 自動生成による生産性 OpenAPI定義の必須化により API設計の円滑化・品質担保 API設計と品質担保 1 2 3 ＋ zod msw swr + fetch API Orval OpenAPI
35. イネイブリング
36. イネイブリング 新しい技術基盤のインストー ルと共有を最優先に行うチー ムを構築 開発体制 1
37. イネイブリング 新しい技術基盤のインストー ルと共有を最優先に行うチー ムを構築 開発体制 Devcontainerによる開発環境 や、README、ADRなど各種 ドキュメントにより開発がス タートしやすい状態を維持 開発環境整備 1 2
38. イネイブリング 新しい技術基盤のインストー ルと共有を最優先に行うチー ムを構築 開発体制 Devcontainerによる開発環境 や、README、ADRなど各種 ドキュメントにより開発がス タートしやすい状態を維持 開発環境整備 共有会、ペアプロ、デイリー MTGへの参加など共に機能開 発を行うことで、実践ととも 知見を共有 新技術のインストール 1 2 3
39. フロントエンド課題例に対する変化
40. 品質とスピードを両立 するフロントエンド技 術基盤 Devcontainerや各種ドキュメ ントによるスタートしやすい 開発環境 OpenAPIを元に自動生成され たAPI呼び出し処理・zodス キーマ shadcn + TailwindCSSをベー スとしたUIコンポーネント Remix構成に従ったページ・機 能単位コンポーネント ページ単位 コンポーネ ント ページ単位 コンポーネ ント ページ単位 コンポーネ ント ペ ー ジ 毎 の コ ン ポ ー ネ ン ト 共 通 基 盤 共通の開発環境 UIコンポーネント API呼び出し処理
41. Before After Remixのルーティング + Co- Location構成、API呼び出し 処理の自動生成による一貫性 のある構造 アーキテクチャ shadcn/TailwindCSSのUIコン ポーネントベースに漸進的な UIコンポーネントの拡張 UIコンポーネント Bun test/RTL/MSWを使い、全 てのコンポーネントでテスト コードを管理 テストコード 1 2 3 非効率な APIデータ取得、不 必要に分離されたコンポーネ ント設計、一貫性の無いディ レクトリ設計など アーキテクチャ 内製のUIコンポーネントはス ピードと品質を向上するまで 昇華できていなく置き場所も バラバラ UIコンポーネント ほとんどない テストコード
42. 「急成長期の品質とスピードを両立する技 術基盤」を活用し 更なる急成長へ！
43. おわり