# 機能設計書 60-レスポンシブUI

## 概要

本ドキュメントは、Actual Budgetにおけるモバイル画面に対応したレスポンシブデザイン機能の設計を記述する。この機能は、デスクトップとモバイル端末の両方で最適な使用感を提供するための画面レイアウト適応機能を提供する。

### 本機能の処理概要

Actual Budgetのデスクトップクライアントにおいて、画面幅に応じてUIレイアウトを動的に切り替えるレスポンシブデザイン機能を提供する。useResponsiveフックとブレークポイント設定により、狭い画面ではモバイル向けUIを、広い画面ではデスクトップ向けUIを表示する。

**業務上の目的・背景**：ユーザーは様々なデバイス（デスクトップPC、ノートPC、タブレット、スマートフォン）からActual Budgetにアクセスする。それぞれの画面サイズに最適化されたUIを提供することで、どのデバイスでも快適に予算管理を行える環境を実現する。

**機能の利用シーン**：
- スマートフォンでの予算確認・取引入力
- タブレットでの予算管理
- デスクトップでの詳細な予算分析

**主要な処理内容**：
1. 画面幅の検出とブレークポイント判定
2. デバイスタイプに応じたコンポーネント切り替え
3. モバイルナビゲーションの表示制御
4. タッチ操作への対応（Pull-to-Refresh等）
5. ジェスチャー操作のサポート

**関連システム・外部連携**：なし（フロントエンド機能）

**権限による制御**：なし

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 10 | 予算画面（モバイル） | 補助機能 | モバイル画面に最適化されたレスポンシブ表示 |
| 13 | 口座一覧画面（モバイル） | 補助機能 | モバイル最適化表示 |
| 17 | スケジュール一覧画面（モバイル） | 補助機能 | モバイル最適化表示 |
| 20 | 支払先管理画面（モバイル） | 補助機能 | モバイル最適化表示 |
| 23 | ルール管理画面（モバイル） | 補助機能 | モバイル最適化表示 |
| 26 | 銀行同期管理画面（モバイル） | 補助機能 | モバイル最適化表示 |

## 機能種別

UI/UX / レスポンシブデザイン

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| なし | - | - | ブラウザの画面サイズを自動検出 | - |

### 入力データソース

ブラウザのwindowオブジェクト（window.innerWidth）

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| isNarrowWidth | boolean | 狭い画面（< 512px） |
| isSmallWidth | boolean | 小さい画面（512-730px） |
| isMediumWidth | boolean | 中程度の画面（730-1100px） |
| isWideWidth | boolean | 広い画面（>= 1100px） |
| atLeastMediumWidth | boolean | 中程度以上の画面（>= 730px） |
| width | number | 画面幅（px） |
| height | number | 画面高さ（px） |

### 出力先

Reactコンポーネントへの状態提供

## 処理フロー

### 処理シーケンス

```
1. コンポーネントマウント
   └─ useResponsive フック呼び出し

2. 画面サイズ取得
   └─ useWindowSize フック

3. ブレークポイント判定
   ├─ width < 512: isNarrowWidth = true
   ├─ 512 <= width < 730: isSmallWidth = true
   ├─ 730 <= width < 1100: isMediumWidth = true
   └─ width >= 1100: isWideWidth = true

4. レイアウト適用
   ├─ isNarrowWidth: モバイルUI表示
   └─ その他: デスクトップUI表示

5. リサイズ監視
   └─ 250msデバウンスで再計算
```

### フローチャート

