Skip to content

architecture.md

Latest commit

 

History

History
45 lines (34 loc) · 2.66 KB

architecture.md

File metadata and controls

45 lines (34 loc) · 2.66 KB

アーキテクチャガイド

このドキュメントでは、mahjong-react-ui のアーキテクチャ上の決定事項とディレクトリ構成について説明します。

ディレクトリ構成

UIライブラリであるため、主にコンポーネント単位で整理されています。

src/
  components/       # UIコンポーネント
    [Component]/    # 各コンポーネントごとのディレクトリ
      index.ts      # コンポーネントの公開API
      [Component].tsx # コンポーネントの実装
      [Component].stories.tsx # Storybookストーリー
      [Component].test.tsx    # ユニットテスト
  types/            # 共有の型定義
  utils/            # 共有ユーティリティ関数
  index.ts          # 全てのコンポーネントと型をエクスポートするメインエントリポイント

設計原則

1. 関数コンポーネント (Functional Components)

すべてのコンポーネントは、必要に応じてHooksを使用するReact関数コンポーネント (FC) として記述されます。

2. Propsインターフェース

各コンポーネントは、共有の types ディレクトリ、またはコンポーネント固有の場合はローカルから、Propsインターフェース（例: HaiProps, TehaiProps）をエクスポートします。

  • 接頭辞: Propsには通常 Props という接尾辞が付きます。
  • 読み取り専用: 不変性を保証するために、readonly プロパティを推奨します。

3. スタイリング

  • Tailwind CSS: スタイリングにはTailwind CSSを使用します。
  • スコープされたスタイル: 利用側のアプリケーションに影響を与えないよう、グローバルスタイルの使用は避けます。
  • テーマ設定: 必要に応じて、CSS変数やTailwindの設定を通じて、ダークモードやカスタムテーマのサポートを目指します。

4. ロジックの分離

複雑なドメインロジック（シャンテン計算、役判定など）は riichi-mahjong ライブラリに委譲します。このUIパッケージは、レンダリング と ユーザーインタラクション にのみ焦点を当てます。

依存関係

  • riichi-mahjong: コアロジックライブラリ（現在はローカル依存）。
  • react, react-dom: ピア依存関係 (Peer Dependencies)。

Storybook

コンポーネントの開発とドキュメント作成にはStorybookを使用します。常に最新の状態を保つため、ストーリーはコンポーネントと同じ場所に配置（Co-location）しています。