PC環境の準備 ── ターミナル・Node.js・エディタを最速でセットアップ

この記事でわかること

• バイブコーディングに必要なもの一覧
• 環境構築の全体フロー
• ターミナルとは何か・開き方
• ターミナルの基本コマンド10選
• Node.jsのインストール（公式 & nvm）
• npmの基本的な使い方
• エディタの準備とおすすめ拡張機能
• トラブルシューティング
• FAQ（よくある質問）

---

バイブコーディングに必要なもの

まず、環境構築で何を用意すればいいのかを整理しよう。

必要なもの	何に使うか	必須？	所要時間
ターミナル	AIツールの起動、コマンド実行	必須（Bolt以外）	0分（標準搭載）
Node.js	JavaScriptを動かす環境	必須（Bolt以外）	5〜10分
npm	ライブラリやツールの管理	必須（Node.jsに付属）	0分
エディタ（VS Code / Cursor）	コードを見る・編集する	あると便利	5〜10分
Git	コードの保存・管理	推奨（次の記事で解説）	5〜10分

---

環境構築の全体フロー

最初に全体の流れを確認しよう。上から順にやっていけば30分で完了する。

---

ターミナルとは

ターミナル = テキストでPCに命令を出す画面のこと。

普段はマウスでフォルダをダブルクリックして開いたり、ゴミ箱にドラッグして削除したりする。ターミナルでは、同じことをテキスト（コマンド）を入力して行う。

たとえば「デスクトップにmy-appというフォルダを作る」場合、マウスでは右クリック → 新規フォルダ → 名前変更 という手順だが、ターミナルなら以下の1行で完了する。

mkdir ~/Desktop/my-app

プログラミングの世界では、ほぼ全ての作業がターミナルから始まる。最初は見慣れない画面かもしれないが、使うコマンドは限られているので安心してほしい。

ターミナルの開き方（Mac）

方法1: Spotlightから開く（おすすめ）

1. Cmd + Space を押してSpotlightを起動
2. 「ターミナル」と入力
3. Enter を押す

方法2: Finderから開く

1. Finder →「アプリケーション」→「ユーティリティ」
2. 「ターミナル.app」をダブルクリック

方法3: Launchpadから開く

1. Launchpadを開く
2. 上部の検索バーに「ターミナル」と入力
3. アイコンをクリック

ターミナルの開き方（Windows）

方法1: スタートメニューから開く（おすすめ）

1. スタートメニューをクリック（またはWindowsキー）
2. 「PowerShell」と検索
3. 「Windows PowerShell」をクリック

方法2: Windows Terminalを使う

Windows 11にはモダンな「Windows Terminal」が標準搭載されている。

1. スタートメニューで「Terminal」と検索
2. 「ターミナル」をクリック

方法3: 右クリックメニューから開く

1. 任意のフォルダ内で Shift + 右クリック
2. 「PowerShellウィンドウをここで開く」を選択

---

ターミナルの基本コマンド10選

バイブコーディングで使うコマンドを重要度順に紹介する。最初の5つは必須、残り5つは知っておくと便利なコマンドだ。

必須コマンド5つ

1. pwd — 今いる場所を確認する

「Print Working Directory」の略。今ターミナルがどのフォルダにいるかを表示する。

pwd
# Mac:     /Users/yourname
# Windows: C:\Users\yourname

迷子になったらまず pwd で現在地を確認しよう。

2. ls — フォルダの中身を見る

「List」の略。今いるフォルダの中にあるファイルやフォルダの一覧を表示する。

ls
# Desktop  Documents  Downloads  Music  Pictures ...

よく使うオプション:

ls -la          # 隠しファイルも含めて詳細表示（Mac / Linux）
ls -la          # PowerShellでも同じコマンドでOK（エイリアスが効く）

3. cd — フォルダを移動する

「Change Directory」の略。指定したフォルダに移動する。ターミナル操作で最も頻繁に使うコマンド。

cd Desktop          # デスクトップに移動
cd my-project       # 今いるフォルダ内の my-project に移動
cd ..               # 1つ上のフォルダに戻る
cd ../..            # 2つ上のフォルダに戻る
cd ~                # ホームフォルダに戻る（Mac）
cd ~/Documents      # ホームのDocumentsフォルダに直接移動

実践例: プロジェクトフォルダに移動する流れ

pwd                 # /Users/yourname  -- まずは現在地確認
cd Desktop          # デスクトップに移動
mkdir my-app        # プロジェクトフォルダを作成
cd my-app           # そのフォルダに移動
pwd                 # /Users/yourname/Desktop/my-app  -- 移動完了！

4. mkdir — フォルダを作る

「Make Directory」の略。新しいフォルダを作成する。

mkdir my-project              # my-projectフォルダを作成
mkdir -p projects/2026/app    # 深い階層を一気に作成（-pオプション）

