Claude Codeの使い方：小さなタスクアプリで学ぶ、依頼と動作確認

Claude Codeで小さなWebアプリを作るときは、いきなりコードを書かせるのではなく、まず要件を整理した依頼文で作業計画を出させる進め方がおすすめです。作成後はチェックリストに沿って動作を確かめ、問題があれば具体的な現象を伝えて修正を依頼します。

※この記事は、公式ドキュメントの手順にもとづく基本操作と、アプリ制作における依頼・動作確認の設計を紹介するガイドです。記事内で紹介する参考アプリは動作イメージをつかむために編集側が別途用意したものであり、Claude Codeによる生成結果ではありません。

この記事で扱うゴールと前提

HTMLやブラウザの表示について少し触れたことがあり、AIを使って最初の小さなアプリを作ってみたい方を対象としています。題材として、ブラウザだけで動く1ファイル完結の「今日やること」管理アプリを取り上げます。

Claude Codeは複数の環境で利用できますが、この記事ではターミナル版を使います。インストールや基本操作は公式の Quickstart を参照してください。ターミナル自体を初めて使う場合は、先にOS公式の案内などで「フォルダの移動」や「コマンドの実行」の基本を確認してから進めてください。安全のため、意味の分からないコマンドを無条件で実行しないことが大切です。

参考アプリと配布ファイル

完成イメージを先に確認したい場合や、記事の依頼文を手元で活用したい場合は、以下のページやファイルを参照してください。

参考アプリは、タスクの追加・完了切り替え・削除・未完了件数の表示・ブラウザ内への保存（localStorage）を備えたサンプルです。入力した内容はネットワーク経由で外部へ送信されず、操作している端末の同じブラウザ内にのみ保存されます。ブラウザのサイトデータを消去した場合や、プライベートブラウジング（シークレットモード）のセッションを終了した場合は保存内容が失われます（履歴やキャッシュだけを消去しても localStorage まで消えるとは限りません）。念のため、パスワードや個人情報などの機密情報は入力せずに試してください。

事前準備とClaude Codeの起動

Claude Codeの利用には、対応するClaudeの契約プラン、Anthropic Consoleアカウント、または対応するクラウドプロバイダ環境のいずれかが必要です。契約形態や利用条件の詳細は公式ドキュメントで確認してください。

1. インストールとバージョン確認

インストール手順は利用しているOS（macOS、Windows、Linuxなど）や環境によって異なります。最新の導入手順については、公式の Quickstart を参照してインストールを行ってください。

インストールが完了したら、ターミナルを開いて以下のコマンドを実行し、バージョンが表示されるか確認します。

claude --version

（本記事の執筆時点では、手元の環境で claude --version の出力が 2.1.287 であることを確認しています。）

2. 作業用フォルダの作成と起動

既存の大切なファイルを誤って書き換えてしまうのを防ぐため、必ず新しく空の作業用フォルダを作ってからその中でClaude Codeを起動します。

mkdir my-task-app
cd my-task-app
claude

1行目の mkdir my-task-app で新しいフォルダを作成し、2行目の cd my-task-app でそのフォルダの中に移動しています。3行目の claude でClaude Codeが起動します。初回起動時は画面の案内に従ってログイン（認証）を行ってください。

3. 権限確認（パーミッション）の考え方

通常の手動確認モードでは、ファイルの書き込みやコマンド実行などの操作に応じて許可を求められます。なお、権限モードの設定や既存の許可ルールによって表示や挙動は異なります。

公式ドキュメントの Permissions に記載されているとおり、AIがどのファイルを書き換えようとしているのか、あるいはどんなコマンドを実行しようとしているのかを確認することが安全の基本です。確認を省略して自動実行させる設定は避け、表示される変更対象や実行内容を読んでから許可を出してください。内容に心当たりがない場合や意味が分からないコマンドが含まれている場合は、実行を拒否してAIに意図を質問しましょう。

最初の依頼文：まず作業計画を出させる

Claude Codeが起動して入力待ちになったら、アプリの作成を依頼します。ここで重要なのは、最初から「コードを書いて」とだけ頼むのではなく、満たすべき仕様とエッジケース（境界条件）を明示したうえで、最初に作業計画と変更対象ファイルを説明させることです。

以下の依頼文をコピーして、Claude Codeに入力してみてください（task-app-prompt.txt からも同一の内容を取得できます）。

日本語の小さな「今日やること」管理アプリを作りたいです。
まだファイルの作成や変更は行わず、最初に作業計画と作成・変更する対象ファイル名を説明してください。私が計画を確認して合意した後に、実際のコード作成をお願いします。

