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.8k
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
フロントエンドの技術的負債 みんなで学ぶ Lunch LT
puku0x
May 17, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
220
ファインディでのGitHub Actions活用事例
puku0x
9
3.3k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
430
Findyの開発生産性を上げるためにやったこと
puku0x
1
600
Angularコーディングスタイルガイドはいいぞ
puku0x
1
340
Nx CloudでCIを爆速にした話
puku0x
0
860
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
860
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.8k
Nxはいいぞ
puku0x
0
780
Other Decks in Technology
See All in Technology
QuickBooks®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
qbsupportinfo
0
110
MCPに潜むセキュリティリスクを考えてみる
milix_m
1
720
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
510
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
540
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
1
680
AI工学特論: MLOps・継続的評価
asei
10
1.5k
データ駆動経営の道しるべ:プロダクト開発指標の戦略的活用法
ham0215
2
230
MCPと認可まわりの話 / mcp_and_authorization
convto
1
130
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
130
室長の逆襲 :データ活用の陣地を増やすためのヒント
masatoshi0205
0
180
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
3
390
M365アカウント侵害時の初動対応
lhazy
7
4.5k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
Code Review Best Practice
trishagee
69
19k
Why Our Code Smells
bkeepers
PRO
337
57k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Six Lessons from altMBA
skipperchong
28
3.9k
Done Done
chrislema
184
16k
Music & Morning Musume
bryan
46
6.7k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Code Reviewing Like a Champion
maltzj
524
40k
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