プログラミング未経験でWebアプリを作った全記録【5日間】

あなたがもし「プログラミングなんて難しくて自分にはできない」と思っているなら、その考え方を少し変える時が来たかもしれません。実は、いま時代は大きく変わっています。Claude Codeのような生成AIの登場により、プログラミング経験がゼロでもWebアプリケーションを作成できる環境が整ったのです。

この記事では、実際に完全なプログラミング未経験の状態からスタートして、わずか5日間でちゃんと動くWebアプリを完成させた全記録を公開します。あなたが知りたい「実際のところ、何ができるのか」「どうやって進めるのか」「どこで困るのか」——その全てを、時間と進捗を含めて書きました。

なぜいま、未経験者がアプリを作れるのか

Claude Codeがもたらした変化

従来、Webアプリを作るには、JavaScriptやPythonなどの言語を学び、フレームワークの使い方を理解し、データベース設計から始まる複数のステップを踏まなければなりませんでした。期間にして数ヶ月、学習にかかる時間は数百時間単位。一般的なビジネスパーソンにとっては、始める前に心が折れてしまう世界でした。

しかし、Claude Codeの登場で全てが変わりました。あなたが「○○ができるアプリを作りたい」と説明するだけで、AIが必要なコードを全て生成してくれます。構文エラーの修正、ファイル作成の指示、環境構築の判断——こうした細かい障害が圧倒的に減るのです。

結果として、プログラミングの知識がなくても、「要件を正確に説明できるスキル」があれば、実行可能なアプリを数日で形にできるようになったわけです。

実際に必要な環境と時間

今回のプロジェクトで用意したのは、次のものだけです。

• MacBook Air（Windows機でも同じ）
• Claude有料版のアカウント（月20ドル≒約3,000円）
• テキストエディタ（VSCode、無料）
• 1日あたり1〜2時間の時間

特別な知識は不要です。Webがどう動くか、データベースが何かといった基礎的な概念は必要になりますが、これもAIとの対話の中で自然と理解が深まります。

5日間の実戦プロセス——1日目から完成まで

1日目（1.5時間）：アイデア定義と環境構築

まず最初にやることは、作るものを明確にすることです。曖昧なまま進むと、後でやり直しになります。

今回は「チームの日報を記録して、簡単に一覧表示・検索できるWebアプリ」を作ることに決めました。使う技術としては、フロントエンドにHTML/CSS、バックエンドにPython（Flask）という組み合わせにしました。これはClaude Codeが得意な組み合わせです。

Claude Codeを開いて、こう指示しました。

するとAIは、次の構成でアプリを提案してくれました。

1. app.py（メインのPythonファイル）
2. requirements.txt（必要なライブラリの一覧）
3. templates/フォルダ（HTMLテンプレート）
4. SQLite データベース

これらは全てAIが生成してくれます。あなたがやることは「ファイルを作成する」というClaude Codeの指示に従うだけです。

2日目（2時間）：基本機能の実装

2日目は、フォーム送信とデータベース保存の実装です。

Claude Codeに「入力フォームから受け取ったデータをデータベースに保存するコードを生成してください」と指示しました。すると以下のようなコードが出力されます。

from flask import Flask, render_template, request, redirect
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///reports.db'
db = SQLAlchemy(app)