【アプリの要件】
1. ファイル構成と環境
- `index.html` 1枚だけで完結させること（HTML、CSS、JavaScriptを1ファイルにまとめる）
- 外部ライブラリ、外部フォント、外部へのネットワーク通信は一切使わないこと

2. 基本機能
- 日本語のUI（「今日やること」という見出し、入力欄、追加ボタン、タスクリスト、残り件数表示）
- タスクの追加、完了状態の切り替え（チェック操作など）、個別削除ができること
- 未完了のタスク件数（「残り〇件」など）をリアルタイムに表示すること
- ブラウザの `localStorage` を使ってタスク一覧と完了状態を保存し、ページを再読み込みしても状態が維持されること

3. 安全と使いやすさの条件
- 空欄や空白文字（スペース・タブ等）だけの入力は追加を拒否すること
- 同じ名前のタスクが複数追加された場合も、それぞれ別のタスクとして独立して完了・削除できること（内部で一意のIDを持たせるなど）
- 入力された文字列はHTMLとして解釈させず、必ずプレーンテキストとして安全に表示すること（`textContent` 等を使用）
- スマートフォンのような狭い画面幅でもレイアウトが崩れず操作しやすいこと
- キーボード操作（Enterでの追加、Tabキーでのフォーカス移動やボタン操作）に配慮すること
- `localStorage` が使えない環境や、保存データが壊れていた（JSONのパースに失敗した等）場合でも、画面が真っ白になったり停止したりせず、安全に初期状態から動かせるようにすること

なぜ要件を細かく書くのか

「タスクアプリを作って」とだけ依頼すると、外部のCSSフレームワークを読み込んだり、入力文字をHTMLとして解釈させてしまったり、同じ名前のタスクを区別できない作りになったりする場合があります。

あらかじめ「index.html 1枚」「外部通信なし」「同名タスクは別扱い」「HTML解釈しない」「保存失敗時の配慮」といった条件を最初の依頼文に含めておくのは、作り直しや手戻りを防ぐための編集上の提案です。

計画を確認してから作成を進める

上記の依頼文を送ると、Claude Codeが「どのような構造で index.html を作るか」という計画を返してきます。変更対象が index.html だけになっているか、要件の抜け漏れがないかを確認し、問題なければ次のように返答して作成を進めます。

その計画で問題ありません。index.html の作成を進めてください。

ファイル作成の許可を求められたら、対象ファイルが作業フォルダ内の index.html であることを確認して承認します。

ブラウザでの動作確認リスト

index.html が作成されたら、ブラウザで開いて動作を確かめます。ファイルをダブルクリック（またはブラウザへドラッグ＆ドロップ）して file:// で開く方法でも画面表示の確認はできますが、file:// における localStorage の挙動はブラウザごとに異なり保証されないため（MDN: Window.localStorage）、保存機能の検証はHTTP経由で行ってください。

手元にPython 3が入っている場合は、同じ作業フォルダで以下のコマンドを実行し、ブラウザで http://127.0.0.1:8000 を開くとHTTP経由で確認できます（終了するときはターミナルで Ctrl+C を押します）。Pythonが未導入の場合は、本サイトの参考アプリで保存を含めた操作感を確認してもかまいません。

python3 -m http.server 8000 --bind 127.0.0.1

AIが「完成しました」と報告してきても、そのまま鵜呑みにしてはいけません。作成されたアプリが要件どおりに動くか、以下の確認表を使って自分の手で1つずつテストしてください。

確認項目	試す操作	期待される結果
タスクの追加	「牛乳を買う」と入力して追加する	一覧に「牛乳を買う」が表示され、未完了の残数が `1` になる
完了の切り替え	追加したタスクを完了状態にする	完了の見た目（打ち消し線など）になり、未完了の残数が `0` になる
再読み込みの維持	ブラウザの再読み込み（リロード）を行う	タスク一覧や完了状態、残数表示が消えずにそのまま維持される
タスクの削除	タスクの削除ボタンを押す	一覧からそのタスクが消え、再読み込みしても復活しない
空白入力の拒否	何も入力しない状態、またはスペースだけ入力して追加する	タスクが増えず、残数も変わらない
同名タスクの扱い	「連絡する」という同じ名前のタスクを2件追加し、片方だけ完了または削除する	もう片方の「連絡する」は影響を受けず、1件ずつ別々に操作できる
記号・タグの無害化	`<b>test</b>` と入力して追加する	太字にならず、画面に `<b>test</b>` という文字がそのまま表示される
画面幅とキーボード	ブラウザの幅をスマホ並みに狭める／TabキーとEnterキーで操作する	ボタンが画面外にはみ出さず、キーボードだけでも入力・追加・操作ができる

期待どおりに動かない場合の修正依頼の出し方

