# 通知設計書 20-スクリプトタグ警告

## 概要

本ドキュメントは、`@babel/standalone`において、ブラウザ内でのスクリプトタグ変換時に出力される警告通知の仕様を定義する。

### 本通知の処理概要

この通知は、開発者がブラウザ内で`@babel/standalone`を使用して`text/babel`または`text/jsx`タイプのスクリプトタグを変換する際に、本番環境ではプリコンパイルを推奨する警告を出力する機能である。

**業務上の目的・背景**：`@babel/standalone`はブラウザ内でリアルタイムにJavaScript/JSXコードをトランスパイルする機能を提供する。これは開発やプロトタイピングには便利だが、本番環境では事前にコードをコンパイル（プリコンパイル）することでパフォーマンスを向上させることが推奨される。この警告は、開発者に本番環境での適切なビルドプロセスの設定を促すために存在する。

**通知の送信タイミング**：`runScripts`関数内で、`text/babel`または`text/jsx`タイプのスクリプトタグが1つ以上見つかった場合に送信される。

**通知の受信者**：ブラウザ環境でBabelを使用する開発者。ブラウザの開発者コンソールを通じて通知される。

**通知内容の概要**：ブラウザ内変換の使用に関する警告と、本番環境向けのプリコンパイル設定ドキュメントへのリンク。

**期待されるアクション**：開発者は本番環境へのデプロイ前に、webpack、Rollup、またはその他のビルドツールを使用してコードをプリコンパイルする設定を行うことが推奨される。

## 通知種別

コンソール出力（console.warn）

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 同期 |
| 優先度 | 中 |
| リトライ | なし（コンソール出力のため） |

### 送信先決定ロジック

ブラウザの開発者コンソールに出力される。開発者ツールのConsoleタブで確認可能。

## 通知テンプレート

### コンソール出力の場合

| 項目 | 内容 |
|-----|------|
| 出力先 | console.warn |
| 形式 | テキスト |

### 本文テンプレート

```
You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
```

### 添付ファイル

該当なし

## テンプレート変数

該当なし（固定メッセージ）

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| API呼び出し | runScripts関数の実行 | `jsxScripts.length > 0` | text/babelまたはtext/jsxスクリプトが見つかった場合 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| jsxScripts.length === 0 | text/babelまたはtext/jsxスクリプトが見つからない場合 |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[runScripts呼び出し] --> B[スクリプトタグを収集]
    B --> C{scripts引数が<br>渡された?}
    C -->|No| D[document.getElementsByTagName<br>で全スクリプト取得]
    C -->|Yes| E[引数のスクリプト使用]
    D --> F[スクリプトタイプをフィルタリング]
    E --> F
    F --> G{jsxScripts.length > 0?}
    G -->|No| H[早期リターン]
    G -->|Yes| I[console.warn出力]
    I --> J[loadScripts呼び出し]
    J --> K[スクリプト変換実行]
```

## データベース参照・更新仕様

### 参照テーブル一覧

該当なし（ブラウザ実行のため、データベースアクセスは行わない）

### 更新テーブル一覧

該当なし

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| なし | - | この警告自体はエラーではなく、処理を中断しない |

### リトライ仕様

該当なし（一度の警告出力のみ）

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 制限なし | ページロード時に一度だけ出力 |

### 配信時間帯

制限なし（DOMContentLoaded時またはAPI呼び出し時）

## セキュリティ考慮事項

- 固定メッセージのみを出力し、機密情報は含まない
- 外部URLへのリンクを含むが、公式ドキュメントへの参照であり安全

## 備考

- `@babel/standalone`は`DOMContentLoaded`イベントで自動的に`transformScriptTags`を呼び出す
- `disableScriptTags`関数で自動変換を無効化できる
- `scriptTypes` Setには`"text/jsx"`と`"text/babel"`が含まれる
- 古い`text/jsx;harmony=true`形式もサポートされている（セミコロン以降は無視）

---

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

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

### 推奨読解順序

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

まず、`scriptTypes` SetとCompilationResult型を理解することが重要。

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

**読解のコツ**: `scriptTypes`は`"text/jsx"`と`"text/babel"`を含むSetで、変換対象のスクリプトタイプを定義する。

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

処理の起点となる`runScripts`関数を確認する。

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

**主要処理フロー**:
1. **244-247行目**: scripts引数のデフォルト処理
2. **250-258行目**: スクリプトタイプによるフィルタリング
3. **260-262行目**: スクリプトが見つからない場合の早期リターン
4. **264-267行目**: console.warn出力
5. **269行目**: loadScripts呼び出し

#### Step 3: 警告出力処理を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | transformScriptTags.ts | `packages/babel-standalone/src/transformScriptTags.ts` | 警告出力（264-267行目） |

**主要処理フロー**:
- **264-267行目**: console.warn出力（プリコンパイル推奨メッセージ）
- **269行目**: loadScripts関数呼び出しで実際の変換処理開始

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

```
transformScriptTags (index.ts:274)
    │
    └─ runScripts (transformScriptTags.ts:240)
           │
           ├─ document.getElementsByTagName (246行目)
           │
           ├─ scriptTypes.has (255行目)
           │      └─ フィルタリング
           │
           ├─ jsxScripts.length === 0 チェック (260行目)
           │
           ├─ console.warn (264-267行目)
           │
           └─ loadScripts (269行目)
                  └─ スクリプト変換処理
```

### データフロー図

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

HTMLScriptElement[]       runScripts
(DOMから取得)        ───▶ ├─ スクリプトタイプ判定
                          │      └─ scriptTypes.has
                          ├─ jsxScriptsフィルタリング
                          ├─ 警告出力                  ───▶ console.warn
                          └─ loadScripts
                                 └─ 変換・実行
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| transformScriptTags.ts | `packages/babel-standalone/src/transformScriptTags.ts` | ソース | スクリプトタグ変換のメイン実装 |
| index.ts | `packages/babel-standalone/src/index.ts` | ソース | @babel/standaloneのエントリーポイント |
