Google AI Studioをインポート

Google AI StudioプロジェクトをGitHubにエクスポートする方法

このガイドは、**Google AI Studio（Gemini）**によって生成されたコードを取得し、永続的なプロジェクトに変換して、保存、編集、世界と共有できる最も簡単な方法です。

概要

Google AI Studioは「Vibe Coding」に最適です。Geminiに数秒でReactアプリ、ゲーム、またはツールを構築するよう依頼できます。ただし、AI Studioはサンドボックスです。コードを所有し、それを構築するには、GitHubに移動する必要があります。

ワークフロー：

作成: **AI Studio（Build Mode）**でアプリを生成します。
エクスポート: ワンクリックでコードをGitHubに直接プッシュします。
改善: コンピューター（VS Code/Cursor）にクローンして、さらに開発します。

📝 重要な注意：このガイドは「Build」モード（完全なアプリ/ウェブサイトの作成）に焦点を当てています。アプリがAPIキー（Gemini APIなど）を使用している場合、セキュリティ上の理由から、これらのキーをGitHubに直接コミットしないでください。ローカルセットアップステップでこれを処理する方法に触れます。

前提条件

Google AI Studioアカウント。
GitHubアカウント。
VS CodeまたはCursorをコンピューターにインストール。
Node.jsがローカルにインストール（バージョン18+推奨）。

移行概要

このプランは、一時的なAI生成から専門的な開発環境に移行します。

ソース: Google AI Studio（Gemini 2.0 Flash/Pro）。
ブリッジ: AI Studio GitHub統合。
宛先: GitHubリポジトリ。

ステップ1：AI Studioでアプリを作成

エクスポートする前に、プロジェクトが必要です。Build機能（「Vibe Coding」と呼ばれることもあります）を使用して、完全なアプリケーションを生成します。

Build Modeに入る:
- Google AI Studioにアクセス。
- 新規作成をクリックしてアプリを選択（またはトップのトグルが「Prompt」ではなく「Build」に設定されていることを確認）。
AIに指示:
- リクエストを入力（例：「ReactとTailwindを使用してサイバーパンク美学のポモドーロタイマーを作成」）。
- 右側でプレビューが読み込まれるのを待ちます。
改善（オプション）:
- Geminiとチャットしてデザインを調整（例：「開始ボタンを緑色にしてください」）。
- プレビューに満足したら、エクスポートの準備ができています。

ステップ2：GitHubにコードをプッシュ

コードの準備ができたので、Googleサンドボックスからアップロードバージョンコントロールシステムに移動します。

GitHub統合を見つける:
- コード/プレビューペイン上のヘッダーバーを探します。
- GitHubアイコン（猫のシルエット）をクリック。
認可（初回のみ）:
- 以前に接続していない場合、ポップアップが許可を求めます。
- アカウントを接続をクリックし、Google AI Studioがあなたの代わりにリポジトリを作成することを承認します。
リポジトリを設定:
- リポジトリ名: 清潔な名前を入力（例：cyberpunk-pomodoro）。注：スペースは許可されません。
- 説明: （オプション）「Geminiで生成」。
- 可視性: 公開（誰でも見える）またはプライベート（自分だけ見える）を選択。
- プッシュをクリック。
確認:
- 成功メッセージを待つ：「正常にGitHubにプッシュされました」。
- メッセージに記載されたリンクをクリックして、GitHubの新しいリポジトリを開きます。

ステップ3：ローカル環境を設定（Cursor）

コードがGitHubにあるので、ローカルに設定して依存関係を確認し、プロダクション調整を行います。

リポジトリをクローン: Cursorを開き、コマンドパレット（Cmd+Shift+PまたはCtrl+Shift+P）を開き、> Git: Cloneと入力。新しいリポジトリのURLを貼り付けます。

または、ターミナルから:
```
git clone <https://github.com/your-username/your-repo-name.git>
cd your-repo-name
```
依存関係をインストール: AI Studioプロジェクトは通常、パッケージマネージャーを自動的に検出します。ロックファイル（pnpm-lock.yaml、package-lock.json、またはyarn.lock）を確認します。
```
# npmを使用している場合
npm install
# pnpmを使用している場合（AI Studioで一般的）
pnpm install
```
環境設定:
- .env.exampleファイルを探し（存在する場合）、複製して.envファイルを作成します。
- 重要: AI StudioアプリがAPIキー（OpenAI、Supabaseなど）を使用した場合、これらのキーをローカルの.envファイルに手動で追加する必要があります。AI Studioはセキュリティ上の理由から、秘密情報をGitHubにエクスポートしません。
ローカルテスト: AI Studioサンドボックス外でアプリが機能することを確認するために、開発サーバーを実行します。
```
npm run dev
```