# 画面設計書 2-インラインスクリプトタグデモ

## 概要

本ドキュメントは、babel-standaloneパッケージに含まれる「インラインスクリプトタグデモ」画面の設計仕様を定義する。この画面は `text/babel` タイプのscriptタグを使用したインラインスクリプトの自動変換機能を実演するためのデモページである。

### 本画面の処理概要

この画面では、HTML内に記述された `type="text/babel"` のscriptタグが、ページ読み込み時にBabel standaloneによって自動的に検出・変換・実行される。ES2015+構文（アロー関数、テンプレートリテラル等）を含むJavaScriptコードがES5互換コードに変換され、ブラウザ上で実行される仕組みを実演する。

**業務上の目的・背景**：この画面は、Babel standaloneの最も基本的な使用方法である「scriptタグベースの自動変換」機能をデモンストレーションするために提供されている。開発者がBabelの設定やビルドツールを使用せずに、HTMLファイル内でES2015+構文を直接利用できることを示す。プロトタイピング、学習、小規模なプロジェクトでの利用シーンを想定している。

**画面へのアクセス方法**：ローカルサーバーまたはファイルシステムから直接 `packages/babel-standalone/examples/scriptTag-inline.htm` にアクセスする。ブラウザでHTMLファイルを開くことで画面が表示される。

**主要な操作・処理内容**：
1. ページ読み込み時にbabel.jsライブラリが読み込まれる
2. DOMContentLoadedイベント発火時に `transformScriptTags()` が自動的に呼び出される
3. `type="text/babel"` のscriptタグが検出される
4. インラインスクリプトの内容がBabel.transformで変換される
5. 変換後のコードが新しいscript要素として `<head>` に追加・実行される
6. 実行結果として"Hello world"メッセージとBabelバージョンが画面に表示される

**画面遷移**：本画面は独立したデモページであり、他の画面への遷移機能は存在しない。ユーザーは直接URLを指定してアクセスする。

**権限による表示制御**：認証・認可機能は実装されておらず、すべてのユーザーが同一の機能を利用できる。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 14 | @babel/standalone | 主機能 | text/babelタイプのscriptタグを自動検出し変換実行 |
| 1 | @babel/core | API連携 | transformScriptTags経由でBabel.transformを呼び出しコード変換 |
| 16 | @babel/preset-react | 補助機能 | デフォルトプリセットとしてJSX構文をサポート |
| 15 | @babel/preset-env | 補助機能 | デフォルトプリセットとしてES2015+構文を変換 |

## 画面種別

デモ / 自動変換サンプル

## URL/ルーティング

ファイルパス: `packages/babel-standalone/examples/scriptTag-inline.htm`

※ローカルファイルとして直接開くか、Webサーバー経由でアクセスする

## 入出力項目

| 項目名 | 項目ID | 入力/出力 | データ型 | 必須 | 説明 |
|--------|--------|----------|----------|------|------|
| 結果表示エリア | output | 出力 | string | - | 変換・実行後のメッセージを表示するpre要素 |
| Babelバージョン | version | 出力 | string | - | 使用中のBabelバージョンを表示するstrong要素 |

## 表示項目

| 項目名 | 表示形式 | 説明 |
|--------|----------|------|
| Using Babel ラベル | テキスト | バージョン表示のラベル |
| Babelバージョン | strong要素内テキスト | Babel.versionの値 |
| 結果表示 | pre要素内テキスト | 初期表示は"Loading..."、実行後は"Hello world" |

## イベント仕様

### 1-ページ読み込み（DOMContentLoaded）

