[2026/9/30]

[WEB Tool] AST Inspector v1.0 — ソースコードの構文木をブラウザで覗くツール使い方ガイド

[WEB Tool] AST Inspector v1.0 — ソースコードの構文木をブラウザで覗くツール使い方ガイド

概要

AST Inspector は、ソースコードの構文木をブラウザだけで覗けるツールです。コードを書くと、その場でパースして、どんな木の形になっているかを表示します。ツリーの行とソースの範囲は連動していて、ツリーの行にマウスを乗せるとソースの該当部分が光ります。

S 式で書く検索言語「Query」で構文木を検索したり、エディタの裏で動いている「インクリメンタルパース」で、どのノードが使い回されてどこが作り直されたかを色分けして見たりもできます。

パースは、Neovim や Zed、GitHub のコード表示などでも使われている Tree-sitter（WASM 版）が担当しています。インストール不要で、コードはサーバーに送信されません。

AST Inspector

スタートメニューから起動

トップページのスタートメニューからも起動できます。

AST Inspector — スタートメニューから起動

Tree-sitter

スクリーンショット

AST Inspector — 構文木とソースの連動

AST Inspector — 構文木とソースの連動

AST Inspector — 構文エラー（ERROR / MISSING）

構文エラー（ERROR / MISSING） 構文エラー（ERROR / MISSING）— Query で ERROR ノードを探す

AST Inspector — Query プレイグラウンド

Query プレイグラウンド

AST Inspector — インクリメンタルパース（再利用 / 新規の色分け）

インクリメンタルパース（再利用 / 新規の色分け）

操作動画

操作動画

ツールの特徴

  • ブラウザ完結: インストール不要。コードはブラウザの中だけでパースし、サーバーには送信しません。
  • 書いたそばからパース: エディタに入力すると、その場で構文木が更新されます。書きかけで構文エラーがあっても止まりません。
  • ツリーとソースの連動: ツリーの行にマウスを乗せるとソースの該当範囲が光り、ソースのカーソル位置からはツリーの該当ノードへ飛びます。
  • 構文エラーの可視化: 文法に合わない部分（ERROR）と、パーサーが補ったトークン（MISSING）を色分けして表示します。
  • Query プレイグラウンド: S 式で書く検索言語で構文木を検索し、マッチした箇所をエディタとツリーの両方で示します。
  • シンタックスハイライト: 各言語の文法に同梱されている highlights.scm（Query で書かれた色付けのルール）をそのまま使って色を付けます。
  • インクリメンタルパースの可視化: コードを編集するたびに、前回の木から使い回されたノードと、新しく作り直されたノードを色分けします。

対応言語

言語拡張子文法
JavaScript.js .mjs .cjs .jsxtree-sitter-javascript 0.25.0
Python.py .pywtree-sitter-python 0.25.0
C.c .htree-sitter-c 0.24.1

言語の文法は、選んだときに読み込みます。

使い方

1. コードを入力する

開くと、JavaScript のサンプルコードが入っています。エディタにそのまま書き込んでください。入力が止まってから約 0.1 秒で、構文木が更新されます。Tab キーでスペース 4 つを入力します。

手元のファイルを読み込むときは、画面上部の「ファイルを開く」を押してファイルを選びます。拡張子から言語を自動で切り替えます。

言語を切り替えたとき、エディタの中身がサンプルのまま（または空）なら、その言語のサンプルに差し替わります。自分で書き換えたコードはそのまま残ります。

2. 画面の構成

場所内容
上部のバー言語の選択、表示の切り替え、ファイルを開く、統計
左コードエディタ
右3 つのタブ（Tree / S式 / Query）

3. 上部のバー