class Report(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    date = db.Column(db.Date, nullable=False)
    name = db.Column(db.String(100), nullable=False)
    content = db.Column(db.Text, nullable=False)
    achievement = db.Column(db.Text)
    created_at = db.Column(db.DateTime, default=datetime.utcnow)

@app.route('/')
def index():
    reports = Report.query.order_by(Report.date.desc()).all()
    return render_template('index.html', reports=reports)

@app.route('/add', methods=['POST'])
def add_report():
    date = request.form.get('date')
    name = request.form.get('name')
    content = request.form.get('content')
    achievement = request.form.get('achievement')
    
    new_report = Report(date=date, name=name, content=content, achievement=achievement)
    db.session.add(new_report)
    db.session.commit()
    
    return redirect('/')

このコードはAIが生成したものですが、あなたが理解する必要があるのは概要だけです。「これは日報情報を受け取って保存する部分」という認識で十分。細かい構文は、エラーが出たときにAIに「このエラーが出ました」と報告すれば、修正してくれます。

3日目（1.5時間）：検索機能とUI改善

基本機能が動いたら、次は使いやすさの向上です。

「名前で日報を検索する機能を追加してください」とAIに指示すると、新しいルートを生成してくれます。

@app.route('/search', methods=['GET', 'POST'])
def search():
    if request.method == 'POST':
        name = request.form.get('name')
        reports = Report.query.filter(Report.name.contains(name)).order_by(Report.date.desc()).all()
    else:
        reports = []
    
    return render_template('search.html', reports=reports)

同時にHTMLファイルも生成してくれるので、あなたは「このコードをコピペして貼り付ける」という操作だけで済みます。

3日目に実施した改善リストは、以下の通りです。

• 検索フォームの追加（名前検索）
• 日報の詳細表示ページ
• 削除ボタンの追加
• CSSでの見た目改善（フォントサイズ、配色）

3日目の終了時点で、「実務で使える」レベルの機能は全て完成しています。

4日目（1時間）：テストと小さな修正

4日目は、実際に使ってみる日です。複数の日報を入力してみて、動作に違和感がないか確認します。

この段階で気づくのが「細かい改善点」です。例えば、「日付が古い順に並んでしまう」「検索結果がうまく表示されない」といった具合です。

こうした問題も、AIに「○○がうまくいきません。現在のコードはこれです」と伝えれば、15分以内に修正されます。修正コストはほぼ0で、あなたの時間だけが消費されます。

5日目（1時間）：デプロイと完成

最後は、このアプリを外部からアクセス可能にするステップです。Herokuやv0.devといった無料プラットフォームへのデプロイをAIに依頼します。

実際に困った点と解決方法

「ライブラリが見つからない」エラー

初めてアプリを起動したとき、「ModuleNotFoundError」というエラーが出ました。これは、Flaskなどのライブラリがインストールされていない状態だったのです。

解決方法は、ターミナルで以下のコマンドを実行するだけです。

pip install -r requirements.txt

このコマンド自体も、Claude Codeが「実行してください」と教えてくれるので、あなたは指示に従うだけで大丈夫です。

データベースの初期化の手順がわからない

データベースを初期化するには、Pythonシェル上で特定のコマンドを実行する必要があります。これも、Claude Codeに「データベースを初期化するコードをください」と頼むと、詳しい説明とともに提供されます。

python
from app import app, db
with app.app_context():
    db.create_all()

これをコピペして実行すれば、テーブルが自動生成されます。あなたが理解する必要があるのは「これでデータベースの準備ができた」という事実だけです。

検索機能が空白文字で全件返してしまう問題

4日目のテスト時、検索フォームに何も入力せずに送信すると、全ての日報が表示されてしまう問題が発生しました。

「検索フォームが空のとき、『検索キーワードを入力してください』というメッセージを表示してください」とAIに依頼すると、条件分岐を追加したコードが提示されました。

@app.route('/search', methods=['GET', 'POST'])
def search():
    reports = []
    message = None
    
    if request.method == 'POST':
        name = request.form.get('name', '').strip()
        
        if not name:
            message = "検索キーワードを入力してください"
        else:
            reports = Report.query.filter(Report.name.contains(name)).order_by(Report.date.desc()).all()
    
    return render_template('search.html', reports=reports, message=message)

この修正に要した時間は、AIとのやり取りを含めて10分程度でした。

未経験者がアプリ開発で成功するためのTips

成功のための5つのポイント

• 要件は具体的に、細部まで説明する：「簡単な検索機能」ではなく「名前で日報を検索し、マッチした結果を表示する」のように。曖昧な指示は、何度もやり直しになります。
• 最初は「最小限の機能」から始める：入出力とデータベース保存だけで十分。その後、検索やフィルタ機能を足していく進め方が効率的です。
• エラーが出たら、焦らずエラーメッセージをAIに見せる：AIはエラーメッセージから原因を推測して、確度の高い修正案を出してくれます。自分で調べるより100倍速いです。
• 1日の終わりに「何ができたか」を記録する：この記事のように記録することで、次のプロジェクトのロードマップが作りやすくなります。
• 生成されたコードは「読む」「理解しようとする」：全部理解する必要はありませんが、概要は把握しましょう。次のプロジェクトが加速します。

時間を無駄にしないための工夫

実務レベルでアプリを完成させるには、単に「AIに頼る」だけでなく、工夫が必要です。

例えば、Claude Codeに指示を出す前に、紙にやることをリストアップします。「1. フォーム作成 2. データベース保存 3. 検索機能」という具合に。すると、AIの回答も具体的になり、ズレが減ります。

また、「このファイルはどこに置きますか？」といった環境的な質問は、なるべく先に解決しておきましょう。例えば、プロジェクトフォルダの構成を「templates/フォルダにHTMLを入れ、static/フォルダにCSSを入れる」と決めておくと、後で混乱しません。

1回目のプロジェクトでは時間がかかりますが、2回目以降は2〜3割短縮できます。理由は、AIとの対話パターンが身に付き、「質問の質」が上がるからです。

次のステップ：あなたも作ってみよう

この記事を読んで「自分もやってみたい」と思ったなら、今がチャンスです。プログラミング経験がなくても、Claude Codeを使えば、5日間で実動作するアプリが作れます。

始める前に、あなたの「作りたいアプリ」を1つ決めてください。例えば、以下のようなものがあります。

• 家計管理ツール（収支記録と分析）
• タスク管理アプリ（期限付きのToDoリスト）
• 在庫管理システム（数量追跡）
• 顧客情報管理（営業用CRM）

初めは「シンプルすぎる」と感じるくらいの要件でいいです。大切なのは「動くものを完成させる経験」を積むことです。その経験があれば、次のアプリはもっと複雑な機能を追加できるようになります。

最後に、一つ忘れずに。プログラミングは「難しい」のではなく「新しい」だけです。AIの時代、その「新しさ」は、数日で「当たり前」に変わります。あなたも、今週中に「Webアプリを作った人」になることができます。その第一歩は、今、このタイミングです。