グローバルなコンパウンドプロダクトのためのフロントエンドアーキテクチャ設計 #MOSHTech

グローバルなコンパウンドプロダクトのためのフロントエンドアーキテクチャ設計 2026/01/07 #MOSH Tech Meetup Dress Code株式会社 / もず（高橋
正幸） 1

CONFIDENTIAL | © Dress Code Inc . All rights reserved.
自己紹介 • 業務 ◦ HR領域のプロダクト開発エンジニア ◦ プロダクト全体のUIUX改善 • 経歴 ◦ 2021/04 ASP事業会社 ◦ 2022/04 株式会社HRBrain ◦ 2025/10 Dress Code株式会社 • 技術 ◦ ユーザー体験とか考えるのが好き ◦ フロント専任からフルスタックに挑戦中 • 趣味 ◦ コーヒー / スプラトゥーンもず(@mozu1206) 2

14.1億円　資金調達を実施 Pre Seed&Seed Round 180+社が利用中　 Number of companies Number of countries 5カ国で事業を展開　 Dress Code　会社概要 Company Name / 会社名 Dress Code 株式会社 2024年9月　正式創業：2025年4月 29名東京都中央区築地2-1-4 銀座PREX East 8F CEO / 代表取締役 Date of establishment / 設立年月 Location / 所在地江尻祐樹 Member / メンバー数 3

プロダクト 4

デジタル化に伴う社会課題 -「摩擦問題」 - SaaS/ツール乱立に伴い、システムの分断・業務のサイロ化が進む採用部門法務部門労務部門人事部門情報システム部門総務部門採用管理システム契約管理システム労務管理システム勤怠管理システム SaaS管理システムデバイス管理台帳採用関連データ契約関連データ労務関連データ勤怠関連データ SaaS関連データデバイス関連データツールの乱立で、使いこなせない/慣れるのまでに時間がかかるツール/部門間のアナログ連携が大変担当間/部門間の摩擦が増大している各業務担当者経営/管理部全体最適なSaaSを選定することが困難データが散在していて利用/活用できない連携/メンテのためのコスト(時間・お金)が膨大 ❌  分断  ❌  分断  ❌  分断  ❌  分断  ❌  分断  5

6

技術スタック 7

8 フロントエンドアーキテクチャの全体像

9 フロントエンドアーキテクチャの全体像・componentsに共通UI ・shadcn/UIをベースに設計・featuresに共通機能　・動的に変わるフォームの生成・libに翻訳ファイルなど　・6言語対応・routes配下はTanStack系のあれこれ

10 routes配下を少し深掘り・TanStack Router のルーティング規則に従い「-」で区切って分離　・分離する際は bulletproof-react の思想に則って設計・ページ特有のコンポーネントが必要な場合は「-components」で定義

11 bulletproof-react のfeaturesの設計思想 https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md

12 AIに「うちの設計なんて説明すると良い？」と聞いたら

13 bulletproof-react の設計原則＆ TanStack Query のベストプラクティスが掛け合わさった設計

14 結構ちゃんと設計されてる気がします

15 問題なんか起きなそうな気がしてきます

16 でもディレクトリ構成を良くみてください

17

18 components多いな

19 bulletproof-react のfeaturesの設計思想 https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md

20 このComponentsのあり方で課題があった

21 プロダクト全体を回遊していてあることに気付いた

22 UIが微妙に異なる Comboboxたち

23 これらのコンポーネントどこにいるんだ？

24 共通UI用のcomponentsにComboboxが乱立 components/Combobox/ ├── index.tsx ← 汎用（291行） ├── PersonSelectorCombobox/ ← 人選択用 ├── SoftwareSelectorCombobox/ ← ソフト選択用 ├── DepartmentCombobox/ ← 部署選択用 ├── NetworkCombobox/ ← ネットワーク選択用 ├── WorkerTypeCombobox/ ← 雇用形態選択用 └── ...

25 ここのcomponents 整備した方が良さそう

26

27 課題 20以上の機能で同じ操作性を提供したいが… 　・各機能が独自のビジネスロジックを持ち、表示したいものが異なる　・整ったデザインシステムを作るにも開発速度に整備が追いつかない

28 独自でコンポーネントを増やしても統一した体験を提供できる状態を目指す

29 そもそもなぜこの状態に陥ったか

30 共通UIコンポーネントの拡張ではなくヘッドレスUIを独自で拡張する実装

31 一旦Comboboxどうにかするか

32 Radix UIにはComboboxがなかったが Base UIというものにはあるらしい

33 Base UIとは・Radix UIを作ったチーム + αが、再び作り直したヘッドレスUI ・Comboboxを専用設計で提供・Radix UI + cmdk から Base UI に統一できそう・React 19対応、TypeScript完全対応・Radix UIとの互換性が意識されている・shadcnも最近Base UIに対応している https://x.com/shadcn/status/1999530415653113871

34 共通UIコンポーネントのアーキテクチャ整理＆ Radix UI + cmdkからBase UIへの乗り換え

35 独自コンポーネントを作りやすい3層アーキテクチャ 1. components/ui/combobox.tsx →Base UIをラップして、スタイルのみ整えたUI層 2. components/Combobox/BaseUICombobox/ →状態管理 + 共通ロジックを注入したComponents層 3. features/person/components/PersonSelectorCombobox/ →ビジネスロジック + カスタムフックを注入したFeatures層

36 独自コンポーネントを作りやすい3層アーキテクチャ 1. components/ui/combobox.tsx →Base UIをラップして、スタイルのみ整えたUI層 2. components/Combobox/BaseUICombobox/ →状態管理 + 共通ロジックを注入したComponents層 3. features/person/components/PersonSelectorCombobox/ →ビジネスロジック + カスタムフックを注入したFeatures層体験を設計ロジック注入

37 UI層とComponents層（イメージ）

38 Features層（イメージ）

39 Features層での再利用パターン・他の用途でも全部同じ構造・カスタムフックを書くだけで、コンポーネント自体の体験は同じ

40 UI提供とロジック注入の責務分離 components/ ├── ui/combobox.tsx └── Combobox/BaseUICombobox/index.tsx features/ ├── /software/components/SoftwareSelectorCombobox/ ├── /device/components/DeviceSelectorCombobox/ ├── /person/components/PersonSelectorCombobox/ └── ...

41

42 未来のデザインシステム

まとめ 43

44 まとめ・bulletproof-react の設計思想は関心事が分かれて管理しやすい・componentsが増えるので、管理は気を付けよう・UIとロジックを分離した3層に分けることで統一した体験を提供できる・featuresで独自コンポーネントを作っても体験に差が生まれにくい・共通UIのcomponentsにはロジックを侵食させない強い意志が大事・ui→component→featureの一方向の依存関係を厳守

今年の抱負 45

共通UIコンポーネントをデザインシステムに昇華させる 46

47 ”グローバル”に挑戦する仲間を募集しています！ • PdM（プロダクトマネージャー） • コミュニケーションデザイナー • デジタルプロダクトデザイナー • デザインエンジニア • プロダクトエンジニア • SRE・QA • etc… Dress Code イベント登壇情報まとめ

48 ご清聴ありがとうございました！！！

グローバルなコンパウンドプロダクトのためのフロントエンドアーキテクチャ設計 #MOSHTech

グローバルなコンパウンドプロダクトのためのフロントエンドアーキテクチャ設計 #MOSHTech

More Decks by Masayuki Takahashi

Other Decks in Technology

Featured

Transcript