AI仕様駆動開発 – コードより先に仕様を書く

# Feature Specification: Task Management Web Application
**Feature Branch**: `001-task-management-webapp`
**Created**: 2026-06-01
**Status**: Draft
**Input**: User description: "タスク管理ができるWebアプリケーションを作ってください。タスクの作成・完了・削除の機能を持たせてください。"
## User Scenarios & Testing *(mandatory)*
### User Story 1 - タスクの作成 (Priority: P1)
ユーザーが新しいタスクを入力フィールドに入力し、送信することでタスク一覧に追加される。タスクにはタイトルが必要であり、作成後すぐに一覧に表示される。
**Why this priority**: タスクの作成はアプリケーションの根幹機能であり、これなしに他の機能は意味をなさない。
**Independent Test**: タスク作成フォームにタイトルを入力して送信し、一覧に表示されることを確認することで単独テスト可能。最低限のMVPとして価値を届けられる。
**Acceptance Scenarios**:
1. **Given** タスク一覧画面を表示している状態で、**When** タスクタイトルを入力して作成ボタンを押す、**Then** 新しいタスクが一覧の末尾（または先頭）に追加されて表示される
2. **Given** タスク作成フォームが表示されている状態で、**When** タイトルを空のまま送信する、**Then** エラーメッセージが表示され、タスクは作成されない
3. **Given** タスクが作成された直後、**When** 一覧を確認する、**Then** 新しいタスクは「未完了」状態で表示される
---
### User Story 2 - タスクの完了 (Priority: P2)
ユーザーが一覧に表示されているタスクを完了としてマークできる。完了したタスクは視覚的に区別されて表示される。
**Why this priority**: 完了機能はタスク管理の本質的な価値であり、進捗の把握に不可欠。
**Independent Test**: 未完了タスクが存在する状態で完了操作を行い、視覚的変化を確認することで単独テスト可能。
**Acceptance Scenarios**:
1. **Given** 未完了のタスクが一覧に表示されている状態で、**When** タスクの完了チェックボックス（または完了ボタン）を操作する、**Then** タスクが完了状態に変わり、視覚的に区別される（例：打ち消し線、グレーアウト）
2. **Given** 完了済みのタスクが一覧にある状態で、**When** 再度完了チェックを外す、**Then** タスクが未完了状態に戻る
3. **Given** タスクを完了にした後、**When** ページを再読み込みする、**Then** タスクの完了状態が保持されている
---
### User Story 3 - タスクの削除 (Priority: P3)
ユーザーが不要なタスクを一覧から削除できる。削除後は一覧から即座に消える。
**Why this priority**: 削除機能はタスク一覧を整理するために必要だが、作成・完了に比べると優先度は低い。
**Independent Test**: タスクが存在する状態で削除操作を行い、一覧から消えることを確認することで単独テスト可能。
**Acceptance Scenarios**:
1. **Given** タスクが一覧に表示されている状態で、**When** タスクの削除ボタンを押す、**Then** そのタスクが一覧から削除される
2. **Given** 削除ボタンを押した後、**When** 一覧を確認する、**Then** 削除されたタスクは表示されない
3. **Given** 全タスクを削除した後、**When** 一覧を確認する、**Then** 空の状態を示すメッセージが表示される
---
### Edge Cases
- タイトルが空白のみのタスクを作成しようとした場合、作成を拒否してユーザーに通知する
- 非常に長いタイトル（例：500文字以上）を入力した場合、適切に表示またはエラーを返す
- タスクが0件のとき、空状態のわかりやすいメッセージを表示する
- 複数タスクを素早く連続して作成した場合、すべてが正しく登録される
## Requirements *(mandatory)*
### Functional Requirements
- **FR-001**: システムはユーザーがタスクタイトルを入力してタスクを作成できなければならない
- **FR-002**: システムは空のタイトルでのタスク作成を拒否し、エラーメッセージを表示しなければならない
- **FR-003**: システムはタスク一覧をページ上に表示しなければならない
- **FR-004**: ユーザーはタスクを「完了」としてマークできなければならない
- **FR-005**: ユーザーは完了済みタスクを「未完了」に戻せなければならない
- **FR-006**: 完了済みタスクは未完了タスクと視覚的に区別して表示されなければならない
- **FR-007**: ユーザーは任意のタスクを削除できなければならない
- **FR-008**: タスクの状態（完了・未完了）はページ再読み込み後も保持されなければならない
- **FR-009**: タスクが0件のとき、空状態を示すメッセージが表示されなければならない
### Key Entities
- **Task（タスク）**: ユーザーが管理する作業単位。タイトル（文字列）と完了状態（真偽値）と作成日時を持つ
- **Task List（タスク一覧）**: 複数のタスクの集合。ユーザーに一覧表示される
## Success Criteria *(mandatory)*
### Measurable Outcomes
- **SC-001**: ユーザーはタスクの作成操作を3ステップ以内（入力→送信→確認）で完了できる
- **SC-002**: タスクの完了・削除操作は1クリックで実行できる
- **SC-003**: タスク一覧は操作後1秒以内に更新された状態が表示される
- **SC-004**: ページ再読み込み後もすべてのタスクデータが正確に復元される（データ保持率100%）
- **SC-005**: 初めてアプリを開いたユーザーが説明なしで3つの主要機能（作成・完了・削除）を使えるよう、UIが直感的である
## Assumptions
- シングルユーザー向けアプリケーションを想定しており、ユーザー認証は今回のスコープ外とする
- データはブラウザのローカルストレージ、またはサーバーサイドのシンプルなストレージに保存する（実装時に選択）
- モバイル対応はv1のスコープ外とするが、デスクトップブラウザでの利用を前提とする
- タスクの優先度・期限・カテゴリ分けなどの拡張機能はv1のスコープ外とする
- タスク一覧の並び替え・フィルタリングはv1のスコープ外とする

