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

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

@puku0x 2

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

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

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

@puku0x 6

@puku0x 7 やっぱつれぇわ

@puku0x 8 開発体験を最高に

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

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

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

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

@puku0x 高速なCI • Nx + Nx Cloud の活用 ◦ 影響範囲のみ実行
▪ CI 10分→5分 ◦ 300時間/月削減 13

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

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

@puku0x Thank you! @puku0x Noriyuki Shinpuku

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

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

puku0x

More Decks by puku0x

Other Decks in Technology

Featured

Transcript