🎓 生成AI活用の勉強会・無料相談・最新情報をお届けします
オンライン勉強会の案内や、無料相談、ChatGPT・Claude活用の具体例をメールでお届けします。登録は無料、いつでも解除できます。
「AIでアプリが作れる」という話を聞いて半信半疑だった私が、実際にClaude Codeを使って5日間でWebアプリケーションを作成してみました。プログラミング経験ゼロの状態から、どこまでできるのか?この記事では、つまずいたポイントや解決方法を含め、リアルな制作過程をすべて公開します。
【1日目】環境構築で早速つまずいた話
初日はClaude Codeの環境構築からスタート。正直、ここが最初の難関でした。まずVSCodeをインストールし、Claude Code拡張機能を追加します。
実際に行った手順:
# VSCodeを公式サイトからダウンロード・インストール
# 拡張機能から「Claude Code」を検索してインストール
# AnthropicのAPIキーを取得して設定ここで私が躓いたのは「APIキーってどこで取得するの?」という初歩的な疑問。Anthropicの公式サイトでアカウントを作成し、Console画面から「API Keys」セクションでキーを生成します。初回は$5分の無料クレジットがもらえたので、まずはこれで試すことにしました。
環境構築が完了したら、まずは簡単なテストとして「Hello World」を表示するHTMLファイルを作成するよう依頼。Claude Codeは即座にコードを生成し、ファイルを作成してくれました。この時点で「これは本当にできるかも」と感じた瞬間です。
【2〜3日目】実際のアプリ設計と対話のコツ
作りたかったのは「タスク管理アプリ」。シンプルですが、データの保存や削除など基本機能が一通り学べると考えました。
最初の指示:
「タスクを追加・削除・完了チェックできるWebアプリを作ってください。デザインはシンプルで使いやすいものにしてください。」
すると、Claude Codeは約30秒でHTML、CSS、JavaScriptの3ファイルを生成。しかし実際に動かしてみると、データがブラウザを閉じると消えてしまう問題が発覚しました。
ここで学んだのは「具体的に追加要望を伝える」ことの重要性です。
改善指示:
「localStorageを使って、ブラウザを閉じてもデータが残るようにしてください。また、タスクの優先度を3段階で設定できる機能も追加してください。」
この指示で、Claude Codeは既存のコードを適切に修正。データの永続化と優先度機能が実装されました。非エンジニアの私でも、「こういう機能がほしい」を日本語で伝えるだけで実現できるのは驚きでした。
3日目には細かいUI調整を依頼。「ボタンの色を青系に」「タスク完了時に取り消し線を表示」など、デザインの微調整もスムーズに対応してくれました。
【4〜5日目】デバッグとデプロイの実践
4日目、実際に使ってみるとバグを発見。優先度の高いタスクが正しく並び替えられない問題がありました。
ここでのポイントは「エラーメッセージをそのまま伝える」こと。ブラウザの開発者ツール(F12キー)でコンソールを開き、表示されたエラーをコピーしてClaude Codeに貼り付けました。
// 発生していたエラー
Uncaught TypeError: Cannot read property 'priority' of undefined「このエラーが出ています。修正してください」と伝えると、Claude Codeは原因を特定し、ソート機能のロジックを修正。バグは即座に解決しました。
5日目はいよいよデプロイ。GitHub Pagesを使って無料で公開する方法を教えてもらいました。
デプロイ手順:
# Gitリポジトリを初期化
git init
git add .
git commit -m "Initial commit"
# GitHubにプッシュ(リポジトリは事前に作成)
git remote add origin YOUR_REPO_URL
git branch -M main
git push -u origin main
# GitHub Settings > Pages でmainブランチを公開設定Gitコマンドも初めて使いましたが、Claude Codeが一つ一つ説明してくれたので、なんとか公開まで到達。自分が作ったアプリがインターネット上で動いているのを見た時は、本当に感動しました。
非エンジニアが感じた「できたこと」と「難しかったこと」
できたこと:
- 日本語での指示だけで本格的なアプリが作れた
- デザインの細かい調整も自由自在
- バグ修正も対話で解決できた
- 無料でWebに公開できた
難しかったこと:
- 最初の環境構築(特にAPIキー周り)
- 「何を作るか」の具体的なイメージを持つこと
- 専門用語(localStorageなど)の理解
- Gitコマンドの概念
ただし、難しかった部分も「Claude Codeに質問する」ことで解決できました。「localStorageって何ですか?」と聞けば、初心者向けに丁寧に解説してくれます。
まとめ:5日間で学んだClaude Code活用の3つのコツ
非エンジニアの私が5日間の実践で学んだ、Claude Codeを使いこなすコツは以下の3つです。
1. 具体的に指示を出す
「いい感じに作って」ではなく、「青いボタンで、クリックしたら確認メッセージを表示」のように具体的に伝えると、期待通りの結果が得られます。
2. わからない言葉はすぐ質問する
Claude Codeは教師としても優秀です。専門用語が出てきたら遠慮せず「それって何ですか?」と聞きましょう。
3. 小さく作って徐々に改善する
最初から完璧を目指さず、基本機能だけ作って動かし、そこから「これも追加したい」と改善していくアプローチが成功のカギでした。
プログラミング未経験でも、5日間で実用的なWebアプリが作れました。もちろんプロのエンジニアが作るものとは違いますが、「自分のアイデアを形にする」体験は想像以上に楽しく、達成感がありました。あなたもぜひ、今日から挑戦してみてください。最初の一歩は、思っているより簡単です。