はじめての成果物をつくる

このレッスンで作るもの

ブラウザーで使える、個人用のシンプルなタスク管理ページを作ります。タスクを追加し、完了に切り替え、削除でき、ブラウザーを閉じても同じ端末・ブラウザー内に内容が残る小さな成果物です。

この練習では公開サービスやユーザー登録を作りません。保存先に使うブラウザーの localStorage はそのブラウザー内だけの保存領域であり、バックアップや端末間同期の代わりにはなりません。個人情報や秘密情報を入力せず、練習用の例だけを使ってください。

1. 要件を先に決める

作業前に、次の要件を読み、必要なら自分の言葉に直します。

必須機能

タスク名を入力して追加できる
空欄や空白だけの入力は追加しない
タスクを完了／未完了に切り替えられる
個々のタスクを削除できる
タスク件数と完了件数を表示する
データを localStorage に保存し、再読み込み後にも表示する
スマートフォンでも読みやすく、キーボードで操作できる

制約

HTML、CSS、ブラウザー標準のJavaScriptだけを使う
外部ライブラリ、アカウント、サーバー、外部通信は使わない
既存の練習用フォルダー内だけにファイルを作る
既存ファイルを削除・上書きする場合は、先に理由と対象を示して確認を求める

2. Claude Codeに依頼する

練習用フォルダーでセッションを開始し、まず計画だけを依頼します。計画が要件に合うか読んでから、変更を許可します。

この練習用フォルダーに、個人用のタスク管理ページを作ります。最初に実装計画と作成予定ファイルを示し、まだファイルを変更しないでください。

要件：HTML/CSS/ブラウザー標準JavaScriptのみ。タスクの追加、完了切替、削除、総件数と完了件数の表示、localStorageでの保存・再読み込み後の復元、スマートフォン対応、キーボード操作を実装してください。空白だけの入力は拒否し、タスク名はテキストとして安全に表示してください。外部通信、外部ライブラリ、アカウント機能は追加しないでください。

作成してよいファイルは index.html、styles.css、app.js だけです。ほかのファイルの編集・削除、パッケージ追加、コマンド実行は、理由を説明して事前に私の確認を得てください。完了後に変更ファイルとテスト手順を報告してください。

計画に外部サービス、不要な依存関係、別のファイルが含まれていないか確認します。計画が合意できたら、ファイル作成を明示的に許可します。許可プロンプトが出た場合は、承認対象の操作やコマンドを読んでから選択します。

3. 動作を確かめる

作成後、まず差分とファイル名を確認します。次に index.html をブラウザーで開き、次の操作を手動で試してください。

空欄と空白だけを追加しようとして、登録されないことを確認する
タスクを2件追加する
1件を完了・未完了に切り替え、件数が更新されることを確認する
1件を削除し、表示と保存内容が一致することを確認する
ページを再読み込みし、残したタスクが復元されることを確認する
キーボードだけで入力、追加、完了切替、削除を操作する
ブラウザーの幅を狭くして、横スクロールや操作不能な表示がないことを確認する

期待と違う点があれば、発生条件、期待する動作、実際の動作をひとつずつ伝えて修正します。修正のたびに差分を読み、関係するテストを繰り返します。

完了条件

要件にある4つの操作（追加・完了切替・削除・件数表示）を確認した
再読み込み後にタスクが復元されることを確認した
空入力、キーボード操作、狭い画面を確認した
外部通信や不要な依存関係が追加されていないことを確認した
変更したファイルを読み、自分で成果物を説明できる

発展課題

すべての確認ができてから、一度に一つだけ追加します。例：未完了だけの表示、完了済み件数の表示、タスクの全消去ボタン。新しい操作には新しい完了条件を用意し、確認の手順も追加してください。

これはローカルで動く練習用の成果物です。公開、認証、クラウド保存、個人情報や業務データの保存に使わないでください。

次に読む

差分・動作・テストを確認するで、完成したという報告だけに頼らない確認方法を学びます。