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のフロントエンド設計刷新を通して得られた技術的負債との向き合い方
Search
puku0x
May 17, 2023
Technology
1
1.7k
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
フロントエンドの技術的負債 みんなで学ぶ Lunch LT
puku0x
May 17, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
200
ファインディでのGitHub Actions活用事例
puku0x
9
3.3k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
420
Findyの開発生産性を上げるためにやったこと
puku0x
1
590
Angularコーディングスタイルガイドはいいぞ
puku0x
1
310
Nx CloudでCIを爆速にした話
puku0x
0
840
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
830
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.7k
Nxはいいぞ
puku0x
0
760
Other Decks in Technology
See All in Technology
会社員しながら本を書いてきた知見の共有
sat
PRO
3
690
JNation 2025 - Quarkus for Spring Developers
edeandrea
PRO
0
110
テストを実施する前に考えるべきテストの話 / Thinking About Testing Before You Test
nihonbuson
PRO
14
2k
Redmineの意外と知らない便利機能 (Redmine 6.0対応版)
vividtone
0
1.2k
KMP導⼊において、マネジャーとして考えた事
sansantech
PRO
1
210
Javaアプリケーションの配布とパッケージング / Distribution and packaging of Java applications
hogelog
1
150
Slackひと声でブログ校正!Claudeレビュー自動化編
yusukeshimizu
3
180
What's Next in OpenShift Q2 CY2025
redhatlivestreaming
1
810
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
kaminashi
1
150
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
takatama
4
1.5k
SmartHRの複数のチームにおけるMCPサーバーの活用事例と課題
yukisnow1823
2
1.2k
オープンソースのハードウェアのコンテストに参加している話
iotengineer22
0
560
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
Designing Experiences People Love
moore
142
24k
Documentation Writing (for coders)
carmenintech
71
4.8k
Agile that works and the tools we love
rasmusluckow
329
21k
The Cult of Friendly URLs
andyhume
78
6.4k
Faster Mobile Websites
deanohume
307
31k
Embracing the Ebb and Flow
colly
85
4.7k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Building an army of robots
kneath
306
45k
Transcript
© 2023 Findy Inc. Findyのフロントエンド設計刷新 を通して得られた 技術的負債との向き合い方 Noriyuki Shinpuku @puku0x
© 2023 Findy Inc.
© 2023 Findy Inc. Findyのフロントエンド • Next.js + TypeScript +
GraphQL • Jest, Storybook, Chromatic, Autify • Prettier, ESLint, Stylelint, Commitlint • Nx(モノレポ管理ツール)導入 • CI/CD完備
© 2023 Findy Inc. Findyのフロントエンドは 最初から充実している訳ではなかった
© 2023 Findy Inc. 以前の環境 • Ruby on Rails +
Next.js/React 16 ※当時はモノリス解体→Next.js化プロジェクトの後期 • バージョンの古いツール・ライブラリ多数 • 型(Flow)はある • テストは無い • 設計...?? もちろん Class Component
© 2023 Findy Inc. 当時の状況
© 2023 Findy Inc. 刷新しよう
© 2023 Findy Inc. 環境の刷新 • Flow → TypeScript •
ライブラリのバージョンアップ ◦ Class Component → Function Component移行 • 開発基盤をNxに移行 ◦ nx migrateコマンドによる自動更新 開発者が価値提供に注力できる環境に
© 2023 Findy Inc. • 依存の方向を揃える(大事!) • Container/Presentational Component ベースの三層構造
設計の改善 Page Component Container Component Presentational Component URLパラメータのパース APIとの通信 描画・フォーム制御 Custom Hook Custom Hook Custom Hook
© 2023 Findy Inc. テストの拡充 • 書けそうなところから着手 ◦ ロジックのユニットテスト ◦
コンポーネントのスナップショットテスト • Wallaby.jsで視覚化 カバレッジ100% 守るテストを書く ユニットテストに慣れたら 結合テストを増やす
© 2023 Findy Inc. 刷新できた!
© 2023 Findy Inc. 完
© 2023 Findy Inc. そんなことはない
© 2023 Findy Inc. 将来の技術的負債の発生を抑えるには • 日頃から改善&整備 ◦ テストを書く ◦
PR粒度を小さく ◦ 定期的なアップデート • 啓蒙活動 3ヶ月かかる大規模リファクタリングをなぜ実行に踏み切れたのか? https://note.com/hamchance/n/n4a074eb0193c
© 2023 Findy Inc. https://twitter.com/ayamakkie/status/1657279013260525568
© 2023 Findy Inc. 時間を作る • CIを “可能な限り” 高速化する ◦
変更検知+リモートキャッシュ https://nx.app/ 平均5分でCI完了 ※最速で1分未満 毎月300時間以上の削減
© 2023 Findy Inc. 改善の効果 2022年4月 2021年4月 2023年4月 一人あたりの開発生産性が約3倍に
© 2023 Findy Inc. 技術的負債の返済は1日にしてならず
© 2023 Findy Inc. どんなに小さくても良い 日々改善していきましょう
© 2023 Findy Inc. ご清聴ありがとうございました Noriyuki Shinpuku @puku0x