VS Code初心者ガイド：つまずきポイントと解決策（Windows/Mac対応）

# VS Code初心者ガイド：つまずきポイントと解決策（Windows/Mac対応）

## はじめに

Visual Studio Code（VS Code）は、無料で高機能なコードエディタとして多くの開発者に利用されています。  
しかし、初めて使うときは「うまく動かない」「どこに保存されたのかわからない」「Live Serverが動かない」など、**小さなつまずき**が多く発生しがちです。

この記事では、**初心者が最初にぶつかる代表的なつまずきポイントとその対処法**を、**WindowsとMacの両環境に対応**する形でまとめました。  
授業・自己学習・チームのサポートに役立ててください。

---

## 対象環境・前提条件

- VS Code：最新版（2024年以降）
- OS：Windows 10 / 11、macOS Sonoma以降
- 対象者：HTML/CSS/JSの基礎から始めたい初学者

---

## 初心者がよくつまずく8つのポイント

### 1. 日本語化の方法

**問題**: インストール直後は英語表示になっている

**解決策**:
- 拡張機能から「Japanese Language Pack」を検索・インストール
- 再起動すると日本語表示に切り替わる
- Windows・Mac共通の手順です

📎 [Japanese Language Pack 拡張機能リンク](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)

---

### 2. HTMLテンプレートが展開されない

**問題**: `! + Tab`でHTMLの雛形が展開されない

**原因**:
- ファイル拡張子が `.html` でない
- Emmet機能が無効になっている
- ファイルが保存されておらず Untitled のまま

**解決策**:
- まずは `.html` でファイルを保存する
- 以下を `settings.json` に追加すると、Emmetの `lang="ja"` 対応が有効に

```json
"emmet.variables": {
  "lang": "ja"
}
```

---

### 3. OneDriveに勝手に保存される問題（Windows特有）

**現象**:
- 保存したつもりが `C:\Users\ユーザー名\OneDrive\Documents\` に入っていた

**原因**:
- Windowsの初期設定で「ドキュメント」「ピクチャ」「デスクトップ」フォルダがOneDriveと自動同期している

**解決策**:

#### 方法1：OneDrive同期を解除（推奨）
1. タスクバー右下のOneDriveアイコンを右クリック
2. 「設定」→「バックアップ」→「フォルダーのバックアップを管理」
3. 「ドキュメント」などのチェックを外す
4. 設定を保存して閉じる

#### 方法2：保存先を明示的に指定する
- 「ファイル」→「フォルダーを開く」から、`C:\MyProjects` や `D:\WebApp` などOneDrive外のフォルダを選ぶ

---

### 4. ブラウザで変更が反映されない

**原因**:
- 保存していない（`Untitled` 状態）
- Live Serverを使っていない
- ブラウザにキャッシュが残っている

**解決策**:
- `Ctrl+S`（Windows） / `Cmd+S`（Mac）で確実に保存
- Live Server拡張機能を導入する
- ブラウザで `Shift + 再読み込み` でキャッシュクリア

---

### 5. Live Serverが使えない

**よくある原因**:
- 拡張機能がインストールされていない
- ファイルを保存していない（Untitled状態）
- ポート番号の競合

**解決策**:
- 拡張機能で「Live Server」を検索してインストール  
📎 [Live Server 拡張機能リンク](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
- ファイルを `.html` として保存した状態で、右クリック→「Open with Live Server」
- ポート番号エラー時は、`settings.json` に以下を追加して変更：

```json
"liveServer.settings.port": 5501
```

---

### 💡Macユーザー向け補足：Live Serverが動かないとき

macOSでは「フルディスクアクセス」を許可していないとLive Serverがうまく動作しないことがあります。

**設定手順**:
1. システム設定 → プライバシーとセキュリティ
2. 「フルディスクアクセス」→ `Visual Studio Code` にチェックを入れる

---

### 6. よく使うショートカットキー一覧

| 操作内容 | Windows | Mac |
|----------|---------|-----|
| ファイル保存 | `Ctrl + S` | `Cmd + S` |
| ターミナル表示 | `Ctrl + Shift + ~` | `Cmd + Shift + ~` |
| コメントアウト | `Ctrl + /` | `Cmd + /` |
| 複数選択 | `Alt + クリック` | `Option + クリック` |
| 全選択 | `Ctrl + A` | `Cmd + A` |

---

### 7. ファイルとフォルダの違いが分からない

**初心者によくある誤解**:
- HTMLファイルだけ開いて作業しようとする
- 相対パスがうまく動かない

**ポイント**:
- VS Codeは「フォルダ単位」で管理・拡張機能が動作する
- Live Serverのルートもフォルダベース

**解決策**:
- 最初に「新しいフォルダを作成」→「フォルダを開く」でプロジェクトを始める

---

### 8. 拡張機能の使い方が分からない

**初心者がよく使うべき拡張機能**:

| 機能 | 拡張機能名 | 概要 |
|------|------------|------|
| 自動整形 | Prettier | 保存時にコードをきれいに整える |
| HTMLテンプレ展開 | Emmet | `! + Tab` などで素早くHTMLを記述可能 |
| 自動リロード | Live Server | HTMLを保存するたびにブラウザを更新 |
| パス補完 | Path Intellisense | 画像やファイルのパスを補完してくれる |

📎 拡張機能リンク一覧:
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [Emmet（標準搭載）](https://docs.emmet.io/)
- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

---

## 💻 おすすめ初期設定（settings.json）

```json
{
  "emmet.variables": {
    "lang": "ja"
  },
  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay",
  "editor.tabSize": 2,
  "liveServer.settings.port": 5500
}
```

---

## ❓ よくある質問（FAQ）

### Q. HTMLに色がつかない、補完されない
→ `.html` の拡張子がついているか、VS Codeを再起動してみましょう。

### Q. 保存したファイルがどこにいったかわからない
→ OneDriveに自動保存されている可能性があります（「3. OneDrive問題」参照）

### Q. Live Serverを使ってもブラウザが変わらない
→ 保存していない / ファイルが `.html` でない / Live Serverが動いていない 可能性があります。

---

## ✅ まとめ

初心者がスムーズにVS Codeを使いこなすためには、以下の点に特に注意しましょう:

- 保存場所の明示的な指定（特にWindows環境ではOneDrive問題に注意）
- ファイル拡張子とフォルダ構造の理解
- 拡張機能の導入と設定の習得
- OSによるショートカットの違いに慣れること