VibeCoding

Appearance

環境構築 ​

このセクションでは、AIでアプリを作るための環境を整えます。

ゴール ​

  • Claude Codeがインストールされている
  • GitHubと連携できている
  • ターミナルの基本操作ができる

1. 必要なアカウントの確認 ​

必要なアカウント

以下のアカウントが作成済みか確認してください：

サービス用途URL
Claude ProAIアシスタントhttps://claude.ai/
GitHubコード管理https://github.com/
Vercelアプリ公開https://vercel.com/

アカウントがない場合

コーチに声をかけてください。一緒に作成します。

2. ターミナルを開く ​

Macの場合 ​

  1. Command + Space を押してSpotlightを開く
  2. 「ターミナル」と入力
  3. Enterを押す

黒い画面が開けばOKです。

ターミナルとは？ ​

ターミナルは、文字でコンピュータに指示を出すツールです。

ターミナルの例

bash
# 例：今いるフォルダを確認
pwd

# 例：フォルダの中身を見る
ls

怖がらなくて大丈夫

ターミナルは慣れるまで怖く見えますが、Claude Codeが全部やってくれるので安心してください。

3. Node.jsのインストール ​

Node.jsは、JavaScriptを動かすための環境です。アプリ開発に必要なので、まずこれをインストールします。

Mac / Windows 共通 ​

  1. Node.js公式サイト にアクセス
  2. 「LTS」 と書かれたボタン（v22.x.x）をクリックしてダウンロード
  3. ダウンロードしたファイルを開いてインストール
  4. 全て「次へ」でOK

インストール後、ターミナル（またはPowerShell）を再起動してください。

インストールの確認 ​

bash
node --version

v22.x.x と表示されればOKです。

4. Claude Codeのインストール ​

Macの場合 ​

ターミナルで以下のコマンドを実行します：

bash
curl -fsSL https://claude.ai/install.sh | sh

Windowsの場合 ​

PowerShellを管理者として実行し、以下のコマンドを実行します：

powershell
irm https://claude.ai/install.ps1 | iex

PowerShellの開き方

  1. スタートメニューで「PowerShell」と検索
  2. 「Windows PowerShell」を右クリック
  3. 「管理者として実行」を選択
エラーが出た場合

コーチに声をかけてください。一緒に解決します。

インストールの確認 ​

bash
claude --version

バージョン番号が表示されればOKです。

5. Claude Codeのセットアップ ​

初回起動 ​

bash
claude

初回起動時に、以下の設定を行います：

  1. Claudeアカウントでログイン
    • ブラウザが開くので、Claude Proアカウントでログイン
    • 認証が完了したらターミナルに戻る

6. GitHubとの連携 ​

GitHub CLI（gh コマンド）をインストールして、GitHubと連携します。

GitHub CLIのインストール ​

Macの場合 ​

まずHomebrewをインストールします（既にインストール済みの場合はスキップ）：

bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

インストール後、表示される指示に従ってパスを通します：

bash
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zshrc
source ~/.zshrc

次にGitHub CLIをインストール：

bash
brew install gh

Windowsの場合 ​

powershell
winget install GitHub.cli

インストール後、ターミナル（またはPowerShell）を再起動してください。

GitHubにログイン ​

bash
gh auth login

以下の質問に答えていきます：

  1. 「What account do you want to log into?」 → GitHub.com を選択
  2. 「What is your preferred protocol for Git operations on this host?」 → HTTPS を選択
  3. 「Authenticate Git with your GitHub credentials?」 → Y を入力
  4. 「How would you like to authenticate GitHub CLI?」 → Login with a web browser を選択
  5. 表示されるコードをコピーして、ブラウザでGitHubにログイン
  6. コードを入力して認証完了

確認 ​

bash
gh auth status

「Logged in to github.com」と表示されればOKです。

7. Vercel CLIのセットアップ ​

Vercel CLI（vercel コマンド）をインストールして、Vercelと連携します。

Vercel CLIのインストール ​

bash
npm install -g vercel
npmがないと言われた場合

Node.jsをインストールする必要があります。コーチに声をかけてください。

Vercelにログイン ​

bash
vercel login
  1. ブラウザが開くので、Vercelアカウントでログイン
  2. 認証が完了したらターミナルに戻る

確認 ​

bash
vercel whoami

ユーザー名が表示されればOKです。

8. 動作確認 ​

全ての設定が完了したか確認します。

チェックリスト ​

  • [ ] ターミナルが開ける
  • [ ] node --version でv22.x.xが表示される
  • [ ] claude --version でバージョンが表示される
  • [ ] Claude Codeにログインできている
  • [ ] gh auth status でGitHubと連携できている
  • [ ] vercel whoami でVercelと連携できている

困ったら

どこかで詰まったら、すぐにコーチに声をかけてください！

完了！ ​

環境構築完了！

環境構築が完了しました。次は実際にWebサイトを作ってみましょう！

次はWebサイト作成に進みます！