これらのツールの多くが行う抽象構文木(というか、それを直接一対一の可視化)と直接仕事を。これには、これまでに見てきたBlockly、および他のブロックベースの言語とそのようなエディター(Scratch、Pencil Code / Droplet、Snap!、GP、Tiled Graceなど)が含まれます。
これらのシステムは、他の場所(空間、および相互作用の難しさ)で説明されている理由により、従来の頂点とエッジのグラフ表現を表示しませんが、ツリーを直接表しています。1つのノード、またはブロックは、直接、物理的に親の内部にある場合、別のノードの子です。
これらのシステムの1つを構築しました(Tiled Grace、paper、paper)。確かに、それはASTを直接操作しているのです。画面に表示されるのは、ネストされたDOM要素(つまり、ツリー!)としての構文ツリーの正確な表現です。
これはいくつかのコードのASTです。ルートは、「for ... do」のメソッド呼び出しノードです。このノードには、「_ .. _」で始まるいくつかの子があり、それ自体に「1」ノードと「10」ノードの2つの子があります。画面に表示されるのは、まさにプロセスの途中でコンパイラバックエンドが吐き出すものです。これが基本的なシステムの動作です。
必要に応じて、画面の外を向いているエッジが標準のツリーレイアウトであると考えることができます(そして、それらの前のブロックによって隠されています)。図。
また、「ソースからノードグラフへの往復を行い、必要に応じてソースに戻る」こともあります。実際、下部の[コードビュー]をクリックすると、そのことがわかります。テキストを変更すると、テキストが再解析され、結果のツリーがレンダリングされて再び編集できるようになります。ブロックを変更すると、ソースでも同じことが起こります。
Pencil Codeは、基本的に同じことを行いますが、この時点では、より優れたインターフェイスを備えています。使用するブロックは、CoffeeScript ASTのグラフィカルビューです。他のブロックベースまたはタイルベースのシステムも概してそうですが、それらのいくつかは視覚的表現でネストの側面を非常に明確にせず、多くはそれらの背後に実際のテキスト言語を持たないため、構文ツリー」は少し幻想的かもしれませんが、原理はそこにあります。
あなたが不足しているもの、そして、これらのシステムは本当にということですされている抽象構文木で直接作業。表示および操作するのは、スペース効率の良いツリーのレンダリングです。多くの場合、文字通り、コンパイラまたはパーサーが生成するASTです。