# Implementation Plan: Task Management Web Application

**Branch**: `001-task-management-webapp` | **Date**: 2026-06-01 | **Spec**: [spec.md](spec.md)

**Input**: Feature specification from `specs/001-task-management-webapp/spec.md`

## Summary

ユーザーがタスクの作成・完了・削除を行えるシングルページWebアプリケーション。HTML + CSS + Vanilla JavaScriptで実装し、データはlocalStorageに保存する。外部依存関係なしでブラウザ単体で動作する。

## Technical Context

**Language/Version**: HTML5 / CSS3 / JavaScript (ES2020+)

**Primary Dependencies**: なし（Vanilla JS、外部ライブラリ不使用）

**Storage**: `localStorage`（ブラウザ内永続化、キー: `speckit-tasks`）

**Testing**: ブラウザでの手動テスト（acceptance scenariosに基づく）

**Target Platform**: デスクトップブラウザ（Chrome / Firefox / Edge / Safari モダン版）

**Project Type**: Web Application（静的シングルページ）

**Performance Goals**: 操作後1秒以内にUI更新（SC-003）

**Constraints**: 外部サーバー不要、ブラウザ単体で動作

**Scale/Scope**: シングルユーザー、認証なし

## Constitution Check

Constitutionは未設定（テンプレート状態）のため、ゲートチェックはスキップ。実装はシンプルさ・YAGNI原則に従う。

## Project Structure

### Documentation (this feature)

```text
specs/001-task-management-webapp/
├── plan.md # This file
├── research.md # Phase 0 output
├── data-model.md # Phase 1 output
├── quickstart.md # Phase 1 output
├── contracts/
│ └── ui-contract.md # UI仕様
├── checklists/
│ └── requirements.md # 仕様品質チェックリスト
└── tasks.md # Phase 2 output (/speckit-tasks で生成)
```

### Source Code (repository root)

```text
task-app/
├── index.html # メインHTML（構造・レイアウト）
├── style.css # スタイル（未完了/完了の視覚的区別含む）
└── app.js # アプリロジック（CRUD操作、localStorage連携）
```

**Structure Decision**: シンプルな静的Webアプリのため、3ファイル構成（HTML/CSS/JS）を採用。フレームワーク・ビルドステップなし。

## Implementation Phases

### Phase 1: HTML構造（P1 - タスク作成の基盤）

- `index.html` 作成: タスク入力フォーム、タスク一覧コンテナ、空状態メッセージ
- FR-001（作成）、FR-002（バリデーション）、FR-003（一覧表示）の土台

### Phase 2: スタイル（視覚的区別）

- `style.css` 作成: 未完了・完了タスクの視覚的区別（打ち消し線、グレーアウト）
- FR-006（完了タスクの視覚区別）を満たす

### Phase 3: アプリロジック（app.js）

- タスク作成（FR-001, FR-002）
- タスク完了トグル（FR-004, FR-005）
- タスク削除（FR-007）
- localStorage永続化（FR-008）
- 空状態表示（FR-009）

## Complexity Tracking

なし（シンプルな構成で全要件を満たせるため）

# Research: Task Management Web Application

**Feature**: `001-task-management-webapp`
**Date**: 2026-06-01

## Technology Decisions

### フロントエンド技術スタック

**Decision**: HTML + CSS + Vanilla JavaScript（シングルページ）
**Rationale**: シングルユーザー向けのシンプルなタスク管理アプリであり、フレームワーク導入のオーバーヘッドなしに要件をすべて満たせる。依存関係ゼロでブラウザ単体で動作する。
**Alternatives considered**:
- React/Vue/Svelte: 小規模アプリには過剰。ビルドステップが必要になり複雑性が増す
- jQuery: Vanilla JSで十分なため不要

### データ永続化

