Claude CodeでWebアプリを作るとは
Claude Codeとは、「こんなアプリが欲しい」と日本語で伝えるだけで、AIが必要なコードを自動で生成してくれるツールです。この便利さを把握しておくだけでもClaude Codeは使えますが、仕組みを少し知っておくと、より的確な指示が出せるようになります。
まずはClaude Codeの概要・できること・今回作るアプリの全体像を順番に確認していきましょう。
Claude Codeの概要
Claude Codeは、Anthropicが開発したAIコーディングツールです。ターミナルやエディタ上で動作し、自然な言葉で指示を出すだけで、コードの生成・修正・デバッグまでをAIがサポートしてくれます。
従来のアプリ開発では、プログラミング言語の文法を覚えたうえで、自分でコードを一行ずつ書いていく必要がありました。しかしClaude Codeを使えば、「ToDoを追加できるフォームを作って」といった言葉で指示を出すだけで、AIが必要なコードを提案・生成してくれます。
上の画面のように、日本語で「シンプルなToDoリストのWebアプリを作って」と伝えるだけで、AIが224行ものコードを自動で生成してくれます。
コードそのものを書く知識よりも、「何を作りたいか」を言葉で整理する力が必要になる、新しい開発スタイルです。
Claude Codeでできること
Claude Codeは、アプリ開発のさまざまな場面で活用できます。主な機能を整理すると、以下の3つです。
コード生成 |
「〇〇の機能を追加して」と指示するだけで、必要なコードを自動で生成。ゼロからコードを書く必要がないため、プログラミング初心者でもアプリ開発を進めやすくなる。 |
コード修正 |
既存のコードに対して「この部分をこう変えたい」と伝えると、該当箇所を見つけて修正する。どこを直せばいいか分からなくても、やりたいことを言葉で説明するだけで対応可能。 |
デバッグ |
エラーが発生したときに、エラーメッセージをそのままClaude Codeに共有すると、原因の特定と修正方法の提案をしてくれる。エラーの意味が分からなくても、AIに任せながら解決できる。 |
この3つの動作は基本となるものですが、それぞれの機能を組み合わせることで、規模感がさまざまな開発に多用できます。
本記事で作るToDo／メモアプリの概要
本記事では、Claude Codeを使ってToDoとメモの2つの機能を持つシンプルなWebアプリを作ります。
このアプリが持つ機能は以下のとおりです。
ToDo機能
- 入力：やることをテキストフォームに入力し、ボタンで登録できます。
- 保存：入力した内容がリストとして画面上に保存されます。
- 表示：登録したToDoが一覧で表示され、完了チェックや削除もできます。
メモ機能
- 入力：自由にテキストを入力して保存できます。
- 表示：保存したメモが一覧で確認できます。
この「入力→保存→表示」の流れはWebアプリの基本構造として共通しており、この2つの機能を作ることで、Webアプリ開発の基礎がひととおり体験可能です。
なお、使用用途はビジネスシーンを想定しています。
開発環境の準備（インストールとCLIコマンド）
Claude Codeを使ってアプリ開発を始めるには、いくつかのソフトウェアをインストールしておく必要があります。ここでは開発環境の構築の流れをざっくり把握しておきましょう。
各手順の詳しい解説は、「Claude Codeとは？できること・使い方・料金まで初心者向けにやさしく解説」で紹介しています。
Claude Codeのインストール
Claude Codeを使うには、以下のソフトウェアを用意し、ダウンロードを進めていくだけで問題なく起動できます。
- Node.js：Claude Codeを動かすために必要な実行環境です。
- Claude Code本体：ターミナルでコマンドを実行してインストールします。
- Anthropicアカウント：Claude Codeの利用にはアカウントとサブスクリプションが必要です。
アカウント作成など手順は必要ですが、実際にやってみると初心者でも数分でインストールは完了しました。ただし、見慣れない単語がある場合は「自分が実際に調べる」ことで理解も深まります。
これらの準備が整ったら、いよいよ開発をスタートしていきましょう。
CLIコマンドの基本操作
CLIとは、キーボードでコマンド（命令文）を入力してPCを操作する方法のことです。WindowsではPowerShell、Macではターミナルがこれにあたります。
Claude Codeの操作でよく使うコマンドは、主に以下のようなものです。
- claude：Claude Codeを起動するコマンド
- npx create-next-app@latest：Next.jsのプロジェクトを新規作成するコマンド
- npm run dev：開発サーバーを起動して、ブラウザでアプリの動作を確認できるコマンド
すべて覚える必要はなく、必要なときに確認しながら使えれば十分です。
開発エディタの準備（Cursorなど）
Claude Codeをより快適に使うには、エディタにClaude Codeの拡張機能を導入するのがおすすめです。本記事ではVSCodeにClaude Code拡張機能を追加した環境で進めていきます。
VSCodeの拡張機能マーケットプレイスで「Claude Code」を検索してインストールするだけで、エディタ上からそのままClaude Codeを操作できるようになります。ターミナルを別で開く必要がなく、コードを書きながらAIに指示を出せるため、初心者にも使いやすい環境です。
なお、CursorというエディタもAI開発との相性が良いと言われています。Cursorは開発の細部を調整しやすいため、より複雑な機能を設計する際には有効な選択肢です。
このツール同士の組み合わせについては「Claude Codeのマル秘活用テクニック7選！初心者でもできる開発効率アップのコツ」を参考にしてください。
Claude CodeでToDoアプリを作る基本手順
ここからは、実際にClaude Codeを使ってToDoアプリを作る手順を解説します。
まずはプロンプトの文章入力から始めて、画面の作成・データの入力・保存・表示という流れで順番に進めます。スクリーンショット付きで解説しているので、ぜひ参考にしてください。
プロンプトでアプリを生成する方法
Claude Codeへの指示は、難しい言葉を使う必要はありません。「何を作りたいか」を日本語でそのまま伝えるだけでOKです。今回は以下のように入力しました。
「ToDoとメモ機能を持つシンプルなWebアプリを作ってください。タスクの追加・完了チェック・削除ができるToDo機能と、自由にテキストを入力して保存できるメモ機能を実装してください。」
この結果Claude Codeが機能を整理しながら、716行ものコードを自動で生成してくれました。
ブラウザで実際に開くと、ToDoとメモがタブで切り替えられるシンプルなアプリが完成しています。
ポイントは作りたい機能を具体的に書くことです。「タスクの追加・完了チェック・削除ができる」のように完成イメージを言葉にするほど、AIが意図を汲み取りやすくなります。
一方で、「いい感じの使いやすそうなToDoアプリにして」といったざっくりとした指示をした場合、意図しない設計になりました。
Next.js／Reactによる画面作成
WebアプリをClaude Codeで作る際、よく登場する技術としてReactとNext.jsがあります。
Reactは画面のパーツを作るためのJavaScriptの仕組みで、Next.jsはそれをWebアプリとして動かすためのフレームワーク（土台）です。本格的なWebアプリ開発ではよく使われる組み合わせですが、必ずしも必須ではありません。
今回Claude Codeが生成したアプリは、HTML・CSS・JavaScriptというWebの基本技術だけで構成されたシンプルな構造になっています。
716行ものコードが自動生成されていますが、Claude Codeへの指示は1回の日本語入力だけです。
コードの詳細を理解していなくても、やりたいことを伝えるだけでアプリの画面を作ってくれます。
データ入力機能の作成
入力フォームは、最初のプロンプトを送った時点で自動的に作成されています。Claude Codeに「どのように実装したか説明して」と聞くと、以下のように機能ごとに整理して教えてくれます。
＜ToDoの入力機能＞
- テキストを入力して「追加」ボタンまたはEnterキーで登録できる
- 空欄のまま追加しようとしても登録されない（バリデーション）
- 登録したデータはブラウザに保存されるので、ページを閉じても消えない
＜メモの入力機能＞
- タイトル（省略可）と本文を自由に入力して保存できる
- 既存のメモを編集して上書き保存することもできる
- 保存後は「保存しました！」と2秒間表示される
Claude Codeを使えば指示だけでアプリを作れますが、機能を修正・追加する際にはコードの基礎知識があるとよりスムーズです。
プログラミングの基礎が気になった方は、paizaラーニングの講座もあわせてチェックしてみてください。
【関連】講座一覧 | プログラミング学習サイト【paizaラーニング】
データ保存と一覧表示
データの保存と一覧表示も、最初のプロンプト1回で自動的に実装されています。入力したToDoやメモがどのように保存・表示されているか気になる場合は、Claude Codeに聞いてみましょう。
「入力→保存→表示」という一連の流れがプロンプト1回で完成するのが、Claude Codeを使った開発の大きな特徴です。
ただし、実際に使ってみると「ここはこう動いてほしかった」という改善点が見えてくることもあります。この場合のアプリ作成でも課題が見つかりました。この対処法は、次の「アプリの改善とデバッグ」で解説しています。
アプリの改善とデバッグ
アプリが完成しても、実際に使ってみると「思っていた動作と違う」「この機能を追加したい」という場面が出てきます。この場合もClaude Codeに言葉で伝えるだけで、修正や改善を進めることができます。ここではエラーへの対処法と、機能を改善する方法を見ていきましょう。
エラーが出たときの対処
アプリを動かしているとエラーが発生することがあります。そんなときはまず、ブラウザの開発者ツール（F12キー）を開いて「Console」タブを確認しましょう。
赤いエラーメッセージが表示されたら、その文章をそのままClaude Codeに貼り付けて「このエラーメッセージが出ました。どうしたらいいですか？」と聞いてみます。
このように、エラーの原因と具体的な解決策を提示してくれます。エラーの意味がわからなくても、メッセージをそのままコピペするだけで対処できるのがClaude Codeの強みです。
Claude Codeを使ったデバッグ
エラーが出ていなくても「思った通りに動かない」という場面はよくあります。このケースも、気になる動作をそのままClaude Codeに言葉で伝えるだけで改善できます。
今回は実際に使ってみて、保存済みメモをクリックすると入力フォームに内容が読み込まれてしまうという動作が気になりました。そこでClaude Codeに「保存済みメモをクリックしたときに入力フォームではなく展開表示にしたい」と伝えてみます。
自動でコードを修正してくれました。また、変更内容もわかりやすくまとめています。
修正後は、保存済みメモをクリックするとその場で内容が展開され、編集・削除ボタンも分離された使いやすい仕様になりました。
「なんか違う」と感じたらClaude Codeに伝えてみるというサイクルを繰り返すことでアプリはどんどん使いやすくなっていきます。
一方で、このUI設計ができるのは「実際に使ってみた人間ならではの視線」が必要です。Claude Codeに頼り切るのではなく、試行錯誤を重ねることで品質が向上します。
アプリ機能の簡単な改善
デバッグと同じように、機能の追加や改善もClaude Codeに言葉で伝えるだけで対応できます。たとえば以下のようなプロンプトで、さらなる改善が可能です。
- 「ToDoに優先度（高・中・低）を設定できるようにして」
- 「完了済みのToDoをグレーアウトして区別しやすくして」
- 「メモにタグをつけて分類できるようにして」
- 「期限日を設定できる項目を追加して」
ポイントは「何を・どうしたいか」を具体的に伝えることです。
改善も自動的にやってくれる、何でもできる便利なAIには「もっと使いやすくして」といったざっくりした指示になりがちですが、まずは自分で「変えたい機能」と「その理由」を考えてみましょう。
これらをセットで伝えると、意図に近い改善結果が得られやすくなります。
Webアプリの公開（デプロイ）の基本
作ったアプリは、自分のパソコン上だけでなくインターネット上に公開することができます。これを「デプロイ」と呼びます。ここでは、デプロイの基本的な考え方と公開までの流れを確認していきます。
デプロイとは何か
デプロイとは、自分のパソコン上で動いているアプリをインターネット上に公開し、誰でもアクセスできる状態にすることです。
これまで作ってきたアプリは「ローカル環境」で、自分のパソコンの中だけで動いている状態です。この状態では自分しか見ることができません。デプロイをすることで、URLを知っている人なら誰でもブラウザからアクセスできるようになります。
ローカル環境 |
デプロイ後 |
|
|---|---|---|
アクセスできる人 |
自分のみ |
誰でも |
インターネット接続 |
不要 |
必要 |
公開URL |
なし |
あり |
アプリ公開の基本手順
作成したWebアプリを公開する方法はいくつかあります。代表的なものは以下の3つです。
- Netlify：フォルダをドラッグ&ドロップするだけで公開できる。HTMLファイル1つのシンプルなアプリに最適。
- Vercel：Next.jsとの相性が良く、GitHubと連携して自動デプロイができる。
- GitHub Pages：GitHubのリポジトリから直接公開できる。エンジニアに広く使われている王道サービス。
いずれも無料プランで始められ、サーバーを自分で用意する必要がありません。
今回は最もシンプルなNetlifyを使って実際に公開してみました。ログイン後の画面に表示される「Upload a project folder」エリアにtodo-memo-appフォルダをドラッグ&ドロップするだけで、数秒で公開が完了しました。
発行されたURLを共有するだけで、誰でもブラウザからアクセスできるようになります。
本記事で実際に作成したWebアプリのURLはこちらです。▼
https://dazzling-tartufo-4ae775.netlify.app/
よくある質問（Q&A）
Q.プログラミング初心者でも使える？
A.使えます。Claude Codeはテキストで指示を出すだけでコードを生成してくれるため、プログラミング言語を覚えていなくてもアプリ開発を始められます。ただし、修正や改善を加える際にはコードの基礎知識があるとよりスムーズです。
Q.Next.jsやReactの知識は必要？
A.必須ではありません。本記事のアプリはHTML・CSS・JavaScriptのみで作成しています。ただし、より複雑なWebアプリを作りたい場合には、これらの知識があると応用の幅が広がります。
Q.CLIコマンドが分からなくても大丈夫？
A.大丈夫です。VSCodeにClaude Code拡張機能を導入すれば、ターミナルをほぼ使わずに開発を進められます。よく使うコマンドも数種類程度なので、必要なときに確認しながら覚えていけば十分です。
Q.エラーが出たときはどうすればいい？
A.ブラウザの開発者ツール（F12キー）でエラーメッセージを確認し、その内容をそのままClaude Codeに伝えましょう。原因と解決策を提案してくれるため、エラーの意味が分からなくても対処できます。
Q.ToDoアプリ以外も作れる？
A.作れます。「入力→保存→表示」の基本構造を応用することで、メモアプリ・簡単な管理ツール・予定管理アプリなど、さまざまなWebアプリの作成が可能です。
まとめ
今回は実際にWebアプリを制作し、手順を解説しました。Claude Codeを使えば、プログラミングの知識がなくても日本語の指示だけでWebアプリを作れることが実感できたのではないでしょうか。
本記事のポイントをまとめます。
- Claude Codeは日本語で指示するだけでコードを自動生成してくれるため、「何を作りたいか」を具体的に言葉にするほど、意図に近いアプリが完成しやすくなる
- 開発環境はVSCodeの拡張機能版が初心者におすすめ、ターミナルをほぼ使わずにClaude Codeを操作でき、すぐに開発を始められる
- エラーや動作の改善もClaude Codeに任せられ、エラーメッセージをそのまま貼り付けるだけで原因と解決策を提示してくれる
- 作ったアプリはNetlifyなどのサービスで無料で公開でき、サーバーの知識がなくてもデプロイが完了する
- AIに頼り切るのではなく、人間の視点との組み合わせが大切。実際に使ってみて気になった点を言葉にして伝えることで、アプリの品質が向上する
Claude Codeを使った開発をさらに深めたい方には、プログラミングの基礎知識があるとより応用の幅が広がります。
paizaラーニングでは、HTML・CSS・JavaScriptなどWeb開発に関連する講座を公開しています。ぜひあわせてチェックしてみてください。