【GitHub Copilot Bootcamp】GitHub Copilot and GitHub Codespaces Hands-on
はじめに
この記事ではGitHub、GitHub Codespaces、GitHub Copilotを使用してアプリケーションを開発する方法を学習します。
前提知識
- GitHub
- GitHub Codespaces
- GitHub Copilot
GitHubとは
ソフトウェア開発におけるソースコードのバージョン管理や共同作業を支援するWebベースのプラットフォームです。
もっとわかりやすく説明するとソフトウェア開発者がプログラムのコードを保存、共有、管理するためのオンラインサービスです。
GitHubは世界で最も愛されているソフトウェア開発プラットフォームであり、2023年1月時点で1億人以上の開発者が利用しています。
参考：100 million developers and counting - The GitHub Blog
また、GitHubはMicrosoftの傘下にある企業であることが知られていますが
各クラウドサービスそして、サードパーティ製の製品との連携も強化されています。
GitHub Codespacesとは
GitHub Codespacesは、GitHubが提供するクラウドベースの開発環境です。
クラウドIDEと呼ばれるもののうちの1つです。
参考：GitHub Codespaces とは - GitHub Docs
有名な話としては、GitHubの開発チームがGitHub Codespacesを使用して開発を行っていることが挙げられます。
Codespacesに開発環境を移行する前はセットアップに45分かかっていたものが、Codespacesを使用することで数秒で開発環境をセットアップできるようになったといいます。
参考：GitHub開発チームでのCodespacesの利用 - GitHubブログ
セットアップ済みの開発環境を提供することで開発者はすぐにコードを書き始めることができるため
Developer Experience（DX）とDeveloper Productivity（DP）が向上します。
GitHub Copilotとは
GitHub Copilotは、AIを活用してコードの提案や自動補完を行うツールであり、開発者がより効率的にコーディングできるよう支援します。GitHub Copilotは自然言語での指示に基づいてコードを生成することができます。
現在においては様々なモデルを利用してコーディングを支援することが可能であり、たとえば、GoogleのGeminiやClaudeのような大規模言語モデル（LLM）を使用して、コードの生成や補完を行うことができます。
参考：What is GitHub Copilot? - GitHub Docs
補足：GitHub Copilot for Azure
GitHub Copilot for Azureは自然言語でAzureのリソースを構築・管理することができるCopilotです。
2024 年 11 月の Microsoft Ignite カンファレンスでpublic preview として公開されました。
参考：Introducing GitHub Copilot for Azure (preview)
2025年6月19日にMicrosoftのdevlogにて、一般提供がアナウンスされました。
参考：Announcing General Availability of GitHub Copilot for Azure—Now with Agent Mode | All things Azure
ハンズオンの準備
- Enable your GitHub Copilot service
- Open this repository with Codespaces
ハンズオンで対応すること
- ステップ1：Pydanticモデルを追加する
- ステップ2：新しいエンドポイントを生成する
- ステップ3：コードを説明する
- ステップ4：スラッシュコマンドを使用する
ハンズオンに入る前にCodespaceの使い方を確認する
今回のハンズオンではCodespaceを使用して開発を行います。ハンズオンに入る前に、Codespaceの使い方を確認しておきましょう。まず、Codespaceの管理画面を開き、スペースの管理方法を学習します。
スペースの作成・起動・削除を体験してみましょう。
Codespaceの設定は以下のリンクから行うことができます。
ここからハンズオン
ではハンズオンを始めましょう。
以下のCodespacesボタンを右クリックして、Codespaceを新しいタブで開きます。
APIにはすでにトークンを生成するための単一のエンドポイントがあります。
テキストを受け入れ、トークンのリストを返す新しいエンドポイントを追加してAPIを更新しましょう。
補足：リンク踏むだけでCodespaceを開けるのはなぜ
このリンクはGitHub Copilotのハンズオン用に設定されたCodespaceを開きます。
仕組みとしてはhttps://codespaces.new/に続けてGitHubのアカウント名とリポジトリ名を指定することで指定したリポジトリをCodespaceで開くことができます。
🛠 ステップ1：Pydanticモデルを追加する
まずはmain.pyファイルを開き、提供されているコードの末尾に移動し、**Ctrl + I（PC）またはCmd + I（Mac）**を押して、GitHub Copilot Chatボックスに以下の内容をコピー＆ペーストして、Pydanticモデルを生成します。
Create a Pydantic model so that I can use it in a new route that will accept JSON with text as a key which accepts a string.
（日本語訳：
文字列を受け付けるtextというキーを持つJSONを受け入れる新しいルートで使用できるように、Pydanticモデルを作成してください。）
生成されるモデルは次のようになります。
class TextData(BaseModel):
text: str
[!NOTE]
エディタにいくつかのリンター警告（赤い点線の下線で識別可能）が表示される場合がありますが、これらは無視してかまいません。
これらのエラーはPythonのコーディング規約に沿っていないために発生しますが、アプリケーションの実行には影響しません。
（オプション）:flake8のエラーを無視する
flake8のエラーを無視するには、.flake8ファイルをリポジトリの中に作成し、以下の内容を追加します。
[flake8]
ignore = E501,W292
E501は行が長すぎることを示し、W292はファイルの最後に改行がないことを示します。
これらの警告は可読性に関する警告であり、アプリケーションの実行には影響しないため、無視しても問題ありません。
🔎 ステップ2：新しいエンドポイントを生成する
次に、main.pyファイルの最後のルートの下、一番最後にコメントを追加して、GitHub Copilotで新しいエンドポイントを生成します。
# Create a FastAPI endpoint that accepts a POST request with a JSON body containing a single field called "text" and returns a checksum of the text
（日本語訳：
「text」という単一のフィールドを含むJSONボディを持つPOSTリクエストを受け付け、そのテキストのチェックサムを返すFastAPIエンドポイントを作成してください。）
インポートされていないモジュールやライブラリを使用する提案が表示されることがあります。その場合は、生成されたコードを選択し、Command+I（Apple）またはControl+I（Windows）を使用して、不足しているインポートを追加するようGitHub Copilotに依頼できます。
この小さなポップアウトはインラインチャットと呼ばれ、GitHub Copilotと対話するもう1つの方法です。
生成されるコードは以下のとおりです。
# Create a FastAPI endpoint that accepts a POST request with a JSON body containing a single field called "text" and returns a checksum of the text
@app.post('/checksum')
def checksum(body: TextBody):
"""
Generate a checksum of the text. Example POST request body:
{
"text": "Hello, world!"
}
"""
checksum = base64.b64encode(os.urandom(64)).decode('utf-8')
return {'checksum': checksum}
🐍 ステップ3：コードを説明する
現在開いているmain.pyにはすでに擬似乱数トークンIDを作成するAPI（/generate）が定義されています。
関数全体を選択し、選択範囲を右クリックしてCopilotメニュー項目を選択し、次に「選択内容をチャットに追加」を選択します。
GitHub Copilotチャットインターフェースが開き、対話形式でできるようになります。
次に、以下のプロンプトを入力します。
選択されたコードを説明してください
最後に、/docsエンドポイントにアクセスして新しいエンドポイントが機能していることを確認します。
エンドポイントはブラウザのアドレスバーからコピーしてURLの末尾に追加することでアクセスできます。
docsエンドポイントは以下のようになります。
https://{codespace-name}.github.dev/docs
/docsエンドポイントはOpenAPIドキュメントを生成するためのエンドポイントです。
/docsエンドポイントにアクセスすると、FastAPIが自動的に生成したOpenAPIドキュメントが表示されます。
このドキュメントには、/generateエンドポイントと新しく作成した/checksumエンドポイントの両方が含まれています。
以上でGitHub Copilotを使用してコードの生成およびコードの説明ができることを確認しました。
💡 ステップ4：スラッシュコマンドを使用する
ステップ3まででGitHub Copilotを使用してコードを生成して説明までできました。
ステップ4からは開発タスクを実行するための他の代替アプローチもいくつか試すことができます。
これらの追加の課題は、すでに知っている機能に加えて、他のGitHub Copilot機能をより深く掘り下げるのに役立ちます。
これらの追加の課題では、チャットインターフェースを使用します。
まだ開いていない場合は、GitHub Copilotチャットアイコンをクリックします。
ドキュメントを生成する
main.pyを開いた状態で、チャットインターフェースに以下のテキストを入力します。
/doc I need to document the routes for these API Routes. Help me produce documentation I can put in the README.md file of this project
（日本語訳：/doc これらのAPIルートのルートを文書化する必要があります。このプロジェクトのREADME.mdファイルに記載できるドキュメントを作成するのを手伝ってください。）
プロンプトの/docの部分は「スラッシュコマンド」と呼ばれ、ドキュメントを作成できるGitHub Copilotの特定の機能です。
なお、スラッシュコマンドは、GitHub Copilotに特定のタスクを実行するよう指示するための方法です。
テストを生成する
現在のコードにはテストがありません。
この課題では、/testsスラッシュコマンドを使用します。main.pyを開いた状態で、チャットインターフェースに以下のプロンプトを入力します。
/tests help me write a test for the generate() route using the FastAPI test client and the Pytest framework. Help me understand where I should put the test file, how to add the Pytest dependency to my project, and how to run the tests
（日本語訳：
/tests FastAPIテストクライアントとPytestフレームワークを使用して、generate()ルートのテストを作成するのを手伝ってください。テストファイルをどこに置くべきか、Pytestの依存関係をプロジェクトに追加する方法、テストを実行する方法を理解するのを手伝ってください。）
/testsスラッシュコマンドは、ルートの新しいテストを作成する方法を案内し、作業を確認するために必要なものすべてを提供します。
今回はPythonによる演習であるためテストには、pytestを使用します。
pytestは、Pythonのテストフレームワークであり、テストの作成と実行を簡素化します。
pytestは、Pythonの標準ライブラリに含まれていないため、プロジェクトに追加する必要がありますが、GitHub Copilotはセットアップ方法と使い方を提案してくれます。
おそらくGitHub Copilotは、requirements.txtファイルにpytestを追加してインストールする方法を提案してくれるでしょう。もし、GitHub Copilotが提案しない場合は以下のように手動でインストールできますのでターミナルを開いて実行するようにしてください。
pip install pytest
pytestがインストールが完了したら次にテストを書きます。
pytestによるテストは、testsディレクトリに配置するのが一般的です。testsディレクトリは、以下のような配置・構造になります。
webapp/
├── main.py # FastAPIアプリケーション
├── requirements.txt
├── README.md
└── tests/
└── test_generate.py # テストファイル
なお、GitHub Copilotで生成されるテストは、以下のような内容になる想定です。
from fastapi.testclient import TestClient
from main import app # FastAPIアプリケーションが定義されているファイルをインポート
client = TestClient(app)
def test_generate_success():
# テスト用のリクエストデータ
request_data = {
"key": "value" # 必要に応じてリクエストボディを変更
}
# POSTリクエストを送信
response = client.post("/generate", json=request_data)
# ステータスコードの確認
assert response.status_code == 200
# レスポンスボディの確認
response_data = response.json()
assert "result" in response_data # 必要に応じてレスポンスのキーを変更
assert response_data["result"] == "expected_value" # 必要に応じて期待値を変更
def test_generate_invalid_request():
# 無効なリクエストデータ
request_data = {
"invalid_key": "value"
}
# POSTリクエストを送信
response = client.post("/generate", json=request_data)
# ステータスコードの確認
assert response.status_code == 400 # 必要に応じてエラーコードを変更
assert response.json()["detail"] == "Invalid request" # 必要に応じてエラーメッセージを変更
テストファイルを作成したら、次にテストを実行します。
まずはwebappディレクトリに移動します。
cd webapp
ターミナルを開いて、以下のコマンドを実行します。
PYTHONPATH=/workspaces/mslearn-copilot-codespaces-python/webapp pytest tests/test_generate.py
実行結果
================================= test session starts =================================
platform linux -- Python 3.8.17, pytest-7.3.1, pluggy-1.0.0
rootdir: /workspaces/mslearn-copilot-codespaces-python/webapp
plugins: anyio-4.5.2
collected 0 items / 1 error
======================================= ERRORS ========================================
_______________________ ERROR collecting tests/test_generate.py _______________________
/home/vscode/.local/lib/python3.8/site-packages/starlette/testclient.py:23: in <module>
import httpx
E ModuleNotFoundError: No module named 'httpx'
During handling of the above exception, another exception occurred:
tests/test_generate.py:1: in <module>
from fastapi.testclient import TestClient
/home/vscode/.local/lib/python3.8/site-packages/fastapi/testclient.py:1: in <module>
from starlette.testclient import TestClient as TestClient # noqa
/home/vscode/.local/lib/python3.8/site-packages/starlette/testclient.py:25: in <module>
raise RuntimeError(
E RuntimeError: The starlette.testclient module requires the httpx package to be installed.
E You can install this with:
E $ pip install httpx
=============================== short test summary info ===============================
ERROR tests/test_generate.py - RuntimeError: The starlette.testclient module requires the httpx package to be ins...
!!!!!!!!!!!!!!!!!!!!!!! Interrupted: 1 error during collection !!!!!!!!!!!!!!!!!!!!!!!!
================================== 1 error in 0.51s ===================================
httpxというモジュールが足りないというエラーで終わると思いますので、以下のコマンドを実行して必要なモジュールをインストールします。
pip install httpx==0.27.2
httpxをインストールしたら、再度テストを実行します。
PYTHONPATH=/workspaces/mslearn-copilot-codespaces-python/webapp pytest tests/test_generate.py
workspaceを使用する
最後に、「エージェント」を使用する機会があります。
エージェントは、Visual Studio CodeのGitHub Copilotの特別な機能であり、特定のコンテキストをGitHub Copilotと共有できます。
この最後の課題では、現在のワークスペースのファイルを含めてより多くのコンテキストを提供する@workspaceエージェントを使用します。
アプリケーション全体を実行する方法に関連する問題を解決します。この場合、複数のファイルにまたがる詳細についてREADME.mdを強化します。
@workspaceを使用するとより多くのコンテキストをGitub Copilotに提供できます。
この課題では、ファイルを開いておく必要はありません。GitHub Copilotチャットウィンドウに以下のプロンプトを入力します。
@workspace I want to provide instructions on how to run this application using the uvicorn webserver, I also need to provide instructions on how to install the dependencies properly and what are some characteristics of the FastAPI framework. I will use this to improve the README.md file
（日本語訳：@workspace uvicornウェブサーバーを使用してこのアプリケーションを実行する方法についての指示を提供したいです。また、依存関係を適切にインストールする方法と、FastAPIフレームワークのいくつかの特性についての指示も必要です。これを使用してREADME.mdファイルを改善します。）
※結果はFastAPI、アプリケーションの実行方法、依存関係のインストール方法に関する説明になる想定です。
（オプション）GitHub Copilot for Azureを使用する
GitHub Copilot for Azureは、自然言語でAzureのリソースを構築・管理することができるCopilotです。
まとめ
この記事では、GitHub、GitHub Codespaces、GitHub Copilotを活用したアプリケーション開発の流れをハンズオン形式で学びました。
具体的には、Pydanticモデルの追加、新しいAPIエンドポイントの作成、コードの説明、スラッシュコマンドやエージェント機能を使ったドキュメント・テスト生成、README強化など、Copilotの多様な機能を体験しました。
これらの手順を通じて、AI支援による効率的な開発プロセスや、クラウドベースの開発環境の利便性を実感できたはずです。
今後もCopilotやCodespacesを活用し、より生産的な開発を目指しましょう。
Discussion