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
April 14, 2023
Technology
0
760
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
【オフライン@福岡】俺たちのフロントエンド”大”自慢大会
puku0x
April 14, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
1
140
ファインディでのGitHub Actions活用事例
puku0x
9
2.6k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
400
Findyの開発生産性を上げるためにやったこと
puku0x
1
530
Angularコーディングスタイルガイドはいいぞ
puku0x
1
230
Nx CloudでCIを爆速にした話
puku0x
0
700
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.4k
Nxはいいぞ
puku0x
0
710
Other Decks in Technology
See All in Technology
The Role of Developer Relations in AI Product Success.
giftojabu1
0
130
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
1k
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
500
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
180
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
1.3k
Platform Engineering for Software Developers and Architects
syntasso
1
520
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
8
870
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
110
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
330
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
300
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
370
Featured
See All Featured
KATA
mclloyd
29
14k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Designing for humans not robots
tammielis
250
25k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
A Tale of Four Properties
chriscoyier
156
23k
Transcript
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜 俺たちのフロントエンド”大”自慢大会 @puku0x Noriyuki Shinpuku
@puku0x 2
@puku0x Findyのフロントエンド • React/Next.js + TypeScript + GraphQL • Jest,
Storybook, Chromatic, Autify • ESLint, Prettier, Stylelint, Commitlint • Nxによるモノレポ管理 • CI/CD完備 3
@puku0x 4 Findyのフロントエンドは 最初から充実している訳ではなかった
@puku0x 以前の環境 • Ruby on Rails + Next.js/React 16(Class Component)
◦ バージョンの古いツール・ライブラリ多数 ※入社当時はモノリス解体→Next.js化プロジェクトの後期 • Flowはある、テストは無い • 設計...?? 5
@puku0x 6
@puku0x 7 やっぱつれぇわ
@puku0x 8 開発体験を最高に
@puku0x 9 モダン シンプル 高 速 TL;DR
@puku0x モダンな環境に刷新 • Flow → TypeScript • Class Component →
Function Component • 開発基盤をNx(https://nx.dev/)に移行 ◦ ESLint, Prettier, Jest等が標準で利用可 ◦ 設定はツールに任せ、開発者は価値提供に注力 10
@puku0x シンプルな設計 • 依存の方向を揃える(大事!) • Container/Presentational Component ベース 11 Page
Component Container Component Presentational Component URLパラメータのパース APIとの通信 描画・フォーム制御 Custom Hook Custom Hook Custom Hook
@puku0x テスト • テストが書けそうなところから着手 ◦ ロジックのユニットテスト中心 ◦ コンポーネントは最低限スナップショットテスト ※コンポーネント or
ロジックどちらかで担保 ※慣れてきたら結合テストを増やしましょう 12
@puku0x 高速なCI • Nx + Nx Cloud の活用 ◦ 影響範囲のみ実行
▪ CI 10分→5分 ◦ 300時間/月 削減 13
@puku0x 開発生産性の変化 • 一人当たりのPR数が向上 14 設計テコ入れ モノリス解体
@puku0x まとめ • モダン・シンプル・高速 ◦ ツールやライブラリを絞る&統一すると楽 ◦ 最初は小さく始めましょう • Findyはいいぞ
15
@puku0x Thank you! @puku0x Noriyuki Shinpuku