JavaScript Lab は、JavaScriptコードの実行と構造解析を同時に行える学習支援ツールです。
- シンタックスハイライト（Monokai テーマ）
- 行番号表示
- 自動括弧補完
- Ctrl+Enter でコード実行
console.log()出力のキャプチャ- エラーメッセージの詳細表示
- 実行時間の計測
alert()のキャプチャと表示
- 各行の種類を分類（文、コメント、空行）
- セミコロンの有無を可視化
- 総文数のカウント
- Acorn パーサーによる構文解析
- ツリー構造での表示
- ノードタイプと値の可視化
- セミコロン自動挿入のパターン検出
- 潜在的な問題の警告
- 修正提案の表示
- Hello World
- セミコロン問題の例
- 配列操作
- 関数定義
JavaScript Labは静的なWebアプリケーションのため、HTTPサーバーで起動して使用します。
# JavaScript_Labディレクトリに移動
cd /path/to/JavaScript_Lab
# HTTPサーバーを起動
python3 -m http.server 8000
# ブラウザで以下のURLにアクセス
# http://localhost:8000Node.js (http-server)
npx http-server -p 8000PHP
php -S localhost:8000ターミナルで Ctrl+C を押してサーバーを停止します。
-
コードを入力
- 左側のエディタにJavaScriptコードを入力
-
実行
- 「▶ 実行」ボタンをクリック
- または
Ctrl+Enter(Mac:Cmd+Enter)
-
結果を確認
- 右上パネル: 実行結果とconsole.log出力
- 右下パネル: コード構造解析（3つのタブ）
- ヘッダーのドロップダウンから「コード例を選択...」
- 試したい例を選択（自動的にエディタに読み込まれます）
- 「▶ 実行」で動作を確認
JavaScript_Lab/
├── index.html # メインHTML
├── css/
│ └── style.css # スタイルシート
├── js/
│ ├── editor.js # エディタ管理
│ ├── executor.js # コード実行エンジン
│ ├── analyzer.js # コード解析エンジン
│ └── main.js # メインロジック
└── README.md # このファイル
- エディタ: CodeMirror 5
- パーサー: Acorn
- スタイル: Vanilla CSS（CSS Grid/Flexbox）
- JavaScript: ES6+ (クラス構文、アロー関数等)
// ❌ 問題のあるコード
alert("Hello")
[1, 2, 3].forEach(console.log)
// ✅ 正しいコード
alert("Hello");
[1, 2, 3].forEach(console.log);JavaScript Lab では、このような潜在的な問題を自動的に検出し、警告を表示します。
「Structure」タブでは、各行が以下のように分類されます：
- ✅ 文（セミコロンあり）
⚠️ 文（セミコロンなし）- 💬 コメント
- （空行）
「AST」タブでは、コードがどのように解析されるかを確認できます：
Program: プログラム全体ExpressionStatement: 式文CallExpression: 関数呼び出し- など
- コードを書いて即座に実行
- エラーメッセージから学ぶ
- 構造を視覚的に理解
- セミコロンが原因のバグを発見
- 自動挿入のルールを体験
- 安全なコーディングスタイルを学習
- パーサーがコードをどう解釈するか
- ツリー構造での表現を確認
- コンパイラやトランスパイラの仕組みを学習
index.html の CodeMirror テーマを変更：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/dracula.min.css">エディタの初期化時にテーマを指定：
this.editor = CodeMirror.fromTextArea(textarea, {
theme: 'dracula', // monokai から変更
// ...
});js/main.js の snippets オブジェクトに追加：
const snippets = {
// 既存のスニペット...
mySnippet: `// 新しいスニペット
console.log('カスタムスニペット');`
};index.html の select 要素に option を追加：
<option value="mySnippet">カスタムスニペット</option>このプロジェクトは、以下の学習メモの内容を実践するために作成されました：
02_Active/現代のJavaScriptチュートリアル/配下のメモ- JavaScriptの基礎、コード構造、開発者ツールなど
- 非同期コード（Promise、async/await）は簡易的な対応
- DOMへの直接アクセスは制限あり
- セキュリティのため、一部の機能は実行できません
- 複雑なコードでは AST の深さ制限があります（パフォーマンス対策）
- コードの保存・読み込み機能
- より詳細なエラー解説
- ES6+ 機能の対応状況チェック
- コードフォーマッター統合
- PWA化（オフライン対応）
- コードの共有機能
このプロジェクトは学習目的で作成されました。自由に使用・改変してください。
Made with ❤️ for JavaScript learners