技術スタック

• 言語・フレームワーク: TypeScript/React/Next.js
  • SEOのためSSRしています
  • SSRした内容に対してCDNキャッシュを適用しています
  • i18n対応をして各国言語に翻訳しています
• API Client: Apollo Client
  • APIは全面的にGraphQLを採用しています
  • GraphQL Code Generatorで型とhooksを自動生成して利用しています
    • client-presetを利用してFragment Colocationしています
• CSS: Emotion
• テスト
  • ユニットテスト: Jest
  • VRT: Storybook/Chromatic
  • Interaction Tests: Storybook
  • E2Eテスト: Playwright
• その他
  • Radix UI
  • Framer Motion
  • Remeda
  • Volta

現在取り組んでいる課題

• デザインシステム運用の効率化
  • カバレッジの向上
  • FigmaコンポーネントとReactの実装を密に連携できるようデザイントークンやpropsのルールを設計
    • Figmaのデザイントークンをそのままtsファイルに変換して使用可能にしています
• GraphQLのFragmentを利用した型の整理（Fragment Colocation）
• AppRouter対応に向けてライブラリアップデート

今後の予定

• App Router対応
• Zero-runtime CSS-in-JSへの移行
  • Panda CSSやKuma UI、StyleXをウォッチしています
• 現在（ほぼ）1リポジトリですが、monorepo構成（workspaceでの分割）を検討中です
  • 今は一般ユーザーが見る画面と管理画面をディレクトリで分けているのですが、workspaceとして分ける予定です

組織