Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
Search
puku0x
October 25, 2023
Technology
0
440
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
https://increments.connpass.com/event/294310/
puku0x
October 25, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
1.2k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.3k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
230
ファインディでのGitHub Actions活用事例
puku0x
9
3.5k
Findyの開発生産性を上げるためにやったこと
puku0x
1
610
Angularコーディングスタイルガイドはいいぞ
puku0x
1
360
Nx CloudでCIを爆速にした話
puku0x
0
890
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
880
Other Decks in Technology
See All in Technology
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
140
What is BigQuery?
aizack_harks
0
130
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
910
実装で解き明かす並行処理の歴史
zozotech
PRO
1
310
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.4k
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
280
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
0
110
Findy Team+のSOC2取得までの道のり
rvirus0817
0
320
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
4
580
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
6
2.2k
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
420
stupid jj tricks
indirect
0
7.9k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
A Modern Web Designer's Workflow
chriscoyier
697
190k
Fireside Chat
paigeccino
40
3.7k
Building Adaptive Systems
keathley
43
2.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Practical Orchestrator
shlominoach
190
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Transcript
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~ Qiita Conference 2023 Autumn @puku0x Noriyuki Shinpuku
登録ユーザー 10万人以上 導入企業 1,000社以上
バッジ機能リニューアル! https://findy-code.io/badges
4
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年 一人あたりの開発生産性が約3倍に ※2021年〜2023年までの転職サービス「Findy」フロントエンドの4月のデータ
まとめ • Findyの開発生産性向上への取り組み ◦ モノリス解体 ◦ 技術的負債の返済 ◦ CIの高速化 •
日々の改善が大事 28 https://findy-team.io/ https://zenn.dev/starfish/books/6966f2e8450a70
ご清聴ありがとうございました @puku0x Noriyuki Shinpuku