Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

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

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

Shodai Suzuki

December 04, 2024
Tweet

More Decks by Shodai Suzuki

Other Decks in Programming

Transcript

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

    品質とスピード これまで手をつけられなかっ た熟成された技術課題に直面 技術基盤の改善が急務 熟成された技術課題!!
  2. 技術基盤スタック刷新 プログラミング言語・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
  3. テスト React Testing Libraryによる Integration test OrvalによりOpenAPI定義から自動 生成されたMock Service Workerの

    mock関数を使いAPIアクセスの mockを簡素化 ① APIリクエストのmock (Arrange) ② コンポーネントのrender (Arrange) ③ クリックイベント (Act) ④ 振る舞いの確認 (Assert) ① ② ③ ④
  4. 品質とスピードを両立 するフロントエンド技 術基盤 Devcontainerや各種ドキュメ ントによるスタートしやすい 開発環境 OpenAPIを元に自動生成され たAPI呼び出し処理・zodス キーマ shadcn

    + TailwindCSSをベー スとしたUIコンポーネント Remix構成に従ったページ・機 能単位コンポーネント ページ単位 コンポーネ ント ページ単位 コンポーネ ント ページ単位 コンポーネ ント ペ ー ジ 毎 の コ ン ポ ー ネ ン ト 共 通 基 盤 共通の開発環境 UIコンポーネント API呼び出し処理
  5. Before After Remixのルーティング + Co- Location構成、API呼び出し 処理の自動生成による一貫性 のある構造 アーキテクチャ shadcn/TailwindCSSのUIコン

    ポーネントベースに漸進的な UIコンポーネントの拡張 UIコンポーネント Bun test/RTL/MSWを使い、全 てのコンポーネントでテスト コードを管理 テストコード 1 2 3 非効率な APIデータ取得、不 必要に分離されたコンポーネ ント設計、一貫性の無いディ レクトリ設計など アーキテクチャ 内製のUIコンポーネントはス ピードと品質を向上するまで 昇華できていなく置き場所も バラバラ UIコンポーネント ほとんどない テストコード