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

by Shodai Suzuki

Slide 1

Slide 1 text

Shodai Suzuki @SoartecL スタートアップ5社集合！開発スピードと品質における各社の取り組み 2024.12.04 急成長期の品質とスピードを両立するフロントエンド技術基盤

Slide 2

Slide 2 text

鈴木翔大 X @SoartecL ソフトウェアエンジニア Productivityチーム( 技術基盤チーム) 趣味 OSS Orvalメンテナダイビング

Slide 3

Slide 3 text

今日話す事・話さない事 MOSHで直面してる課題課題に対してのフロントエンドの取り組み話すこと技術課題の全体像バックエンドの取り組み技術選定の詳細な背景や説明話さないこと

Slide 4

Slide 4 text

急成長期の事業

Slide 5

Slide 5 text

事業成長2年連続YoY3倍 🚀

Slide 6

Slide 6 text

直近2年事業成長2年連続YoY3倍 🚀

Slide 7

Slide 7 text

急成長期に直面している課題

Slide 8

Slide 8 text

急成長期に直面している課題 PMFまでは辿り着いた 1 直近2年でPMFまでたどり着くことができた

Slide 9

Slide 9 text

急成長期に直面している課題 PMFまでは辿り着いたまだまだ探索と安定性の両面が必要品質とスピード 1 2 直近2年でPMFまでたどり着くことができた

Slide 10

Slide 10 text

急成長期に直面している課題 PMFまでは辿り着いたまだまだ探索と安定性の両面が必要品質とスピードこれまで手をつけられなかった熟成された技術課題に直面技術基盤の改善が急務 1 2 3 直近2年でPMFまでたどり着くことができた

Slide 11

Slide 11 text

急成長期に直面している課題 PMFまでは辿り着いた 1 2 3 直近2年でPMFまでたどり着くことができたまだまだ探索と安定性の両面が必要品質とスピードこれまで手をつけられなかった熟成された技術課題に直面技術基盤の改善が急務熟成された技術課題！！

Slide 12

Slide 12 text

急成長期に直面している課題 PMFまでは辿り着いたまだまだ探索と安定性の両面が必要品質とスピードこれまで手をつけられなかった熟成された技術課題に直面技術基盤の改善が急務 1 2 3 直近2年でPMFまでたどり着くことができた技術基盤の改善が急務！！

Slide 13

Slide 13 text

熟成された技術課題こっち

Slide 14

Slide 14 text

その中でも今日はフロントエンド技術基盤について話します 🚀

Slide 15

Slide 15 text

フロントエンドの課題例

Slide 16

Slide 16 text

フロントエンド課題例非効率な APIデータ取得、不必要に分離されたコンポーネント設計、一貫性の無いディレクトリ設計などアーキテクチャ 1

Slide 17

Slide 17 text

フロントエンド課題例非効率な APIデータ取得、不必要に分離されたコンポーネント設計、一貫性の無いディレクトリ設計などアーキテクチャ内製のUIコンポーネントはスピードと品質を向上するまで昇華できていなく置き場所もバラバラ UIコンポーネント 1 2

Slide 18

Slide 18 text

フロントエンド課題例非効率な APIデータ取得、不必要に分離されたコンポーネント設計、一貫性の無いディレクトリ設計などアーキテクチャ内製のUIコンポーネントはスピードと品質を向上するまで昇華できていなく置き場所もバラバラ UIコンポーネントほとんどないテストコード 1 2 3

Slide 19

Slide 19 text

具体例不要なNXプロジェクトの分離 ①APIアクセス ②共通UIコンポーネント ③ページ毎の実装が分離されているので機能開発で常に複数パッケージの参照が必要レイヤーの過度な分割によるボイラーテンプレート量産呼び出しを中継するだけの関数群があるファイルページ描画前に必要なデータを全てロードする制約のため描画時間が長いページ単位の関心であるにも関わらず共通化してしまったUI構築用の関数データ定義を元にformのinput要素を返却する共通関数その他早すぎる最適化により共通化され変更が難しくなった共通関数が多数

Slide 20

Slide 20 text

Slide 21

Slide 21 text

スピードと品質向上の取り組みとして、様々な観点から検討を重ねゼロベースで技術選定を行うことを決断しました 😇

Slide 22

Slide 22 text

スピードと品質向上の取り組み

Slide 23

Slide 23 text

スピードと品質向上の取り組み技術基盤として、Angular → React/Remix(ReactRouter)や周辺技術の刷新技術基盤スタック刷新 1

Slide 24

Slide 24 text

スピードと品質向上の取り組み技術基盤として、Angular → React/Remix(ReactRouter)や周辺技術の刷新技術基盤スタック刷新開発プロセスとして、スキーマ駆動開発と自動生成ツールの活用スキーマ駆動開発 1 2

Slide 25

Slide 25 text

