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
Shodai Suzuki
December 04, 2024
Programming
0
1.5k
急成長期の品質とスピードを両立するフロントエンド技術基盤
2024/12/04 開催イベント「スタートアップ5社集合!開発スピードと品質における各社の取り組み」のLT資料です。
Shodai Suzuki
December 04, 2024
Tweet
Share
More Decks by Shodai Suzuki
See All by Shodai Suzuki
リアーキテクチャとAI活用で実現する急成長プロダクトの開発生産性向上
soarteclab
3
12k
チーム再始動から6ヶ月でデプロイ数を9倍にするまでの取り組み
soarteclab
4
370
400超Lambda構成アプリケーションの漸進的リアーキテクチャ
soarteclab
3
900
MOSHでのフロントエンドリアーキテクチャの選定技術の紹介
soarteclab
0
1.2k
Webアプリ開発におけるRDBMS基礎
soarteclab
0
210
ClassiのRuby/Railsバージョンアップ始動物語
soarteclab
1
1.1k
Other Decks in Programming
See All in Programming
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
350
AIのメモリー
watany
12
1.2k
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
Workers を定期実行する方法は一つじゃない
rokuosan
0
140
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7.3k
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
250
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
920
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
120
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
1
910
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
kiroでゲームを作ってみた
iriikeita
0
140
Featured
See All Featured
KATA
mclloyd
31
14k
Faster Mobile Websites
deanohume
308
31k
Building an army of robots
kneath
306
45k
Site-Speed That Sticks
csswizardry
10
750
How to Ace a Technical Interview
jacobian
278
23k
A better future with KSS
kneath
238
17k
BBQ
matthewcrist
89
9.8k
Building Adaptive Systems
keathley
43
2.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
How STYLIGHT went responsive
nonsquared
100
5.7k
Practical Orchestrator
shlominoach
190
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Transcript
Shodai Suzuki @SoartecL スタートアップ5社集合!開発スピードと品質における各社の取り組み 2024.12.04 急成長期の品質とス ピードを両立するフロ ントエンド技術基盤
鈴木翔大 X @SoartecL ソフトウェアエンジニア Productivityチーム( 技術基 盤チーム) 趣味 OSS Orvalメンテナ
ダイビング
今日話す事・話さない 事 MOSHで直面してる課題 課題に対してのフロント エンドの取り組み 話すこと 技術課題の全体像 バックエンドの取り組み 技術選定の詳細な背景や 説明
話さないこと
急成長期の事業
事業成長2年連続YoY3倍 🚀
直近2年 事業成長2年連続YoY3倍 🚀
急成長期に直面している課題
急成長期に 直面している課題 PMFまでは辿り着いた 1 直近2年でPMFまでたどり着 くことができた
急成長期に 直面している課題 PMFまでは辿り着いた まだまだ探索と安定性の両面 が必要 品質とスピード 1 2 直近2年でPMFまでたどり着 くことができた
急成長期に 直面している課題 PMFまでは辿り着いた まだまだ探索と安定性の両面 が必要 品質とスピード これまで手をつけられなかっ た熟成された技術課題に直面 技術基盤の改善が急務 1
2 3 直近2年でPMFまでたどり着 くことができた
急成長期に 直面している課題 PMFまでは辿り着いた 1 2 3 直近2年でPMFまでたどり着 くことができた まだまだ探索と安定性の両面 が必要
品質とスピード これまで手をつけられなかっ た熟成された技術課題に直面 技術基盤の改善が急務 熟成された技術課題!!
急成長期に 直面している課題 PMFまでは辿り着いた まだまだ探索と安定性の両面 が必要 品質とスピード これまで手をつけられなかっ た熟成された技術課題に直面 技術基盤の改善が急務 1
2 3 直近2年でPMFまでたどり着 くことができた 技術基盤の改善が急務!!
熟成された技術課題 こっち
その中でも今日はフロントエン ド技術基盤について話します 🚀
フロントエンドの課題例
フロントエンド課題例 非効率な APIデータ取得、不 必要に分離されたコンポーネ ント設計、一貫性の無いディ レクトリ設計など アーキテクチャ 1
フロントエンド課題例 非効率な APIデータ取得、不 必要に分離されたコンポーネ ント設計、一貫性の無いディ レクトリ設計など アーキテクチャ 内製のUIコンポーネントはス ピードと品質を向上するまで 昇華できていなく置き場所も
バラバラ UIコンポーネント 1 2
フロントエンド課題例 非効率な APIデータ取得、不 必要に分離されたコンポーネ ント設計、一貫性の無いディ レクトリ設計など アーキテクチャ 内製のUIコンポーネントはス ピードと品質を向上するまで 昇華できていなく置き場所も
バラバラ UIコンポーネント ほとんどない テストコード 1 2 3
具体例 不要なNXプロジェクトの分離 ①APIアクセス ②共通UIコンポーネント ③ページ毎の実装 が分離されているので機能開発で常に複数パッケージの参照が必要 レイヤーの過度な分割によるボイラーテンプレート量産 呼び出しを中継するだけの関数群があるファイル ページ描画前に必要なデータを全てロードする制約のため描画時間が長い ページ単位の関心であるにも関わらず共通化してしまったUI構築用の関数
データ定義を元にformのinput要素を返却する共通関数 その他早すぎる最適化により共通化され変更が難しくなった共通関数が多数
具体例 不要なNXプロジェクトの分離 ①APIアクセス ②共通UIコンポーネント ③ページ毎の実装 が分離されているので機能開発で常に複数パッケージの参照が必要 レイヤーの過度な分割によるボイラーテンプレート量産 呼び出しを中継するだけの関数群があるファイル ページ描画前に必要なデータを全てロードする制約のため描画時間が長い ページ単位の関心であるにも関わらず共通化してしまったUI構築用の関数
データ定義を元にformのinput要素を返却する共通関数 その他早すぎる最適化により共通化され変更が難しくなった共通関数が多数 🤮
スピードと品質向上の取り組み として、様々な観点から検討を 重ねゼロベースで技術選定を行 うことを決断しました 😇
スピードと品質向上の取り組み
スピードと品質向上の 取り組み 技術基盤として、Angular → React/Remix(ReactRouter)や 周辺技術の刷新 技術基盤スタック刷新 1
スピードと品質向上の 取り組み 技術基盤として、Angular → React/Remix(ReactRouter)や 周辺技術の刷新 技術基盤スタック刷新 開発プロセスとして、スキー マ駆動開発と自動生成ツール の活用
スキーマ駆動開発 1 2
スピードと品質向上の 取り組み 技術基盤として、Angular → React/Remix(ReactRouter)や 周辺技術の刷新 技術基盤スタック刷新 開発プロセスとして、スキー マ駆動開発と自動生成ツール の活用
スキーマ駆動開発 組織的なアプローチとして、 イネイブリングを最優先にす るチーム体制 イネイブリング 1 2 3
技術基盤スタック刷新
技術基盤スタック刷新 プログラミング言語・FW Typescript React Remix(React Router) Runtime Bun Build Vite
Data Fetcher SWR UIコンポーネント / style shadcn/ui TailwindCSS Testing Bun test ReactTestingLibrary MockServiceWorker Linter / Formatter Biome APIスキーマ管理 OpenAPI Orval Hosting Cloudflare Pages CI Github Actions その他 zod react-hook-form
Remixによる規約 File-basedルーティングを使った一 貫性のあるディレクトリ構成 app/routes配下にページ単位で ディレクトリを作成 route.tsxがページコンポーネント に、その他のtsxがページ内での関 心毎のコンポーネントに分離 例えば、「/naruse-seller/inquiry」の場合
UIコンポーネント shadcn-ui + TailwindCSSを ベースとしたUIコンポーネン ト 自作のコンポーネントも共存 Headless UIを使用して最小限 のUIコンポーネントを揃えな
がら漸進的な拡張を行う
テスト React Testing Libraryによる Integration test OrvalによりOpenAPI定義から自動 生成されたMock Service Workerの
mock関数を使いAPIアクセスの mockを簡素化 ① APIリクエストのmock (Arrange) ② コンポーネントのrender (Arrange) ③ クリックイベント (Act) ④ 振る舞いの確認 (Assert) ① ② ③ ④
スキーマ駆動開発
OpenAPI定義からソースコー ドを自動生成することによ り、client/server間での不整 合を除去 API通信での型安全 1 + zod msw swr
+ fetch API Orval OpenAPI
OpenAPI定義からソースコー ドを自動生成することによ り、client/server間での不整 合を除去 API通信での型安全 OrvalでAPIアクセスのカスタ ムフック、zodスキーマ、 テ スト用モックのmswを自動生 成する事で開発生産性を向上
自動生成による生産性 1 2 + zod msw swr + fetch API Orval OpenAPI
OpenAPI定義からソースコー ドを自動生成することによ り、client/server間での不整 合を除去 API通信での型安全 OrvalでAPIアクセスのカスタ ムフック、zodスキーマ、 テ スト用モックのmswを自動生 成する事で開発生産性を向上
自動生成による生産性 OpenAPI定義の必須化により API設計の円滑化・品質担保 API設計と品質担保 1 2 3 + zod msw swr + fetch API Orval OpenAPI
イネイブリング
イネイブリング 新しい技術基盤のインストー ルと共有を最優先に行うチー ムを構築 開発体制 1
イネイブリング 新しい技術基盤のインストー ルと共有を最優先に行うチー ムを構築 開発体制 Devcontainerによる開発環境 や、README、ADRなど各種 ドキュメントにより開発がス タートしやすい状態を維持 開発環境整備
1 2
イネイブリング 新しい技術基盤のインストー ルと共有を最優先に行うチー ムを構築 開発体制 Devcontainerによる開発環境 や、README、ADRなど各種 ドキュメントにより開発がス タートしやすい状態を維持 開発環境整備
共有会、ペアプロ、デイリー MTGへの参加など共に機能開 発を行うことで、実践ととも 知見を共有 新技術のインストール 1 2 3
フロントエンド課題例に対する変化
品質とスピードを両立 するフロントエンド技 術基盤 Devcontainerや各種ドキュメ ントによるスタートしやすい 開発環境 OpenAPIを元に自動生成され たAPI呼び出し処理・zodス キーマ shadcn
+ TailwindCSSをベー スとしたUIコンポーネント Remix構成に従ったページ・機 能単位コンポーネント ページ単位 コンポーネ ント ページ単位 コンポーネ ント ページ単位 コンポーネ ント ペ ー ジ 毎 の コ ン ポ ー ネ ン ト 共 通 基 盤 共通の開発環境 UIコンポーネント API呼び出し処理
Before After Remixのルーティング + Co- Location構成、API呼び出し 処理の自動生成による一貫性 のある構造 アーキテクチャ shadcn/TailwindCSSのUIコン
ポーネントベースに漸進的な UIコンポーネントの拡張 UIコンポーネント Bun test/RTL/MSWを使い、全 てのコンポーネントでテスト コードを管理 テストコード 1 2 3 非効率な APIデータ取得、不 必要に分離されたコンポーネ ント設計、一貫性の無いディ レクトリ設計など アーキテクチャ 内製のUIコンポーネントはス ピードと品質を向上するまで 昇華できていなく置き場所も バラバラ UIコンポーネント ほとんどない テストコード
「急成長期の品質とスピードを両立する技 術基盤」を活用し 更なる急成長へ!
おわり