グローバルBtoB SaaSにおける React開発の課題と実践

Transcript

1. © DressCode Inc . グローバルBtoB SaaSにおける 🌏 React開発の課題と実践 Dress Code株式会社 古庄 和也
2. © DressCode Inc . 1. 自己紹介 2. 会社 / プロダクト紹介 3. i18n対応とLocalization事例 4. 複雑な状態管理に対するアプローチ 5. まとめ Agenda
3. © DressCode Inc . 会社 / プロダクト紹介
4. • Dress Code株式会社 創業メンバー ◦ 1人目エンジニア × 技術広報 • DRESS CODE というワークフォースマネジメントプラットフォームを開発 ◦ グローバルに展開している BtoB向けのコンパウンドSaaS • 2月からReact Tokyoの運営メンバー • 趣味 ◦ ゴルフ / 競馬 / ポーカー ◦ 週末は浅草周辺に出没します ▪ (アミューズ浅草・ウインズ浅草サイコー) 自己紹介 ふるしょう(@k_furusho_)
5. © DressCode Inc . 会社 / プロダクト紹介
6. CONFIDENTIAL Copyright © DressCode Inc. All rights reserved. 14.1億円　
 資金調達を実施 
 Se Pre Seed&Seed Round 130+社
 が利用中　
 Se Number of companies Se Number of countries 4カ国
 で事業を展開 　
 Dress Code株式会社について 2024年9月　正式創業：2025年4月 21名
 東京都中央区築地2-1-4 銀座PREX East 8F 
 Date of establishment / 設立年月 
 Location / 所在地 
 Member / メンバー数 
 Deconstruct all the business operation, and enable everyone to perform intuitively. 
 Mission / ミッション 

7. CONFIDENTIAL Copyright © DressCode Inc. All rights reserved. DRESS CODEについて Deconstruct all the business operation, and enable everyone to perform intuitively. 
 Mission / ミッション 
 パートナー SIer/ITインフラ 通信キャリア リース/ファイナンス ベンダー/ディストリ ビューター リテール/ホールセー ル 士業/プロフェッショ ナルサービス SaaS提供 利用料支払 販売手数料/各種フィー 場所/機会の提供 商品/サービス支払 商品/サービス提供 マーケット(情報/機会)提供 マーケット利用 カスタマー 大企業 中堅企業 中小企業 個人事業主 BPO Professional Finance Lease Market Place 
 Equipment SIM Furniture Fleet Device HR Force RCT Force GA Force PJ Force CG Force IT Force
