コード1行も書けなかった私が
"アプリ開発できる人"になるまでの全手順
非エンジニア・文系・小学生でも誰でもできる。AirCleの15回講座で学んだすべてを、ひとつも漏らさず公開します。
「プログラミング＝コードを何千行も暗記、数学が得意じゃないとダメ」——それは2023年以前の話。
演技するのはAI。監督（わたしたち）に必要なのは、①企画する ②指示する ③ジャッジするの3つだけ。数学もタイピング速度も関係ない。
必要なスキルはこれだけ
バイブコーディングとは、AIと一緒にノリ（バイブ）で開発するスタイルのこと。振り付けをガチガチに覚えるんじゃなく、音楽に乗って踊る感覚。
主要AIコーディングツール一覧
プロンプトのテンプレート
講座全体の4フェーズ構成
「え、そこから？」と思うかもしれないけど、AIに「このファイルを修正して」と指示する時に、どのファイルかをパスで正確に伝える必要があるからここが大事。
よく出る拡張子
- →
.htmlWebページの骨組み - →
.cssWebページの見た目 - →
.jsWebページの動き - →
.tsxReactのコンポーネント - →
.mdドキュメント（Markdown）
パスの書き方
デスクトップに test フォルダを作って、その中に memo.txt を作って、パスを確認する。地味だけどここを飛ばすと後で詰みます。
まず使うのは Google の Gemini。gemini.google.com にアクセスしてGoogleアカウントでログインするだけ。
開発に使う場合は Canvasモードを必ず選択 すること！
プロンプトの3つのコツ
「あなたはプロのWebデザイナーです」→ AIがその人になりきって答えてくれる
「自己紹介サイトを作りたい」→ ゴールがないとふわっとした回答になる
「カッコいい感じで」「可愛らしく」→ AIが雰囲気を汲み取ってくれる
大事な心構え
AIとの会話は一発で終わりじゃない。ラリーを続ける。「お、これいいじゃん」→「もっと詳しく」→「ここを変えて」。遠慮なく何回聞いてもOK。AIは怒らない。
柱・壁・屋根
色・デザイン・内装
電気・水道・エアコン
コピペワークフロー（Lecture 4の方法）
Antigravity = Google製、GeminiのAIが最初から入ったエディタ（VS Code ベース）。無料で使える。
エディタの4エリア
右側の「Agent」パネルがAIエージェント。「index.htmlを作って」と言うだけで、AIが勝手にファイルを作って、コードを書いて、保存してくれる。さらにプレビューがリアルタイムで右半分に表示され、コード変更で自動リロード。
Gitの3ステップ
良いコミットメッセージ
APIキーは銀行の暗証番号と同じ。GitHubに上げたら全世界に公開するのと同じ。必ず .env ファイルに保存し、.gitignore に追加すること！
「AIが書いてくれるんだから理解しなくていい？」——理解してるとAIへの指示の精度がめちゃくちゃ上がる。
HTML ＝ 家の骨組み（セマンティックタグ）
CSS Flexbox — レイアウトの要
React と Next.js の関係
画像生成のMidjourneyが「絵を描くAI」なら、v0は「コードを書くAI」。生成されたデザインはただの画像じゃなくて、実際に動くコード（React + Tailwind CSS）。ボタンを押せるし、フォームに入力もできる。
使い方
10秒でA/B/Cの3パターンが出てくる。わたしたちの仕事は「キュレーター」——作るんじゃなくて、選ぶ。
プロンプトのコツ：技術仕様より「バイブス」
便利な機能
- ✓セレクションモード — 画面上の要素を直接クリックして「ここだけ変えて」と指定
- ✓バージョン履歴 — 「さっきの方が良かった」時に時計アイコンから戻れる
- ✓手書き→コード — ワイヤーフレームの写真をアップして「この画像と同じようなデザインで」
State の例
Server Component vs Client Component
"use client" と書く。
「DBやAPIキーにアクセスする？」→ YES → Server Component
「onClickやuseStateを使う？」→ YES → Client Component（"use client"をつける）
データの保存場所 3段階
Supabase ＝ 「オンラインExcelスプレッドシート」みたいなクラウドデータベース。
AI SQL Editorで自然言語からテーブル作成
PCでタスクを追加 → スマホで開くとリアルタイムで同期されている。ページリロードも不要。これが「クラウドDB」の醍醐味。
RLS（Row Level Security）— 行レベルセキュリティ
1. 通常ブラウザでユーザーAとしてログインしてタスク作成 → 2. シークレットモードを開く → 3. ユーザーBとして別メールでログイン → 4. ユーザーAのタスクが完全に見えないことを確認
ブラウザで直接テスト（Open-Meteo API — 登録不要）
これをブラウザに打ち込むと東京の天気がJSONで返ってくる。
天気が「雨」だったら自動的に「傘を持って」タスクをリスト上部に表示する。外部データを取り込んでアプリの動作を変える。レモン（外部データ）を絞ってレモネード（アプリの機能）を作る感じ。
プロンプトエンジニアリングのコツ
上級編 — JSONモード
AIの回答がアプリで直接使えるデータ形式で返ってくる。テキストを読むだけじゃなく、AIの回答をアプリの機能として使う最終形態。
npx create-next-app@latest でUIとルーティングだけ先に作る。中身は空でOK。「動くハリボテ」を作る。保存版 — タスク分解プロンプト
速いのは「手を動かす速さ」じゃなく、「迷う時間」と「手戻りの時間」がゼロになるから。AIは「次に何をするか決まっている状態」で最大のパフォーマンスを発揮する。わたしたちはPM（要件・タスク管理）× QA（品質確認）として働く。
AIはたまに「嘘の呪文」を教える。基礎を知らないとその嘘に気づけず、永遠にバグが直らない。理論はAIの間違いを指摘するための武器。
Hooksの主要2つ
Next.js — App Router の革命
async / await
エラーの読み方が変わる
Event handlers cannot be passed to Client Component props→「あ、"use client" 忘れですね。つけます。」
動いている「メインのコード（main）」を直接いじってバグらせたら大変。だからメインから枝分かれした「コピー世界」を作る。コピー世界でいくら失敗してもメイン世界には影響しない。プロは「main」を直接触らない。
バイブコーディング的 運用ルール（これだけ守ればOK）
コンフリクトが起きても慌てない。「コンフリクトしてる。現在の変更を優先して解消して」とAIに言えばOK。
Vercelの Import 画面でそのまま「Deploy」を押すとエラーになる。「鍵（.env）」がGitHubにないから。必ず先に「Environment Variables」に .env の中身をコピペする。「ローカルでは動いたのに！」の原因は99%これ。
CI/CD の仕組み
Antigravityで修正してコミット → GitHubにPushするだけ。Vercelが検知して自動で再デプロイが走る。数分後には本番サイトが更新される。寝ていても、Pushさえすれば世界中のサーバーが更新される。
- Vercel Analytics — 今日何人来たか、どの国から来たかが分かる
- 実機テスト — URLをスマホに送ってWiFiを切って確認
- カスタムドメイン — my-name.com みたいな自分だけのURLに
📋 全体振り返り — 15回で学んだこと
「やりたいこと（バイブ）をAIの翼を借りて最短距離で現実にする」こと。コードを書くことじゃない。
わたしに必要だったのは、日本語力と、パソコンの基本知識と、何か作りたいという情熱だけでした。
AIがいれば、技術の壁はもうありません。まずはGeminiを開いて「〇〇のアプリ作りたいんだけど」って聞いてみてください。そこから全部始まります。