# 画面設計書 6-App（メイン画面）

## 概要

本ドキュメントは、Vite Debug アプリケーションのメイン画面（App.vue）の画面設計書である。Vue 開発環境のデバッグ・動作確認用のシンプルなカウンターアプリであり、Composition API と ref() による最小構成のコンポーネントとして実装されている。

### 本画面の処理概要

**業務上の目的・背景**：Vue.js のコア開発において、Vite 開発サーバー上でのランタイム動作を確認するためのデバッグ用アプリケーションである。新機能の追加やバグ修正の際に、Vue のリアクティブシステムが正しく動作するかを最小限のコードで素早く検証できる環境を提供する。プロダクション向けのアプリケーションではなく、開発チーム内部で使用されるツールである。

**画面へのアクセス方法**：Vite 開発サーバーを起動し、ブラウザで該当する URL（通常 http://localhost:5173）にアクセスする。index.html がエントリーポイントとなり、main.ts を経由して App.vue がマウントされる。

**主要な操作・処理内容**：
1. カウンターボタンのクリックによるカウント値のインクリメント
2. カウント値のリアルタイム表示更新

**画面遷移**：本画面はスタンドアロンのデバッグ用画面であり、他画面への遷移は存在しない。

**権限による表示制御**：権限による表示制御は存在しない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 1 | ref() | 主機能 | count（カウンター値、初期値0）のリアクティブ状態管理 |

## 画面種別

シングルページ（デバッグ用カウンターアプリ）

## URL/ルーティング

- **URL**: `/`（Vite 開発サーバーのルート）
- ルーティング機能は使用していない

## 入出力項目

| 項目名 | 入力/出力 | データ型 | 説明 | 初期値 |
|--------|----------|---------|------|--------|
| count | 入出力 (ref) | number | カウンター値 | 0 |

## 表示項目

| 項目名 | 表示領域 | データソース | 説明 |
|--------|---------|-------------|------|
| カウンターボタン | 画面中央 | count ref | カウント値を表示するボタン。クリックでインクリメント |

## イベント仕様

### 1-ページ読み込み時の初期化

1. index.html が読み込まれ、main.ts が `<script type="module">` として実行（index.html 1行目）
2. main.ts で `createApp(App)` により Vue アプリケーションインスタンスを生成（main.ts 4行目）
3. `app.mount('#app')` で App.vue を #app 要素にマウント（main.ts 6行目）
4. App.vue の `<script setup>` が実行され、`count = ref(0)` でカウンター状態を初期化（App.vue 4行目）

### 2-カウンターボタンクリック

ボタンの `@click="count++"` イベントにより count の値が1ずつインクリメントされる（App.vue 8行目）。Vue のリアクティブシステムにより、ボタン内のテキスト `{{ count }}` が自動的に更新される。

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

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

本画面はクライアントサイドのみで動作し、永続化処理は一切行わない。データベース、localStorage、URLハッシュ等への書き込みは発生しない。

## メッセージ仕様

本画面にメッセージ表示機能はない。

## 例外処理

本画面に例外処理は存在しない。最小構成のコンポーネントであるため、エラーが発生する条件はない。

## 備考

- 本アプリケーションは全16行（template、script、style含む）の極めてシンプルな構成である
- ボタンの文字色は CSS で `color: red` に設定されている（App.vue 13行目）
- `<script setup>` 構文を使用しており、Composition API のみで構成されている
- main.ts では vue-router や vuex/pinia 等の追加パッケージを使用していない
- Vue コアライブラリの開発中にリアクティブシステムの動作確認を行うための最小限のテストベッドである

---

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

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

### 推奨読解順序

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

本画面のデータ構造は極めて単純であり、ref による単一の数値状態のみで構成される。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | App.vue | `packages-private/vite-debug/App.vue` | 4行目: `const count = ref(0)` - 唯一のリアクティブ状態 |

**読解のコツ**: `<script setup>` 構文では、トップレベルで宣言された変数が自動的にテンプレートに公開される。`ref(0)` は `{ value: 0 }` のリアクティブラッパーオブジェクトを返すが、テンプレート内では自動的にアンラップされるため `.value` なしで直接参照できる。

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

index.html から main.ts を経て App.vue がマウントされる最小限の起動フローを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.html | `packages-private/vite-debug/index.html` | 1-2行目: module スクリプトによる main.ts 読み込みと #app 要素 |
| 2-2 | main.ts | `packages-private/vite-debug/main.ts` | 1-6行目: createApp(App) と app.mount('#app') によるアプリ起動 |

**主要処理フロー**:
1. **index.html 1行目**: `<script type="module" src="./main.ts"></script>` で main.ts を読み込み
2. **index.html 2行目**: `<div id="app"></div>` で Vue のマウントターゲットを定義
3. **main.ts 1行目**: `import { createApp } from 'vue'` で Vue のファクトリ関数をインポート
4. **main.ts 2行目**: `import App from './App.vue'` でルートコンポーネントをインポート
5. **main.ts 4行目**: `const app = createApp(App)` でアプリケーションインスタンスを生成
6. **main.ts 6行目**: `app.mount('#app')` で DOM にマウント

#### Step 3: テンプレートとスタイルを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | App.vue | `packages-private/vite-debug/App.vue` | 7-9行目: テンプレート部分 - `<button @click="count++">{{ count }}</button>` |
| 3-2 | App.vue | `packages-private/vite-debug/App.vue` | 11-15行目: スタイル部分 - ボタンの文字色を red に設定 |

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

```
index.html
    |
    +-- main.ts
            |
            +-- createApp(App)
                    |
                    +-- app.mount('#app')
                            |
                            +-- App.vue
                                    |
                                    +-- <script setup>
                                    |       +-- ref(0) --> count
                                    |
                                    +-- <template>
                                    |       +-- <button @click="count++">{{ count }}</button>
                                    |
                                    +-- <style>
                                            +-- button { color: red; }
```

### データフロー図

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

ボタンクリック ──────────────> count++ ────────────────────> count ref 更新
(@click イベント)             (ref.value インクリメント)        |
                                                              +-- {{ count }} 再レンダリング
                                                                  (ボタンテキスト更新)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.html | `packages-private/vite-debug/index.html` | テンプレート | エントリーポイント HTML。#app 要素と module スクリプト |
| main.ts | `packages-private/vite-debug/main.ts` | ソース | Vue アプリケーション起動。createApp(App).mount('#app') |
| App.vue | `packages-private/vite-debug/App.vue` | ソース | カウンターコンポーネント。ref(0) によるカウンター状態管理 |
