Visual Studio CodeとGitHub Copilotで始めるREADMEファイルの自動生成

Web開発者やプログラマーの間で人気のあるエディタ「Visual Studio Code（VS Code）」と、AIがコードを書く支援をしてくれる「GitHub Copilot」。この二つのツールを上手に使いこなせば、開発効率が格段にアップします。

開発を行う際、READMEファイルはプロジェクトの第一印象として非常に重要です。開発者やユーザーに向けてプロジェクトの目的や使い方を伝えることができます。そのため、魅力的でわかりやすいREADMEを書くことが求められます。

本記事では、Visual Studio CodeとGitHub Copilotの最新機能「Custom Chat Modes」を駆使して、プロジェクトを始める際に欠かせないREADMEファイルを、AI支援により効率よく作成する方法をご紹介します。

環境
GitHub Copilotとは？
READMEファイルの基礎
Custom Chat Modesを活用したREADME生成の利点
READMEファイルの自動生成で特に重視したこと
README生成専用Custom Chat Modeの作成
タイピングソフトを用いたREADME自動生成の実践
生成後のカスタマイズとメンテナンス
- 追加すべき情報
- 継続的なメンテナンス戦略
Custom Chat Mode活用のベストプラクティス
- 効果的なプロンプト設計
- チーム内での活用方法
トラブルシューティング
- よくある問題と解決法
- 品質向上のためのチェックポイント
将来の展望と発展可能性
- 技術的進歩の可能性
まとめ

環境

オペレーティングシステム: Windows 11
エディタ: Visual Studio Code (version 1.101以上)
VS Code拡張機能: GitHub Copilot (Business/Pro/Free ※Freeプランは月間制限あり)

GitHub Copilotとは？

GitHub Copilotは、AIがコードの記述や開発のサポートをしてくれる画期的なツールです。ペアプログラマーのように振る舞い、コードの補完や提案を通じて、開発スピードを向上させます。Visual Studio Codeとの連携もスムーズで、手間をかけずに導入できます。

2025年5月のVS Code 1.101リリースにより、GitHub CopilotにCustom Chat Modesという新機能が追加されました。この機能により、特定の目的に特化したAIチャットモードを作成し、README生成などの特定タスクに最適化されたAI支援を受けることが可能になりました。

READMEファイルの基礎

優れたREADMEファイルには、プロジェクトの目的やインストール手順、使用方法、ライセンス情報など必須の情報が含まれている必要があります。また、他の優れたプロジェクトのREADMEファイルを参考にすることで、より充実した内容にすることが可能です。

※今回はコードの生成ではなく「コードを読み取り自動でREADMEファイルを生成する」という内容に特化しています。Custom Chat Modesを活用することで、より精度の高いREADME生成が実現できます。

Custom Chat Modesを活用したREADME生成の利点

従来のGitHub Copilotでも文章作成支援は可能でしたが、Custom Chat Modesの導入により以下のような大幅な改善が実現されました。

専門化されたAI指示

README生成に特化した詳細な指示をAIに与えることで、一般的なチャットモードよりも適切で構造化されたドキュメントが生成されます。

プロジェクトの性質に応じて、技術文書、エンドユーザー向け説明書、開発者向けガイドなど、目的に応じた文体や構成を指定できます。

一貫性のある文書品質

カスタムモードにより、チーム全体で統一されたREADME構成とトーンを維持できます。

これにより、複数のプロジェクト間での一貫性が保たれ、組織の文書品質向上に貢献します。

効率的なワークフロー

専用モードに切り替えるだけで、即座にREADME生成に最適化されたAI支援を受けられます。

毎回詳細な指示を入力する手間が省け、開発フローを中断することなく高品質な文書を作成できます。

READMEファイルの自動生成で特に重視したこと

ユーザー向けに操作方法がしっかり伝わる文章にする

READMEファイルの読者はあくまでツールのユーザーです。エラーの原因調査や修正を行う際は別のドキュメント(設計書など)も確認する必要があります。

そのため、ファイル構成・ライセンスなどはユーザーに最重要ではないため、表示順の下層に位置するように指示しました。

特に表示順の優先順位を指示していないとAI側の判断でドキュメントをオリジナルで生成します。そのためCustom Chat Modesでは、この表示順に関する指示を意図的に設定として記述することで、常に適切な情報階層を保ったREADMEが生成されるよう設計できます。

