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. 最高の開発体験を目指して
    〜Findyのフロントエンド設計刷新〜
    俺たちのフロントエンド”大”自慢大会
    @puku0x
    Noriyuki Shinpuku

    View full-size slide

  2. @puku0x
    Findyのフロントエンド
    ● React/Next.js + TypeScript + GraphQL
    ● Jest, Storybook, Chromatic, Autify
    ● ESLint, Prettier, Stylelint, Commitlint
    ● Nxによるモノレポ管理
    ● CI/CD完備
    3

    View full-size slide

  3. @puku0x 4
    Findyのフロントエンドは
    最初から充実している訳ではなかった

    View full-size slide

  4. @puku0x
    以前の環境
    ● Ruby on Rails + Next.js/React 16(Class Component)
    ○ バージョンの古いツール・ライブラリ多数
    ※入社当時はモノリス解体→Next.js化プロジェクトの後期
    ● Flowはある、テストは無い
    ● 設計...??
    5

    View full-size slide

  5. @puku0x 7
    やっぱつれぇわ

    View full-size slide

  6. @puku0x 8
    開発体験を最高に

    View full-size slide

  7. @puku0x 9
    モダン シンプル 高 速
    TL;DR

    View full-size slide

  8. @puku0x
    モダンな環境に刷新
    ● Flow → TypeScript
    ● Class Component → Function Component
    ● 開発基盤をNx(https://nx.dev/)に移行
    ○ ESLint, Prettier, Jest等が標準で利用可
    ○ 設定はツールに任せ、開発者は価値提供に注力
    10

    View full-size slide

  9. @puku0x
    シンプルな設計
    ● 依存の方向を揃える(大事!)
    ● Container/Presentational Component ベース
    11
    Page
    Component
    Container
    Component
    Presentational
    Component
    URLパラメータのパース APIとの通信 描画・フォーム制御
    Custom Hook Custom Hook Custom Hook

    View full-size slide

  10. @puku0x
    テスト
    ● テストが書けそうなところから着手
    ○ ロジックのユニットテスト中心
    ○ コンポーネントは最低限スナップショットテスト
    ※コンポーネント or ロジックどちらかで担保
    ※慣れてきたら結合テストを増やしましょう
    12

    View full-size slide

  11. @puku0x
    高速なCI
    ● Nx + Nx Cloud の活用
    ○ 影響範囲のみ実行
    ■ CI 10分→5分
    ○ 300時間/月 削減
    13

    View full-size slide

  12. @puku0x
    開発生産性の変化
    ● 一人当たりのPR数が向上
    14
    設計テコ入れ
    モノリス解体

    View full-size slide

  13. @puku0x
    まとめ
    ● モダン・シンプル・高速
    ○ ツールやライブラリを絞る&統一すると楽
    ○ 最初は小さく始めましょう
    ● Findyはいいぞ
    15

    View full-size slide

  14. @puku0x
    Thank you!
    @puku0x
    Noriyuki Shinpuku

    View full-size slide