ゼロから始めるClaude Code - #4 はじめてのアプリを作ってみる

これまでは小ネタを試しながら基本操作を体験してきました。今回はいよいよアプリを1つ完成させる回です。

「自分でも作れるんだ」を体感してもらうことが目的です。コードを一行も書かなくていいので、安心して進めてください。

今回作るもの

ブラウザで動くToDoアプリを作ります。最小機能はこの3つです。

タスクを追加する
タスクを一覧で表示する
タスクを削除する

完了チェックや並び替えのような追加機能はあえて入れません。まず動くものを完成させるのが今回のゴールです。最後に「拡張したくなったらこう頼む」というプロンプト例を載せておきます。

技術スタックはHTMLとCSSとJavaScriptだけで組みます。サーバーもデータベースも使わない、ブラウザでファイルを開けば動く構成です。

ハンズオンの準備

新しい作業フォルダを作って移動します。

mkdir my-todo-app
cd my-todo-app
claude

これでClaude Codeが立ち上がります。フォルダの中身は空っぽですが、これからClaude Codeが必要なファイル（index.html / style.css / app.js）を作っていきます。

① 要件をプロンプトで伝える

まず、何を作りたいかをClaude Codeに伝えます。「ToDoアプリ作って」では弱いというのは前回学んだとおりです。機能・見た目・技術スタックを言葉にします。

そのままコピペで使えるプロンプトを置いておきます。

ブラウザで動くシンプルなToDoアプリを作ってください。

【機能】
- 入力フォームでタスクを追加できる
- 追加したタスクは画面下に一覧表示される
- 各タスクの横に「削除」ボタンがあり、押すとそのタスクが消える

【技術スタック】
- HTML / CSS / JavaScript のみ
- フレームワークやライブラリは使わない
- index.html / style.css / app.js の3ファイル構成

【見た目】
- シンプルでミニマルなデザイン
- 中央寄せ、白背景に濃いグレーの文字
- 入力欄と追加ボタンは横並び

ポイントは機能・技術・見た目を分けて書くことです。それぞれを箇条書きで渡すと、Claude Codeも整理して読み取ってくれます。

② Plan modeで段取りを確認する

要件を伝える前に、Shift + Tab でPlan modeに切り替えてから送ります。

Claude Codeが実行する前に、こんな計画を返してくれます。

プラン:
1. index.html を作成（フォーム＋リスト表示エリア）
2. style.css を作成(中央寄せ・ミニマルデザイン）
3. app.js を作成（追加・表示・削除のロジック）
4. 各ファイルが連携して動くことを確認

この計画を読んで、違和感がなければ承認します。「タスクをローカルストレージに保存したい」のような追加要望があれば、ここで指示し直せます。今回は最小機能なので、そのまま承認で大丈夫です。

承認すると、Claude Codeが3つのファイルを順番に作っていきます。

③ 生成されたコードをブラウザで確認する

ファイルが完成したら、実際に動かしてみます。index.html をブラウザで開くだけです。

Macの場合、ターミナルでこう打つと既定のブラウザで開きます。

open index.html

Windowsの場合は以下です。

start index.html

エクスプローラーやFinderから直接ダブルクリックでもOKです。

ブラウザが開いて、ToDoアプリが表示されたら成功です。タスクを追加してみて、削除ボタンが効くか確認しましょう。

動かないときの伝え方

ここで「あれ、追加ボタンを押しても何も起きない」のような不具合に出会うことがあります。そんなときはClaude Codeにエラーを正確に伝えます。

ブラウザでF12（Macは⌘＋⌥＋I）を押すと開発者ツールが開きます。Consoleタブにエラーメッセージが出ていれば、そのまま貼り付けてClaude Codeに渡します。

追加ボタンを押すと開発者ツールに以下のエラーが出ました。
直してください。

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at app.js:3

「動かない」ではなく「何がどう動かないか」を渡すのがコツです。エラー文・行番号・操作内容を一緒に書くと、ほぼ一発で直してくれます。

④ 仕上げの微調整

動くようになったら、見た目を好みに合わせて微調整します。これも対話だけで進められます。

削除ボタンの色を赤から落ち着いたグレーに変えてください。

タスクの一覧を、新しいものが上に来るように並べ替えてください。

追加ボタンの右に、入力欄を空にする「クリア」ボタンを追加してください。

修正のたびにブラウザをリロードして確認します。**「直してもらう→ブラウザで確認→次の依頼」**のループを何度か繰り返すと、自分好みのアプリに育っていきます。

このループこそがClaude Codeの本領です。コードを書くのではなく、欲しい状態を言葉にする——これがアプリ開発の新しい形です。

拡張するならこんなプロンプト

最小機能のToDoアプリができたら、ここから先は好みに応じて広げていけます。そのままコピペで使える依頼文を置いておきます。

完了チェックを追加する

各タスクの左にチェックボックスを追加してください。
チェックすると、そのタスクの文字に取り消し線が入るようにしてください。

リロードしても消えないようにする（localStorage保存）

追加したタスクをブラウザのlocalStorageに保存して、
ページをリロードしても残るようにしてください。
削除や完了状態の変更も保存に反映してください。

並び替えと期限を追加する

タスクに「期限」フィールドを追加してください。
追加時に日付を入力できるようにし、
一覧は期限が近い順に並ぶようにしてください。
期限切れのタスクは赤文字で表示してください。

このように、やりたいことを言葉にできれば、機能はいくらでも広げられます。最初から全部盛りで作らず、動くものを完成させてから、少しずつ育てていくのがおすすめです。

ここまでで何ができるようになったか

今回でできるようになったことを整理しておきます。

要件を整理してClaude Codeに渡せるようになった
Plan modeでアプリ開発の段取りを確認できるようになった
生成されたコードをブラウザで確認・テストできるようになった
不具合が出たときの伝え方を覚えた
対話だけでアプリの見た目や機能を育てられるようになった

何より、自分の手で「動くもの」を1つ完成させた経験は大きいです。一度この感覚を掴むと、次に作りたいものが浮かんだとき「Claude Codeに頼めばできるな」と自然に思えるようになります。

次回は、毎日の業務で繰り返している作業を自動化してみます。題材は「複数の議事録メモから週報を生成する」こと。一度仕組みを作っておけば、毎週ワンコマンドで週報が出てくるようになります。

それでは、次回もぜひお付き合いください。

keyaki. AI