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.1k
急成長期の品質とスピードを両立するフロントエンド技術基盤
2024/12/04 開催イベント「スタートアップ5社集合!開発スピードと品質における各社の取り組み」のLT資料です。
Shodai Suzuki
December 04, 2024
Tweet
Share
More Decks by Shodai Suzuki
See All by Shodai Suzuki
MOSHでのフロントエンドリアーキテクチャの選定技術の紹介
soarteclab
0
950
Webアプリ開発におけるRDBMS基礎
soarteclab
0
150
ClassiのRuby/Railsバージョンアップ始動物語
soarteclab
1
970
Other Decks in Programming
See All in Programming
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
420
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
350
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
2
1.8k
iOS開発におけるCopilot For XcodeとCode Completion / copilot for xcode
fuyan777
1
1.4k
Amazon Nova Reelの可能性
hideg
0
160
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
920
命名をリントする
chiroruxx
1
620
Alba: Why, How and What's So Interesting
okuramasafumi
0
160
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
920
KubeCon NA 2024の全DB関連セッションを紹介
nnaka2992
0
110
.NETでOBS Studio操作してみたけど…… / Operating OBS Studio by .NET
skasweb
0
120
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
26
5.9k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Designing for humans not robots
tammielis
250
25k
Rails Girls Zürich Keynote
gr2m
94
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How to train your dragon (web standard)
notwaldorf
89
5.8k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Why Our Code Smells
bkeepers
PRO
335
57k
Optimising Largest Contentful Paint
csswizardry
33
3k
BBQ
matthewcrist
85
9.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Making Projects Easy
brettharned
116
6k
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コンポーネント ほとんどない テストコード
「急成長期の品質とスピードを両立する技 術基盤」を活用し 更なる急成長へ!
おわり