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
ファインディにおけるフロントエンド技術選定の歴史
Search
puku0x
October 07, 2024
Technology
2
220
ファインディにおけるフロントエンド技術選定の歴史
React×GraphQL特集 フロントエンド技術選定の裏側と、直面する技術的課題
puku0x
October 07, 2024
Tweet
Share
More Decks by puku0x
See All by puku0x
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
36
ファインディでのGitHub Actions活用事例
puku0x
9
3.4k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
430
Findyの開発生産性を上げるためにやったこと
puku0x
1
600
Angularコーディングスタイルガイドはいいぞ
puku0x
1
340
Nx CloudでCIを爆速にした話
puku0x
0
860
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
860
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.8k
Other Decks in Technology
See All in Technology
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
1
130
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
140
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
5
2.1k
私とAWSとの関わりの歩み~意志あるところに道は開けるかも?~
nagisa53
1
150
人と生成AIの協調意思決定/Co‑decision making by people and generative AI
moriyuya
0
280
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
2
210
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
400
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
230
AWS表彰プログラムとキャリアについて
naoki_0531
1
150
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
230
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
masayoshi
1
330
SAE J1939シミュレーション環境構築
daikiokazaki
1
200
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
KATA
mclloyd
31
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
RailsConf 2023
tenderlove
30
1.2k
Balancing Empowerment & Direction
lara
1
520
Automating Front-end Workflow
addyosmani
1370
200k
Bash Introduction
62gerente
613
210k
How to Ace a Technical Interview
jacobian
278
23k
The Language of Interfaces
destraynor
158
25k
Side Projects
sachag
455
43k
Transcript
ファインディにおける フロントエンド技術選定の歴史 1 2024/10/08 React×GraphQL特集 フロントエンド技術選定の裏側と、直⾯する技術的課題 ファインディ株式会社 フロントエンド テックリード 新福
宜侑 @puku0x
2 今年で7歳!
3 Findyのフロントエンド • Next.js + TypeScript + GraphQL • Jest、Testing
Library、Playwright(検証中) • Prettier、ESLint、Stylelint、Commitlint • Storybook、Style Dictionary、Figma • Nx(モノレポ管理ツール) • GitHub Actions
以前のフロントエンド構成 4
5 以前(〜2020年)のフロントエンド構成 • Railsモノリス上のReact ◦ React 16 ◦ バージョンの古いツール‧ライブラリ多数 ◦
クラスコンポーネント ◦ 型(Flow)はある、テストは無い ◦ 設計...? • モノリスのデメリット ◦ 軽微な修正でも⻑時間のCI待ちが発⽣ → 開発スピード低下
6 モノリス解体
7 解体後のフロントエンドはNext.jsを採⽤
8 Next.jsの採⽤理由 • 既存のReactの資産を活かしたい • SSRしたい • ビルド周りを任せたい • 最適化周りも任せたい
モノリス解体完了! (〜2021年5⽉) 9
GitHub上のアクティビティ数: 4倍 リリース回数: 9.1倍 PRクローズまでの速度: 35倍 10 Findyがモノリス環境をやめて得られたユーザへの爆速価値提供 https://note.com/ma3tk/n/na502374b6ad6
11 モノリス解体後のフロントエンドの課題 • バージョンの古いツール‧ライブラリ多数 • 型(Flow)はある、テストは無い
12 依存を減らす • 不要なパッケージの削除 • styled-components + classnames → Emotionに統⼀
• Redux関連 → @reduxjs/toolkit → に統⼀
13 開発基盤にNxを採⽤
14 Nxの採⽤理由 • 他のツールの設定を任せたい ◦ ESLintやJestなどがすぐに使える ◦ nx migrate による⾃動更新
• 今後の⼤規模化に備えたい ◦ nx affected による変更検知 ◦ Nx Cloudのリモートキャッシュ
15 Flow → TypeScript に移⾏ Flowの型注釈を削除 ↓ TypeScript(allowJs: true) ↓
TypeScript(strict: true)
16 TypeScriptの採⽤理由 • 型が欲しい • 移⾏のしやすさ • エディタとの相性 • 情報の豊富さ
開発基盤の刷新で フロントエンドが最⾼になっ... 17
...てない! 18
19 モノリス解体後のREST APIの課題 • そのページに使うデータ全部盛り ◦ マスタデータ ◦ ユーザーデータ パフォーマンスの懸念
• レスポンスが⼀定でない ◦ 同じ名称で型が全く異なる場合も ◦ TypeScript導⼊時は⼿動で型付け → つらい
20 REST API → GraphQLに移⾏ 社内ツールにGraphQL導⼊‧検証 ↓ プロダクトを⼀部GraphQL化 ↓ プロダクトを全GraphQL化
↓ 他のプロダクトに展開
21 GraphQLの採⽤理由 • 効率的なデータ通信 • スキーマ駆動 • graphql-codegenを含むエコシステム
22 フロントエンド共通の技術スタックたち ※SSRの要件の有無により使い分けています ※
23 今後のFindyフロントエンド • App Router(React Server Components) ◦ 新しいコンポーネント設計 ◦
ランタイム CSS-in-JS からの脱却 EmotionからCSS Modulesへの移⾏!React Server ComponentsのCSS対応 https://tech.findy.co.jp/entry/2024/09/09/090000
24 技術選定を振り返る • ユーザーのため ◦ 最速で価値を届けられるか? ◦ 良いユーザー体験が実現できるか? • ⾃分達のため
◦ チームに受け⼊れられるか? ◦ 良い開発者体験が期待できるか? • プロダクトのため ◦ 持続的な開発ができるか?
25 まとめ • 何のための技術選定か ◦ プロダクトとプロダクトに関わる⼈達のため • 重要なマインド ◦ 「当時はそれが正解だった」
• ⼩さくはじめる
技術選定に歴史あり 26
リスペクトを忘れずに 27
28 ツール選定といえば...
ツール選定のお供に 29 https://findy-tools.io/
We’re hiring! https://careers.findy.co.jp/ 30