1. babel.jsスクリプトが読み込まれ、グローバルBabelオブジェクトが初期化される
2. Babel standaloneの初期化処理でDOMContentLoadedイベントリスナーが登録される（index.ts: 266-268行目）
3. DOMContentLoadedイベント発火時に `onDOMContentLoaded()` が呼び出される
4. `transformScriptTags()` が呼び出され、`runScripts()` が実行される
5. ページ内の全scriptタグがスキャンされ、`type="text/babel"` または `type="text/jsx"` のタグが抽出される
6. 抽出されたスクリプトの内容（innerHTML）が取得される
7. デフォルトのプリセット（react, env）を使用してBabel.transformが実行される
8. 変換後のコードが新しいscript要素として `<head>` に追加される
9. 追加されたスクリプトがブラウザによって実行される

### 2-スクリプト実行（doStuff関数）

1. 変換後のスクリプト内の `doStuff()` 関数が呼び出される
2. `name` 変数に 'world' が代入される
3. テンプレートリテラルを使用して `Hello ${name}` 文字列が生成される
4. `#output` 要素のinnerHTMLに "Hello world" が設定される
5. `#version` 要素のinnerHTMLに Babel.version が設定される

## データベース更新仕様

### 操作別データベース影響一覧

本画面はフロントエンドのみで動作するデモ画面であり、データベースへのアクセスは発生しない。

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | データベース操作なし |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| MSG001 | 初期表示 | Loading... | ページ読み込み直後、スクリプト実行前 |
| MSG002 | 成功 | Hello world | スクリプト変換・実行成功後 |
| MSG003 | 警告（コンソール） | You are using the in-browser Babel transformer... | text/babelスクリプト検出時（開発警告） |

## 例外処理

| 例外ケース | 対応 | ユーザーへの表示 |
|-----------|------|-----------------|
| babel.js読み込み失敗 | ブラウザエラー | Babelオブジェクトが未定義となり、スクリプトが変換・実行されない |
| 構文エラー | Babel変換時エラー | コンソールにエラーが出力される、出力エリアは"Loading..."のまま |
| DOM要素が見つからない | JavaScript実行時エラー | コンソールにエラーが出力される |

## 備考

- 本画面は開発者向けのデモンストレーション目的であり、本番環境での利用は推奨されていない
- コンソールに「You are using the in-browser Babel transformer...」という警告が出力される
- デフォルトプリセットとして `react` と `env` が使用される（transformScriptTags.ts: 67-78行目）
- scriptタグに `data-presets` 属性を指定することでカスタムプリセットを使用可能
- scriptタグの `async` 属性や実行順序はDOM順序に従う

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

スクリプトタグの変換処理で使用されるデータ構造を理解することが重要である。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | transformScriptTags.ts | `packages/babel-standalone/src/transformScriptTags.ts` | CompilationResult型の定義（19-33行目） |

**読解のコツ**: `CompilationResult` 型は各scriptタグの処理状態を管理する。`loaded`, `executed`, `content` などのプロパティに注目する。

#### Step 2: エントリーポイントを理解する

HTMLファイルとBabel standaloneの初期化処理がエントリーポイントとなる。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | scriptTag-inline.htm | `packages/babel-standalone/examples/scriptTag-inline.htm` | HTML構造とtext/babelスクリプト（1-21行目） |
| 2-2 | index.ts | `packages/babel-standalone/src/index.ts` | DOMContentLoadedリスナー登録と自動実行（260-268行目） |

**主要処理フロー**:
1. **11行目（HTML）**: babel.jsスクリプトの読み込み
2. **12-18行目（HTML）**: `type="text/babel"` スクリプトの定義
3. **266-268行目（index.ts）**: DOMContentLoadedイベントリスナー登録
4. **260-262行目（index.ts）**: `onDOMContentLoaded()` から `transformScriptTags()` 呼び出し

#### Step 3: スクリプトタグ変換処理を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | index.ts | `packages/babel-standalone/src/index.ts` | transformScriptTags関数（274-278行目） |
| 3-2 | transformScriptTags.ts | `packages/babel-standalone/src/transformScriptTags.ts` | runScripts関数（240-270行目） |
| 3-3 | transformScriptTags.ts | `packages/babel-standalone/src/transformScriptTags.ts` | loadScripts関数（173-234行目） |

