# 画面設計書 96-CheckBox

## 概要

本ドキュメントは、IntegrationTestAppアプリケーションにおけるCheckBoxPageの画面設計書です。CheckBoxコントロールの基本機能をテストするためのページとして設計されています。

### 本画面の処理概要

**業務上の目的・背景**：本画面は、AvaloniaフレームワークにおけるCheckBoxコントロールの統合テストを目的としています。チェックボックスの2状態（チェック/アンチェック）および3状態（チェック/アンチェック/不確定）の動作を検証するためのテストUIを提供します。UIオートメーションテストやE2Eテストでのチェックボックス操作検証に使用されます。

**画面へのアクセス方法**：IntegrationTestAppのメインウィンドウ左側のListBoxナビゲーションから「CheckBox」項目を選択することでアクセスします。

**主要な操作・処理内容**：
1. UncheckedCheckBoxのチェック/アンチェック操作（初期状態: アンチェック）
2. CheckedCheckBoxのチェック/アンチェック操作（初期状態: チェック）
3. ThreeStateCheckBoxの3状態切り替え操作（初期状態: 不確定）

**画面遷移**：この画面はIntegrationTestAppのメインウィンドウ内のページとして表示されます。他画面への遷移機能はありません。

**権限による表示制御**：特になし。すべてのユーザーが全機能を利用可能です。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 12 | CheckBox | 主機能 | CheckBoxのテスト。2状態・3状態の動作検証 |

## 画面種別

テスト・検証画面

## URL/ルーティング

デスクトップアプリケーションのため、URLルーティングはなし。MainWindowのListBoxナビゲーションから「CheckBox」を選択。

## 入出力項目

| 項目名 | 入出力 | 型 | 必須 | 説明 |
|--------|--------|-----|------|------|
| UncheckedCheckBox | 入力 | CheckBox (bool?) | - | 初期状態がアンチェックのチェックボックス |
| CheckedCheckBox | 入力 | CheckBox (bool?) | - | 初期状態がチェックのチェックボックス |
| ThreeStateCheckBox | 入力 | CheckBox (bool?) | - | 3状態対応チェックボックス（初期状態: null/不確定） |

## 表示項目

| 項目名 | コントロール名 | 初期状態 | 説明 |
|--------|--------------|---------|------|
| UncheckedCheckBox | CheckBox | IsChecked未設定（false） | 「Unchecked」ラベル |
| CheckedCheckBox | CheckBox | IsChecked="True" | 「Checked」ラベル |
| ThreeStateCheckBox | CheckBox | IsChecked="{x:Null}", IsThreeState="True" | 「ThreeState」ラベル |

## イベント仕様

本画面はコードビハインドにイベントハンドラを定義していません。CheckBoxの標準動作のみを使用します。

### CheckBoxの標準動作

**2状態CheckBox（UncheckedCheckBox, CheckedCheckBox）**:
- クリック: IsChecked = true ⇔ IsChecked = false のトグル

**3状態CheckBox（ThreeStateCheckBox）**:
- クリック: IsChecked = null → true → false → null のサイクル

## データベース更新仕様

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

本画面はUIコントロールのテスト用であり、データベース操作は行いません。

## メッセージ仕様

本画面ではシステムメッセージの表示はありません。

## 例外処理

本画面では例外処理は定義されていません。

## 備考

- IsThreeState="True"により、CheckBoxは3状態（チェック/アンチェック/不確定）をサポート
- IsChecked="{x:Null}"は不確定状態（Indeterminate）を表す
- コードビハインドはInitializeComponent()のみで、追加のロジックなし
- UIオートメーションでIsCheckedプロパティの変化を検証可能

---

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

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

### 推奨読解順序

#### Step 1: データ構造を理解する

まず、CheckBoxコントロールの主要プロパティを理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | CheckBox.cs | `src/Avalonia.Controls/CheckBox.cs` | IsChecked、IsThreeStateプロパティの定義 |
| 1-2 | ToggleButton.cs | `src/Avalonia.Controls/Primitives/ToggleButton.cs` | CheckBoxの基底クラス、トグル動作の実装 |

**読解のコツ**: CheckBoxはToggleButtonを継承しており、IsCheckedはbool?型で3状態を表現できます。

#### Step 2: エントリーポイントを理解する

処理の起点となるページファイルを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | CheckBoxPage.axaml | `samples/IntegrationTestApp/Pages/CheckBoxPage.axaml` | UI構造、各CheckBoxの初期状態設定 |
| 2-2 | CheckBoxPage.axaml.cs | `samples/IntegrationTestApp/Pages/CheckBoxPage.axaml.cs` | コードビハインド（最小限） |

**主要処理フロー**:
1. **行8 (axaml)**: UncheckedCheckBox - IsChecked未設定（デフォルトfalse）
2. **行9 (axaml)**: CheckedCheckBox - IsChecked="True"
3. **行10 (axaml)**: ThreeStateCheckBox - IsThreeState="True", IsChecked="{x:Null}"

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

```
CheckBoxPage
    │
    └─ コンストラクタ
           └─ InitializeComponent()
                  │
                  ├─ UncheckedCheckBox 生成 (IsChecked = false)
                  ├─ CheckedCheckBox 生成 (IsChecked = true)
                  └─ ThreeStateCheckBox 生成 (IsChecked = null, IsThreeState = true)
```

### データフロー図

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

ユーザークリック   ───▶  ToggleButton.Toggle()  ───▶  IsChecked更新
                        │
                        ├─ 2状態: true ⇔ false
                        │
                        └─ 3状態: null → true → false → null
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| CheckBoxPage.axaml | `samples/IntegrationTestApp/Pages/CheckBoxPage.axaml` | ソース | ページのUI定義 |
| CheckBoxPage.axaml.cs | `samples/IntegrationTestApp/Pages/CheckBoxPage.axaml.cs` | ソース | ページのコードビハインド（最小限） |
| MainWindow.axaml | `samples/IntegrationTestApp/MainWindow.axaml` | ソース | メインウィンドウとナビゲーション |
| MainWindow.axaml.cs | `samples/IntegrationTestApp/MainWindow.axaml.cs` | ソース | ページ生成ファクトリ（行81） |
