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
730
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
【オフライン@福岡】俺たちのフロントエンド”大”自慢大会
puku0x
April 14, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
380
Findyの開発生産性を上げるためにやったこと
puku0x
1
470
Angularコーディングスタイルガイドはいいぞ
puku0x
1
180
Nx CloudでCIを爆速にした話
puku0x
0
590
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.6k
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.1k
Nxはいいぞ
puku0x
0
670
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
290
Scully: Angular SSG
puku0x
0
170
Other Decks in Technology
See All in Technology
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
170
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
160
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
160
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
20
10k
Azure AI ことはじめ
tsubakimoto_s
0
130
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
190
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
How to name files
jennybc
67
96k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Producing Creativity
orderedlist
PRO
340
39k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
Documentation Writing (for coders)
carmenintech
63
4.2k
Designing for humans not robots
tammielis
247
25k
Why Our Code Smells
bkeepers
PRO
332
56k
Embracing the Ebb and Flow
colly
81
4.3k
Writing Fast Ruby
sferik
623
60k
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