Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
急成長期の品質とスピードを両立するフロントエンド技術基盤
Search
Shodai Suzuki
December 04, 2024
Programming
0
780
急成長期の品質とスピードを両立するフロントエンド技術基盤
2024/12/04 開催イベント「スタートアップ5社集合!開発スピードと品質における各社の取り組み」のLT資料です。
Shodai Suzuki
December 04, 2024
Tweet
Share
More Decks by Shodai Suzuki
See All by Shodai Suzuki
20240711_MOSHでのフロントエンドリアーキテクチャの選定技術の紹介
soarteclab
0
760
Webアプリ開発におけるRDBMS基礎
soarteclab
0
140
ClassiのRuby/Railsバージョンアップ始動物語
soarteclab
1
940
Other Decks in Programming
See All in Programming
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
0
3.1k
flutterkaigi_2024.pdf
kyoheig3
0
470
Recoilを剥がしている話
kirik
1
3.1k
デザインパターンで理解するLLMエージェントの作り方 / How to develop an LLM agent using agentic design patterns
rkaga
11
3.4k
macOS なしで iOS アプリを開発する(※ただし xxx に限る)
mitsuharu
1
170
PipeCDの歩き方
kuro_kurorrr
4
140
Thoughts and experiences on Rust and TypeScript
unvalley
2
220
社内活動の取り組み紹介 ~ スリーシェイクでこんな取り組みしてます ~
bells17
0
390
Serverless苦闘史
mosh_inc
0
150
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
130
型のインスタンス化は非常に深く、無限である可能性があります。
kimitashoichi
0
140
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
4
600
Featured
See All Featured
Designing Experiences People Love
moore
138
23k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Raft: Consensus for Rubyists
vanstee
136
6.7k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Making Projects Easy
brettharned
116
5.9k
Optimizing for Happiness
mojombo
376
70k
Embracing the Ebb and Flow
colly
84
4.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Into the Great Unknown - MozCon
thekraken
33
1.5k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Documentation Writing (for coders)
carmenintech
65
4.5k
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コンポーネント ほとんどない テストコード
「急成長期の品質とスピードを両立する技 術基盤」を活用し 更なる急成長へ!
おわり