# Babel Standalone 業務運用マニュアル

## 目次

**【基本操作】**
1. [システム概要](#1-システム概要)
2. [ログイン・ログアウト手順](#2-ログインログアウト手順)
3. [トップページ（TOP画面）](#3-トップページtop画面)

**【業務フローに沿った機能】**
4. [【STEP1】Babelトランスフォームデモ（コード変換の実演）](#4-step1babelトランスフォームデモコード変換の実演)
5. [【STEP2-3】スクリプトタグデモ（自動変換機能）](#5-step2-3スクリプトタグデモ自動変換機能)
6. [【STEP3-4】外部ファイル読み込み（XHR連携）](#6-step3-4外部ファイル読み込みxhr連携)
7. [【STEP4-5】変換制御機能（管理者向け）](#7-step4-5変換制御機能管理者向け)

**【サポート機能】**
8. [FAQ機能](#8-faq機能)
9. [お問合せ機能](#9-お問合せ機能)
10. [マイページ機能](#10-マイページ機能)

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

---

## 1. システム概要

### 1.1 Babel Standaloneとは

Babel Standaloneは、ブラウザ上でJavaScriptコードのトランスパイル（変換）を直接実行できるライブラリです。通常、Babelはビルドツール（webpack、Rollup等）と組み合わせて使用しますが、Babel Standaloneを使用することで、ビルドツールなしでES2015+構文やJSX構文を古いブラウザでも動作する形式に変換できます。

本マニュアルで説明するデモ画面群は、Babel Standaloneの主要機能を体験・学習するためのサンプルページです。開発者がBabelの動作原理を理解し、プロトタイピングや学習目的で活用することを想定しています。

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

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

| 業務カテゴリ | 具体的な業務内容 |
|------------|----------------|
| **コード変換** | ES2015+/JSX構文をES5互換コードに変換、リアルタイムプレビュー |
| **学習・検証** | Babel APIの動作確認、変換結果の検証、構文サポートの確認 |
| **プロトタイピング** | ビルド環境なしでの最新JavaScript構文の試用、コード実験 |
| **変換制御** | スクリプトタグの自動変換の有効化/無効化、手動変換の実行 |

### 1.3 業務フロー概要

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

```
┌─────────────────────────────────────────────────────────────────┐
│                        業務フロー                                │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  【STEP 1】開発者がBabelトランスフォームデモでAPI操作を学習      │
│      ↓                                                          │
│  【STEP 2】スクリプトタグデモで自動変換機能を理解               │
│      ↓                                                          │
│  【STEP 3】外部ファイル読み込みデモでXHR連携を確認               │
│      ↓                                                          │
│  【STEP 4】カスタムスクリプトデモで手動変換制御を習得            │
│      ↓                                                          │
│  【STEP 5】スクリプト無効化デモでセキュリティ制御を確認          │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

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

| 役割 | 主な業務 |
|------|---------|
| **開発者** | コード変換の実験、Babel APIの学習、プロトタイプ開発 |
| **学習者** | デモ画面を通じたBabel機能の理解、サンプルコードの試行 |

### 1.4 主な機能

| 機能 | 説明 | 業務フローでの位置 |
|------|------|------------------|
| Babelトランスフォームデモ | Babel.transform() APIを使用したリアルタイムコード変換 | STEP 1 |
| インラインスクリプトタグデモ | text/babelスクリプトの自動検出・変換・実行 | STEP 2 |
| 外部スクリプトタグデモ | 外部JSファイルのXHR読み込みと変換 | STEP 3 |
| カスタムスクリプトタグデモ | disableScriptTags/transformScriptTagsによる手動制御 | STEP 4 |
| スクリプト無効化デモ | 自動変換の完全無効化 | STEP 5 |

### 1.5 ユーザー種別

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

| ユーザー種別 | 説明 |
|-------------|------|
| 開発者 | Babel Standaloneを使用してコード変換を行う技術者 |
| 学習者 | Babelの機能を学習・理解したい技術者 |

**注意**: 本システムはデモ用途であり、認証・認可機能は実装されていません。すべてのユーザーが同一の機能を利用できます。

### 1.6 対応ブラウザ

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

---

## 2. ログイン・ログアウト手順

### 2.1 アクセス方法

本システムはデモ画面であり、ログイン機能は実装されていません。各デモ画面には以下の方法でアクセスします。

**ローカルサーバー経由でのアクセス：**

1. ターミナルを開きます
2. プロジェクトディレクトリに移動します
3. 以下のいずれかの方法でローカルサーバーを起動します：
   - Python: `python -m http.server 8080`
   - Node.js: `npx serve`
4. ブラウザで `http://localhost:8080/packages/babel-standalone/examples/` にアクセスします
5. 目的のデモ画面（.htm ファイル）を選択します

**ファイル直接アクセス：**

1. ファイルエクスプローラーで `packages/babel-standalone/examples/` ディレクトリを開きます
2. 目的のデモ画面（.htm ファイル）をダブルクリックします
3. ブラウザで画面が開きます

**注意**: 外部スクリプトタグデモ（scriptTag-src.htm）はCORS制限により、ファイル直接アクセスでは動作しない場合があります。ローカルサーバー経由でのアクセスを推奨します。

### 2.2 ログアウト方法

ログアウト機能は存在しません。ブラウザのタブを閉じることで終了します。

---

## 3. トップページ（TOP画面）

### 3.1 デモ画面一覧

本システムはトップページを持たず、各デモ画面が独立して存在します。以下の画面にそれぞれ直接アクセスします。

| No | 画面名 | ファイル名 | 主な用途 |
|----|--------|-----------|---------|
| 1 | Babelトランスフォームデモ | example.htm | API操作の学習 |
| 2 | インラインスクリプトタグデモ | scriptTag-inline.htm | 自動変換の理解 |
| 3 | 外部スクリプトタグデモ | scriptTag-src.htm | 外部ファイル読み込み |
| 4 | カスタムスクリプトタグデモ | scriptTag-custom.htm | 手動変換制御 |
| 5 | スクリプト無効化デモ | scriptTag-disabled.htm | セキュリティ制御 |

### 3.2 画面間の関係

各デモ画面は独立しており、画面間の遷移機能はありません。学習目的に応じて、適切なデモ画面を選択してください。

---

## 4. 【STEP1】Babelトランスフォームデモ（コード変換の実演）

> **業務フローでの位置**: 開発者がBabel APIの基本的な使用方法を学習するステップです。

### 4.1 この画面でできること

- ES2015+/JSX構文を含むJavaScriptコードの入力
- リアルタイムでの変換結果の確認
- 変換エラーの確認

### 4.2 画面の構成

| 表示項目 | 説明 |
|----------|------|
| Input: ラベル | 入力エリアの説明 |
| コード入力エリア | ES2015+/JSX構文を入力するテキストエリア |
| Transformed code using Babel | 出力エリアのラベルとBabelバージョン表示 |
| 変換結果 | 変換後のES5コードまたはエラーメッセージ |

### 4.3 コードを変換する手順

**やるべきこと:**
- ES2015+構文またはJSX構文を含むコードを入力する
- 変換結果を確認する
- エラーがある場合は構文を修正する

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

1. ブラウザで `example.htm` を開きます
2. 画面が表示され、サンプルコードが自動的に変換されます
3. 入力エリアにES2015+/JSX構文を含むコードを入力します

```javascript
// 入力例（アロー関数）
const greet = (name) => `Hello, ${name}!`;
```

4. キーを押すたびに、変換結果がリアルタイムで更新されます
5. 出力エリアに変換後のES5コードが表示されます

```javascript
// 出力例
var greet = function greet(name) {
  return "Hello, " + name + "!";
};
```

**注意点・Tips:**
- アロー関数、テンプレートリテラル、クラス構文など、ES2015+の様々な構文を試すことができます
- JSX構文を入力すると、React.createElement形式に変換されます
- 構文エラーがある場合は、「ERROR:」で始まるエラーメッセージが表示されます

**関連画面:**
- なし（独立したデモ画面）

**次のステップ:**
- インラインスクリプトタグデモで自動変換機能を学習する

---

## 5. 【STEP2-3】スクリプトタグデモ（自動変換機能）

> **業務フローでの位置**: 開発者がtext/babelスクリプトタグによる自動変換機能を理解するステップです。

### 5.1 インラインスクリプトタグデモ

#### 5.1.1 この画面でできること

- HTMLファイル内にES2015+コードを直接記述
- ページ読み込み時の自動変換・実行
- Babelバージョンの確認

#### 5.1.2 動作の確認手順

**やるべきこと:**
- デモ画面を開いて自動変換が機能することを確認する

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

1. ブラウザで `scriptTag-inline.htm` を開きます
2. ページが読み込まれると、自動的に以下の処理が行われます：
   - `type="text/babel"` スクリプトタグが検出される
   - スクリプト内容がBabelで変換される
   - 変換後のコードが実行される
3. 画面に「Hello world」と表示されます
4. Babelバージョンが表示されます

**注意点・Tips:**
- コンソールに「You are using the in-browser Babel transformer...」という警告が表示されますが、これは開発用警告であり正常な動作です
- 本番環境での使用は推奨されていません

---

## 6. 【STEP3-4】外部ファイル読み込み（XHR連携）

> **業務フローでの位置**: 開発者が外部JSファイルをBabelで変換して使用する方法を学ぶステップです。

### 6.1 外部スクリプトタグデモ

#### 6.1.1 この画面でできること

- 外部JSファイル（src属性）の読み込みと変換
- XHRを使用した非同期ファイル読み込みの動作確認

#### 6.1.2 動作の確認手順

**前提条件:**
- ローカルサーバー経由でのアクセスが必要（CORS制限のため）

**やるべきこと:**
- ローカルサーバーを起動してデモ画面にアクセスする
- 外部ファイルが正しく読み込まれ変換されることを確認する

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

1. ターミナルで `packages/babel-standalone/examples/` ディレクトリに移動します
2. ローカルサーバーを起動します：`python -m http.server 8080`
3. ブラウザで `http://localhost:8080/scriptTag-src.htm` を開きます
4. ページが読み込まれると、以下の処理が自動的に行われます：
   - `src="example.js"` が指定されたスクリプトタグが検出される
   - XMLHttpRequestで `example.js` ファイルが読み込まれる
   - ファイル内容がBabelで変換される
   - 変換後のコードが実行される
5. 画面に「Hello world」と表示されます

**注意点・Tips:**
- ファイルシステムから直接開いた場合（file://プロトコル）、XHRが失敗する可能性があります
- 必ずローカルサーバー経由でアクセスしてください

---

## 7. 【STEP4-5】変換制御機能（管理者向け）

> **業務フローでの位置**: 開発者がBabel変換のタイミングを制御する方法を学ぶステップです。

### 7.1 カスタムスクリプトタグデモ

#### 7.1.1 この画面でできること

- 自動変換の無効化（disableScriptTags）
- 動的なスクリプト要素の生成
- 手動での変換実行（transformScriptTags）

#### 7.1.2 動作の確認手順

**やるべきこと:**
- 手動変換制御のAPIの動作を理解する

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

1. ブラウザで `scriptTag-custom.htm` を開きます
2. ページ読み込み時に以下の処理が順番に行われます：
   - `Babel.disableScriptTags()` で自動変換が無効化される
   - JavaScriptで動的にscript要素が生成される
   - `Babel.transformScriptTags()` で明示的に変換が実行される
3. 画面に「Hello world」と表示されます

**注意点・Tips:**
- この手法は、動的にスクリプトを追加する場合や、特定の条件を満たした後に変換を実行したい場合に有用です
- SPAやダイナミックコンテンツを扱うアプリケーションでの利用を想定しています

### 7.2 スクリプト無効化デモ

#### 7.2.1 この画面でできること

- text/babelスクリプトの自動変換を完全に無効化
- セキュリティ制御のデモンストレーション

#### 7.2.2 動作の確認手順

**やるべきこと:**
- 自動変換の無効化が正しく機能することを確認する

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

1. ブラウザで `scriptTag-disabled.htm` を開きます
2. ページ読み込み時に以下の処理が行われます：
   - `Babel.disableScriptTags()` で自動変換が無効化される
   - `type="text/babel"` スクリプトタグは存在するが、変換・実行されない
3. 画面に「This line should not be overwritten!」と表示されます（初期テキストが維持される）
4. 「I did an evil operation!」は表示されません（スクリプトが実行されていない証拠）

**注意点・Tips:**
- このデモでは「スクリプトが実行されないこと」が成功状態です
- セキュリティ要件により動的スクリプト実行を防止したい場合に利用できます

---

## 8. FAQ機能

本システムにはFAQ機能は実装されていません。よくある質問については、第12章「よくある質問と対処法」を参照してください。

---

## 9. お問合せ機能

本システムにはお問合せ機能は実装されていません。Babelに関する質問は以下のリソースを参照してください：

- Babel公式ドキュメント: https://babeljs.io/docs/
- GitHub Issues: https://github.com/babel/babel/issues
- Stack Overflow: https://stackoverflow.com/questions/tagged/babeljs

---

## 10. マイページ機能

本システムにはマイページ機能は実装されていません。各デモ画面は独立して動作し、ユーザー固有の設定や履歴は保存されません。

---

## 11. 日常業務の流れ

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

```
業務フロー概要（再掲）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【STEP 1】Babelトランスフォームデモでコード変換を試す → 4章参照
    ↓
【STEP 2】インラインスクリプトタグデモで自動変換を確認 → 5章参照
    ↓
【STEP 3】外部スクリプトタグデモでXHR連携を確認 → 6章参照
    ↓
【STEP 4】カスタムスクリプトタグデモで手動制御を学習 → 7章参照
    ↓
【STEP 5】スクリプト無効化デモでセキュリティ制御を確認 → 7章参照
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```

### 11.1 【開発者】STEP1: コード変換の基本を学習

業務開始時に、Babelトランスフォームデモでコード変換の基本を学習します。

1. `example.htm` を開きます
2. サンプルコードの変換結果を確認します
3. 様々なES2015+構文を入力して変換結果を確認します：
   - アロー関数: `const fn = () => {};`
   - テンプレートリテラル: `` `Hello, ${name}!` ``
   - クラス構文: `class MyClass extends Parent {}`
   - 分割代入: `const { a, b } = obj;`
4. JSX構文も試します: `<div className="app">Hello</div>`

### 11.2 【開発者】STEP2: 自動変換機能の理解

次に、スクリプトタグベースの自動変換機能を理解します。

1. `scriptTag-inline.htm` を開きます
2. ソースコードを表示して、`type="text/babel"` スクリプトタグを確認します
3. 開発者ツールのコンソールを開き、警告メッセージを確認します
4. 画面に「Hello world」が表示されることを確認します

### 11.3 【開発者】STEP3-4: 外部ファイルと手動制御

外部ファイル読み込みと手動変換制御を学習します。

1. ローカルサーバーを起動します
2. `scriptTag-src.htm` で外部ファイル読み込みを確認します
3. `scriptTag-custom.htm` で手動変換制御を確認します

### 11.4 【開発者】STEP5: セキュリティ制御

セキュリティ観点での変換制御を学習します。

1. `scriptTag-disabled.htm` を開きます
2. スクリプトが実行されないことを確認します
3. この機能のユースケースを理解します

---

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

### 12.1 アクセスに関するQ&A

**Q: 外部スクリプトタグデモが動作しません**

A: 以下を確認してください：
- ローカルサーバー経由でアクセスしていますか？
- ファイルシステムから直接開いている場合（file://プロトコル）、CORS制限によりXHRが失敗します
- ローカルサーバーを起動してhttp://localhost経由でアクセスしてください

**Q: コンソールに警告メッセージが表示されます**

A: 「You are using the in-browser Babel transformer...」という警告は正常な動作です。これは本番環境での使用を推奨しないことを示す開発用警告です。

### 12.2 コード変換に関するQ&A

**Q: 変換結果がエラーになります**

A: 以下を確認してください：
- 入力コードの構文が正しいか確認してください
- サポートされていない構文を使用していないか確認してください
- 括弧の対応が正しいか確認してください

**Q: 特定の構文がサポートされていません**

A: Babel Standaloneはデフォルトで以下のプリセットを使用しています：
- es2015（またはenv）
- react
- stage-0

特定の構文をサポートするには、`data-presets` 属性でカスタムプリセットを指定することができます。

---

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

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

| エラーメッセージ | 原因 | 対処法 |
|----------------|------|--------|
| ERROR: Unexpected token | 構文エラー | 入力コードの構文を確認してください |
| ERROR: Invalid preset specified in Babel options | 不正なプリセット指定 | 有効なプリセット名を指定してください |
| Could not load {url} | 外部ファイル読み込み失敗 | ローカルサーバー経由でアクセスしてください |
| Babel is not defined | babel.js読み込み失敗 | babel.jsのパスが正しいか確認してください |

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

**トラブル: 画面が「Loading...」のままです**

解決方法：
1. ブラウザの開発者ツールを開きます（F12キー）
2. コンソールタブでエラーメッセージを確認します
3. エラーに応じて対処します：
   - 構文エラーの場合：コードを修正してください
   - ファイル読み込みエラーの場合：ローカルサーバーを使用してください
   - babel.js読み込みエラーの場合：ファイルパスを確認してください

**トラブル: 変換後のコードが期待と異なります**

解決方法：
1. 使用しているプリセットを確認します
2. Babel公式サイトのREPL（https://babeljs.io/repl）で同じコードを試します
3. 必要に応じてプリセットやプラグインを追加します

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

本システムはデモ用途のためサポート窓口はありません。以下のリソースを参照してください：

- Babel公式ドキュメント: https://babeljs.io/docs/
- GitHub Issues: https://github.com/babel/babel/issues
- Stack Overflow: https://stackoverflow.com/questions/tagged/babeljs

---

## 改訂履歴

| 版数 | 改訂日 | 改訂内容 |
|-----|--------|---------|
| 1.0 | 2026-03-01 | 初版作成 |

---

*本マニュアルは、Babel Standaloneのエンドユーザー向け業務運用マニュアルです。*
*システムの更新により、画面や操作方法が変更される場合があります。*
