Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~

Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~ Qiita Conference 2023 Autumn @puku0x Noriyuki Shinpuku

登録ユーザー 10万人以上導入企業 1,000社以上

バッジ機能リニューアル！ https://findy-code.io/badges

Findyの開発生産性は？ 5 

直近1年間の転職サービス「 Findy」フロントエンドのリードタイムおよびプルリクエスト数

PR数 10件/日超え PRオープン後、即レビューその日の内にマージ直近1年間の転職サービス「 Findy」フロントエンドのリードタイムおよびプルリクエスト数

以前のFindyはどうだった？ 8 

2020年のFindy

レビューされるまで6日かかる PR数 1〜2個/日 1件の改修に1週間かかる 2020年のFindy

以前のFindyフロントエンド  • Railsモノリス上のReact • バージョンの古いツール・ライブラリ多数 • 型（Flow）はある • テストが無い •
見通しの悪い設計 11 

刷新しよう 12 

モノリス解体

モノリス解体  • バックエンド: Ruby on Rails • フロントエンド: Next.js •
「Findyがモノリス環境をやめて得られたユーザへの爆速価値提供」 https://note.com/ma3tk/n/na502374b6ad6 ◦ リリース回数: 9倍 ◦ マージ回数: 6倍 ◦ PRクローズまでのスピード : 35倍 ◦ GitHub上のアクティビティ数 : 4倍 14 

技術的負債の返済

開発基盤の刷新  • 依存ライブラリのバージョンアップ ◦ Dependabot導入 ◦ メンテされないライブラリの廃止 • モダンな環境に移行 ◦
TypeScript ◦ React 16.8+（現在はReact 18系） ◦ Nx、Jest、ESLint、Prettier ▪ nx migrateコマンドによる自動更新 16 

設計の刷新  • 依存の方向を揃える • Container/Presentational Componentベース ◦ データの流入元に合わせた三層構造 17  Page
Component Container Component Presentational Component URLパラメータの解釈 APIとの通信描画・フォーム制御 Custom Hook Custom Hook Custom Hook

テストの拡充  • 書けそうなところから着手 ◦ ロジックのユニットテスト ◦ コンポーネントのスナップショットテストなど ◦ 慣れてきたら結合テストを増やす
• Wallaby.jsなどの可視化ツールも有用 • テストを書く→テストを書きやすい設計の好循環 18 

現在のFindyフロントエンド      • Next.js v13 / React 18 +
TypeScript + GraphQL • Jest, Testing Library, Storybook, Chromatic, Autify • Prettier, ESLint, Stylelint, Commitlint • Nx + Nx Cloud • GitHub Actions 19  モダンな環境に刷新できた

めでたしめでたし 20 

完 21 

これだけではまだ終わらない 22 

新たな課題  • CIが遅い ◦ コード量が増えるとCI時間も増える • CIが遅いとどうなる？ ◦ レビューが放置される ◦
ブランチ生存期間が延びる ◦ コンフリクト多発 23  レビューは後回しでいいや

https://twitter.com/ayamakkie/status/1657279013260525568 時間が無い！

CIの高速化

CIの高速化  • 変更検知＋キャッシュ活用 ◦ その他、ジョブ並列化、仮想マシンのアップグレードなど 26  平均5分で完了毎月300時間以上のCI時間を削減 https://nx.app/ はいいぞ

2022年 2021年 2023年一人あたりの開発生産性が約３倍に ※2021年〜2023年までの転職サービス「Findy」フロントエンドの4月のデータ

まとめ  • Findyの開発生産性向上への取り組み ◦ モノリス解体 ◦ 技術的負債の返済 ◦ CIの高速化 •
日々の改善が大事 28  https://findy-team.io/ https://zenn.dev/starfish/books/6966f2e8450a70

ご清聴ありがとうございました @puku0x Noriyuki Shinpuku

Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~

Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~

puku0x

More Decks by puku0x

Other Decks in Technology

Featured

Transcript