**主要処理フロー**:
- **274-278行目（index.ts）**: `transformScriptTags` が `runScripts(transform, scriptTags)` を呼び出す
- **244-246行目（transformScriptTags.ts）**: scriptタグの取得（指定がなければ全scriptタグ）
- **251-258行目**: `text/babel` または `text/jsx` タイプのscriptタグを抽出
- **264-267行目**: 開発警告をコンソールに出力
- **269行目**: `loadScripts(transformFn, jsxScripts)` を呼び出し

#### Step 4: 実際の変換と実行を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | transformScriptTags.ts | `packages/babel-standalone/src/transformScriptTags.ts` | transformCode関数（38-54行目） |
| 4-2 | transformScriptTags.ts | `packages/babel-standalone/src/transformScriptTags.ts` | buildBabelOptions関数（60-99行目） |
| 4-3 | transformScriptTags.ts | `packages/babel-standalone/src/transformScriptTags.ts` | run関数（105-115行目） |

**主要処理フロー**:
- **38-54行目**: `transformCode` で変換関数を呼び出し
- **60-99行目**: `buildBabelOptions` でデフォルトプリセット（react, env）を設定
- **105-115行目**: `run` 関数で新しいscript要素を作成しheadに追加

### プログラム呼び出し階層図

```
ブラウザ
    │
    ├─ <script src="../babel.js">  ... babel-standaloneライブラリ読み込み
    │      │
    │      └─ index.ts モジュール初期化
    │             │
    │             └─ window.addEventListener("DOMContentLoaded", ...)  ... 266-268行目
    │
    └─ DOMContentLoaded イベント発火
           │
           └─ onDOMContentLoaded()  ... index.ts:260
                  │
                  └─ transformScriptTags()  ... index.ts:274
                         │
                         └─ runScripts(transform, scriptTags)  ... transformScriptTags.ts:240
                                │
                                ├─ scriptタグのフィルタリング（text/babel検出）
                                │
                                └─ loadScripts(transformFn, jsxScripts)  ... :173
                                       │
                                       └─ check() ループ内で run() 呼び出し  ... :180
                                              │
                                              ├─ transformCode()  ... :38
                                              │      │
                                              │      └─ transformFn(content, options)
                                              │             │
                                              │             └─ Babel.transform() → @babel/core
                                              │
                                              └─ headEl.appendChild(scriptEl)  ... :114
                                                     │
                                                     └─ ブラウザによるスクリプト実行
```

### データフロー図

```
[入力]                           [処理]                              [出力]

<script type="text/babel">   ──▶  Babel standalone               ──▶  <head>に新規script追加
  │                                    │                                  │
  │ innerHTML                          │ runScripts()                     │ 変換後コード
  │ (ES2015+コード)                    │   └─ loadScripts()               │
  │                                    │       └─ transformCode()         ▼
  │                                    │           └─ Babel.transform()   ブラウザ実行
  │                                    │                                  │
  └──────────────────────────────────▶ │ ◀──────────────────────────────┘
                                       │                                  │
                                       └──────────────────────────────────┤
                                                                          ▼
                                                               #output: "Hello world"
                                                               #version: Babel.version
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| scriptTag-inline.htm | `packages/babel-standalone/examples/scriptTag-inline.htm` | テンプレート | デモ画面のHTML構造とtext/babelスクリプト |
| babel.js | `packages/babel-standalone/babel.js` | ライブラリ | ビルド済みBabel standaloneライブラリ |
| index.ts | `packages/babel-standalone/src/index.ts` | ソース | エントリーポイント、transformScriptTags関数、DOMイベント登録 |
| transformScriptTags.ts | `packages/babel-standalone/src/transformScriptTags.ts` | ソース | scriptタグ検出・変換・実行のコア処理 |
