メインコンテンツへスキップ
見出し画像

【完全版】バイブコーディングを始めるための必須ツール導入ガイド

    こんとも｜5/8書籍販売決定！

    こんにちは！こんです。

    プログラミングを始めたいけど「なんでこんなにいろんなツールをインストールしないといけないの？」と思っていませんか？

    この記事では、各ツールがなぜ必要なのか、どう役立つのかを説明しながら、実際にVS CodeとClaude Codeを使って開発する流れまでを解説します。

    記事内ではClaudeCodeを使ってますが、GeminiCLIでももちろん導入可能
    です！ClaudeCodeの部分をGeminiCLIに置き換えて試してください。

    🤔 そもそも、なぜこれらのツールが必要なの？

    まず、今回インストールするツールと、それぞれの役割を理解しましょう。

    1. Homebrew（Mac限定） - パッケージマネージャー

    役割
    ソフトウェアを簡単にインストール・管理するためのツール

    なぜ必要？
    Macでは多くの開発ツールをHomebrewからインストールするのが最も簡単で確実だから

    2. Node.js - JavaScript実行環境

    役割
    JavaScriptをブラウザ外で動かすためのツール

    なぜ必要？

    • 多くの開発ツール（Vercel CLIなど）がNode.jsで動いている

    • npmという便利なパッケージマネージャーが付いてくる

    • フロントエンド開発では必須

    3. Git - バージョン管理システム

    役割
    コードの変更履歴を記録・管理するツール

    なぜ必要？

    • 「昨日のコードに戻したい」が簡単にできる

    • チームで開発する時に必須

    • GitHubを使うための基盤

    4. GitHub CLI - GitHubを操作するツール

    役割
    ブラウザを開かずにGitHubを操作できる

    なぜ必要？
    開発の流れを中断せずに作業できる

    5. Vercel CLI - デプロイツール

    役割
    作ったWebサイトを世界に公開するツール

    なぜ必要？
    コマンド一つでWebサイトを公開できる

    📦 Step 1: Homebrew のインストール（Macユーザーのみ）

    Homebrewとは？

    Homebrewは、Macで様々なソフトウェアを簡単にインストールできる「パッケージマネージャー」です。 例えるなら、App Storeのコマンドライン版のようなものです。

    インストール方法

    • ターミナルを開く

      • Spotlight検索（Command + Space）で「ターミナル」と入力

      • またはアプリケーション → ユーティリティ → ターミナル

    • 以下のコマンドをコピペして実行

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

    • パスワードを入力

      • Macのログインパスワードを入力（画面には表示されません）

      • Enterキーを押して進む

    • インストール完了後の設定

    インストール完了後、画面に表示される指示に従って以下を実行

    M1/M2 Macの場合

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

    Intel Macの場合

    echo 'eval "$(/usr/local/bin/brew shellenv)"' >> ~/.zprofile
eval "$(/usr/local/bin/brew shellenv)"

    動作確認

    brew --version

    バージョンが表示されれば成功！

    🟢 Step 2: Node.js のインストール

    なぜNode.jsが必要？

    • npm（Node Package Manager） が使えるようになる

    • Vercel CLIなど、多くの開発ツールがNode.jsで動いている

    • JavaScriptでサーバーサイドの処理もできる

    インストール方法

    Mac（Homebrewを使用）

    brew install node

    Windows

    1. Node.js公式サイトにアクセス

    2. 「LTS」版をダウンロード（安定版です）

    3. インストーラーを実行

    4. 全て「Next」でOK

    動作確認

    node --version
