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
810
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
【オフライン@福岡】俺たちのフロントエンド”大”自慢大会
puku0x
April 14, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
180
ファインディでのGitHub Actions活用事例
puku0x
9
3.1k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
420
Findyの開発生産性を上げるためにやったこと
puku0x
1
570
Angularコーディングスタイルガイドはいいぞ
puku0x
1
280
Nx CloudでCIを爆速にした話
puku0x
0
800
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.7k
Nxはいいぞ
puku0x
0
750
Other Decks in Technology
See All in Technology
3/26 クラウド食堂LT #2 GenU案件を通して学んだ教訓 登壇資料
ymae
1
210
サーバシステムを無理なくコンテナ移行する際に伝えたい4つのポイント/Container_Happy_Migration_Method
ozawa
1
100
ひまプロプレゼンツ 「エンジニア格付けチェック 〜春の公開収録スペシャル〜」
kaaaichi
0
150
バクラクでのSystem Risk Records導入による変化と改善の取り組み/Changes and Improvement Initiatives Resulting from the Implementation of System Risk Records
taddy_919
0
220
SaaSプロダクト開発におけるバグの早期検出のためのAcceptance testの取り組み
kworkdev
PRO
0
460
Security response for open source ecosystems
frasertweedale
0
100
モンテカルロ木探索のパフォーマンスを予測する Kaggleコンペ解説 〜生成AIによる未知のゲーム生成〜
rist
4
1.1k
OCI見積もり入門セミナー
oracle4engineer
PRO
0
120
Redefine_Possible
upsider_tech
0
280
Amazon Q Developer 他⽣成AIと⽐較してみた
takano0131
1
120
コンソールで学ぶ!AWS CodePipelineの機能とオプション
umekou
2
120
Symfony in 2025: Scaling to 0
fabpot
2
210
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Embracing the Ebb and Flow
colly
85
4.6k
A Tale of Four Properties
chriscoyier
158
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Fireside Chat
paigeccino
37
3.3k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
We Have a Design System, Now What?
morganepeng
51
7.5k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
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