はじめに
コードレビューはソフトウェア開発において重要なプロセスですが、時間と労力がかかることがあります。 特に変更箇所が多い Pull Request では、ファイル間の関係性を理解するための負担が増大します。 そこで Delta TypeScript Graph Action を活用してコードレビューのコストを下げる方法を紹介します。
Delta TypeScript Graph Action とは
Delta TypeScript Graph Action は、TypeScript ファイルの依存関係を視覚的に表示する GitHub Action です。 これにより、レビュアーは変更の影響範囲を一目で把握でき、効率的にレビューを行うことができます。
GitHub Actions の設定
リポジトリに .github/workflows ディレクトリを作成し、以下のような YAML ファイルを追加します。
name: "Delta TypeScript Graph"
on:
pull_request:
paths:
- "apps/frontend/**/*.tsx?"
- .github/workflows/delta-typescript-graph.yml
jobs:
delta-typescript-graph-job:
timeout-minutes: 1
runs-on: ubuntu-latest
name: Delta TypeScript Graph
steps:
- name: Checkout
uses: actions/checkout@v4
- uses: ysk8hori/delta-typescript-graph-action@v1.1.0
with:
tsconfig: "./apps/frontend/tsconfig.json"
exclude: "node_modules, src/generated, .test."
debug: true
細かいオプションの説明は本家のドキュメントに譲りますが、exclude で可視化対象から除外するファイルパスを指定することができるので、ここに node_modules 等を指定しておくとよいでしょう。
動作
Pull Request を作成すると以下のように Mermaid でファイルの依存関係が可視化されたコメントが挿入されます。 新規追加したファイルがブルー、変更したファイルがイエローでハイライトされ、とても見やすいです。
また Pull Request が更新されるたびにコメントは最新の状態に更新されます。 素晴らしいです！
導入の結果、コードレビューの詳細に入る前に変更の全体像を把握できるようになりコードの理解がスムーズになったと感じています。
まとめ
Delta TypeScript Graph Action を導入することで TypeScript ファイルの依存関係の可視化を自動化し、コードレビューの効率を向上させることができます。
Discussion