Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
ファインディにおける フロントエンド技術選定の歴史 1 2024/10/08 React×GraphQL特集 フロントエンド技術選定の裏側と、直⾯する技術的課題 ファインディ株式会社 フロントエンド テックリード 新福 宜侑 @puku0x
Slide 2
Slide 2 text
2 今年で7歳!
Slide 3
Slide 3 text
3 Findyのフロントエンド ● Next.js + TypeScript + GraphQL ● Jest、Testing Library、Playwright(検証中) ● Prettier、ESLint、Stylelint、Commitlint ● Storybook、Style Dictionary、Figma ● Nx(モノレポ管理ツール) ● GitHub Actions
Slide 4
Slide 4 text
以前のフロントエンド構成 4
Slide 5
Slide 5 text
5 以前(〜2020年)のフロントエンド構成 ● Railsモノリス上のReact ○ React 16 ○ バージョンの古いツール‧ライブラリ多数 ○ クラスコンポーネント ○ 型(Flow)はある、テストは無い ○ 設計...? ● モノリスのデメリット ○ 軽微な修正でも⻑時間のCI待ちが発⽣ → 開発スピード低下
Slide 6
Slide 6 text
6 モノリス解体
Slide 7
Slide 7 text
7 解体後のフロントエンドはNext.jsを採⽤
Slide 8
Slide 8 text
8 Next.jsの採⽤理由 ● 既存のReactの資産を活かしたい ● SSRしたい ● ビルド周りを任せたい ● 最適化周りも任せたい
Slide 9
Slide 9 text
モノリス解体完了! (〜2021年5⽉) 9
Slide 10
Slide 10 text
GitHub上のアクティビティ数: 4倍 リリース回数: 9.1倍 PRクローズまでの速度: 35倍 10 Findyがモノリス環境をやめて得られたユーザへの爆速価値提供 https://note.com/ma3tk/n/na502374b6ad6
Slide 11
Slide 11 text
11 モノリス解体後のフロントエンドの課題 ● バージョンの古いツール‧ライブラリ多数 ● 型(Flow)はある、テストは無い
Slide 12
Slide 12 text
12 依存を減らす ● 不要なパッケージの削除 ● styled-components + classnames → Emotionに統⼀ ● Redux関連 → @reduxjs/toolkit → に統⼀
Slide 13
Slide 13 text
13 開発基盤にNxを採⽤
Slide 14
Slide 14 text
14 Nxの採⽤理由 ● 他のツールの設定を任せたい ○ ESLintやJestなどがすぐに使える ○ nx migrate による⾃動更新 ● 今後の⼤規模化に備えたい ○ nx affected による変更検知 ○ Nx Cloudのリモートキャッシュ
Slide 15
Slide 15 text
15 Flow → TypeScript に移⾏ Flowの型注釈を削除 ↓ TypeScript(allowJs: true) ↓ TypeScript(strict: true)
Slide 16
Slide 16 text
16 TypeScriptの採⽤理由 ● 型が欲しい ● 移⾏のしやすさ ● エディタとの相性 ● 情報の豊富さ
Slide 17
Slide 17 text
開発基盤の刷新で フロントエンドが最⾼になっ... 17
Slide 18
Slide 18 text
...てない! 18
Slide 19
Slide 19 text
19 モノリス解体後のREST APIの課題 ● そのページに使うデータ全部盛り ○ マスタデータ ○ ユーザーデータ パフォーマンスの懸念 ● レスポンスが⼀定でない ○ 同じ名称で型が全く異なる場合も ○ TypeScript導⼊時は⼿動で型付け → つらい
Slide 20
Slide 20 text
20 REST API → GraphQLに移⾏ 社内ツールにGraphQL導⼊‧検証 ↓ プロダクトを⼀部GraphQL化 ↓ プロダクトを全GraphQL化 ↓ 他のプロダクトに展開
Slide 21
Slide 21 text
21 GraphQLの採⽤理由 ● 効率的なデータ通信 ● スキーマ駆動 ● graphql-codegenを含むエコシステム
Slide 22
Slide 22 text
22 フロントエンド共通の技術スタックたち ※SSRの要件の有無により使い分けています ※
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
24 技術選定を振り返る ● ユーザーのため ○ 最速で価値を届けられるか? ○ 良いユーザー体験が実現できるか? ● ⾃分達のため ○ チームに受け⼊れられるか? ○ 良い開発者体験が期待できるか? ● プロダクトのため ○ 持続的な開発ができるか?
Slide 25
Slide 25 text
25 まとめ ● 何のための技術選定か ○ プロダクトとプロダクトに関わる⼈達のため ● 重要なマインド ○ 「当時はそれが正解だった」 ● ⼩さくはじめる
Slide 26
Slide 26 text
技術選定に歴史あり 26
Slide 27
Slide 27 text
リスペクトを忘れずに 27
Slide 28
Slide 28 text
28 ツール選定といえば...
Slide 29
Slide 29 text
ツール選定のお供に 29 https://findy-tools.io/
Slide 30
Slide 30 text
We’re hiring! https://careers.findy.co.jp/ 30