-p オプションを付けると、途中のフォルダがなくても一気に作成してくれるので非常に便利だ。

5. clear — 画面をきれいにする

ターミナルの表示がごちゃごちゃしてきたら clear で画面をリセットする。

clear               # 画面がリセットされる（Mac / Windows共通）

ショートカットキーでも可能:

• Mac: Cmd + K
• Windows (PowerShell): Ctrl + L

知っておくと便利な5つのコマンド

6. cat — ファイルの中身を表示する

cat package.json     # package.jsonの内容を表示
cat README.md        # READMEの内容を表示

7. cp — ファイルをコピーする

cp index.html backup.html       # index.htmlをbackup.htmlとしてコピー
cp -r my-app my-app-backup      # フォルダごとコピー（-rオプション必須）

8. mv — ファイルを移動・リネームする

mv old-name.txt new-name.txt    # ファイル名を変更
mv file.txt ../                 # 1つ上のフォルダに移動
mv file.txt ~/Desktop/          # デスクトップに移動

9. rm — ファイルを削除する

rm unwanted-file.txt            # ファイルを削除
rm -r old-folder                # フォルダごと削除（-rオプション必須）

10. touch — 空のファイルを作る（Mac / Linux）

touch index.html                # 空のindex.htmlファイルを作成
touch .env                      # .envファイルを作成

Windowsの場合は New-Item index.html -ItemType File で同じことができる。

コマンド早見表

コマンド	動作	使用例
pwd	現在地を表示	pwd
ls	一覧を表示	ls -la
cd	フォルダ移動	cd my-project
mkdir	フォルダ作成	mkdir -p src/components
clear	画面をクリア	clear
cat	ファイル内容表示	cat package.json
cp	コピー	cp -r src src-backup
mv	移動・リネーム	mv old.txt new.txt
rm	削除	rm -r old-folder
touch	空ファイル作成	touch index.html

---

Node.js をインストール

Node.jsはJavaScriptをPC上で動かすための実行環境。通常JavaScriptはブラウザの中でしか動かないが、Node.jsを入れることでPC上でも動かせるようになる。

バイブコーディングで作るWebアプリやサイトのほぼ全てがNode.jsを前提としているため、必ずインストールしよう。

方法1: 公式サイトから直接インストール（初心者向け）

最もシンプルな方法。初めての人はこちらがおすすめ。

Mac の場合:

1. nodejs.org にアクセス
2. LTS版（推奨版）の「macOS Installer」をダウンロード
3. ダウンロードした .pkg ファイルをダブルクリック
4. インストーラーの案内に沿って「続ける」を押し続ける
5. インストール完了

Windows の場合:

1. nodejs.org にアクセス
2. LTS版（推奨版）の「Windows Installer」をダウンロード
3. ダウンロードした .msi ファイルをダブルクリック
4. インストーラーの案内に沿って「Next」を押し続ける
5. 「Automatically install the necessary tools」にチェックを入れる（推奨）
6. インストール完了

方法2: nvm を使ってインストール（中級者向け）

nvm（Node Version Manager） を使うと、複数のNode.jsバージョンを切り替えて使える。将来的にプロジェクトごとに異なるバージョンが必要になったときに便利。

Mac の場合:

# nvmをインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# ターミナルを再起動（または以下を実行）
source ~/.zshrc

# nvmが入ったか確認
nvm --version
# 0.40.1 のようにバージョンが出ればOK

# Node.js LTS版をインストール
nvm install --lts

# インストール確認
node --version
# v22.x.x

Windows の場合:

Windowsでは nvm-windows という別のツールを使う。

1. nvm-windows のリリースページにアクセス
2. nvm-setup.exe をダウンロードして実行
3. インストール完了後、PowerShellを管理者として開く

# Node.js LTS版をインストール
nvm install lts

# インストールしたバージョンを使用
nvm use lts

# 確認
node --version
# v22.x.x

インストール確認

ターミナルを開いて以下のコマンドを実行する。

node --version
# v22.x.x と表示されればOK

npm --version
# 10.x.x と表示されればOK

両方ともバージョン番号が表示されれば、Node.jsのインストールは完了だ。

---

npm の基本的な使い方

npm（Node Package Manager） はNode.jsと一緒にインストールされるパッケージマネージャー。世界中の開発者が公開しているツールやライブラリを、コマンド1つでインストールできる仕組みだ。

npx と npm の違い

コマンド	用途	特徴
npm install	パッケージをインストール	プロジェクトに保存される
npm install -g	グローバルインストール	PC全体で使えるようになる
npx	一時的に実行	インストールせずに使える

よく使う npm コマンド

# プロジェクトの初期化（package.jsonを作成）
npm init -y

