Skip to content

Web 上で JS を parse, traverse し AST を可視化します

Notifications You must be signed in to change notification settings

cut0/ast-web-viewer

Repository files navigation

AST 可視化ツール

使用方法

このツールは読解分析と構築順序分析の2つの機能に分類されます。

読解順序分析

/reading で利用することができます。コードリーディング時のマウスカーソルの位置と対応する AST Node 片の位置の変化を記録しています。 /reading/analyzeに遷移することで自身のコードリーディングの順序を確認できます。

構築順序分析

/writing で利用することができます。コードを書く際にどのような順序で AST を構築しているか分析することができます。 /writing/analyze でコードの構築順序を確認することができます。

分析手法

実験では被験者に書いていただコードを cloud storage に格納し被験者ごとの読解順序と構築順序を分析します。

読解順序分析

読解順序分析では下記のデータを取得します。

  • 指定した読解時間に Node を移動した回数
  • 各 Node 遷移において移動した Edge の距離

また、上記の取得したデータを利用して下記のデータを算出し定量的に比較します

  • 1秒あたりの移動遷移距離 低ければ低いほど関連するコード片へ遷移している
  • ヒートマップ 読解時に注視した回数をヒートマップとして表示します

構築順序分析

構築順序を記録する際には、Node のラベル変化なども対象にしていますが、分析では木構造の変化にだけ着目します。 構文木のノード数・エッジ数・幅・深さ等に基づく複雑度の時間変化を分析します。

また、上記のデータを利用し下記のデータを算出します

  • ストラー数 n 個の Node を持つ木は最大 log2(n + 1) のストラー数を持ちうる
    • ノードが葉(子を持たない)の場合,そのストレーラ番号は 1 である.
    • もしそのノードがストレーラ番号 i を持つ子を 1 つ持ち,他のすべての子が i より小さいストレーラ番号を持つならば,そのノードのストレーラ番号は再び i となる.
    • もしノードがストレーラ番号 i を持つ 2 つ以上の子を持ち,それより大きい数の子を持たないならば,そのノードのストレーラ番号は i + 1 である.

About

Web 上で JS を parse, traverse し AST を可視化します

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published