【初心者向け】Codex/ClaudeCodeで作る Webアプリ作成レッスン（4時間）
まずはローカル環境で「動くもの」を作り、次にSupabaseへ保存して、最後にNetlifyで公開まで体験する。
プログラム暗記ではなく、Codex/ClaudeCodeと対話しながら作るための実践レッスンです。
本レッスンでは、「社内の弁当注文・集計アプリ（学習用の架空データ）」を例にして解説します。
進め方は、自社の他の業務（申請・在庫・予約など）にそのまま応用できます。
このレッスンでできるようになること（ゴール）
- 何を作るかを「質問→回答」で要件整理できる
- 最小構成のWebアプリをローカルで起動・確認できる
- 問題が出たときに、直しやすい伝え方で修正依頼できる
- Supabase（保存）＋Netlify（公開）まで一通り体験できる
対象（こんな方におすすめ）
- 生成AIでアプリを作りたいが、何を指示すればいいか分からない
- エラーが出ると止まってしまい、直し方の頼み方が難しい
- Web公開（Supabase/Netlify）が初めてで、全体像をつかみたい
題材（作るもの）
社内の弁当注文・集計アプリ（学習用の架空データ）
- 社員：弁当を「1人1日1個」注文（締切前は変更・キャンセル可）
- 総務：弁当・社員・部署・日別メニューを管理、締切後も代理編集
- 集計：弁当別の個数・合計金額・注文者一覧、CSV出力
完成イメージ（実際に作ったアプリの画面例）
レッスンでは、このような3画面を目指して作っていきます（画像はすべて学習用の架空データ）。
① 社員用：お弁当注文画面（部署・氏名・弁当を選んで注文、締切前なら取り消しも可能）
② 総務用：集計画面（弁当屋別のFAX送信用集計表、社内配布用の注文者一覧、CSV出力・印刷）
③ マスタメンテナンス画面（部署・社員・弁当の登録。削除せず「無効」にして非表示にする考え方）
まず覚える言葉（初心者向け）
| 言葉 | 意味（たとえ） |
|---|---|
| ローカル環境 | 自分のPCの中だけで動かす練習場 |
| データベース | 会社共通の台帳（注文・社員などを保存） |
| Supabase | データベースとログインのサービス（台帳を置く場所） |
| Netlify | 作った画面をWebに置くサービス（入口の住所を作る） |
| ビルド | 公開できる形にまとめる作業 |
| デプロイ | 公開先へ配置する作業 |
| 環境変数 | 接続情報などを別置きで設定する仕組み |
| RLS | 「誰がどのデータを触れるか」を制限するルール |
4時間版：当日の流れ（合計240分）
| パート | 内容 | 目安 |
|---|---|---|
| 1 | 全体説明・準備（フォルダ/ツール確認、今日のゴール共有） | 20分 |
| 2 | 要件整理（AIに質問させる→回答→必須/追加/未決を整理） | 40分 |
| 3 | ローカル版の作成（最小機能でまず動かす） | 70分 |
| 4 | ローカル動作確認＋修正の頼み方（チェック→直す→再テスト） | 40分 |
| 5 | Supabase接続（保存できる状態にする、RLSの考え方を確認） | 40分 |
| 6 | Netlify公開（Dropで公開、公開後チェック、次回の進め方） | 20分 |
| 7 | ふりかえり（成果/つまずき/次にやること） | 10分 |
| 合計 | 240分（4時間） |
事前準備（講師・受講者）
- Codex/ClaudeCode、Node.js、ブラウザ、インターネット接続
- 受講者ごとに空の作業フォルダー
- Supabase/Netlify登録用メール（※料金表示を都度確認）
- 架空の部署・社員・弁当データ（例でOK）
安全のルール
- クレジットカード情報、パスワード、秘密鍵はチャットへ貼らない
- Secret key / service_role key は公開ファイルや画面側コードに入れない
- 実データ（実在社員名・注文履歴）ではなく架空データで練習する
レッスンで使う「最初の指示文」（そのまま貼り付けOK）
業務用WebアプリをCodex/ClaudeCodeで作りたいのですが、初心者のため詳しい指示文を作れません。作りたい目的や利用者、必要な画面、機能、保存する情報、公開方法について、1回に1～3問ずつ質問してください。回答を整理し、おすすめ案を説明したうえで、最後にCodex/ClaudeCodeへ貼り付ける指示文を作ってください。
進め方（4ステップ）
Step 1：要件を固める（質問→回答）
回答のポイント：
- 利用者（社員/総務）
- 締切、変更・キャンセル
- 管理（社員/弁当/日別設定）
- 集計と出力（CSVなど）
- 画面（PC/スマホ）
整理依頼（送る文）
ここまでの回答を、必須機能、後から追加する機能、未決定事項に分けて整理してください。初心者向けにおすすめ案と理由も説明してください。
重要な訂正例（送る文）
「複数個注文」ではなく「1人1日1個」です。要件を修正してください。
Step 2：まずローカル版を作る（公開はまだしない）
送る文
最終的にはWeb公開しますが、最初はローカル環境で動くアプリを作ってください。まず最小限の機能を完成させ、実際に起動して動作確認してください。初心者向けに起動方法と確認方法も説明してください。この段階では架空のサンプルデータを使用し、まだWeb公開はしないでください。
起動依頼（送る文）
ローカル確認用のサーバーを起動してください。ブラウザで開くURLと終了方法を初心者向けに教えてください。
Step 3：チェックして、直し方を覚える（大事）
チェックリスト（ローカル版）
- 社員：ログイン→部署/社員選択→弁当を1個→注文→変更/キャンセル→直近履歴
- 総務：弁当管理、社員/部署管理（退職者は非表示）、日別設定、集計、締切後の代理編集、CSV
- スマホ：幅390pxで操作しやすい、横はみ出しなし
直し方テンプレ（送る文）
○○画面で△△を操作すると□□になります。本来は××になってほしいです。原因を確認して修正し、同じ操作をテストしてください。他の正常な機能は変更しないでください。
Step 4：Supabase保存 → Netlify公開（共有できる状態へ）
Web公開の依頼（送る文）
ローカル版の確認が終わりました。次はSupabaseにデータを保存し、Netlify DropでWeb公開できるようにしてください。GitやGitHubは使いません。私は初心者なので、最初に全体の流れを説明し、その後は私が行う操作を1回に1～3手順ずつ案内してください。現在の機能は残してください。秘密の鍵を公開ファイルへ入れないようにし、安全設定も確認してください。公開前にローカル環境で動作確認とビルドをしてください。
SupabaseとNetlifyの役割（超かんたん）
- Supabase：注文データを保存する「共通の台帳」
- Netlify：アプリ画面を置く「Web上の入口」
よくあるトラブル（初心者向けの対処）
- ローカルURLが開かない
- 送る文：
- Netlifyでビルド失敗
- Deploy logを共有し、Node.jsバージョン/ビルドコマンド/公開フォルダ/環境変数を確認
- Supabaseへ保存できない
- Project URL / Publishable key / テーブル名 / RLS を確認（Secret keyをブラウザへ入れて解決しない）
参考資料
公式画面や無料枠は変更される可能性があります。当日は、画面に表示される料金と設定を確認しながら進めてください。
プロフィール
💡 現場目線・経営者目線を貫く、ITの町医者として
インフォケーション株式会社 代表取締役
東京都あきる野市に本社を構え、四半世紀にわたり地元の産業をITで支え続けてきた経営者です。
これまでに手がけた業務システム構築数は200件を超え、特に製造業や流通業の核となる「生産管理」「販売管理」システムで多数の実績を持っています。
🛠️ 現在の取り組みとメッセージ
現在は、最先端のAIエージェントや、社内に眠る知識を形にするナレッジ構築を活用。深刻化する中小企業の人手不足解消や業務効率化を、二人三脚でサポートする伴走支援に力を入れています。
無料相談・デモ体験
「自社の業務でも作れるか試してみたい」「レッスンの内容を相談したい」など、どんな小さな疑問でも大歓迎です。
事前にご用意いただくとスムーズです：現在の業務で使っている資料（Excel台帳、注文用紙、集計表など）を1〜3点