typescript-graph を本格的に作り込みたい

TypeScript のプロジェクトにおいて、PRのレビューの際に、レビュー対象のファイルなどの構造についてやその変化をより把握しやすくするために、tsc を使用して各ファイルや変数や関数などの関係をグラフデータに落とし込んで参照できるようにしたいと考えています。

以前、ブラウザ上でローカルの TypeScript プロジェクトのファイルの関係性を可視化するツールを作りました。

👇リポジトリ github.com

👇GitHubPages で公開してます 🔗 typescript-graph

typescript-graph でナンプレアプリの構造を可視化した様子

これにはいくつか問題点がありました。

• 小さいプロジェクトならまだしも、大きなプロジェクトとなると、有益な情報を抽出するのにかなり苦労する。
• ブラウザ上では tsc を動かせないので、適当な解析結果しか出せない。
• UI が適当なので、僕以外動かせない

ただ、この程度のものでもコードレビューで問題点を見つけたり共有することができ、成果を得ることができました。

---

コードレビュー時に、誰でも簡単に利用でき、正確な情報を出力することを目標として、作り込みを行いたいと考えています。

具体的には、

• tsc を使って正確な解析結果を得る
• GraphDB を使って検索などブラウジングをしやすくする
• ブランチ同士の差分を可視化する
• ローカルのCLIでサクッと確認できる or CI でサクッと動いてPRに投稿する（かなり曖昧）

進め方は、適当ですが以下のように考えています。

1. GraphDB について調べる（何が使いやすいか）
2. ローカルプロジェクトに対し、TSC を使用してグラフデータを作るスクリプトを作る
3. グラフデータを GraphDB に登録するスクリプトを作る
4. GraphDBに登録したグラフデータを可視化するツールを作る
5. 現在使用中のブランチとベースブランチの差分を可視化するツールを作る

あと、今までブログの更新頻度がかなり低かったので、なにかやる度に何か書こうと思う。

続くと良いが。