「存在する機能・出来ること」だけではなく「できないこと・不具合」まで記載する

この箇所は特に注力しました。なぜなら、既存の機能や「できること」は人間が手動で記述しやすい一方、現在「できないこと」や「不具合」については、開発者自身も網羅的に把握しきれておらず、記載漏れが発生しやすい情報だからです。

Custom Chat Modesでは、コードベース全体を分析し、実装されていない機能や潜在的な制限事項を自動的に識別するよう指示することが可能です。これにより、より正確で包括的なドキュメントが作成されます。

嘘をつかないこと

もちろんAIが意図的に嘘を記入することはありませんが、「ハルシネーション」と呼ばれる現象も認められています。

各社が提供するAIChatの注意書きとしても「AIが生成する情報は、必ずしも正確であるとは限りません。利用の際は、必ずご自身で内容の真偽を確認し、必要に応じて専門家の意見を求めてください。」といった文章が見受けられます。

Custom Chat Modesでは、コードベースの実際の内容のみに基づいて文書を生成するよう制約を設けることで、このリスクを大幅に軽減できます。

README生成専用Custom Chat Modeの作成

実際に、README生成に特化したCustom Chat Modeを作成してみましょう。

最初にコマンドパレット（Ctrl+Shift+P）を開き、以下の手順で進めます。

ステップ1: 新しいチャットモードファイルの作成

まずCustom Chat Modeの準備を行います。

「Chat: New Mode File」コマンドを実行
ワークスペースを選択（チーム共有のため）
モード名として「readme-generator」を入力

ステップ2: README生成専用モードの設定

以下の内容で.github/chatmodes/readme-generator.chatmode.mdファイルを作成します。

---
description: 'プロジェクト解析に基づくREADME自動生成専用モード'
tools: ['codebase', 'search', 'fetch', 'findTestFiles']
model: 'GPT-4'
---

# README自動生成モード ※下記コードでは絵文字をカットしています

あなたは優秀な技術文書ライターです。プロジェクトのコードベースを詳細に分析し、正確で包括的なREADMEファイルを生成することが役割です。

## 基本方針 ※下記コードでは絵文字をカットしています

### 分析対象
- プロジェクトの全ファイル構成
- 主要なソースコード（HTML、JavaScript、CSS、Python等）
- 設定ファイル（package.json、requirements.txt等）
- 既存のドキュメント

### README構成要件 ※下記コードでは絵文字をカットしています

必須セクション（この順序で記載）：
1. **プロジェクト概要** - 1-2文でプロジェクトの目的を説明
2. **主要機能** - 実装されている機能のリスト
3. **使用方法** - エンドユーザー向けの操作手順
4. **動作環境** - 必要な環境・依存関係
5. **インストール・実行方法** - 開発者向けセットアップ手順
6. **ファイル構成** - 主要ファイルの説明
7. **制限事項・既知の問題** - 現在できないこと、バグ
8. **技術仕様** - 使用技術・ライブラリ
9. **ライセンス** - 適用されるライセンス情報

### 重要な制約事項 ※下記コードでは絵文字をカットしています

1. **事実のみ記載**: コードベースに存在しない機能は記載しない
2. **検証可能な情報**: 実際のファイルから確認できる内容のみ
3. **ユーザー目線**: エンドユーザーが最初に知りたい情報を優先
4. **簡潔で明確**: 冗長な説明は避け、必要な情報を効率的に伝達
5. **制限事項の明記**: 実装されていない機能や既知の問題を正直に記載

### 文体・フォーマット ※下記コードでは絵文字をカットしています

- 敬語は使用せず、簡潔で読みやすい文体
- コードブロックやリストを適切に活用
- 見出しは階層的に整理
- 技術用語は必要に応じて補足説明

### 分析手順 ※下記コードでは絵文字をカットしています

1. プロジェクトの全体構造を把握
2. メインファイル（index.html、main.js等）の機能を解析
3. 設定ファイルから依存関係や環境要件を抽出
4. 実際の動作フローを追跡
5. 未実装部分や制限事項を特定
6. 上記構成要件に従ってREADMEを生成

コードベースの事実に基づいた、正確で有用なREADMEファイルの生成を最優先に作業してください。

