🎓 生成AI活用の勉強会・無料相談・最新情報をお届けします
オンライン勉強会の案内や、無料相談、ChatGPT・Claude活用の具体例をメールでお届けします。登録は無料、いつでも解除できます。
「Webアプリを作りたいけど、プログラミングなんてできない…」そんな私が、話題のClaude Codeに挑戦してみました。結論から言うと、たった5日間で実際に動く在庫管理アプリを完成させることができました。この記事では、非エンジニアの私が体験した「リアルな5日間」を、つまずいたポイントも含めて全て公開します。
1日目：環境構築で早速つまずく（所要時間：約3時間）
まず最初にぶつかったのが環境構築です。Claude Codeを使うには、VS Codeとそのプラグインが必要と知り、公式サイトからダウンロード。しかし、ここで最初の壁が来ました。
VS Codeを開いても「どこからClaude Codeを使うの?」と迷子に。調べた結果、VS Codeの拡張機能で「Claude Code」をインストールする必要があることが判明しました。
1. VS Codeを開く2. 左側のアイコンから「拡張機能」をクリック3. 検索バーに「Claude」と入力4. 「Claude Code」をインストール5. APIキーの設定を求められるAPIキーの取得にはAnthropicのアカウントが必要です。Anthropicの公式サイトでアカウント作成後、APIキーを発行してVS Codeに貼り付けます。ここまでで約1時間かかりました。
環境構築が終わったら、試しに「こんにちは」と話しかけてみました。Claude Codeがちゃんと応答してくれた時は、正直感動しました。残りの2時間は、Claude Codeとの対話で「どんなアプリを作りたいか」を言語化する練習に使いました。
2〜3日目：アプリの設計と基本機能の実装（各日4時間）
2日目からは本格的な開発スタートです。私が作りたかったのは「小規模店舗向けの在庫管理アプリ」。まずClaude Codeに以下のように依頼しました。
「小さな雑貨店の在庫管理アプリを作りたいです。以下の機能が欲しいです：- 商品の登録・編集・削除- 在庫数の表示と更新- 在庫が少なくなったら警告表示使う技術は初心者でも扱いやすいものでお願いします」すると、Claude Codeは「HTMLとJavaScript、ローカルストレージを使ったシンプルな構成」を提案してくれました。そして驚いたのが、いきなり完成したコードを提示するのではなく、「まず基本構造を作って、それから機能を追加していきましょう」と段階的なアプローチを示してくれたこと。
2日目は基本的なHTML構造とデザインを作成。Claude Codeが生成したコードをそのままコピーして、HTMLファイルに貼り付けるだけです。ブラウザで開くと、すでに見栄えの良い画面が表示されました。
3日目は商品登録機能の実装です。ここで初めて「JavaScriptのコードが動かない」というトラブルに遭遇。エラーメッセージをそのままClaude Codeに伝えると、「ここのコードが間違っていますね。修正版はこちらです」と即座に解決してくれました。非エンジニアの私にとって、このエラー対応のサポートは本当にありがたかったです。
4日目：データ永続化とデザインの調整（所要時間：5時間）
4日目の朝、アプリを開いたら昨日登録したデータが全部消えていました。「これでは使えない!」と焦りましたが、Claude Codeに相談すると「ローカルストレージにデータを保存する機能を追加しましょう」と提案が。
// Claude Codeが提案したデータ保存の仕組みfunction saveToLocalStorage(data) { localStorage.setItem('inventory', JSON.stringify(data));}function loadFromLocalStorage() { const data = localStorage.getItem('inventory'); return data ? JSON.parse(data) : [];}このコードを追加すると、ブラウザを閉じても再度開けばデータが残るようになりました。「こんな簡単にデータが保存できるんだ!」と驚きました。
午後はデザインの調整です。「もっとプロっぽい見た目にしたい」とリクエストすると、Claude CodeはBootstrapというフレームワークの導入を提案。CDNリンクを1行追加するだけで、見違えるほど洗練されたデザインになりました。色合いや配置についても「もう少し明るい色にしたい」「ボタンを大きくしたい」など、自然な言葉で伝えるだけで修正してくれます。
5日目：最終調整とテスト、そして完成（所要時間：3時間）
最終日は、実際に使う場面を想定してテストを繰り返しました。スマホで開いてみると画面が崩れていたので、「スマホでも使えるようにしたい」と伝えると、レスポンシブ対応のコードを追加してくれました。
また、「在庫が5個以下になったら赤文字で警告を出したい」など、細かい要望も次々と実装。Claude Codeは私の曖昧な要望を理解して、適切なコードに変換してくれました。
午後には同僚に使ってもらい、フィードバックを収集。「削除する時に確認メッセージが欲しい」という意見があったので、それもすぐに追加。こうして5日目の夕方、実用レベルの在庫管理アプリが完成しました。
完成したアプリは、HTMLファイル1つ、CSSファイル1つ、JavaScriptファイル1つの合計3ファイル構成。プログラミング未経験の私でも、全体で約18時間の作業で形にできました。
まとめ：非エンジニアでも「作れる」時代がやってきた
この5日間で学んだ最大のポイントは、「完璧なプログラミング知識は不要」ということです。必要だったのは、作りたいものを具体的に言葉にする力と、エラーが出ても諦めずにClaude Codeと対話を続ける姿勢でした。
実際、私がコードを「理解」できたかというと、正直50%くらいです。でも、動くものは作れました。そして使い続けるうちに、少しずつコードの意味も分かってきました。
Claude Codeは、プログラミングの「通訳者」のような存在です。あなたの「こうしたい」を、コードという言語に翻訳してくれます。完璧主義にならず、「まず動くものを作る」というマインドで取り組めば、非エンジニアでも十分にWebアプリ開発は可能です。
次はあなたの番です。業務で「こんなツールがあればいいのに」と思っていることはありませんか? Claude Codeと一緒に、まずは小さな一歩を踏み出してみてください。