グローバルBtoB SaaSにおける React開発の課題と実践
by
k-furusho
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
© DressCode Inc . グローバルBtoB SaaSにおける 🌏 React開発の課題と実践 Dress Code株式会社 古庄 和也
Slide 2
Slide 2 text
© DressCode Inc . 1. 自己紹介 2. 会社 / プロダクト紹介 3. i18n対応とLocalization事例 4. 複雑な状態管理に対するアプローチ 5. まとめ Agenda
Slide 3
Slide 3 text
© DressCode Inc . 会社 / プロダクト紹介
Slide 4
Slide 4 text
● Dress Code株式会社 創業メンバー ○ 1人目エンジニア × 技術広報 ● DRESS CODE というワークフォースマネジメントプラットフォームを開発 ○ グローバルに展開している BtoB向けのコンパウンドSaaS ● 2月からReact Tokyoの運営メンバー ● 趣味 ○ ゴルフ / 競馬 / ポーカー ○ 週末は浅草周辺に出没します ■ (アミューズ浅草・ウインズ浅草サイコー) 自己紹介 ふるしょう(@k_furusho_)
Slide 5
Slide 5 text
© DressCode Inc . 会社 / プロダクト紹介
Slide 6
Slide 6 text
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 / ミッション
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
技術スタック 言語 DB インフラ その他・ツール フレームワーク
Slide 9
Slide 9 text
技術広報 カンファレンス・コミュニティ・テックブログに力を入れています! https://zenn.dev/p/dress_code
Slide 10
Slide 10 text
© DressCode Inc . i18n対応とLocalization事例
Slide 11
Slide 11 text
● 現在4ヶ国語対応 ● i18next, react-i18nextを採用 ● Adapterパターンで設計 ○ 直接依存をカプセル化 ○ 初期化処理・カスタムローダーも隠蔽 ● 型安全な翻訳キー運用 ○ .tsファイルでObjectとして運用 ○ NameSpace分割 ■ zod, route, feature …etc ○ コード補完性 i18n対応とLocalization事例
Slide 12
Slide 12 text
● 多言語・日付・通貨の表示に関するコアロジックを集約 ● 初期リソースのバンドルと動的ローディング ● 言語検出の優先規定 ○ Server Session ○ Client State ○ Browser Locale ● ほとんどが純粋関数で実装されており、 ○ 複雑なfixtureのsetup不要 ○ Vitestで高速にテスト可能 i18n対応とLocalization事例
Slide 13
Slide 13 text
ユーザーのLocaleに合わせた表示 ● 住所や日付、通貨などの表示最適化 ● StorybookでUIテストを管理 ○ Storybook環境の言語切り替え ○ user locale毎の表示 ○ 入力値・props毎の表示 i18n対応とLocalization事例
Slide 14
Slide 14 text
i18n対応とLocalization事例 私の知らなかったLocaleの世界
Slide 15
Slide 15 text
国際電話番号入力コンポーネント ● 国コード・電話番号 ● API単位の異なるin/outの形式に対応 ● 非同期バリデーション ○ カスタムバリデーションの拡張 i18n対応とLocalization事例 グローバル SaaS を支える React コンポーネント設計: 国際電話番号入力の実装例
Slide 16
Slide 16 text
© DressCode Inc . 複雑な状態管理に対するアプローチ
Slide 17
Slide 17 text
HR領域のBtoB SaaSにおける機能例 ● 入社手続き > 正社員 > 対象者の割り当て(アカウント発行を含む場合有) ● 入社に必要な情報の回収
Slide 18
Slide 18 text
入社手続き > 正社員 > 対象者の割り当て ● 考慮事項 ○ 段階的な情報入力とステップ管理 ○ 非同期処理とローディング状態の管理 ○ APIエラーハンドリングとユーザーへのフィードバック ○ 入力値のバリデーションとガード条件 ○ 特定条件におけるエラーハンドリング(日付検証など) ○ 状態のクリーンアップとリセット ○ 複雑な選択ロジック ○ 関連データのキャッシュ管理 ○ …etc
Slide 19
Slide 19 text
入社手続き > 正社員 > 対象者の割り当て
Slide 20
Slide 20 text
入社手続き > 正社員 > 対象者の割り当て
Slide 21
Slide 21 text
● 状態遷移が明確に定義され、予期しない状態遷移を防止 ● 開発効率の改善 ○ 状態遷移ロジックをコンポーネントから分離できる ○ テスタビリティが高く、安全に再利用可能なロジックの構築が可能 ○ StateMachine × LLM テスト生成の相性が良い ○ 仕様の認識齟齬防止にも繋がる ■ 可視化したStateMachineをベースにPdMや関係者と仕様を擦り合わせやすい ● 拡張性と保守性 ○ 状態遷移が一元化できるため、追加要求が生じた場合にも品質保証しやすい ○ ドメインモデリングとの相性も良いため、featruesベースの開発にも相性が良い XStateを用いたClient Stateの統制
Slide 22
Slide 22 text
入社に必要な情報の回収
Slide 23
Slide 23 text
● 考慮事項 ○ 地域×個社×対象者×パターン毎に動的なフォーム生成が必要 ○ 標準フィールドとカスタムフィールドのサポート ○ 柔軟なバリデーション機構 ○ 解像的なフォーム構造 ○ 動的コレクションとグループによる繰り返し入力 ○ 多インスタンスの独立した中央集権的な状態管理 ○ 外部システムとの連携を考慮した設計 ○ …etc 入社に必要な情報の回収
Slide 24
Slide 24 text
● Zustandを全面的に採用 ○ Zustand × React Context ○ Slice, immer middleware ● Storeによる中央集権と分離性を重要視 ○ 多インスタンスフォームの状態分離 ○ 状態とロジックを関心毎に分割 ○ イミュータブルな状態更新・副作用の局所化 ○ フォームの整合性を維持する複雑性の隠蔽 入社に必要な情報の回収 複雑な動的フォームを制覇する: Zustand Slice パターンによる状態管理戦略
Slide 25
Slide 25 text
XSTate ● 特定のUIコンポーネントやfeatureにお いて、厳密かつ、状態遷移を管理したい ○ 目安:useState が3つ以上 ● ユーザーインタラクションや非同期処理 のフローを宣言的にモデル化したい ● 処理の段階やモード管理など、「状態遷 移」自体が価値となる場合 ZustandとXStateの使用判断 Zustand ● フォーム全体のデータ保持と同一画面内 からのアクセスが必要なケース ● 比較的自由な構造のオブジェクトを扱 う、汎用的な状態管理 ● 機能スコープ内での効率的なデータ共有 と、パフォーマンス劣後が懸念される機 能
Slide 26
Slide 26 text
© DressCode Inc . まとめ
Slide 27
Slide 27 text
● グローバルSaaSの開発は技術的な挑戦領域・観点が多い ○ かつ、コンパウンドに発展していく場合は、プロダクト間のUI/UXを保つための抽 象化や、モジュールの分割が開発生産性にも寄与する ● i18n対応やLocalizationなど、 ○ 正解がわからない中で工夫を凝らしながら持続的な開発効率を追求 ● Zustand,XStateはいいぞ〜 ○ 状態の統制・関心の分離を追求しやすいと感じている まとめ
Slide 28
Slide 28 text
@gamonges 本日、Dress Code社のエンジニア2名も参加しています! ぜひ、懇親会でお声がけいただけると嬉しいです! (We are hiring!!!) 最後に https://herp.careers/v1/dresscode/7cVOfb7IIvyH @かわうそ
Slide 29
Slide 29 text
© DressCode Inc . End