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

最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜

puku0x
April 14, 2023

最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜

【オフライン@福岡】俺たちのフロントエンド”大”自慢大会

puku0x

April 14, 2023
Tweet

More Decks by puku0x

Other Decks in Technology

Transcript

  1. @puku0x Findyのフロントエンド • React/Next.js + TypeScript + GraphQL • Jest,

    Storybook, Chromatic, Autify • ESLint, Prettier, Stylelint, Commitlint • Nxによるモノレポ管理 • CI/CD完備 3
  2. @puku0x 以前の環境 • Ruby on Rails + Next.js/React 16(Class Component)

    ◦ バージョンの古いツール・ライブラリ多数 ※入社当時はモノリス解体→Next.js化プロジェクトの後期 • Flowはある、テストは無い • 設計...?? 5
  3. @puku0x モダンな環境に刷新 • Flow → TypeScript • Class Component →

    Function Component • 開発基盤をNx(https://nx.dev/)に移行 ◦ ESLint, Prettier, Jest等が標準で利用可 ◦ 設定はツールに任せ、開発者は価値提供に注力 10
  4. @puku0x シンプルな設計 • 依存の方向を揃える(大事!) • Container/Presentational Component ベース 11 Page

    Component Container Component Presentational Component URLパラメータのパース APIとの通信 描画・フォーム制御 Custom Hook Custom Hook Custom Hook