項目内容
言語JavaScript / Python / C
named のみオンにすると、( や return のような記号・キーワードのノードを隠します。オフにすると全ノードを表示します
色付けシンタックスハイライトのオン / オフ
インクリメンタルインクリメンタルパースの可視化のオン / オフ（後述）
ファイルを開く手元のソースファイルを読み込みます
nodes構文木のノードの総数
errorsERROR / MISSING ノードの数。1 つ以上あると赤くなります
parseパースにかかった時間（ミリ秒）
右端言語名と、文法の ABI バージョン

4. Tree タブ

構文木を、字下げした一覧で表示します。1 行が 1 つのノードです。

▾ binary_expression [2:6–2:11]
    left: identifier [2:6–2:7] n
    right: number [2:10–2:11] 2
表示意味
緑の文字ノードの種類（identifier、binary_expression など）
灰色の引用符付き文字記号やキーワードのノード（"("、"return" など）。「named のみ」をオフにすると表示されます
紫の name: left: などフィールド名。そのノードが親から見て何の役割かを表します
[2:6–2:11]ソース上の位置。「開始行:開始列 – 終了行:終了列」で、行も列も 0 から数えます
行末の文字子を持たないノードの、ソース上の文字列
赤い太字ERROR と MISSING のノード

操作は次のとおりです。

操作動作
行にマウスを乗せるエディタの該当範囲が光ります
行をクリックその範囲を光らせたまま固定し、エディタをその位置までスクロールします
▾ / ▸ をクリック子ノードを折りたたむ / 開く
エディタでクリック、または矢印キーでカーソル移動カーソル位置の一番深いノードの行に飛びます

表示するノードは最大 20,000 個までです。それを超えるファイルでは、先頭から 20,000 個を表示し、上にその旨を表示します。

5. エディタのハイライト

エディタには、次のハイライトが重なって表示されます。

表示意味
文字の色シンタックスハイライト（「色付け」でオン / オフ）
緑の背景ツリーでマウスを乗せている、または選択中のノードの範囲
赤い波線ERROR ノードの範囲
赤い縦線MISSING ノードの位置（幅がないので線で表示）
黄色い下線Query にマッチした範囲
青い背景直前の編集で入力した範囲（インクリメンタル表示中）
オレンジの破線（上側）構文の構造が変わった範囲（インクリメンタル表示中）

6. 構文エラーの見方

書きかけのコードでも、パースは止まりません。文法に合わない部分は、次の 2 種類のノードとして木に残ります。

ノード意味例
ERROR文法に合わない部分をまとめたものlat def = 456; の def
MISSING本来あるはずのトークンを、パーサーが補ったものfunction f(a { のときの MISSING )

閉じ括弧を忘れた場合、MISSING } がファイルの最後に出ることがあります。どこで閉じ忘れたかまでは推測せず、「最後まで閉じていない」と判断するためです。

7. S式タブ

構文木を S 式（括弧でくくった形）で表示します。Tree-sitter の toString() の出力に字下げを付けたものです。右上の「コピー」でクリップボードにコピーできます。

(binary_expression
  left: (identifier)
  right: (number))

8. Query タブ

Query は、構文木を検索するための言語です。S 式でノードの形を書き、取り出したいノードに @名前 を付けます。入力が止まってから約 0.3 秒で実行されます。

; 呼び出される関数名
(call_expression
  function: (identifier) @call)

よく使う書き方は次のとおりです。詳しくは、右上の「Query 構文」から公式ドキュメントを参照してください。

書き方意味
(identifier)そのノードの種類にマッチ
(_)任意の名前付きノード
name: (identifier)フィールドを指定
[ (a) (b) ]どれか 1 つ
@名前取り出すノードに付ける名前（キャプチャ）
(#eq? @id "fib")キャプチャの文字列が一致するものだけ
(#match? @hex "^0[xX]")キャプチャの文字列が正規表現に合うものだけ
; ...コメント

「プリセット…」から例を選べます。

言語プリセット
JavaScript関数呼び出し / 関数定義 / 二項演算 / 述語 #eq?
Python関数定義 / メソッド呼び出し / リスト内包表記 / 述語 #eq?
C関数定義 / 構造体フィールドアクセス / 述語 #match?（16 進リテラル） / 型名
共通ERROR / MISSING ノード / highlights.scm（同梱）

「highlights.scm（同梱）」を選ぶと、シンタックスハイライトに使っている Query そのものが入ります。色付けの仕組みを確かめたいときに使ってください。

実行結果は、次のように表示されます。

場所表示
入力欄の下マッチ数 / キャプチャ数 / 実行時間。書き間違いがあると 2行3列: Bad field name 'functin' のように位置付きで表示
結果リストマッチごとに、キャプチャ名・ノードの種類・位置・文字列。行にマウスを乗せるとエディタの該当範囲が光り、クリックでそこへ飛びます
エディタマッチした範囲に黄色い下線
Tree タブマッチしたノードの行頭に黄色い線と @名前 のバッジ

結果リストに表示するのは先頭 300 件までです（ハイライトは全件）。「クリア」で Query を消すと、黄色い表示も消えます。

コードを編集すると、そのたびに Query も実行し直します。

9. インクリメンタルパース

Tree-sitter は、1 文字打つたびにファイル全体を読み直しているわけではありません。前回の構文木を取っておいて、変わった場所の周りだけを作り直し、残りは使い回しています。これをインクリメンタルパースといいます。

「インクリメンタル」がオンのとき（初期状態）、コードを編集すると、Tree タブの上に次のような情報が出ます。

再利用 103 / 120 (86%) ・ 構造変化 1 範囲 ・ 全体パースなら 0.13 ms
項目意味
再利用新しい構文木のノードのうち、前回の木から使い回されたノードの数と割合
構造変化構文の構造が変わった範囲の数。数字の中身を変えただけのように、構造が同じままの編集では 0 になります
全体パースなら同じコードをファイル全体からパースし直した場合の時間（比較用）

色分けは次のとおりです。

表示意味
Tree タブのオレンジの行今回の編集で作り直されたノード
Tree タブの通常の行前回の木から使い回されたノード
エディタの青い背景今回の編集で入力した範囲
エディタのオレンジの破線構文の構造が変わった範囲

試してみると分かりやすい操作の例です。

  • 関数とは関係ない場所に 1 行足す → 関数の部分は通常色のまま（使い回し）で、足した行だけがオレンジになる
  • let を lat と打ち間違える → エラーから回復するために前後も読み直すので、オレンジの範囲が大きく広がり、再利用の割合が下がる
  • 打ち間違いを直す → 再利用の割合が戻り、オレンジが引く

Query の黄色い表示と重なると見づらいときは、Query タブの「クリア」を押してください。

「インクリメンタル」をオフにすると、毎回ファイル全体をパースし直します。言語を切り替えたときや、ファイルを開いたときも、全体をパースし直します。

注意事項

  • コードはブラウザの中だけでパースします。サーバーへの送信や保存は一切しません。
  • ページを閉じたり再読み込みしたりすると、エディタの内容は失われます。
  • 表示するノードは最大 20,000 個、Query の結果リストは先頭 300 件までです。
  • Tree-sitter はエディタ向けのパーサーです。コンパイラや実行環境が出すエラー（未定義の変数、型の不一致、Python のインデントエラーの一部など）は検出しません。

よくある質問 (FAQ)

Q. Python でインデントを崩しても、errors が 0 のままです
A. Tree-sitter の Python 文法では、中身が空のブロックも文法上は正しいとして扱います。たとえば for の中身の行を左端に戻すと、「for の中身は空で、その行は次の文」とパースされます。ツリーを見ると、body: block が幅ゼロ（開始と終了の位置が同じ）になっています。IndentationError は、Python 本体のパーサーが出すエラーです。

Q. 1 行足しただけなのに、離れた場所のノードまでオレンジになります
A. Tree-sitter の実際の動作です。ルートのノード（program や module）は子が増えると作り直されますし、トップレベルの並びが組み直されるときに、周りのノードの外側が作り直されることがあります。その内側の部分木は、たいてい使い回されています。

Q. 数字を書き換えたのに「構造変化 0 範囲」です
A. 構造変化は、構文の形が変わった範囲だけを数えます。2 を 20 に変えても number は number のままなので、構造は変わっていません。文を足したり消したりすると、範囲として数えられます。

Q. 「named のみ」をオフにすると、何が増えるのですか
A. (、;、return、+ のような、記号やキーワードのノードが増えます。Tree-sitter が実際に作っているのは、これらを全部含んだ木（具象構文木）です。オンにすると、意味のあるノードだけの、いわゆる抽象構文木（AST）に近い見た目になります。

Q. 対応言語を増やす予定はありますか
A. Tree-sitter には多くの言語の文法があるので、今後追加していく予定です。

技術記事

実装の詳細は、技術記事にまとめています。

更新履歴

バージョン日付内容
v1.0.02026/9/30初回公開

クレジット

本ツールは以下のソフトウェアを利用して構築されています。