**Decision**: `localStorage`（ブラウザストレージ）
**Rationale**: シングルユーザー・認証不要の要件に最適。サーバー不要でデプロイが簡単。FR-008（ページ再読み込み後の状態保持）を満たす。
**Alternatives considered**:
- IndexedDB: 大量データには適するが、タスク管理程度のデータ量では過剰
- バックエンドAPI + DB: ユーザー認証不要・シングルユーザーの要件に対して過剰
- sessionStorage: ページ再読み込みでデータが消えるためFR-008を満たせない

### スタイリング

**Decision**: CSS（カスタム、フレームワークなし）
**Rationale**: シンプルなUIに対してBootstrap等のCSSフレームワークは過剰。軽量で読み込みが速い。
**Alternatives considered**:
- Tailwind CSS: ビルドステップが必要、小規模には不向き
- Bootstrap: バンドルサイズが大きく、カスタマイズが複雑

### タスクID生成

**Decision**: `crypto.randomUUID()` または `Date.now() + Math.random()`
**Rationale**: サーバーなしでユニークIDを生成する標準的な手法。削除・更新操作でタスクを一意識別するために必要。

# UI Contract: Task Management Web Application

**Feature**: `001-task-management-webapp`
**Date**: 2026-06-01

## 画面構成

### メイン画面（単一ページ）

```
┌─────────────────────────────────────────┐
│ タスク管理 │
├─────────────────────────────────────────┤
│ [タスクを入力... ] [追加] │
│ ※ エラー時: "タイトルを入力してください" │
├─────────────────────────────────────────┤
│ □ タスクタイトル A [削除] │
│ ☑ ~~タスクタイトル B~~ [削除] │
│ □ タスクタイトル C [削除] │
├─────────────────────────────────────────┤
│ タスクがありません（0件時） │
└─────────────────────────────────────────┘
```

## インタラクション仕様

### タスク作成

| 操作 | 結果 |
|-----|------|
| テキスト入力 → 「追加」ボタンクリック | タスクを一覧先頭に追加、入力フィールドをクリア |
| テキスト入力 → Enterキー | 同上 |
| 空入力で送信 | エラーメッセージ表示、タスク作成なし |
| 空白のみで送信 | 同上 |

### タスク完了トグル

| 操作 | 結果 |
|-----|------|
| 未完了タスクのチェックボックスをクリック | `completed: true`、打ち消し線・グレーアウト表示 |
| 完了タスクのチェックボックスをクリック | `completed: false`、通常表示に戻る |

### タスク削除

| 操作 | 結果 |
|-----|------|
| 「削除」ボタンをクリック | タスクを一覧から即時削除 |
| 最後のタスクを削除 | 空状態メッセージを表示 |

## 視覚的状態

| 状態 | 表示 |
|-----|------|
| 未完了タスク | 通常テキスト、白背景 |
| 完了タスク | 打ち消し線、グレーアウト（opacity低下） |
| 空リスト | 「タスクがありません。新しいタスクを追加してください。」 |
| バリデーションエラー | 入力欄下に赤文字でエラーメッセージ |

# Quickstart: Task Management Web Application

**Feature**: `001-task-management-webapp`
**Date**: 2026-06-01

## 開発環境のセットアップ

このプロジェクトは外部依存関係なしで動作します。

### 必要なもの

- モダンブラウザ（Chrome / Firefox / Edge / Safari）
- テキストエディタ

### ファイル構成（実装後）

```
task-app/
├── index.html # メインHTML
├── style.css # スタイル
└── app.js # アプリケーションロジック
```

### 起動方法

1. `index.html` をブラウザで直接開く（ファイルパスで動作）
2. または VS Code の Live Server 拡張等でローカルサーバー起動

### 動作確認

1. ブラウザで `index.html` を開く
2. テキスト入力欄にタスク名を入力して「追加」ボタンをクリック
3. タスクが一覧に追加されることを確認
4. チェックボックスをクリックして完了状態になることを確認
5. 「削除」ボタンでタスクが消えることを確認
6. ページ再読み込み後もデータが保持されることを確認

## データのリセット方法

ブラウザの開発者ツール → Application → Local Storage → `speckit-tasks` キーを削除

# Tasks: Task Management Web Application

**Input**: Design documents from `specs/001-task-management-webapp/`

**Prerequisites**: plan.md, spec.md, research.md, data-model.md, contracts/ui-contract.md

**Organization**: タスクはユーザーストーリーごとにグループ化され、各ストーリーを独立して実装・テスト可能。

## Format: `[ID] [P?] [Story] Description`

- **[P]**: 並列実行可能（異なるファイル、依存関係なし）
- **[Story]**: 対応するユーザーストーリー（US1, US2, US3）

---

## Phase 1: Setup（プロジェクト初期化）

**Purpose**: ファイル構造の作成と共通基盤の準備

