はじめに
普段、個人開発でReactやTypeScriptを使ってWebアプリを作っています。
開発中のプロジェクトの構成を図にしたいと思い、何か便利なツールがないか探していたところ、GitHubで公開されている「stack-diagram」というツールを見つけました。
今回は、このツールを自分のPCに導入して、VS CodeのGitHub Copilotから利用してみました。
GitHubで公開されている他の人のツールを、自分の開発環境に導入して使うのは初めてだったので、その流れをまとめます。
1. GitHubでツールを見つける
今回利用したのは、こちらのリポジトリです。
stack-diagramは、プロジェクトの構成を調査して、システム構成図などを作成するためのツールです。
GitHubには、自分でコードを書いて公開している人がたくさんいます。
その中には、自分の開発に役立つツールも公開されています。
今回は、このツールを実際に使ってみることにしました。
2. ローカル環境に導入する
GitHubで公開されているツールは、リポジトリの内容を確認するだけでなく、自分のPCに導入して利用することもできます。
今回の導入では、以下の環境を準備しました。
- Git for Windows
- Node.js（npxを利用）
- Python
- Playwright
- Chromium
まずGitを利用できるようにし、GitHubで公開されているSkillをローカル環境に追加しました。
導入には npx skills add を利用しました。
導入後、プロジェクト内に以下のようなディレクトリが作成されました。
.agents/
└── skills/
└── stack-diagram/
└── SKILL.md
SKILL.md には、ツールの使い方や実行手順などが記載されています。
また、構成図の生成に必要なPythonやPlaywright、Chromiumも準備しました。
3. VS CodeのGitHub Copilotから利用する
導入しただけではなく、実際にVS CodeのGitHub Copilotから利用できるか確認しました。
Copilotにstack-diagramのSkillを読み込むように指示すると、SKILL.mdを読み込んでくれました。
これで、Copilotから導入したツールの手順に沿って作業できるようになりました。
4. 実際にプロジェクトの構成図を作成してみる
今回は、個人開発している「R Tool Lab」の構成図を作成してみました。
R Tool Labでは、React、TypeScript、Viteなどを使用し、Cloudflare PagesやCloudflare Workersを利用しています。
Copilotにソースコードや設定ファイルを調査させ、プロジェクトの構成図を生成しました。
実際に生成された構成図では、以下のような内容を確認できました。
- GitHubからCloudflare Pagesへのデプロイ経路
- React SPAの構成
- ReactからCloudflare WorkersへのAPI通信
- Cloudflare Workersから外部APIへの接続
- ローカル開発環境とビルドの流れ
- Wranglerを利用した別のデプロイ経路
最初に生成された図は、実際のCloudflareの設定と一部異なる部分がありました。
そのため、Cloudflareの管理画面や実際のソースコードと照合しながら修正しました。
最終的には、HTMLとPNG形式で構成図を作成できました。
5. 使ってみた感想
今回、初めてGitHubで公開されているツールを自分のPCに導入して利用しました。
これまではGitHubといえば、自分のソースコードを保存したり、公開したりする場所という認識が強かったです。
しかし、今回の経験で、GitHubには他の人が作った便利なツールも公開されていて、それを自分の開発環境に取り込んで利用できることが分かりました。
また、GitHub Copilotと組み合わせることで、導入したツールの使い方をAIに確認しながら作業できるのも便利でした。
一方で、今回のような構成図はChatGPTだけでも作成できます。
そのため、必ずしも外部ツールを導入する必要はありません。
ただ、GitHubで公開されているツールを探し、ローカル環境に導入し、実際に動かしてみるという経験ができたことは良かったと思います。
まとめ
今回の作業を通して、以下の流れを経験できました。
- GitHubで便利なツールを探す
- 公開されているリポジトリの内容を確認する
- 自分のPCにツールを導入する
- 必要な実行環境を準備する
- VS CodeのGitHub Copilotから利用する
- 自分のプロジェクトで実際に動かしてみる
GitHubには、自分の開発を効率化できるツールがたくさん公開されています。
今後も必要に応じて、こうしたツールを探して実際の開発に取り入れてみたいと思います。