スピードと品質向上の取り組み技術基盤として、Angular → React/Remix(ReactRouter)や周辺技術の刷新技術基盤スタック刷新開発プロセスとして、スキーマ駆動開発と自動生成ツールの活用スキーマ駆動開発組織的なアプローチとして、イネイブリングを最優先にするチーム体制イネイブリング 1 2 3

Slide 26

Slide 26 text

技術基盤スタック刷新

Slide 27

Slide 27 text

技術基盤スタック刷新プログラミング言語・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

Slide 28

Slide 28 text

Remixによる規約 File-basedルーティングを使った一貫性のあるディレクトリ構成 app/routes配下にページ単位でディレクトリを作成 route.tsxがページコンポーネントに、その他のtsxがページ内での関心毎のコンポーネントに分離例えば、「/naruse-seller/inquiry」の場合

Slide 29

Slide 29 text

UIコンポーネント shadcn-ui + TailwindCSSをベースとしたUIコンポーネント自作のコンポーネントも共存 Headless UIを使用して最小限のUIコンポーネントを揃えながら漸進的な拡張を行う

Slide 30

Slide 30 text

テスト React Testing Libraryによる Integration test OrvalによりOpenAPI定義から自動生成されたMock Service Workerの mock関数を使いAPIアクセスの mockを簡素化 ① APIリクエストのmock (Arrange) ② コンポーネントのrender (Arrange) ③ クリックイベント (Act) ④ 振る舞いの確認 (Assert) ① ② ③ ④

Slide 31

Slide 31 text

スキーマ駆動開発

Slide 32

Slide 32 text

OpenAPI定義からソースコードを自動生成することにより、client/server間での不整合を除去 API通信での型安全 1 ＋ zod msw swr + fetch API Orval OpenAPI

Slide 33

Slide 33 text

OpenAPI定義からソースコードを自動生成することにより、client/server間での不整合を除去 API通信での型安全 OrvalでAPIアクセスのカスタムフック、zodスキーマ、テスト用モックのmswを自動生成する事で開発生産性を向上自動生成による生産性 1 2 ＋ zod msw swr + fetch API Orval OpenAPI

Slide 34

Slide 34 text

OpenAPI定義からソースコードを自動生成することにより、client/server間での不整合を除去 API通信での型安全 OrvalでAPIアクセスのカスタムフック、zodスキーマ、テスト用モックのmswを自動生成する事で開発生産性を向上自動生成による生産性 OpenAPI定義の必須化により API設計の円滑化・品質担保 API設計と品質担保 1 2 3 ＋ zod msw swr + fetch API Orval OpenAPI

Slide 35

Slide 35 text

イネイブリング

Slide 36

Slide 36 text

イネイブリング新しい技術基盤のインストールと共有を最優先に行うチームを構築開発体制 1

Slide 37

Slide 37 text

イネイブリング新しい技術基盤のインストールと共有を最優先に行うチームを構築開発体制 Devcontainerによる開発環境や、README、ADRなど各種ドキュメントにより開発がスタートしやすい状態を維持開発環境整備 1 2

Slide 38

Slide 38 text

イネイブリング新しい技術基盤のインストールと共有を最優先に行うチームを構築開発体制 Devcontainerによる開発環境や、README、ADRなど各種ドキュメントにより開発がスタートしやすい状態を維持開発環境整備共有会、ペアプロ、デイリー MTGへの参加など共に機能開発を行うことで、実践ととも知見を共有新技術のインストール 1 2 3

Slide 39

Slide 39 text

フロントエンド課題例に対する変化

Slide 40

Slide 40 text

品質とスピードを両立するフロントエンド技術基盤 Devcontainerや各種ドキュメントによるスタートしやすい開発環境 OpenAPIを元に自動生成されたAPI呼び出し処理・zodスキーマ shadcn + TailwindCSSをベースとしたUIコンポーネント Remix構成に従ったページ・機能単位コンポーネントページ単位コンポーネントページ単位コンポーネントページ単位コンポーネントページ毎のコンポーネント共通基盤共通の開発環境 UIコンポーネント API呼び出し処理

Slide 41

Slide 41 text

Before After Remixのルーティング + Co- Location構成、API呼び出し処理の自動生成による一貫性のある構造アーキテクチャ shadcn/TailwindCSSのUIコンポーネントベースに漸進的な UIコンポーネントの拡張 UIコンポーネント Bun test/RTL/MSWを使い、全てのコンポーネントでテストコードを管理テストコード 1 2 3 非効率な APIデータ取得、不必要に分離されたコンポーネント設計、一貫性の無いディレクトリ設計などアーキテクチャ内製のUIコンポーネントはスピードと品質を向上するまで昇華できていなく置き場所もバラバラ UIコンポーネントほとんどないテストコード

Slide 42

Slide 42 text

「急成長期の品質とスピードを両立する技術基盤」を活用し更なる急成長へ！

Slide 43

Slide 43 text

おわり