8. 技術スタック 言語 DB インフラ その他・ツール フレームワーク
9. 技術広報 カンファレンス・コミュニティ・テックブログに力を入れています！ https://zenn.dev/p/dress_code
10. © DressCode Inc . i18n対応とLocalization事例
11. • 現在4ヶ国語対応 • i18next, react-i18nextを採用 • Adapterパターンで設計 ◦ 直接依存をカプセル化 ◦ 初期化処理・カスタムローダーも隠蔽 • 型安全な翻訳キー運用 ◦ .tsファイルでObjectとして運用 ◦ NameSpace分割 ▪ zod, route, feature …etc ◦ コード補完性 i18n対応とLocalization事例
12. • 多言語・日付・通貨の表示に関するコアロジックを集約 • 初期リソースのバンドルと動的ローディング • 言語検出の優先規定 ◦ Server Session ◦ Client State ◦ Browser Locale • ほとんどが純粋関数で実装されており、 ◦ 複雑なfixtureのsetup不要 ◦ Vitestで高速にテスト可能 i18n対応とLocalization事例
13. ユーザーのLocaleに合わせた表示 • 住所や日付、通貨などの表示最適化 • StorybookでUIテストを管理 ◦ Storybook環境の言語切り替え ◦ user locale毎の表示 ◦ 入力値・props毎の表示 i18n対応とLocalization事例
14. i18n対応とLocalization事例 私の知らなかったLocaleの世界
15. 国際電話番号入力コンポーネント • 国コード・電話番号 • API単位の異なるin/outの形式に対応 • 非同期バリデーション ◦ カスタムバリデーションの拡張 i18n対応とLocalization事例 グローバル SaaS を支える React コンポーネント設計: 国際電話番号入力の実装例
16. © DressCode Inc . 複雑な状態管理に対するアプローチ
17. HR領域のBtoB SaaSにおける機能例 • 入社手続き > 正社員 > 対象者の割り当て(アカウント発行を含む場合有) • 入社に必要な情報の回収
18. 入社手続き > 正社員 > 対象者の割り当て • 考慮事項 ◦ 段階的な情報入力とステップ管理 ◦ 非同期処理とローディング状態の管理 ◦ APIエラーハンドリングとユーザーへのフィードバック ◦ 入力値のバリデーションとガード条件 ◦ 特定条件におけるエラーハンドリング(日付検証など) ◦ 状態のクリーンアップとリセット ◦ 複雑な選択ロジック ◦ 関連データのキャッシュ管理 ◦ …etc
19. 入社手続き > 正社員 > 対象者の割り当て
20. 入社手続き > 正社員 > 対象者の割り当て
21. • 状態遷移が明確に定義され、予期しない状態遷移を防止 • 開発効率の改善 ◦ 状態遷移ロジックをコンポーネントから分離できる ◦ テスタビリティが高く、安全に再利用可能なロジックの構築が可能 ◦ StateMachine × LLM テスト生成の相性が良い ◦ 仕様の認識齟齬防止にも繋がる ▪ 可視化したStateMachineをベースにPdMや関係者と仕様を擦り合わせやすい • 拡張性と保守性 ◦ 状態遷移が一元化できるため、追加要求が生じた場合にも品質保証しやすい ◦ ドメインモデリングとの相性も良いため、featruesベースの開発にも相性が良い XStateを用いたClient Stateの統制
22. 入社に必要な情報の回収
23. • 考慮事項 ◦ 地域×個社×対象者×パターン毎に動的なフォーム生成が必要 ◦ 標準フィールドとカスタムフィールドのサポート ◦ 柔軟なバリデーション機構 ◦ 解像的なフォーム構造 ◦ 動的コレクションとグループによる繰り返し入力 ◦ 多インスタンスの独立した中央集権的な状態管理 ◦ 外部システムとの連携を考慮した設計 ◦ …etc 入社に必要な情報の回収
24. • Zustandを全面的に採用 ◦ Zustand × React Context ◦ Slice, immer middleware • Storeによる中央集権と分離性を重要視 ◦ 多インスタンスフォームの状態分離 ◦ 状態とロジックを関心毎に分割 ◦ イミュータブルな状態更新・副作用の局所化 ◦ フォームの整合性を維持する複雑性の隠蔽 入社に必要な情報の回収 複雑な動的フォームを制覇する: Zustand Slice パターンによる状態管理戦略
25. XSTate • 特定のUIコンポーネントやfeatureにお いて、厳密かつ、状態遷移を管理したい ◦ 目安：useState が3つ以上 • ユーザーインタラクションや非同期処理 のフローを宣言的にモデル化したい • 処理の段階やモード管理など、「状態遷 移」自体が価値となる場合 ZustandとXStateの使用判断 Zustand • フォーム全体のデータ保持と同一画面内 からのアクセスが必要なケース • 比較的自由な構造のオブジェクトを扱 う、汎用的な状態管理 • 機能スコープ内での効率的なデータ共有 と、パフォーマンス劣後が懸念される機 能
26. © DressCode Inc . まとめ
27. • グローバルSaaSの開発は技術的な挑戦領域・観点が多い ◦ かつ、コンパウンドに発展していく場合は、プロダクト間のUI/UXを保つための抽 象化や、モジュールの分割が開発生産性にも寄与する • i18n対応やLocalizationなど、 ◦ 正解がわからない中で工夫を凝らしながら持続的な開発効率を追求 • Zustand,XStateはいいぞ〜 ◦ 状態の統制・関心の分離を追求しやすいと感じている まとめ
28. @gamonges 本日、Dress Code社のエンジニア2名も参加しています！ ぜひ、懇親会でお声がけいただけると嬉しいです！ (We are hiring!!!) 最後に https://herp.careers/v1/dresscode/7cVOfb7IIvyH @かわうそ
29. © DressCode Inc . End