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
430
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
https://increments.connpass.com/event/294310/
puku0x
October 25, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
320
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
220
ファインディでのGitHub Actions活用事例
puku0x
9
3.4k
Findyの開発生産性を上げるためにやったこと
puku0x
1
600
Angularコーディングスタイルガイドはいいぞ
puku0x
1
340
Nx CloudでCIを爆速にした話
puku0x
0
860
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
860
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.8k
Other Decks in Technology
See All in Technology
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
200
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
850
KubeCon + CloudNativeCon Japan 2025 Recap
donkomura
0
150
【2025 Japan AWS Jr. Champions Ignition】点から線、線から面へ〜僕たちが起こすコラボレーション・ムーブメント〜
amixedcolor
1
120
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
layerx
PRO
1
830
LLMで構造化出力の成功率をグンと上げる方法
keisuketakiguchi
0
200
リリース2ヶ月で収益化した話
kent_code3
1
160
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
160
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
4
480
20250728 MCP, A2A and Multi-Agents in the future
yoshidashingo
1
210
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
250
Claude Codeから我々が学ぶべきこと
s4yuba
6
1.6k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A Tale of Four Properties
chriscoyier
160
23k
Scaling GitHub
holman
461
140k
What's in a price? How to price your products and services
michaelherold
246
12k
The Invisible Side of Design
smashingmag
301
51k
Rails Girls Zürich Keynote
gr2m
95
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Code Reviewing Like a Champion
maltzj
524
40k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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