npm --version

    両方のバージョンが表示されれば成功！

    🔄 Step 3: Git のインストール

    なぜGitが必要？

    • コードの履歴管理: 「3日前のコードに戻したい」が可能

    • 実験が気軽にできる: ブランチ機能で安全に新機能を試せる

    • GitHubとの連携: コードをクラウドに保存・共有

    インストール方法

    Mac

    Homebrewでインストール

    brew install git

    Windows

    1. Git for Windowsにアクセス

    2. インストーラーをダウンロード・実行

    3. 基本的に全てデフォルト設定でOK

    初期設定（重要！）

    あなたの名前を設定

    git config --global user.name "Taro Yamada"

    メールアドレスを設定（GitHubと同じものを使用）

    git config --global user.email "taro@example.com"

    設定確認

    git config --list


    🔧 Step 4: GitHub CLI と Vercel CLI のインストール・設定

    開発に必要なCLIツールをインストールして、アカウントと連携させます。

    GitHub CLI のインストール

    Mac（Homebrewを使用）

    brew install gh

    Windows

    1. GitHub CLI公式サイトにアクセス

    2. 「Download for Windows」をクリック

    3. インストーラーを実行

    動作確認:

    gh --version

    GitHub CLI の認証設定

    gh auth login

    表示される質問に答えていきます

    1. What account do you want to log into? → GitHub.com

    2. What is your preferred protocol for Git operations? → HTTPS

    3. Authenticate Git with your GitHub credentials? → Y

    4. How would you like to authenticate GitHub CLI? → Login with a web browser

    表示されたコードをコピーしてEnterキーを押すと、ブラウザが開きます。GitHubにログインして認証を完了させてください。

    認証確認

    gh auth status

    Vercel CLI のインストール

    npm install -g vercel

    動作確認

    vercel --version

    Vercel CLI の認証設定

    vercel login

    メールアドレスを入力後、送信されるメールのリンクをクリックして認証を完了します。

    認証確認

    vercel whoami

    これで、両方のCLIツールがアカウントと連携され、開発準備が完了です！

    🚀 Step 5: Claude Code を使って実際に開発してみよう

    ここからは、Claude Codeで対話しながら、VS Codeのターミナルでコマンドを実行して、実際にWebサイトを作成・公開してみます。

    準備

    1. VS Codeを開く

    2. フォルダを開く

    3. 新しいファイルを1つつくってClaude Codeを起動

    ※VScode内のターミナルで下記を入力してもできます

    claude-code

    Claude Codeとの対話例

    Claude Codeのターミナルで対話しながら、指示されたコマンドをVS Codeのターミナルで実行していきます

    Claude Codeでの会話例

    ①空の要件定義書をつくる

    まずは空の要件定義書をつくってください

    ②つくりたいものを伝える

    シンプルなデザインのWebサイトをつくりたいです。
内容はメールマガジンのランディングページで、ターゲットは30代、40代の子育て世代。
メールマガジンは毎日配信していて、
AI活用やAIを学ぶ環境などの内容を1日3分で読める内容として発信しています。
毎日夜の8時に配信予定。
教材やイベントなどのお知らせもあります。
メルマガ高読者には特典として5つのバイブコーディング初心者向け動画講座を用意しています。
まずはローカル環境で実装してください。

    （全部音声入力でやりましたw）

    ③ローカル環境で確認する

    「index.html」などhtml形式のファイルがつくられるので
    実際に開いて動作確認してみましょう。

    ④GitHubにPushする

    それではこれをGitHubにPushしてください

    下記のような表示がされます。ここで許可を出すタイミングもあるのでYesで。

    # Gitリポジトリとして初期化
git init

# ファイルを追加
git add .

# 最初のコミット
git commit -m "はじめてのWebサイト完成！"

# GitHubにリポジトリを作成してアップロード
gh repo create my-first-website --public --source=. --remote=origin --push

    ⑤Vercel経由でデプロイする

    Vercelでみんなが見られるようにデプロイしてください。
URLはなるべくシンプルで短めに。

    ・みんなが見られるように
    　→全体公開するための指示。指示しないと見られない状態に。
    ・URLはなるべくシンプルで短めに。
    　→この指示をしないとハイパー長いURLになるので気にする人はぜひ。


    デプロイが完了すると、URLが表示されます。それがあなたのWebサイトのアドレスです！

    🎯 まとめ：なぜこの環境が最強なのか

    1. Homebrew（Mac）: 開発ツールを簡単にインストール・管理

    2. Node.js: 現代のWeb開発に必須の実行環境

    3. Git: コードの履歴管理で安心して開発

    4. GitHub CLI: ターミナルから直接GitHubを操作

    5. Vercel CLI: コマンド一つでWebサイトを世界に公開

    6. Claude Code: AIと対話しながら効率的に開発

    これらのツールを組み合わせることで、プロの開発者と同じワークフローで作業できるようになります。

    💡 次のステップ

    • より複雑なWebアプリケーションを作ってみる

    • GitHubでオープンソースプロジェクトに参加

    • Vercelの自動デプロイ機能を活用

    エラーが出ても諦めないで！それは学習の機会です。Claude Codeに聞きながら、楽しく開発を続けてください。

    この記事が役立ったら、ぜひ「スキ」をお願いします！

    Happy Coding! 🚀


     
     

    こんとも｜5/8書籍販売決定！

     
     
    フリーランス5年目、2児の母。 「自分の何が商品になるか分からない」 そこからAIで最初の1本を作るまでの全記録を発信中。 Udemy16コース制作 / 週1ウェビナーを2年以上継続 📕 初の商業出版書籍予約受付中 ▶︎ 初月無料のメンバーシップ運営中

    あなたへのおすすめ