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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@puku0x 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

@puku0x 6

Slide 7

Slide 7 text

@puku0x 7 やっぱつれぇわ

Slide 8

Slide 8 text

@puku0x 8 開発体験を最高に

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

@puku0x Thank you! @puku0x Noriyuki Shinpuku