# パッケージのインストール（プロジェクト内）
npm install react

# 開発用パッケージのインストール
npm install -D typescript

# グローバルインストール（PC全体で使えるようになる）
npm install -g @anthropic-ai/claude-code

# インストール済みパッケージの一覧
npm ls

# プロジェクトの依存パッケージを一括インストール
npm install

# scriptsに定義されたコマンドを実行
npm run dev
npm run build

# npxでパッケージを一時実行
npx create-next-app my-app

package.json とは

npm init -y を実行すると package.json というファイルが作られる。これはプロジェクトの「設計図」のようなもので、以下の情報が含まれる。

• プロジェクト名やバージョン
• 使っているパッケージ（依存関係）の一覧
• npm run dev などで実行するスクリプトの定義

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build"
  },
  "dependencies": {
    "react": "^19.0.0",
    "next": "^15.0.0"
  }
}

---

エディタの準備

コードを見たり編集したりするための専用アプリ。メモ帳でもコードは書けるが、専用エディタは色分け表示や自動補完があるため、圧倒的に使いやすい。

VS Code と Cursor の比較

項目	VS Code	Cursor
開発元	Microsoft	Cursor社
価格	無料	無料（Pro版は月$20）
AI機能	拡張機能で追加	標準搭載
ベース	—	VS Codeベース
おすすめ	Claude Codeメインの人	エディタ内AIを使いたい人

VS Code のインストール

1. code.visualstudio.com にアクセス
2. 自分のOS用のインストーラーをダウンロード
3. インストーラーを実行

Windowsの追加設定: インストール時に以下にチェックを入れておくと便利。

• 「エクスプローラーのファイルコンテキストメニューに[Codeで開く]アクションを追加する」
• 「エクスプローラーのディレクトリコンテキストメニューに[Codeで開く]アクションを追加する」
• 「PATHへの追加」

Cursor のインストール

1. cursor.com にアクセス
2. 「Download」をクリック
3. インストーラーを実行

初回起動時にVS Codeの設定をインポートするか聞かれる。VS Codeを使っていた場合は「Import」を選ぶと、拡張機能や設定がそのまま引き継がれる。

おすすめ拡張機能（VS Code / Cursor 共通）

VS Code / Cursor では「拡張機能（Extensions）」を追加して機能を強化できる。左サイドバーの四角いアイコンから検索・インストールする。

必須レベル:

拡張機能	説明
Japanese Language Pack	UIを日本語化
Prettier	コードを自動フォーマット（整形）
ESLint	JavaScriptのエラーを検出

おすすめ:

拡張機能	説明
Auto Rename Tag	HTMLタグを片方変えるともう片方も自動で変わる
Error Lens	エラーをコードの横にインラインで表示
Path Intellisense	ファイルパスを自動補完
Material Icon Theme	ファイルアイコンを見やすくする
Live Server	HTMLファイルをブラウザでリアルタイムプレビュー
indent-rainbow	インデントに色が付いてネストが見やすくなる

VS Code の初期設定（おすすめ）

Cmd + ,（Mac）/ Ctrl + ,（Windows）で設定画面を開き、以下を調整すると使いやすくなる。

設定項目	おすすめ値	説明
Auto Save	afterDelay	ファイルを自動保存
Font Size	14〜16	読みやすいフォントサイズ
Tab Size	2	インデント幅
Word Wrap	on	長い行を折り返し表示
Format On Save	オン	保存時にコードを自動フォーマット

ターミナルから VS Code を開く設定

VS Codeにはターミナルから code コマンドで起動する機能がある。

設定方法（Mac）:

1. VS Codeを開く
2. Cmd + Shift + P でコマンドパレットを表示
3. 「Shell Command: Install ‘code’ command in PATH」を選択

設定後は、ターミナルから以下のように使える。

code .                  # 今いるフォルダをVS Codeで開く
code my-project         # 指定フォルダを開く
code index.html         # 指定ファイルを開く

---

うまくいかないときのトラブルシューティング

環境構築で一番つまずきやすいポイントとその解決策をまとめた。

「command not found」と表示される

原因: コマンドが見つからない = そのツールがインストールされていないか、PATHが通っていない。

対処法:

状況	対処法
node が見つからない	ターミナルを再起動 → ダメならPCを再起動 → ダメなら再インストール
npm が見つからない	Node.jsのインストールに失敗している可能性。Node.jsを再インストール
nvm が見つからない	source ~/.zshrc（Mac）を実行。または .zshrc にnvmの設定があるか確認
code が見つからない	VS Codeのコマンドパレットから「Shell Command: Install」を実行

ターミナルに何も表示されない・固まる

対処法:

• Ctrl + C を押す（実行中のコマンドを強制停止）
• それでもダメなら Ctrl + D でターミナルを閉じる
• 最終手段: ターミナルウィンドウを閉じて開き直す