確認表のテストを行ってうまく動かない項目があった場合は、Claude Codeに修正を依頼します。このとき「うまく動きません」「直してください」とだけ伝えると、AIは見当違いの場所を書き換えてしまうことがあります。

修正を頼むときは、「どんな操作をしたか」「本当はどうなってほしいか（期待）」「実際にはどうなったか（実際）」の3点を分けて短く伝えるのがおすすめです。

修正依頼のテンプレートと記入例

index.html の動作を確認したところ、以下の問題がありました。修正してください。

【操作】
「連絡する」という同じ名前のタスクを2件追加し、1件目の削除ボタンを押した。

【期待する結果】
1件目の「連絡する」だけが消え、2件目の「連絡する」は一覧に残る。

【実際の結果】
2件とも同時に消えてしまった（または、完了状態が連動してしまった）。

修正する前に、原因と修正方針を簡単に説明してください。

もし画面が動かない、ボタンを押しても反応しないといった場合は、ブラウザの開発者ツール（右クリックして「検証」または「調査」を選び、「Console / コンソール」タブを開く）に赤い文字でエラーが出ていないかも確認してみてください。エラーメッセージが出ている場合は、その文字列をコピーして「【実際の結果】コンソールに次のエラーが出ている：〜」と添えると、原因の手がかりを伝えやすくなります。

詰まった場合の対処と知っておくべき限界

Claude Codeを使った制作で詰まりやすいポイントと、あらかじめ知っておくべき限界を整理します。

よくある詰まりどころと対処法

ログインや認証で止まる場合
初回起動時や、しばらく時間を置いてから再実行した際に、認証の期限切れやログインエラーが表示されることがあります。その場合は無理に作業を続けず、ターミナルに表示される案内や公式ドキュメントの認証手順を確認して再ログインを行ってください。
やり取りが長くなって修正が迷走し始めた場合
何度も修正を繰り返すうちに、最初は動いていた機能まで壊れてしまうことがあります。index.html 1枚の小さなアプリであれば、動く状態のファイルを別名（index-backup.html など）でコピーして手元に退避しておくか、思い切って新しいフォルダで最初の依頼文からやり直すほうが早く解決することも多いです。
見慣れないシェルコマンドの実行を求められた場合
今回の要件（index.html 1枚の作成）では、ファイルの作成・編集だけで完結するため、複雑なシステムコマンドや外部パッケージのインストール（npm install など）は不要なはずです。もしAIが意図の分からないコマンドを実行しようとしたら拒否（Deny）を選び、「外部ツールは使わず index.html の編集だけで対応してください」と伝えてください。

Claude Codeとこのアプリ構成の限界

AIの出力は常に正しいとは限らない
Claude Codeはコードを生成・編集する補助ツールですが、1回で意図どおりのコードが出るとは限りません。デザインの崩れ、キーボード操作のしづらさ、エッジケースの考慮漏れなどは人間がブラウザで触って確かめる必要があります。
ブラウザ保存（localStorage）の限界
今回作成するアプリはサーバーやデータベースを持たないため、PCで作ったタスクリストをスマートフォンと自動同期することはできません。また、ブラウザのサイトデータを消去すると保存内容は失われます。長期保管が必要な重要データではなく、その日のちょっとしたメモや作業確認用として使うのに適した構成です。

次に試せる小さな機能追加

確認表の項目がすべて通り、基本的な「今日やること」アプリが動くようになったら、現在の index.html をバックアップしたうえで、少しずつ機能を追加する依頼を試してみてください。一度にたくさんの機能を頼むのではなく、1つずつ依頼してその都度動作確認を行うのがコツです。

完了済みタスクの一括削除ボタン
「完了状態になっているタスクだけをまとめて削除するボタンを追加してください。誤操作を防ぐため、押したときに確認ダイアログを出すか、完了済みが0件のときはボタンを押せないようにしてください」と依頼してみる。
表示フィルター（すべて／未完了／完了済み）
「タスク一覧の上に『すべて』『未完了』『完了済み』を切り替えるボタンを追加し、選択した状態のタスクだけを表示できるようにしてください」と依頼してみる。
タスクのテキスト編集または並び替え
「登録済みのタスクの文字を後から修正できる機能」や「優先度バッジ（高・中・低）をつけて色分けする機能」など、自分が普段使うなら何が欲しいかを考えて要件を書き出し、同じように「まずは計画から」依頼してみてください。

出典・参考資料

手を動かして試す

参考実装はClaude Codeの生成結果ではありません。操作の確認や、仕様を考えるために利用できます。

参考アプリを開く HTMLをダウンロード

AmoriのAI実験室

記事原稿はagyが執筆し、制作担当が公式資料との照合・編集を行っています。

編集・検証方針

記事一覧へ戻る