# Vue.js Core 開発者ツール 業務運用マニュアル

## 目次

**【基本操作】**
1. [システム概要](#1-システム概要)
2. [アクセス方法](#2-アクセス方法)
3. [トップページ（各ツールの起動画面）](#3-トップページ各ツールの起動画面)

**【業務フローに沿った機能】**
4. [【STEP1】SFC Playground — コンポーネントの作成・編集](#4-step1sfc-playground--コンポーネントの作成編集)
5. [【STEP2-3】SFC Playground — コンパイル・プレビューの確認](#5-step2-3sfc-playground--コンパイルプレビューの確認)
6. [【STEP3-4】SFC Playground — 設定変更・モード切替](#6-step3-4sfc-playground--設定変更モード切替)
7. [【STEP4-5】SFC Playground — 共有・ダウンロード](#7-step4-5sfc-playground--共有ダウンロード)

**【サポート機能】**
8. [Template Explorer — テンプレートコンパイル結果の確認](#8-template-explorer--テンプレートコンパイル結果の確認)
9. [Template Explorer — コンパイルオプションの操作](#9-template-explorer--コンパイルオプションの操作)
10. [Vite Debug — 開発環境の動作確認](#10-vite-debug--開発環境の動作確認)

**【運用ガイド】**
11. [日常業務の流れ](#11-日常業務の流れ)
12. [よくある質問と対処法](#12-よくある質問と対処法)
13. [トラブルシューティング](#13-トラブルシューティング)

---

## 1. システム概要

### 1.1 Vue.js Core 開発者ツールとは

Vue.js Core リポジトリには、Vue.js フレームワークの開発・学習・デバッグを支援する3つのオンライン開発者ツールが含まれています。これらのツールはブラウザ上で動作し、ローカル環境の構築なしに Vue.js の機能を試すことができます。

- **SFC Playground**（play.vuejs.org）：Vue Single File Component（SFC）をリアルタイムで編集・コンパイル・プレビューできるオンラインプレイグラウンド
- **Template Explorer**：Vue テンプレートがどのような JavaScript コードにコンパイルされるかをリアルタイムで確認できる解析ツール
- **Vite Debug**：Vue 開発環境（Vite）の動作確認用の最小構成アプリケーション

### 1.2 本システムで行う主要業務

本システムは、主に以下の業務を支援します：

| 業務カテゴリ | 具体的な業務内容 |
|------------|----------------|
| **コンポーネント開発** | Vue SFC の作成・編集、リアルタイムプレビュー、コード共有 |
| **コンパイル結果の検証** | テンプレートコンパイル結果の確認、コンパイラオプションの比較検証 |
| **学習・プロトタイピング** | Vue.js の動作確認、API の試用、コンポーネントのプロトタイプ作成 |
| **デバッグ** | コンパイルエラーの診断、SourceMap による対応箇所の特定 |
| **コード共有** | URL 共有による他者へのコード提供、プロジェクトの ZIP ダウンロード |

### 1.3 業務フロー概要

本システムにおける業務は、以下の流れで進行します：

```
┌─────────────────────────────────────────────────────────────────┐
│                        業務フロー                                │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  【STEP 1】開発者がSFC Playgroundでコンポーネントを作成・編集     │
│      ↓                                                          │
│  【STEP 2】リアルタイムコンパイル＆プレビューで動作を確認          │
│      ↓                                                          │
│  【STEP 3】必要に応じて設定変更（DEV/PROD、SSR、テーマ等）        │
│      ↓                                                          │
│  【STEP 4】コードをURL共有またはZIPダウンロードで配布              │
│      ↓                                                          │
│  【STEP 5】Template Explorerでコンパイル結果を詳細に確認          │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

**役割別の業務概要：**

| 役割 | 主な業務 |
|------|---------|
| **Vue.js 開発者** | SFC の作成・編集・プレビュー、コード共有、プロトタイピング |
| **フレームワーク開発者** | テンプレートコンパイル結果の検証、コンパイラオプションの検証、SSR出力の確認 |
| **学習者** | Vue.js API の試用、コンパイル動作の理解、サンプルコードの実行 |

### 1.4 主な機能

| 機能 | 説明 | 業務フローでの位置 |
|------|------|------------------|
| SFC エディタ | Monaco Editor による Vue SFC コードの編集 | STEP 1 |
| リアルタイムプレビュー | 編集内容の即座のコンパイル・プレビュー表示 | STEP 2 |
| モード切替 | DEV/PROD、SSR、AutoSave、テーマの切替 | STEP 3 |
| バージョン選択 | Vue / TypeScript のバージョン動的切替 | STEP 3 |
| URL 共有 | URLハッシュによるコード状態の共有 | STEP 4 |
| ZIP ダウンロード | プロジェクトファイルの一括ダウンロード | STEP 4 |
| テンプレートコンパイル | テンプレート → JavaScript 変換結果の表示 | STEP 5 |
| SourceMap ハイライト | テンプレートとコンパイル結果の対応箇所ハイライト | STEP 5 |

### 1.5 ユーザー種別

システムには以下のユーザー種別があります：

| ユーザー種別 | 説明 |
|-------------|------|
| 全ユーザー（認証不要） | 全機能にアクセス可能。ログイン・認証の仕組みは存在しない |

> **注意**: 本システムは権限による表示制御を持たず、全機能が全ユーザーに開放されています。

### 1.6 対応ブラウザ

推奨ブラウザ：
- Google Chrome（最新版）
- Microsoft Edge（最新版）
- Safari（最新版）
- Firefox（最新版）

> **注意**: Monaco Editor を使用しているため、モダンブラウザが必要です。Internet Explorer はサポートされていません。

---

## 2. アクセス方法

### 2.1 SFC Playground へのアクセス

1. ブラウザで SFC Playground の URL（play.vuejs.org）にアクセスします
2. ページが読み込まれると、エディタとプレビューが統合されたメイン画面が表示されます

> **Tips**: URLハッシュにエンコード済みの状態がある場合（他者から共有されたURLなど）、その状態が自動的に復元されます。

### 2.2 Template Explorer へのアクセス

1. ブラウザで Template Explorer の URL にアクセスします
2. Monaco Editor のローダーが完了すると、2パネルエディタ画面が表示されます

> **Tips**: 前回の状態が localStorage または URLハッシュに保存されている場合、自動的に復元されます。

### 2.3 Vite Debug へのアクセス

Vite Debug はローカル開発環境専用のツールです。

1. リポジトリをクローンし、依存関係をインストールします
2. 開発サーバーを起動します

```bash
git clone https://github.com/vuejs/core.git
cd core
pnpm install
pnpm dev
```

### 2.4 テーマ設定について

SFC Playground は起動時にテーマを自動判定します：
- localStorage の `vue-sfc-playground-prefer-dark` の値を確認
- 上記がない場合、OS のカラースキーム設定（`prefers-color-scheme: dark`）を参照
- 手動での切替方法は [6.4 テーマ切替](#64-テーマの切替) を参照してください

---

## 3. トップページ（各ツールの起動画面）

### 3.1 SFC Playground メイン画面

SFC Playground のメイン画面は以下の2つの領域で構成されます：

| 領域 | 位置 | 説明 |
|------|------|------|
| ナビゲーションバー（Header） | 画面上部 | ロゴ、バージョン選択、各種トグルボタン、アクションボタン |
| エディタ＆プレビュー（Repl） | 画面下部 | Monaco Editor によるコード編集領域とプレビュー領域 |

**ナビゲーションバーの構成要素（左から右）：**

| 要素 | 説明 |
|------|------|
| Vue ロゴ + タイトル | "Vue SFC Playground" と表示（幅520px以下でタイトル非表示） |
| TypeScript バージョン選択 | TypeScript のバージョンをドロップダウンで選択 |
| Vue バージョン選択 | Vue のバージョンをドロップダウンで選択 |
| 「DEV」/「PROD」ボタン | 開発モード / プロダクションモードの切替 |
| 「SSR ON」/「SSR OFF」ボタン | サーバーサイドレンダリングモードの切替 |
| 「AutoSave ON」/「AutoSave OFF」ボタン | 自動保存の切替 |
| テーマ切替ボタン（Sun/Moon アイコン） | ライト / ダークテーマの切替 |
| Share ボタン | URLの共有（クリップボードにコピー） |
| Reload ボタン | プレビューのリロード |
| Download ボタン | プロジェクトの ZIP ダウンロード |
| GitHub リンク | GitHub リポジトリへのリンク（新しいタブで開く） |

### 3.2 Template Explorer メイン画面

Template Explorer のメイン画面は以下の領域で構成されます：

| 領域 | 位置 | 説明 |
|------|------|------|
| ヘッダー | 画面上部 | タイトル、コミットリンク、History リンク、Options Panel |
| Source Editor（左パネル） | 画面左半分 | テンプレート入力用の Monaco Editor（HTML モード） |
| Output Editor（右パネル） | 画面右半分 | コンパイル結果表示用の Monaco Editor（JavaScript モード、読み取り専用） |

---

## 4. 【STEP1】SFC Playground — コンポーネントの作成・編集

> **業務フローでの位置**: 開発者が SFC Playground 上で Vue Single File Component を作成・編集するステップです。

### 4.1 コードを編集する

**業務シーン**: Vue コンポーネントのプロトタイプを作成したい、または API の動作を確認したい場合

**前提条件**: SFC Playground のメイン画面にアクセス済みであること

**やるべきこと**:
- エディタ領域で Vue SFC コードを入力・編集する

**システムでの操作手順**:
1. メイン画面の左側にあるエディタ領域をクリックします
2. Vue SFC の形式（`<template>`、`<script setup>`、`<style>` ブロック）でコードを入力します
3. コードの変更は自動的にリアルタイムでコンパイル・プレビューに反映されます

**関連画面**: App（メイン画面）、Repl コンポーネント

**注意点・Tips**:
- `Ctrl+S`（Mac: `Cmd+S`）はブラウザの保存ダイアログではなく、Playground 内で無効化されています
- コードはURLハッシュに自動的に永続化されるため、ブラウザを閉じても状態が保持されます
- AutoSave が有効な場合、編集内容が自動的に保存されます

**次のステップ**: 右側のプレビュー領域でコンパイル・実行結果を確認します（STEP 2）

### 4.2 バージョンを選択する

**業務シーン**: 特定の Vue バージョンや TypeScript バージョンでの動作を確認したい場合

**システムでの操作手順**:

#### Vue バージョンの変更

1. ナビゲーションバーの「Vue Version」ドロップダウンをクリックします
2. バージョン一覧が表示されます（jsdelivr CDN からバージョン一覧を動的に取得）
3. 使用したいバージョンを選択します
4. バージョン変更後、プレビューが自動的にリロードされます

> **Tips**: 「This Commit」を選択すると、現在のコミットバージョンにリセットされます。「Commits History」リンクで Netlify のデプロイ履歴を確認できます。

#### TypeScript バージョンの変更

1. ナビゲーションバーの「TypeScript Version」ドロップダウンをクリックします
2. バージョン一覧が表示されます
3. 使用したいバージョンを選択します

**注意点・Tips**:
- ドロップダウンの外側をクリックするか、ウィンドウの blur イベントが発生するとドロップダウンが閉じます
- ドロップダウン内の項目クリック時はイベント伝播が抑制されています（`@click.stop`）
- Vue 3.6 以上のバージョンでは Vapor モードが利用可能になります

---

## 5. 【STEP2-3】SFC Playground — コンパイル・プレビューの確認

> **業務フローでの位置**: 開発者がコードの編集結果をリアルタイムでプレビュー確認するステップです。

### 5.1 プレビューの確認

**業務シーン**: 編集中のコンポーネントの表示・動作を確認したい場合

**やるべきこと**:
- エディタ右側のプレビュー領域で実行結果を確認する

**システムでの操作手順**:
1. エディタ領域でコードを編集します
2. 変更内容は自動的に @vue/repl コンポーネントによってコンパイルされます
3. 右側のプレビュー領域（iframe）に実行結果が表示されます

**注意点・Tips**:
- コンパイルは自動的に実行されるため、手動でのトリガーは不要です
- コンパイルエラーが発生した場合、プレビュー領域にエラーメッセージが表示されます
- SSR モードを有効にすると、サーバーサイドレンダリングの出力も確認できます

### 5.2 プレビューのリロード

**業務シーン**: プレビューが期待通りに更新されない場合、または初期状態から再実行したい場合

**システムでの操作手順**:
1. ナビゲーションバーの「Reload」ボタン（リロードアイコン）をクリックします
2. プレビュー領域（Repl コンポーネント）がリロードされます

---

## 6. 【STEP3-4】SFC Playground — 設定変更・モード切替

> **業務フローでの位置**: 開発者が動作環境やコンパイル設定を変更し、異なる条件での動作を確認するステップです。

### 6.1 DEV/PROD モードの切替

**業務シーン**: 開発モードとプロダクションモードでの動作差異を確認したい場合

**システムでの操作手順**:
1. ナビゲーションバーの「DEV」または「PROD」ボタンをクリックします
2. モードが切り替わり、ボタンの表示とカラーが変化します：
   - **DEV**（緑）: 開発モード — 警告メッセージやデバッグ情報が有効
   - **PROD**（紫）: プロダクションモード — 警告が除去され、最適化されたビルド
3. SFC コンパイルオプション（`sfcOptions`）が自動的に更新され、Repl が再コンパイルを実行します
4. URLハッシュも自動的に更新されます（`#__PROD__` プレフィックス）

### 6.2 SSR モードの切替

**業務シーン**: サーバーサイドレンダリングの出力を確認したい場合

**システムでの操作手順**:
1. ナビゲーションバーの「SSR ON」または「SSR OFF」ボタンをクリックします
2. モードが切り替わります：
   - **SSR ON**（緑）: SSR モード有効 — サーバーサイドレンダリングの出力を確認可能
   - **SSR OFF**（グレー）: SSR モード無効 — クライアントサイドレンダリングのみ
3. URLハッシュも自動的に更新されます（`#__SSR__` プレフィックス）

### 6.3 AutoSave の切替

**業務シーン**: 自動保存を有効化/無効化したい場合

**システムでの操作手順**:
1. ナビゲーションバーの「AutoSave ON」または「AutoSave OFF」ボタンをクリックします
2. 設定が localStorage の `vue-sfc-playground-auto-save` キーに保存されます

### 6.4 テーマの切替

**業務シーン**: 表示テーマを切り替えたい場合

**システムでの操作手順**:
1. ナビゲーションバーのテーマ切替ボタンをクリックします：
   - **Sun アイコン**（ライトテーマ時表示）: クリックするとダークテーマに切替
   - **Moon アイコン**（ダークテーマ時表示）: クリックするとライトテーマに切替
2. HTML ルート要素の `dark` クラスがトグルされます
3. 設定が localStorage の `vue-sfc-playground-prefer-dark` キーに保存されます

---

## 7. 【STEP4-5】SFC Playground — 共有・ダウンロード

> **業務フローでの位置**: 開発者が作成したコードを他者に共有したり、ローカルにダウンロードするステップです。

### 7.1 URL を共有する

**業務シーン**: 作成したコードを他の開発者に共有したい場合

**前提条件**: 共有したいコードがエディタに入力済みであること

**システムでの操作手順**:
1. ナビゲーションバーの「Share」ボタン（共有アイコン）をクリックします
2. 現在のページ URL がクリップボードにコピーされます
3. 「Sharable URL has been copied to clipboard.」というメッセージが表示されます
4. コピーされた URL を他者に送信すると、同じコード状態を再現できます

**注意点・Tips**:
- URL にはプロジェクト状態がエンコードされて含まれているため、URL だけでコードの完全な復元が可能です
- URL のモード情報（`__DEV__`、`__PROD__`、`__SSR__` プレフィックス）も含まれます
- `Meta` キー（Mac: `Cmd`、Windows: `Win`）を押しながら「Share」ボタンをクリックすると、Vue バージョンがリセットされ `localhost:5173` にリダイレクトされます（開発者向け隠し機能）

### 7.2 プロジェクトを ZIP ダウンロードする

**業務シーン**: 作成したコードをローカル環境に保存して使用したい場合

**システムでの操作手順**:
1. ナビゲーションバーの「Download」ボタン（ダウンロードアイコン）をクリックします
2. 「Download project files?」という確認ダイアログが表示されます
3. 「OK」をクリックすると、`vue-project.zip` がダウンロードされます

---

## 8. Template Explorer — テンプレートコンパイル結果の確認

> **業務フローでの位置**: Vue テンプレートのコンパイル結果を詳細に確認し、フレームワークの内部動作を理解するステップです。

### 8.1 テンプレートを入力する

**業務シーン**: Vue テンプレートがどのような JavaScript コードにコンパイルされるかを確認したい場合

**前提条件**: Template Explorer にアクセス済みであること

**やるべきこと**:
- 左パネル（Source Editor）に Vue テンプレート構文を入力する

**システムでの操作手順**:
1. 左パネル（Source Editor）をクリックします
2. Vue テンプレート構文（`<div>`, `v-if`, `v-for`, `v-model` 等）を入力します
3. 300ms のデバウンス後、テンプレートが自動的にコンパイルされます
4. 右パネル（Output Editor）にコンパイル結果（JavaScript レンダリング関数）が表示されます
5. コンソール（ブラウザの開発者ツール）に AST とコンパイル時間が出力されます

**関連画面**: Index（メイン画面）

**注意点・Tips**:
- 初期テンプレートは `<div>Hello World</div>` です（保存状態がない場合）
- Source Editor はワードラップ（`wordWrap: 'bounded'`）が有効です
- Output Editor は読み取り専用です
- フォントサイズは 14px、ミニマップは無効です

### 8.2 SourceMap によるハイライト連動を使用する

**業務シーン**: テンプレートの特定の部分がどのような JavaScript コードに変換されるかを確認したい場合

**システムでの操作手順**:

#### Source → Output ハイライト
1. 左パネル（Source Editor）でカーソルを移動します
2. 100ms 後に、対応する右パネル（Output Editor）の該当箇所がハイライトされます
3. Output Editor が自動的にハイライト位置にスクロールします

#### Output → Source ハイライト
1. 右パネル（Output Editor）でカーソルを移動します
2. 100ms 後に、対応する左パネル（Source Editor）の該当行がハイライトされます
3. Source Editor が自動的にハイライト位置にスクロールします

**注意点・Tips**:
- ハイライトには SourceMap（source-map-js ライブラリ）の `generatedPositionFor` / `originalPositionFor` API を使用しています
- コンパイルエラーが発生した場合、SourceMap は最後に成功したコンパイル結果のものが使用されます

### 8.3 コンパイルエラーの確認

**業務シーン**: テンプレートの構文エラーを確認・修正したい場合

**システムでの操作手順**:
1. テンプレートに構文エラーがある場合、Source Editor にエラーマーカーが表示されます
2. エラーマーカーにカーソルを合わせると、エラーメッセージが表示されます
3. Output Editor には `/* ERROR: {メッセージ} (see console for more info) */` が表示されます
4. ブラウザの開発者ツールのコンソールに詳細なエラー情報が出力されます

---

## 9. Template Explorer — コンパイルオプションの操作

### 9.1 コンパイルオプションを変更する

**業務シーン**: コンパイラオプションによる出力の違いを比較検証したい場合

**前提条件**: Template Explorer にアクセス済みであること

**やるべきこと**:
- Options Panel のラジオボタン・チェックボックスを操作してオプションを変更する

**システムでの操作手順**:

ヘッダー領域の「Options ▼」をクリックすると、以下のオプション項目が表示されます：

#### Mode（コンパイルモード）
ラジオボタンで選択：
- **module**: モジュールモード（`import` / `export` 形式の出力）
- **function**: 関数モード（`with(this)` 形式の出力）

#### Whitespace（空白文字処理）
ラジオボタンで選択：
- **condense**: 空白を圧縮（デフォルト）
- **preserve**: 空白を保持

#### チェックボックス項目

| オプション | 説明 | 自動制御 |
|-----------|------|---------|
| SSR | サーバーサイドレンダリング向けコンパイル | — |
| prefixIdentifiers | 識別子に `_ctx.` プレフィックスを付与 | module / SSR 時は自動有効・変更不可 |
| hoistStatic | 静的ノードをホイスティング（最適化） | SSR 時は無効・変更不可 |
| cacheHandlers | イベントハンドラをキャッシュ | prefix 無効 or SSR 時は無効・変更不可 |
| scopeId | スコープ付き CSS 用の ID 付与 | module 以外は変更不可 |
| inline | インラインモード | 常に変更可能 |
| v2 compat mode | Vue 2 互換モード（MODE: 2 / 3） | 常に変更可能 |

**注意点・Tips**:
- オプション変更は即座にリアクティブに検知され、テンプレートの自動再コンパイルがトリガーされます
- オプション間には依存関係があります（例：module モードでは prefixIdentifiers が自動有効化）
- 変更されたオプション値は localStorage および URLハッシュに自動保存されます

---

## 10. Vite Debug — 開発環境の動作確認

### 10.1 Vite Debug について

**業務シーン**: Vue 開発環境（Vite）の動作を確認・デバッグしたい場合

Vite Debug は、最小構成のカウンターアプリケーションです。Vue の `ref()` による Composition API の基本的な動作を確認できます。

**システムでの操作手順**:
1. ローカル開発サーバーを起動します
2. ブラウザでアクセスすると、カウンターアプリが表示されます
3. ボタンをクリックするとカウント値が増加します

**関連画面**: App（メイン画面）— `packages-private/vite-debug/App.vue`

---

## 11. 日常業務の流れ

本セクションでは、業務フローに沿った日常業務の流れを説明します。

```
業務フロー概要（再掲）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【STEP 1】開発者がSFC Playgroundでコンポーネントを作成・編集 → 4章参照
    ↓
【STEP 2】リアルタイムコンパイル＆プレビューで動作を確認 → 5章参照
    ↓
【STEP 3】必要に応じて設定変更（DEV/PROD、SSR、テーマ等） → 6章参照
    ↓
【STEP 4】コードをURL共有またはZIPダウンロードで配布 → 7章参照
    ↓
【STEP 5】Template Explorerでコンパイル結果を詳細に確認 → 8-9章参照
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```

### 11.1 【開発者】STEP1: コンポーネントの作成

新しいコンポーネントを作成する場合：

1. SFC Playground（play.vuejs.org）にアクセスします
2. 必要に応じて Vue バージョンを選択します（ナビゲーションバーの Vue Version ドロップダウン）
3. エディタ領域で Vue SFC コードを入力します
4. `<template>`、`<script setup>`、`<style>` の各ブロックを記述します

### 11.2 【開発者】STEP2: プレビュー確認

コードの動作を確認する場合：

1. エディタに入力した内容は自動的にコンパイルされます
2. 右側のプレビュー領域で実行結果を確認します
3. コンパイルエラーがある場合はプレビュー領域にエラーが表示されます
4. 必要に応じて「Reload」ボタンでプレビューをリロードします

### 11.3 【開発者】STEP3: 設定変更・動作確認

異なる条件で動作を確認する場合：

1. 「DEV」/「PROD」ボタンで開発モードとプロダクションモードを切り替えます
2. 「SSR ON」/「SSR OFF」ボタンで SSR モードを切り替えます
3. テーマ切替ボタンでライト/ダークテーマを切り替えます

### 11.4 【開発者】STEP4-5: 共有・詳細分析

コードを共有したり、コンパイル結果を詳細に分析する場合：

1. 「Share」ボタンをクリックして URL をクリップボードにコピーします
2. 必要に応じて「Download」ボタンで ZIP ファイルをダウンロードします
3. Template Explorer を使用してコンパイル結果を詳細に確認します
4. Options Panel でコンパイルオプションを変更し、出力の違いを比較します

---

## 12. よくある質問と対処法

### 12.1 SFC Playground に関するQ&A

**Q: ブラウザを閉じたらコードが消えてしまいますか？**

A: いいえ。コードの状態は URL ハッシュに自動的に永続化されます。同じ URL にアクセスすれば、コードが復元されます。また、AutoSave が有効な場合は localStorage にも保存されます。

**Q: DEV と PROD モードの違いは何ですか？**

A: DEV モード（開発モード）では Vue の警告メッセージやデバッグ情報が有効化されます。PROD モード（プロダクションモード）ではこれらが除去され、パフォーマンスが最適化されたビルドが使用されます。

**Q: SSR モードとは何ですか？**

A: SSR（Server-Side Rendering）モードを有効にすると、サーバーサイドレンダリングの出力を確認できます。サーバーサイドでの HTML 生成結果と、クライアントサイドでの Hydration 動作を検証する際に使用します。

**Q: Vapor モードとは何ですか？**

A: Vapor モードは Vue 3.6 以上で利用可能な新しいレンダリングモードです。バージョン選択で Vue 3.6 以上を選択した場合に利用可能になります。

### 12.2 Template Explorer に関するQ&A

**Q: 右パネルに編集できないのですが？**

A: Output Editor は読み取り専用です。これはコンパイル結果を表示するためのパネルであり、直接編集することはできません。テンプレートを変更するには、左パネル（Source Editor）を編集してください。

**Q: オプションが変更できない（グレーアウトしている）のですが？**

A: 一部のオプションには依存関係があります。例えば、`prefixIdentifiers` は module モードまたは SSR 時に自動的に有効化され、手動変更ができなくなります。他のオプションの設定を変更してから試してください。

---

## 13. トラブルシューティング

### 13.1 エラーメッセージと対処法

| エラー・状態 | 原因 | 対処法 |
|-------------|------|--------|
| プレビューが真っ白 | コンパイルエラーまたはランタイムエラー | ブラウザの開発者ツールでコンソールを確認し、エラーメッセージに従って修正してください |
| バージョン選択が「loading...」のまま | jsdelivr CDN からのバージョン情報取得中 | ネットワーク接続を確認し、しばらく待ってください |
| URLハッシュからの復元に失敗 | URLハッシュのデータが破損 | useStore 内部のフォールバック処理により、デフォルト状態で起動します |
| 「Persisted state in localStorage seems to be corrupted, please reload.」 | localStorage のデータが破損 | ブラウザの開発者ツールで localStorage をクリアし、ページをリロードしてください |
| Output に `/* ERROR: ... */` が表示 | テンプレートのコンパイルエラー | Source Editor のエラーマーカーを確認し、テンプレートの構文を修正してください |
| クリップボードへのコピーに失敗 | ブラウザのクリップボード API 非対応またはパーミッション拒否 | HTTPS 接続であることを確認し、ブラウザのクリップボードパーミッションを許可してください |

### 13.2 よくあるトラブルと解決方法

**トラブル: プレビューが更新されない**

1. 「Reload」ボタンをクリックしてプレビューをリロードします
2. 解消しない場合、ブラウザのページを全体リロード（`F5` / `Ctrl+R`）してください
3. それでも解消しない場合、ブラウザの localStorage をクリアしてから再度アクセスしてください

**トラブル: Template Explorer のハイライトが正しく動作しない**

1. SourceMap はコンパイル成功時に更新されます。テンプレートにエラーがある場合、最後に成功した SourceMap が使用されます
2. エラーを修正してから、再度カーソルを移動してハイライトを確認してください

**トラブル: バージョン変更後にページが正しく動作しない**

1. Vue バージョンの変更時には自動的にページがリロードされます
2. リロード後も問題がある場合、「This Commit」を選択してデフォルトバージョンに戻してください

### 13.3 サポートへの連絡方法

Vue.js Core の開発者ツールに関する問題やフィードバックは、以下の方法で報告できます：

- **GitHub Issues**: [https://github.com/vuejs/core/issues](https://github.com/vuejs/core/issues) で Issue を作成してください
- **GitHub リンク**: SFC Playground ナビゲーションバー右端の GitHub アイコンからリポジトリにアクセスできます

---

## 改訂履歴

| 版数 | 改訂日 | 改訂内容 |
|-----|--------|---------|
| 1.0 | 2026-02-27 | 初版作成 |

---

*本マニュアルは、Vue.js Core 開発者ツール（SFC Playground、Template Explorer、Vite Debug）のエンドユーザー向け業務運用マニュアルです。*
*システムの更新により、画面や操作方法が変更される場合があります。*
