ミニゲーム: テスターツール
JSテスターは、ブラウザ環境でのJavaScript動作確認、CPUベンチマーク計測、そしてブロック式アドベンチャー作成を1つにまとめた開発者向けミニゲームです。タブを切り替えながら、環境調査からインタラクティブなデモ制作までを手早く行えます。
概要
- 機能テスト ― 代表的なWeb APIをワンクリックで検証し、成功・失敗結果を記録します。【F:games/tester.js†L429-L549】【F:games/tester.js†L808-L889】
- CPUベンチマーク ― 1秒間の整数インクリメント回数を測定し、最新値・自己ベスト・累計回数を可視化します。【F:games/tester.js†L892-L1001】
- ブロックアドベンチャー ― テキストや分岐ブロックを組み合わせて簡易的なストーリーを作り、ログ・変数ビューアで挙動を確認できます。【F:games/tester.js†L1004-L1940】
画面構成と操作の流れ
画面上部のタブバーから各機能へ移動します。タブをクリックすると対応するセクションがアクティブになり、他のセクションは非表示になります。【F:games/tester.js†L706-L767】
- タブを選択して目的のツールを開く。
- 各セクション内の操作ボタンでテスト実行・計測・ストーリー編集を行う。
- 必要に応じてRestart（ゲームの再起動）を行うと全データが初期化されます。【F:games/tester.js†L2140-L2156】
タブ「機能テスト」
カード内に用意されたテストを個別、または「すべて実行」ボタンから連続実行できます。各テストは完了後に ✅ または ❌ 付きのメッセージを表示し、結果はメモリに蓄積されます。【F:games/tester.js†L808-L889】
- 「すべて実行」を押すと、定義済みテストを順番に走査します。途中で失敗したテストがあっても残りの項目は継続実行されます。【F:games/tester.js†L861-L888】
- 個別テストの「テスト実行」を押した場合は、その場で結果が更新されます。【F:games/tester.js†L820-L857】
- テスト結果は直近の実行内容が上書きされ、後から「すべて実行」を押したときにも利用されます。【F:games/tester.js†L861-L889】
テスト項目一覧
| テスト名 | 検査内容 | 成功時の出力例 | 代表的な失敗要因 |
|---|---|---|---|
| 数値/BigInt | BigInt演算や Math.fround、Math.hypot の計算精度を確認します。【F:games/tester.js†L429-L444】 |
BigInt OK / fround=3.1416 のような計算結果が表示されます。【F:games/tester.js†L443-L444】 |
BigIntが誤った値を返す、または Math.hypot の結果に許容以上の誤差が出た場合に失敗します。【F:games/tester.js†L438-L443】 |
| JSON & structuredClone | ネストしたオブジェクトのJSONシリアライズ/復元と structuredClone のMap保持を確認します。【F:games/tester.js†L447-L468】 |
JSON長=123 のようにエンコード後の文字列長を返します。【F:games/tester.js†L467-L468】 |
JSON復元に失敗した場合や、structuredClone が Map を保持できない場合にエラーになります。【F:games/tester.js†L459-L465】 |
| Intlフォーマット | 現在ロケールを使用した日時/通貨フォーマットが期待どおりかを検証します。【F:games/tester.js†L471-L487】 | 例: 2023年5月1日月曜日 ... / ￥123,456.79 といったフォーマット結果を返します。【F:games/tester.js†L482-L486】 |
日付文字列に「5月」が含まれない、または通貨表記に「￥」が含まれない場合に失敗します。【F:games/tester.js†L483-L485】 |
| Crypto API | 暗号学的乱数の生成と SHA-256 ハッシュの計算を確認します。【F:games/tester.js†L489-L502】 |
SHA-256 head=1a2b3c4d のように計算したハッシュの先頭を表示します。【F:games/tester.js†L499-L501】 |
crypto.getRandomValues が利用できないなど、暗号APIが無効な環境ではエラーになります。【F:games/tester.js†L495-L499】 |
| Storage API | localStorage と sessionStorage への書き込み・読み出し・削除をテストします。【F:games/tester.js†L504-L523】 |
localStorage / sessionStorage OK が表示されます。【F:games/tester.js†L523-L524】 |
Storageがブロックされている場合や読み書き結果が一致しない場合に失敗します。【F:games/tester.js†L510-L522】 |
| Canvas & Offscreen | Canvasへの描画とピクセル取得、OffscreenCanvas の存在を確認します。【F:games/tester.js†L526-L549】 |
中心RGB=(96,164,247) / Offscreen=YES のようなRGB値と対応状況を返します。【F:games/tester.js†L548-L549】 |
ピクセルデータ取得に失敗した場合にエラーとなります。【F:games/tester.js†L546-L548】 |
タブ「CPUベンチマーク」
「計測スタート (1秒)」ボタンを押すと、performance.now() を使って1秒間ループを回し、処理回数から「回/秒」を算出します。実行中は1秒間UIが固まる場合があるため、ログの注意書きを参照してください。【F:games/tester.js†L892-L1001】
- 最新結果 (回/秒) ― 直近の計測値。高速な端末ほど大きな値になります。【F:games/tester.js†L902-L919】【F:games/tester.js†L970-L999】
- 自己ベスト (回/秒) ― 過去最高値。新記録時にはログに通知が追加されます。【F:games/tester.js†L920-L999】
- 累計実行回数 ― ボタンを押した回数をカウントし、学習やチューニングの進捗を把握できます。【F:games/tester.js†L930-L999】
- ログ ― タイムスタンプ付きで計測開始・結果・新記録を最大20件まで保存します。【F:games/tester.js†L1000-L1001】
タブ「ブロックアドベンチャー」
左ペインでブロックを並べ、右ペインでログ・変数・カスタムalertを確認しながらストーリーを再生します。ブロックの追加・削除・並べ替えはすべてUIボタンで行え、ブロック番号（#0, #1, ...）を指定して遷移先を制御します。【F:games/tester.js†L1004-L1340】
左ペイン: ブロックエディタ
- 「ブロックを追加」で新しいブロックを末尾に挿入し、「全削除」でリストを初期化します。【F:games/tester.js†L1016-L1051】
- 各ブロックは種類セレクタと上下移動ボタン、削除ボタンを持ち、必要に応じて並び替えや入れ替えが可能です。【F:games/tester.js†L1244-L1320】
- ブロック番号は0始まりで表示され、遷移先指定フィールドにこの番号を入力して分岐先を選びます。空欄の場合は次のブロックへ進みます。【F:games/tester.js†L1260-L1274】【F:games/tester.js†L1857-L1877】
ブロック種別と主なフィールド
| 種別 | 用途 | 主なフィールド |
|---|---|---|
| text | テキストをログやカスタムalertに表示します。【F:games/tester.js†L1323-L1392】【F:games/tester.js†L1885-L1911】 | text（本文）、delivery（log/alert/both）、next（次ブロック番号）。【F:games/tester.js†L1330-L1392】【F:games/tester.js†L1837-L1846】 |
| choice | 選択肢を表示し、選んだ値を変数に保存して分岐します。【F:games/tester.js†L1394-L1476】【F:games/tester.js†L1942-L1991】 | question、storeAs、選択肢ごとの label/value/target。【F:games/tester.js†L1394-L1466】 |
| set | flags 変数に固定値を書き込みます。【F:games/tester.js†L1478-L1509】【F:games/tester.js†L1806-L1814】 |
name（変数名）、value（保存値）、next（遷移先）。【F:games/tester.js†L1478-L1509】 |
| jump | 指定変数の値を比較し、一致/不一致で異なるブロックへジャンプします。【F:games/tester.js†L1511-L1534】【F:games/tester.js†L1815-L1834】 | name、equals、target、elseTarget。【F:games/tester.js†L1511-L1534】 |
| award | 経験値(EXP)の付与や減算を試せます。【F:games/tester.js†L1536-L1551】【F:games/tester.js†L1835-L1846】 | amount（付与量）、next。【F:games/tester.js†L1536-L1551】 |
| control | 確認ダイアログ（はい/いいえ）や入力プロンプトをログ上に生成します。【F:games/tester.js†L1553-L1684】【F:games/tester.js†L1912-L1991】 | mode（confirm/prompt）、表示文、保存先、ボタン表示・遷移先などの詳細設定。【F:games/tester.js†L1553-L1684】【F:games/tester.js†L1949-L1991】 |
右ペイン: 実行支援
- 「ストーリー再生」でブロック列を実行し、ログに進行状況を追記します。最大999ステップで停止し、無限ループを防ぎます。【F:games/tester.js†L1158-L1189】【F:games/tester.js†L1792-L1834】
- 「停止」を押すと現在の実行トークンを失効させ、待機中のブロックを取り消します。【F:games/tester.js†L1191-L1203】【F:games/tester.js†L1931-L1991】
- 変数ビューには
flagsの内容がJSON形式で表示され、値が存在しない場合は「(空)」が表示されます。【F:games/tester.js†L1112-L1130】【F:games/tester.js†L1765-L1783】 - ログにはテキスト表示やカスタムalertから渡された要素も挿入でき、スクロールは最新エントリまで自動で追従します。【F:games/tester.js†L1104-L1137】【F:games/tester.js†L1753-L1764】
カスタムalertの活用
右ペイン上部でalert用のJavaScript関数を編集できます。関数は (message, context) を受け取り、context.flags（変数）、context.log（ログ出力）、context.awardXp（EXP付与）を利用できます。更新ボタンで適用し、テストボタンでサンプルメッセージを送信します。【F:games/tester.js†L1040-L1137】
デフォルトテンプレートではスタイル付きのDIVを生成してログに追加する例が示されています。エラーが発生した場合はステータス欄に ❌ 付きメッセージが表示されるため、修正して再適用してください。【F:games/tester.js†L1048-L1077】