RegexPlayground - 正規表現ビジュアル学習&テストツール

## 1. アプリの目的・ターゲットユーザー
エンジニア・プログラマーがブラウザだけで正規表現をリアルタイムに可視化しながら学習・デバッグできるツール。「正規表現を書いたことがない初心者」から「複雑なパターンを素早く検証したい中上級者」まで幅広く対応する。外部APIや外部ライブラリへの依存なし（ブラウザ標準のJavaScript RegExpを利用）。

## 2. 主要機能
- **リアルタイムマッチハイライト**: パターン入力欄とテスト文字列エリアを並べ、入力のたびにマッチ箇所をカラーハイライトで即時表示。マッチ数・キャプチャグループ一覧も同時表示。
- **パターンビジュアライザー**: 入力した正規表現をRailroad Diagram（鉄道路線図）風のSVGに自動展開し、量指定子・グループ・文字クラスなどの構造を視覚的に説明。
- **チュートリアル＆インタラクティブ練習**: 「文字クラス」「量指定子」「アンカー」「グループ・後方参照」「先読み・後読み」の5チャプター、各3問ずつ計15問のステップ式練習問題。穴埋め形式でパターンを完成させて正解するとバッジが解錠される。
- **50種チートシートサイドパネル**: 主要メタ文字・エスケープシーケンス・フラグ（g/i/m/s/u）の一覧を折りたたみ式で常時参照でき、項目クリックでそのまま入力欄に挿入。
- **スニペットライブラリ**: よく使う実用パターン20件（メールアドレス・郵便番号・URL・電話番号・日付・全角半角変換等）をプリセット収録。クリック1つで即時読み込み＆解説表示。
- **LocalStorage保存＆公開共有URL**: 作成したパターン＋テスト文字列をLocalStorageに最大20件保存し、URLクエリパラメータでパターンとテキストをエンコードした共有リンクを生成。

## 3. 画面構成
### メイン画面（1ページSPA）
- **ヘッダー**: ロゴ、モード切替タブ（「テスト」「チュートリアル」「スニペット」）、ダーク/ライトテーマトグル
- **テストモード**:
- 左カラム上: パターン入力欄（入力補助ボタン：フラグ g/i/m/s を4つのトグルボタン）
- 左カラム中: パターンビジュアライザー（SVG Railroad Diagram、100〜200px高さ）
- 左カラム下: マッチ情報パネル（マッチ数、マッチ一覧テーブル：インデックス・マッチ文字列・開始位置・グループ）
- 右カラム上: テスト文字列テキストエリア（複数行、マッチ箇所をspanでラップしカラーハイライト）
- 右カラム下: 置換モード（置換文字列入力、置換結果プレビュー）
- 右サイド: チートシートアコーディオンパネル
- **チュートリアルモード**: チャプター一覧 → 問題文＋入力欄＋リアルタイム判定 → バッジ取得アニメーション
- **スニペットモード**: カードグリッド（20件）、カードには「タイトル・例・説明」、「テストに読み込む」ボタン

### モバイル対応
- スタック型1カラムレイアウト。タブでパターン入力/ハイライト結果/チートシートを切り替え。

## 4. データ構造
### DBなし（フルフロントエンド完結）
- **LocalStorage キー**:
- `rgx_snippets`: ユーザー保存パターン配列（JSON）`[{id, name, pattern, flags, testText, createdAt}]`
- `rgx_badges`: 取得済みチュートリアルバッジ配列 `["chap1-q1", "chap1-q2", ...]`
- `rgx_theme`: `"dark"` or `"light"`
- **静的定数（JSファイル内）**:
- `PRESET_SNIPPETS`: 20件のプリセットパターン定義
- `TUTORIAL_QUESTIONS`: 5チャプター×3問の問題・正答パターン・ヒント定義
- `CHEATSHEET_ITEMS`: 50件のメタ文字解説定義

## 5. デザインの方向性
- **カラーテーマ**: ダークモード基調（背景 #1a1a2e、パネル #16213e、アクセント #0f3460 ＋ネオンシアン #00d4ff）とライトモード（白背景・ネイビーアクセント）の2種。エンジニアツールらしいコードエディタ風の雰囲気。
- **フォント**: コード部分は `Fira Code` or `Consolas`、UIテキストは `Noto Sans JP`。
- **マッチハイライト**: マッチ1件目から順にピンク→黄色→緑→水色とグループごとに色分け（最大4色ローテーション）。
- **Railroad Diagram**: シンプルな角丸SVG図形（文字クラスは青、量指定子はオレンジ、グループは紫）で構造を直感的に表現。ライブラリ不使用でJSで描画。
- **全体印象**: シンプルで無駄のないデベロッパーツール。アニメーションは控えめ（フェードイン・バッジ取得時のスケールアップのみ）。
- **実装規模**: HTML1ファイル＋CSS1ファイル＋JS3ファイル（main.js, visualizer.js, tutorial.js）程度。PHPは不要（完全静的ページ）。1〜2日で完成できる現実的な規模。