第一章：プロジェクト紹介とAstroを使った超高速Webサイト構築（Vibe Coding実践）

**「キャンプ場公式サイト構築」のVibe Coding実践コースへようこそ！ このプロジェクトでは、従来のプログラミングスクールのように一行ずつコードを教えることはしません。これは「あなたを経営者にする」**コースです。AI（Claude 3.5 / Antigravity）を指揮して、モダンなデザインかつバックエンドデータベースを備えた超高品質な公式サイトをゼロから構築する方法を学びます！

🎯 この章で学べること

  1. ビジネス価値：AstroフレームワークがSEO対策済み公式サイトの第一選択肢である理由と、クライアントへの売り込み方
  2. AIツール選定：フロントエンド開発に最適なLLMモデルの選び方
  3. 精密なPrompt（呪文）発行：「Vibe Coding SOP」を使ってAIに完全な開発環境構築を指示する方法
  4. 検証とデバッグ：AIが間違ったコードを生成した場合、プログラミングせずにエラーを特定する技術
  5. デプロイ：最初の空っぽサイトをGitHubとVercelに公開する方法

🤖 LLMプラットフォームとツール推奨（Vibe Coding SOPステップ1）

Vibe Codingを成功させるには、ツール選びが80%を占めます。 フロントエンドWeb開発における業界のゴールドスタンダードは：

  • エディタ：VSCode、Cursor、またはAntigravity（AI組み込みの強力なコードエディタ）がおすすめ
  • AIモデル：Claude Sonnet 4.6、Claude Opus 4.7、またはGemini Flash/Gemini Proに切り替えることを強く推奨。ReactとUIテンプレート処理の精度が極めて高い
  • オープンソースモデル：オープンソースモデルを使う場合、OpenRouterやSiliconFlowプラットフォームでDeepSeek v4 FlashまたはDeepSeek v4 Proを選択

[!TIP] Vibe思考：AIを検索エンジンではなく「ベテランエンジニアスタッフ」として扱いましょう

📂 初期設定：プロジェクトとフォルダ作成

  1. コンピュータでターミナル（MacのTerminalまたはWindowsのPowerShell）を開く
  2. 空のフォルダを作成し、移動：
mkdir camping-official-site
cd camping-official-site
  1. ターミナルでcode .を入力するか、Cursorでこのフォルダを開く

💬 神級Prompt呪文集：環境構築

Cursorの右側のChatウィンドウ（Cmd/Ctrl + L）を開き、最初の指示を準備！

[!IMPORTANT] 以下のPromptをコピーしてAIに送信：

あなたはシニアフロントエンドアーキテクトです。現在のディレクトリに"not_far_web"というAstroプロジェクトを作成してください。 要件： 1. TypeScriptを使用 2. Tailwind CSSとReact統合（Integrations）をインストール 3. 完全なnpm作成コマンドと、実行中にターミナルに表示されるインタラクティブオプションの選択方法を詳細に説明（例：依存関係のインストール、git初期化の有無） 4. 最新バージョンのAstro構文を使用していることを確認

AIは通常、極めて正確な回答を返します。ターミナルで実行するよう指示されるでしょう：

npm create astro@latest not_far_web

ターミナルにインタラクティブオプションが表示されたら、AI（または以下）のアドバイスに従って選択：

  • Where should we create your new project? ./not_far_web
  • How would you like to start your new project? Include sample files
  • Install dependencies? Yes
  • Do you plan to write TypeScript? Yes
  • Initialize a new git repository? Yes

次に、TailwindとReactをインストールするため、AIに追加Prompt：

プロジェクトが作成されました。@astrojs/tailwindと@astrojs/reactを自動インストール・設定するコマンドを教えてください。

AIが提供するコマンド（通常はnpx astro add tailwind react）を実行し、質問にはすべてYes (y)で応答。AIツールが設定ファイルの手動編集を不要にします。

🛠️ 検証とデバッグ

Vibe Codingで最も重要なのが「検証」です。 ターミナルで開発サーバーを起動：

cd not_far_web
npm run dev

ブラウザでhttp://localhost:4321を開き、Astroのウェルカム画面が表示されることを確認。

画面が壊れているかターミナルに赤いエラーが表示されたら？ 絶対に自分でGoogle検索しないでください！ ターミナルのエラーメッセージを「全文コピー」し、AIチャットに貼り付け：

npm run devを実行中に以下のエラーが発生しました。問題箇所と修正コマンドを教えてください：[エラーメッセージ貼り付け]

AIは基本的に3秒で99%の環境互換性問題を解決できます。

🚀 GitHubへのアップロードとVercelクラウドデプロイ

サイト構築初日からデプロイ！これで変更のたびに即座に結果を確認できます。

  1. GitHubアップロード： AIチャットに入力：

このプロジェクトをGitHubの空のRepo（URL: https://github.com/myname/my-camping-site.git）にプッシュしたいです。完全なgitコマンドを教えてください。

AIがgit add .、git commit -m "Init"、git remote add origin ...、git pushの順序で指導。

  1. Vercelデプロイ：
  • Vercel公式サイトにアクセスし、GitHubでログイン
  • Add New Projectをクリック
  • アップロードしたRepoをインポート
  • Framework PresetでAstroを選択
  • Deployをクリック！

2分待てば、「キャンプ場公式サイト」が正式公開され、専用URLが付与されます！

✅ 本章のまとめと次回予告

Vibe Codingの核心を習得しました：精密な仕様発行 → 成果検証 → エラーをAIに戻す → デプロイ。

次章では、バックエンドの核心：Supabaseデータベースの構築とSchema設計に進みます。「キャンプ場予約、会員データ」を含む完璧なリレーショナルデータベース設計をAIにPromptで書かせる方法を伝授します！

会員限定無料チュートリアル

このチャプターは登録会員限定の無料コンテンツです！ログインまたは登録してすぐにロックを解除してください。

今すぐログイン / 登録