0. イントロダクション

概要

このハンズオンでは、小さな Vite アプリを題材に、Issue から GitHub Pages へのデプロイまでを体験します。

学習目標

• Issue とブランチを対応付ける
• Pull Request の差分、レビュー、CI を確認する
• develop で変更を統合し、main からリリースする
• GitHub Pages のデプロイ結果を確認する
• GitHub Copilot の提案を、差分とテストで検証する

前提条件

• JavaScript のコードを読み、小規模な変更ができる
• Git、Node.js 20.19 以上または 22.12 以上、npm、Visual Studio Code がインストールされている
• GitHub Copilot または CLI ベースで作業する場合: GitHub CLI がインストールされている
• GitHub Copilot を使用する場合: GitHub Copilot のプランを確認し、利用できる GitHub アカウントがある
• 演習用リポジトリを作成し、Settings を変更できる GitHub アカウントがある
• そのリポジトリで GitHub Actions と GitHub Pages を利用できる
• GitHub と npm registry へ HTTPS で接続できる

事前確認

Organization のポリシーやプランによって、GitHub Actions、GitHub Pages、リポジトリ作成を利用できない場合があります。開始前に管理担当へ確認してください。

GitHub の操作方法

操作方法を選べる手順では、次のタブを表示します。利用環境や権限に合う方法を選んでください。

• GitHub Copilot: Agent モードへ指示を与え、状態確認や操作を進めます
• PowerShell: PowerShell から Git、npm、GitHub CLI を実行します
• Bash: Bash から Git、npm、GitHub CLI を実行します
• GitHub.com (Web): ブラウザーの GitHub.com から操作します

表示される選択肢は手順によって異なります。どの方法を選んでも、同じ目的と確認事項を満たすように構成しています。

GitHub Copilot の使い方

PowerShell または Bash の操作がある手順では、GitHub Copilot を作業方法の1つとして選べます。GitHub Copilot タブには、使用するモード、与えるプロンプト、操作後に確認することを記載しています。

スターターには、Issue の実装、差分のセルフレビュー、リリース準備、Pull Request の作成・レビューなどに使用する Agent Skill が含まれています。Skill は手順を再利用し、事前確認や停止条件をそろえるために使用します。

GitHub Copilot の出力や操作結果が常に正しいとは限りません。各タブに記載された確認事項に従い、対象リポジトリ、ブランチ、差分、テスト、CI、Workflow の結果を確認してください。外部サービスを変更する操作や削除操作では、対象と影響を確認してから明示的に承認します。GitHub Copilot を利用できない場合は、PowerShell、Bash、GitHub.com (Web) の手順で進められます。

まとめ

次の記事では、配布された ZIP を展開し、スターターアプリをローカルで検証します。