Webアプリ開発は「家の建築」に似ています。正しい手順で進めれば、誰でも頑丈で素敵な家を建てられます。このマニュアルでは、その最短ルートをご案内します。
フェーズ1: 準備フェーズ 📦
土地と住所を決める
まず、作品を保管する「土地」を確保します。GitHubで新しいリポジトリを作成し、そのURL（住所）をコピーしましょう。
リポジトリ作成時のおすすめ設定
- .gitignore を追加:
Nodeを選択。不要なファイルをアップロード対象から除外してくれます。(Noneでも可) - ライセンスを選択:
MIT Licenseを選択。最も制約が緩く、誰でも自由に使えるライセンスです。
更地に家を建てる
PCの好きな場所でターミナルを開き、`git clone [コピーしたURL]` を実行。あなたのPCに、GitHubと繋がった**空っぽの家（プロジェクトフォルダ）**が建ちます。
家具を運び込む
Google AI Studioからダウンロード・解凍したプロジェクトのファイル一式（家具）を、ステップ2で建てた**空っぽの家の中に、すべて移動**させます。
フェーズ2: リフォームフェーズ 🛠️
AIアシスタントに整理を依頼する
ここが最重要ポイント！Vercelという超一流シェフは、厳格なルールで動きます。そのルール通りに、AIアシスタントに部屋を整理してもらいましょう。
シェフのルール 👨🍳
- 調理する食材 (.tsx, .css) は、必ず
srcというボウルに！ - そのまま飾るもの (画像) は、必ず
publicというお皿に！
Before (散らかった状態)
📁 my-app/
📄 index.html
📄 index.tsx
📄 index.css
📁 images/
After (整理された状態)
📁 my-app/
📁 public/
L 📁 images/
📁 src/
L 📄 index.tsx
L 📄 index.css
📄 index.html (中身も修正済)
このリフォームはAI (CodeLLMなど) に「Vite/Reactの標準構成に修正して」と頼むのが一番簡単で確実です。
フェーズ3: 公開フェーズ 🚀
変更を本部に報告する
AIによるリフォームが完了したら、その変更を`git commit`と`git push`でGitHub（本部）に報告します。これで、あなたのレシピブックが最新版になります。
レストランを開店する
いよいよ開店です！VercelにGitHubリポジトリを連携し、「Deploy」ボタンを押すだけ。Vercel（シェフ）が自動で調理（ビルド）し、世界中にレストランを公開してくれます。
Vercelの設定ポイント
インポート後の設定画面は、Vercelが自動で最適な設定をしてくれるので、**何も変更せずに「Deploy」を押せばOK**です。APIキーは「Environment Variables」で安全に設定しましょう。
![[Vercelの設定画面の画像]](https://i.imgur.com/G5gEaV9.png)
コラム: 開発現場のリアルな罠 ⚠️
「APIキー丸見え事件」にご注意！
「何も考えずにGitHubにファイルをアップしたら、なんとAPIキーがコードに書いてあり丸見え状態に...😱」これは、実際に多くの開発者が経験する、非常に危険な失敗です。
なぜ危険なの？
GitHubのパブリックリポジトリは世界中の誰でも見ることができます。もしAPIキーが漏洩すると、悪意のある第三者に不正利用され、高額な請求が発生する可能性があります。💸
正しい解決策は？
APIキーは、Vercelの**環境変数 (Environment Variables)**に設定するのが正解です。そして、コードの更新は、ファイルを直接アップロードするのではなく、**Gitを使ったバージョン管理**で行うのがプロの常識です。
VSCodeを使った正しい更新フロー
CodeLLMなどで修正した後は、以下の手順で安全に更新しましょう。
- ソース管理を開く: 左側のメニューからソース管理アイコンをクリック。
- コミットする: 変更内容のメッセージ（例:「UIのバグ修正」）を書き、「コミット」ボタンを押す。
- (推奨)ブランチを作成する: 安全な作業のために、新しいブランチを作成して作業する習慣をつけましょう。
- プッシュする: 「変更の同期」または「プッシュ」ボタンを押して、変更をGitHubに送信します。
この流れを守ることで、あなたのコードは安全に、そして確実に成長していきます。