Upgrade to Pro — share decks privately, control downloads, hide ads and more …

「業務システムSPAのフロントエンド技術選定」 の振り返り/furikaeri about o...

KAKEHASHI
February 04, 2024

「業務システムSPAのフロントエンド技術選定」 の振り返り/furikaeri about our SPA stack 2023

KAKEHASHI

February 04, 2024
Tweet

More Decks by KAKEHASHI

Other Decks in Business

Transcript

  1. 自己紹介 • Taku Hiramatsu(ひらたく) • X: @hirataq__ ◦ (最近アカウント作り直しました) •

    関西在住、娘👭 • 趣味はサッカー、山登り、コードを書くこと • ソフトウェアエンジニア • 経歴 ◦ 新卒で株式会社フリークアウト ◦ いくつかの新規事業に従事 ◦ 2020/6〜 株式会社カケハシ
  2. プロジェクトの背景 • 薬局向けの新規プロダクト開発 ◦ まだクローズドベータなので詳細は話せません󰢛 • 2023年3月にチームが発足、メンバーが揃ったのが4月 • メンバー ◦

    PdM ◦ EM/SM ◦ フルスタックエンジニア(バックエンド中心) ◦ フルスタックエンジニア(フロントエンド中心) ◦ デザイナ(週2)
  3. フレームワークを使う? そのときの心境(2023年5月) • Next.js勢いあっておもしろそう。乗っからないと置いていかれそう • ちょうどApp Routerが安定版になった。仕事でもさわれたらいいな • React Server

    Component(RSC)を見据えたらNext.jsにBetした方が良 いのかな • Remixもおもしろそう。社内で実績ないし、チャレンジするのもありかも • 今回のプロダクトはCSRのみで十分だよな • SSRは必須ではないし、もしやるならインフラどうしよ • CSRのみなら、Next.jsのStatic Exportもありかも どんな技術選定をしたか
  4. Vite + React の SPA構成 どんな技術選定をしたか • ルーティング ◦ React

    Router • APIクライアント ◦ urql • フォーム ◦ React Hook Form ◦ + zod • UIコンポーネント ◦ Mantine • モノレポ ◦ turborepo ◦ pnpm workspace • モニタリング ◦ Datadog • エラートラッキング ◦ Sentry • ホスティング ◦ Amplify Hosting
  5. Vite + React の SPA構成 どんな技術選定をしたか • コンポーネントカタログ ◦ Storybook

    • VRT(Visual Regression Test) ◦ reg-suit ◦ storycap ◦ Storybook play function • テストランナー ◦ Vitest • コンポーネントテスト ◦ React Testing Library • ブラウザテスト ◦ Playwright
  6. Q&A