```mermaid
flowchart TD
    A[コンポーネントマウント] --> B[useResponsive呼び出し]
    B --> C[useWindowSize]
    C --> D{画面幅判定}
    D -->|< 512px| E[isNarrowWidth = true]
    D -->|512-730px| F[isSmallWidth = true]
    D -->|730-1100px| G[isMediumWidth = true]
    D -->|>= 1100px| H[isWideWidth = true]
    E --> I[モバイルUIレンダリング]
    F --> J[スモールUIレンダリング]
    G --> K[ミディアムUIレンダリング]
    H --> L[デスクトップUIレンダリング]
    I --> M[リサイズ監視]
    J --> M
    K --> M
    L --> M
    M -->|リサイズ発生| C
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-60-1 | 狭い画面閾値 | 512px未満はモバイル表示 | 常時 |
| BR-60-2 | 小さい画面閾値 | 512-730pxは小型デスクトップ表示 | 常時 |
| BR-60-3 | 中程度画面閾値 | 730-1100pxは中型デスクトップ表示 | 常時 |
| BR-60-4 | 広い画面閾値 | 1100px以上は大型デスクトップ表示 | 常時 |
| BR-60-5 | デバウンス | リサイズイベントは250msでデバウンス | リサイズ時 |

### 計算ロジック

- `isNarrowWidth`: `width < breakpoints.small (512)`
- `isSmallWidth`: `width >= 512 && width < 730`
- `isMediumWidth`: `width >= 730 && width < 1100`
- `isWideWidth`: `width >= 1100`
- `atLeastMediumWidth`: `width >= 730`

## データベース操作仕様

### 操作別データベース影響一覧

この機能はデータベース操作を行わない。

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | なし | - | エラーは発生しない |

### リトライ仕様

なし

## トランザクション仕様

トランザクション処理なし

## パフォーマンス要件

- リサイズ応答時間：250ms以内（デバウンス後）
- レイアウト切り替え：16ms以内（60fps維持）

## セキュリティ考慮事項

セキュリティに関する考慮事項なし

## 備考

- usehooks-tsライブラリのuseWindowSizeを使用
- CSSメディアクエリでも同じブレークポイントを使用可能

---

## コードリーディングガイド

本機能を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: ブレークポイント定義を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | tokens.ts | `packages/component-library/src/tokens.ts` | ブレークポイント定義 |

**読解のコツ**: CSSのメディアクエリで使用する値と一致していることを確認する。

**主要処理フロー**:
- **1-5行目**: BreakpointNames enum定義
- **11-15行目**: breakpoints定数（small: 512, medium: 730, wide: 1100）
- **27-35行目**: CSS用のトークン変換

#### Step 2: useResponsiveフックを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | useResponsive.ts | `packages/component-library/src/hooks/useResponsive.ts` | レスポンシブフック |

**主要処理フロー**:
- **1行目**: useWindowSizeインポート
- **3行目**: breakpointsインポート
- **5行目**: useResponsive関数定義
- **6-8行目**: useWindowSizeでwidth/height取得
- **12-21行目**: ブレークポイント判定ロジック

#### Step 3: モバイルナビゲーションを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | MobileNavTabs.tsx | `packages/desktop-client/src/components/mobile/MobileNavTabs.tsx` | モバイルナビ |

**主要処理フロー**:
- **12行目**: useResponsiveインポート
- **45行目**: isNarrowWidth取得
- **234行目**: isNarrowWidthでモバイルナビ表示制御

#### Step 4: モバイル専用コンポーネントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | BudgetPage.tsx | `packages/desktop-client/src/components/mobile/budget/BudgetPage.tsx` | モバイル予算画面 |
| 4-2 | AccountsPage.tsx | `packages/desktop-client/src/components/mobile/accounts/AccountsPage.tsx` | モバイル口座画面 |

**主要処理フロー**:
- モバイル専用のUI構成
- PullToRefreshなどのタッチ操作対応
- ジェスチャーベースのナビゲーション

### プログラム呼び出し階層図

```
Reactコンポーネント
    │
    ├─ useResponsive()
    │      │
    │      ├─ useWindowSize({ debounceDelay: 250 })
    │      │      │
    │      │      └─ window.innerWidth / innerHeight
    │      │
    │      └─ breakpoints判定
    │             │
    │             ├─ isNarrowWidth (< 512px)
    │             ├─ isSmallWidth (512-730px)
    │             ├─ isMediumWidth (730-1100px)
    │             └─ isWideWidth (>= 1100px)
    │
    └─ 条件付きレンダリング
           │
           ├─ [isNarrowWidth] モバイルUI
           │      ├─ MobileNavTabs
           │      ├─ mobile/budget/BudgetPage
           │      └─ mobile/accounts/AccountsPage
           │
           └─ [!isNarrowWidth] デスクトップUI
                  ├─ Sidebar
                  ├─ budget/BudgetPage
                  └─ accounts/AccountsPage
```

### データフロー図

```
[入力]                    [処理]                      [出力]

window.innerWidth ────▶ useWindowSize ────▶ { width, height }
                              │
                              ▼ (250msデバウンス)
                         ブレークポイント判定
                              │
                ┌─────────────┼─────────────┐
                ▼             ▼             ▼
         isNarrowWidth  isMediumWidth  isWideWidth
                │             │             │
                ▼             ▼             ▼
           [モバイルUI]   [中型UI]      [大型UI]
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| useResponsive.ts | `packages/component-library/src/hooks/useResponsive.ts` | ソース | レスポンシブフック |
| tokens.ts | `packages/component-library/src/tokens.ts` | ソース | ブレークポイント定義 |
| MobileNavTabs.tsx | `packages/desktop-client/src/components/mobile/MobileNavTabs.tsx` | ソース | モバイルナビゲーション |
| BudgetPage.tsx | `packages/desktop-client/src/components/mobile/budget/BudgetPage.tsx` | ソース | モバイル予算画面 |
| AccountsPage.tsx | `packages/desktop-client/src/components/mobile/accounts/AccountsPage.tsx` | ソース | モバイル口座画面 |
| PullToRefresh.tsx | `packages/desktop-client/src/components/mobile/PullToRefresh.tsx` | ソース | プルトゥリフレッシュ |
| MobileForms.tsx | `packages/desktop-client/src/components/mobile/MobileForms.tsx` | ソース | モバイルフォーム |