ステップ3: モードの動作確認

作成したモードが正常に認識されることを確認します。

Visual Studio Codeを再起動（または設定の再読み込み）
Chatビューを開く（Ctrl+Alt+I）
チャットモードドロップダウンに「readme-generator」が表示されることを確認

タイピングソフトを用いたREADME自動生成の実践

今回は、READMEファイル生成の対象として、AIで生成されたシンプルなタイピング練習用のWebアプリケーションを選びました。

このアプリケーションは、個人情報や企業情報などを含む機密性の高い情報は一切含んでいません。

また、このタイピングソフトのコードには意図的にいくつかの不具合や未完成な部分を残しています。これはGitHub Copilotが生成するREADMEが完璧ではないこと、そして生成された内容をいかにカスタマイズし、メンテナンスしていくかが重要である、という点をお伝えするためです。

※ 本記事で提供する目的でAIが生成したこのコードは、GitHub等で公開配布する予定はありません。もし読者の皆さんが本記事の内容を検証される場合は、ご自身の別のアプリケーションやプロジェクトをご使用ください。

プロジェクト構成の確認

タイピングソフトプロジェクトは以下のような構成になっています。

CodingTest/
├── .github/
│   └── chatmodes/
│       └── readme-generator.chatmode.md
├── index.html              # メインのHTMLファイル
├── script.js               # タイピングゲームのメインロジック
├── style.css               # スタイリング
├── texts.js               # タイピング用テキストデータ
├── romanization.js         # ローマ字変換ロジック
├── chatModeManager.js      # チャットモード管理
├── copilotModeInterface.js # Copilot連携機能
├── customModes.js          # カスタムモード設定
└── serve.py               # 開発用サーバー

実際のREADME生成プロセス

Custom Chat Modeを使用して、実際にREADMEを生成してみましょう。

入力プロンプト例

作成したCustom Chat Modeを開き、以下のようにプロンプトを入力します。

「このプロジェクトのREADMEファイルを生成してください。コードベース全体を分析し、主にエンドユーザー向けに有用で包括的なドキュメントを作成してください。」

生成されたREADMEの例

以下は、Custom Chat Modeによって生成されたREADMEの一部です。

# ※下記コードでは絵文字をカットしています 日本語タイピングスピードテスト

