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
870
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
【オフライン@福岡】俺たちのフロントエンド”大”自慢大会
puku0x
April 14, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
900
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
220
ファインディでのGitHub Actions活用事例
puku0x
9
3.4k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
430
Findyの開発生産性を上げるためにやったこと
puku0x
1
600
Angularコーディングスタイルガイドはいいぞ
puku0x
1
350
Nx CloudでCIを爆速にした話
puku0x
0
870
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.8k
Other Decks in Technology
See All in Technology
Amazon Qで2Dゲームを作成してみた
siromi
0
180
サイボウズフロントエンドの横断活動から考える AI時代にできること
mugi_uno
3
1.2k
EKS Pod Identity における推移的な session tags
z63d
1
170
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
18
52k
いま、あらためて考えてみるアカウント管理 with IaC / Account management with IaC
kohbis
2
450
.NET開発者のためのAzureの概要
tomokusaba
0
110
AWSの最新サービスでAIエージェント構築に楽しく入門しよう
minorun365
PRO
9
500
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
150
夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio
hachi_eiji
1
270
2025新卒研修・Webアプリケーションセキュリティ #弁護士ドットコム
bengo4com
3
9.6k
我々は雰囲気で仕事をしている / How can we do vibe coding as well
naospon
1
130
o11yツールを乗り換えた話
tak0x00
2
1.7k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The Invisible Side of Design
smashingmag
301
51k
Designing for Performance
lara
610
69k
Speed Design
sergeychernyshev
32
1.1k
Code Review Best Practice
trishagee
69
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
470
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Automating Front-end Workflow
addyosmani
1370
200k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
890
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Adopting Sorbet at Scale
ufuk
77
9.5k
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