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.5k
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
フロントエンドの技術的負債 みんなで学ぶ Lunch LT
puku0x
May 17, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
350
Findyの開発生産性を上げるためにやったこと
puku0x
1
430
Angularコーディングスタイルガイドはいいぞ
puku0x
1
140
Nx CloudでCIを爆速にした話
puku0x
0
520
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
700
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
1.8k
Nxはいいぞ
puku0x
0
640
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
250
Scully: Angular SSG
puku0x
0
160
Other Decks in Technology
See All in Technology
MapLibreとAmazon Location Service
dayjournal
1
160
ServiceNow Knowledge Learning Rise up
manarobot
0
210
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
440
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
270
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
2.8k
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.6k
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
1
410
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
110
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
3
910
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
390
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
0
270
Featured
See All Featured
WebSockets: Embracing the real-time Web
robhawkes
59
7k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Why Our Code Smells
bkeepers
PRO
331
56k
What's new in Ruby 2.0
geeforr
337
31k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
GitHub's CSS Performance
jonrohan
1025
450k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
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