Permission denied（権限エラー）

Mac の場合:

# 「Permission denied」が出たら、sudoを付けて再実行
sudo npm install -g @anthropic-ai/claude-code
# パスワードを求められるのでPCのログインパスワードを入力

Windows の場合:

PowerShellを「管理者として実行」で開き直す。スタートメニューでPowerShellを右クリック →「管理者として実行」。

Node.js のバージョンが古い

node --version
# v16.x.x のように古いバージョンが出る場合

対処法:

• 公式インストーラーの場合: nodejs.org から最新LTS版を再ダウンロード・インストール（上書き）
• nvmの場合: nvm install --lts で最新版をインストール → nvm use --lts で切り替え

npm install でエラーが出る

# キャッシュをクリアして再実行
npm cache clean --force
npm install

# それでもダメなら node_modules を削除して再インストール
rm -rf node_modules package-lock.json
npm install

Mac で「開発元が未確認」と警告が出る

1. 「システム設定」→「プライバシーとセキュリティ」を開く
2. 下部に「このまま開く」のボタンが表示されるのでクリック
3. もう一度アプリを開く

---

セットアップ完了チェックリスト

以下の項目を全てクリアすれば、環境準備は完了だ。

• ターミナルを開ける
• pwd で現在のフォルダが表示される
• ls でフォルダの中身が表示される
• cd Desktop でデスクトップに移動できる
• cd .. で元のフォルダに戻れる
• mkdir test-folder でフォルダを作成できる
• node --version で v22.x.x が表示される
• npm --version で 10.x.x が表示される
• VS Code（またはCursor）が起動する
• エディタが日本語化されている

全部チェックがついたら、バイブコーディングを始める準備は万全だ。

---

FAQ — よくある質問

Q1. Mac と Windows、どちらがバイブコーディングに向いている？

どちらでも問題ない。 ただし、プログラミング全般ではMacのほうがターミナル周りの設定がスムーズな傾向がある。Windowsの場合はWSL2（Windows Subsystem for Linux）を導入すると、Mac/Linuxと同じコマンドが使えるようになるのでおすすめだ。とはいえ、バイブコーディングレベルではどちらでも差はほとんどない。

Q2. Node.js のバージョンは最新版（Current）ではダメ？

LTS版を強く推奨。 Current版は最新機能が使えるが、一部のパッケージが対応していない場合がある。LTS版は広くテストされており安定している。バイブコーディングでは安定性が最も大事なので、特別な理由がない限りLTS版を使おう。

Q3. VS Code と Cursor 以外のエディタは使える？

使える。 Webstorm、Sublime Text、Vim、Neovimなど好きなエディタでOK。ただし、Claude Code はターミナルで動くのでエディタに依存しない。Cursor AIを使いたい場合はCursor一択になる。初心者であれば情報が多いVS CodeかCursorを選んでおくのが無難。

Q4. npm と yarn と pnpm の違いは？

全てNode.jsのパッケージマネージャーだが、運営元と速度が異なる。

マネージャー	開発元	特徴
npm	Node.js公式	標準で入っている。情報が最も多い
yarn	Meta（旧Facebook）	npmより高速。大規模プロジェクト向け
pnpm	コミュニティ	最も高速。ディスク容量も節約

初心者はnpmだけで十分。プロジェクトの指定がある場合のみyarnやpnpmを使おう。

Q5. Python も一緒にインストールすべき？

今は不要。 バイブコーディングで使うツール（Claude Code、Cursor、Bolt等）はJavaScript/Node.jsベース。PythonはAI・機械学習系の開発で使うが、Webアプリやサイト制作がメインならNode.jsだけでOK。将来Pythonが必要になったときにインストールすれば問題ない。

Q6. ターミナルの見た目をカスタマイズしたい

Macなら iTerm2 + Oh My Zsh の組み合わせが定番。見た目がカッコよくなるだけでなく、コマンドの自動補完やGitの状態表示など実用的な機能が追加される。ただし最初から凝ると時間を取られるので、まずはデフォルトのターミナルでバイブコーディングに慣れてからカスタマイズするのがおすすめだ。

Q7. 「PATH（パス）を通す」とはどういう意味？

ターミナルでコマンドを入力すると、PCはそのコマンドの実行ファイルを決まった場所（PATH）から探す。「PATHを通す」とは、その検索対象のフォルダ一覧に新しいフォルダを追加することを意味する。Node.jsのインストーラーは自動でPATHを設定してくれるので、通常は意識しなくてOK。nvmを使う場合は .zshrc や .bashrc に設定が追加される。

---

次の記事ではGitの基本を学ぶ。コードのバージョン管理ができるようになると、AIと協力してコードを書くときの安心感が格段に上がる。