- [x] T001 `task-app/` ディレクトリを作成し、`index.html`・`style.css`・`app.js` の空ファイルを用意する
- [x] T002 `index.html` に HTML5 ボイラープレートを記述し、`style.css` と `app.js` を読み込む

---

## Phase 2: Foundational（共通基盤）

**Purpose**: 全ユーザーストーリーが依存する基盤実装

**⚠️ CRITICAL**: このフェーズ完了前にユーザーストーリーの実装を開始しないこと

- [x] T003 `app.js` に localStorage の読み書きヘルパー関数（`loadTasks()` / `saveTasks()`）を実装する — `task-app/app.js`
- [x] T004 `app.js` に Task オブジェクト生成関数（`createTask(title)`）を実装する。`id`（UUID）・`title`・`completed: false`・`createdAt` を付与 — `task-app/app.js`
- [x] T005 `app.js` に全タスクを DOM へ描画する関数（`renderTasks(tasks)`）のスケルトンを実装し、空リスト時のメッセージ表示も含める — `task-app/app.js`
- [x] T006 `style.css` に基本レイアウト（コンテナ幅・フォント・余白）と未完了タスクのデフォルトスタイルを実装する — `task-app/style.css`

**Checkpoint**: localStorage 読み書きと基本描画が動作する状態

---

## Phase 3: User Story 1 - タスクの作成（Priority: P1）🎯 MVP

**Goal**: ユーザーがタイトルを入力してタスクを作成でき、一覧に表示される

**Independent Test**: フォームにタイトルを入力して「追加」ボタンを押し、タスクが一覧先頭に追加されることを確認。空入力ではエラーメッセージが表示されることを確認。

### Implementation for User Story 1

- [x] T007 [US1] `index.html` にタスク入力フォーム（テキスト入力 + 「追加」ボタン）とエラーメッセージ表示領域を追加する — `task-app/index.html`
- [x] T008 [US1] `app.js` にフォーム送信ハンドラーを実装する。バリデーション（空文字・空白のみ・200文字超）を行い、エラー時はメッセージを表示。正常時は `createTask()` でタスク生成・保存・再描画 — `task-app/app.js`
- [x] T009 [US1] `style.css` に入力フォームのスタイル（入力欄・ボタン・エラーメッセージの赤文字）を追加する — `task-app/style.css`

**Checkpoint**: タスク作成・バリデーション・一覧表示が動作する（US1 独立テスト通過）

---

## Phase 4: User Story 2 - タスクの完了（Priority: P2）

**Goal**: ユーザーがタスクを完了/未完了にトグルでき、視覚的に区別される

**Independent Test**: 未完了タスクのチェックボックスをクリックして打ち消し線・グレーアウトになることを確認。再クリックで元に戻ることを確認。ページ再読み込み後も状態が保持されることを確認。

### Implementation for User Story 2

- [x] T010 [US2] `app.js` の `renderTasks()` 内でチェックボックスを各タスクアイテムに追加し、`completed` 状態に応じてクラスを付与する — `task-app/app.js`
- [x] T011 [US2] `app.js` にチェックボックスの変更ハンドラーを実装する。`completed` を反転させ `saveTasks()` で保存・再描画 — `task-app/app.js`
- [x] T012 [US2] `style.css` に完了タスクのスタイル（`.completed` クラス: 打ち消し線・opacity 低下・グレーアウト）を追加する — `task-app/style.css`

**Checkpoint**: 完了トグルと視覚的区別が動作し、再読み込み後も状態が保持される（US2 独立テスト通過）

---

## Phase 5: User Story 3 - タスクの削除（Priority: P3）

**Goal**: ユーザーが任意のタスクを削除でき、一覧から即時消える

**Independent Test**: タスクの「削除」ボタンをクリックして一覧から消えることを確認。全削除後に空状態メッセージが表示されることを確認。

### Implementation for User Story 3

- [x] T013 [US3] `app.js` の `renderTasks()` 内で各タスクアイテムに「削除」ボタンを追加する — `task-app/app.js`
- [x] T014 [US3] `app.js` に削除ボタンのクリックハンドラーを実装する。対象タスクを配列から除外し `saveTasks()` で保存・再描画 — `task-app/app.js`
- [x] T015 [US3] `style.css` に削除ボタンのスタイル（配置・色・ホバー効果）を追加する — `task-app/style.css`

**Checkpoint**: タスク削除と空状態表示が動作する（US3 独立テスト通過）

---

## Phase 6: Polish（仕上げ）

**Purpose**: 全ストーリー横断の品質向上

- [x] T016 [P] `app.js` の `renderTasks()` を最終確認し、タスク0件時の空状態メッセージ（FR-009）が正しく表示されることを確認・修正する — `task-app/app.js`
- [x] T017 [P] `index.html` にページタイトル（`