# 画面遷移図

## 概要

Babelプロジェクトは主にJavaScriptコンパイラ（CLI/ライブラリ）であり、GUI画面を持つWebアプリケーションではありません。
`babel-standalone`パッケージに含まれるデモ画面は、それぞれ独立したサンプルページであり、画面間の遷移はありません。

## 画面構成図

```mermaid
graph TB
    subgraph babel-standalone["babel-standalone デモ画面群"]
        direction TB

        subgraph api["API使用デモ"]
            example["Babelトランスフォームデモ<br/>example.htm"]
        end

        subgraph scriptTag["Script Tagデモ"]
            inline["インラインスクリプトタグデモ<br/>scriptTag-inline.htm"]
            src["外部スクリプトタグデモ<br/>scriptTag-src.htm"]
            custom["カスタムスクリプトタグデモ<br/>scriptTag-custom.htm"]
            disabled["スクリプト無効化デモ<br/>scriptTag-disabled.htm"]
        end
    end

    user["ユーザー"] --> example
    user --> inline
    user --> src
    user --> custom
    user --> disabled

    style babel-standalone fill:#f9f9f9,stroke:#333,stroke-width:2px
    style api fill:#e3f2fd,stroke:#1976d2
    style scriptTag fill:#fff3e0,stroke:#f57c00
```

## 各画面の機能概要

| No | 画面名 | 主要機能 | 入力 | 出力 |
|----|--------|----------|------|------|
| 1 | Babelトランスフォームデモ | Babel.transform() APIの実演 | JavaScriptコード（textarea） | 変換後コード（pre要素） |
| 2 | インラインスクリプトタグデモ | text/babel自動変換 | - | Hello worldメッセージ |
| 3 | 外部スクリプトタグデモ | 外部JSファイルの変換 | - | Hello worldメッセージ |
| 4 | カスタムスクリプトタグデモ | 手動変換制御 | - | Hello worldメッセージ |
| 5 | スクリプト無効化デモ | 変換無効化 | - | 元のテキスト維持 |

## 備考

- これらのデモ画面はすべて`packages/babel-standalone/examples/`ディレクトリに配置されています
- 各画面は独立しており、相互の画面遷移は存在しません
- 主な用途はBabel standaloneの機能デモンストレーションです
- 実際の製品UIではなく、開発者向けのサンプルコードです