![タイピングテスト](https://img.shields.io/badge/言語-日本語-blue.svg)
![プラットフォーム](https://img.shields.io/badge/プラットフォーム-Web-green.svg)
![レスポンシブ](https://img.shields.io/badge/デザイン-レスポンシブ-orange.svg)

**プログラミング初心者でも簡単に使える、本格的な日本語タイピング練習アプリケーション**

30秒間でタイピング速度と正確性を測定し、リアルタイムでフィードバックを提供する無料のWebアプリケーションです。学校の授業、職場研修、個人の練習に最適です。

## ※下記コードでは絵文字をカットしています 目次

1. [このアプリについて](#-このアプリについて)
2. [完全初心者向けセットアップ手順](#-完全初心者向けセットアップ手順)
3. [機能と使い方](#-機能と使い方)
4. [既知の問題と制限事項](#-既知の問題と制限事項)
5. [トラブルシューティング](#-トラブルシューティング)
6. [よくある質問](#-よくある質問)
7. [ライセンス](#-ライセンス)
8. [技術仕様（開発者向け）](#-技術仕様開発者向け)

## ※下記コードでは絵文字をカットしています このアプリについて

### 対象ユーザー
- **小学生から大人まで**: 年齢を問わず誰でも利用可能
- **タイピング初心者**: 基本的なローマ字入力ができる方
- **学校・企業**: 授業や研修での利用
- **個人練習**: 自宅でのタイピング練習

### 主な特徴
※下記コードでは絵文字をカットしています **完全無料**: インストール不要、ブラウザだけで動作  
※下記コードでは絵文字をカットしています **日本語特化**: ひらがな・カタカナ・漢字を含む実用的な文章  
※下記コードでは絵文字をカットしています **視覚的フィードバック**: 仮想キーボードと色分け表示  
※下記コードでは絵文字をカットしています **複数入力方式対応**: `し`→`si`または`shi`など、自然な入力方式  
※下記コードでは絵文字をカットしています **レスポンシブデザイン**: スマートフォンからPCまで対応  
※下記コードでは絵文字をカットしています **詳細な統計**: WPM（1分間の単語数）、正確率、誤字数を表示  

## ※下記コードでは絵文字をカットしています 完全初心者向けセットアップ手順

**前提条件**: この手順は、コンピューター操作に慣れていない方でも実行できるよう詳細に説明しています。

### ステップ1: 必要なソフトウェアの確認

#### Pythonの確認とインストール

1. **Pythonがインストールされているか確認**
   - Windowsの場合: `Windows + R` キーを押し、`cmd` と入力してEnterキーを押す
   - 黒い画面（コマンドプロンプト）が開いたら、`python --version` と入力してEnterキーを押す
   
2. **結果の確認**
   - `Python 3.6.0` などの文字が表示された場合 → Pythonがインストール済み（ステップ2へ）
   - `'python' は、内部コマンドまたは外部コマンド...` などのエラーが表示された場合 → Pythonをインストールする必要があります

3. **Pythonのインストール（必要な場合）**
   - [Python公式サイト](https://www.python.org/downloads/)にアクセス
   - 「Download Python」の黄色いボタンをクリック
   - ダウンロードされたファイルを実行
   - **重要**: インストール時に「Add Python to PATH」にチェックを入れる
   - インストール完了後、コンピューターを再起動

### ステップ2: アプリケーションファイルの取得

#### GitHub からダウンロード（推奨）

1. **GitHubにアクセス**
   - ブラウザで このプロジェクトのGitHubページにアクセス
   
2. **ダウンロード**
   - 緑色の「Code」ボタンをクリック
   - 「Download ZIP」をクリック
   - ファイルがダウンロードされるまで待つ

3. **ファイルの展開**
   - ダウンロードした`CodingAgentTest2-main.zip`を右クリック
   - 「すべて展開」を選択
   - 展開先を選択（例：デスクトップ）
   - 「展開」ボタンをクリック

### ステップ3: アプリケーションの起動

#### コマンドプロンプトを使用した起動

1. **フォルダの場所を確認**
   - 展開したフォルダ（`CodingAgentTest2-main`）を開く
   - アドレスバーに表示されているパスをコピー（例：`C:\Users\YourName\Desktop\CodingAgentTest2-main`）

2. **コマンドプロンプトを開く**
   - `Windows + R` キーを押す
   - `cmd` と入力してEnterキーを押す

3. **フォルダに移動**
   - `cd ` と入力（cdの後にスペースを入れる）
   - 先ほどコピーしたパスを貼り付け（`Ctrl + V`）
   - Enterキーを押す
   - 例：`cd C:\Users\YourName\Desktop\CodingAgentTest2-main`

4. **サーバーを起動**
   - `python serve.py 8080` と入力してEnterキーを押す
   - 以下のメッセージが表示されれば成功：
     ```
     日本語タイピングテストサーバーを起動しています...
     アドレス: http://localhost:8080
     終了するには Ctrl+C を押してください
     ```

5. **ブラウザでアクセス**
   - 自動的にブラウザが開きます
   - 開かない場合は、ブラウザを手動で開いて `http://localhost:8080` にアクセス

## 既知の問題と制限事項

### モバイル端末での制限
- **仮想キーボードの表示**: 小画面では一部のキーが小さく表示される可能性
- **タッチ入力**: 物理キーボードでの使用を推奨
- **フォーカス問題**: 画面タッチ時にキーボードフォーカスが外れる場合がある

### ブラウザ互換性
- **推奨ブラウザ**: Chrome、Firefox、Safari、Edge（最新版）
- **非対応ブラウザ**: Internet Explorer は完全サポートされていません
- **JavaScript必須**: JavaScriptが無効だとアプリケーションが動作しません

### パフォーマンス制限
- **古いコンピューター**: 5年以上前のPCでは動作が重い場合があります
- **同時ユーザー**: 同一PC上で複数のブラウザタブで同時実行すると正常に動作しない場合があります

### 文章の制限
- **収録文章数**: 約150の文章パターンを収録
- **文章長**: 各文章は約5-15文字程度
- **内容**: 日常会話、ビジネス、技術用語を中心とした実用的な内容

Custom Chat Modeによって生成されたREADMEを評価すると以下の特徴が確認できます。