JS Token Structure

使い方

1. JavaScript を入力欄に貼り付けます —— 関数、モジュール、devtools からコピーした断片など。
2. トークン化を押すと、各クラスに何件ずつ入ったかがカウントパネルに出ます。
3. 表示をトークン一覧にすると、番号付きのフラットな表（番号・ネスト深さ・クラス・テキスト）になります。
4. ネストツリーにすると括弧がコンテナになり、ブロックがフラットな行の羅列ではなくグループとして読めます。
5. 先にサンプルで出力の形を確認してから、自分のコードを貼り付けてください。

よくある用途

• 初見のコードを読む —— クラス別件数を見れば、そのファイルが文字列中心かコメント中心か演算子中心かが一目で分かります。
• 対応の取れていない括弧を探す —— ネストツリーは各括弧の深さを示すため、閉じられないままのグループが目立ちます。
• 圧縮済みファイルを観察する —— 圧縮スクリプトに実際いくつのトークンがあるか、深いネストがどこかを確認。
• 字句解析器の役割を説明する —— トークン一覧はパーサーの材料そのものです。1 行ずつ並べて確認できます。

よくある質問

Q: Esprima や Babel のような完全な AST ですか？ A: いいえ。トークンレベルの構造ビューです。トークンを分類し括弧の深さでネストさせますが、スコープ・束縛・型の解析も構文木ノードもありません。

Q: 正規表現が演算子に分類されるのはなぜ？ A: 正規表現リテラルは独自クラスとして判定していないため、中の文字が個別にトークン化されます。この制約は隠さずページに明記しています。

Q: テンプレートリテラル内の ${} はどう扱われますか？ A: テンプレートリテラル全体が 1 つの文字列トークンになるため、内のインターポレーションは式として解析されず通常のテキストとして扱われます。