1章コーディングの常識が変わる！Copilot革命

INDEX

前の章に戻る次の章に進む

1章コーディングの常識が変わる！Copilot革命

この章の目安学習時間：50分

この章で到達できるゴール：

VSCodeにGitHub Copilotを導入し、初期設定を完了できる。
Copilotの基本的な機能（インライン補完、チャット）を体験し、その便利さを実感できる。

【1-1】環境構築：CopilotをVSCodeに導入しよう

目安の学習時間：20分

GitHub Copilotへようこそ！

GitHub Copilotとは、GitHubとOpenAIが共同開発した、AIによるコーディング支援ツールです。
エディタ上でコードを書いていると、その文脈を理解し、次に書くべきコードをリアルタイムで提案してくれます。

単純なコード補完だけでなく、コメントからコードを生成したり、チャットで質問に答えたりと、開発のあらゆる場面をサポートしてくれる強力なパートナーです。

利用するには、以下の準備が必要です。

GitHubアカウント：
持っていない場合は、公式サイトから無料で作成できます。
GitHub Copilotのサブスクリプション：
Copilotは有料サービスです。GitHubのアカウント設定からサインアップし、無料トライアルまたは有料プランに登録してください。

VSCodeへのインストールと初期設定

Copilotは、VSCodeの拡張機能として提供されています。
以下の手順でインストールと設定を行いましょう。
※ これらは2025年7月28日時点のフローです。実際の画面やフローは変更されている可能性があります。

VSCodeを開き、左側のアクティビティバーから「拡張機能」アイコンをクリックします。
検索バーに「GitHub Copilot」と入力します。
検索結果に表示された「GitHub Copilot」を選択し、「インストール」ボタンをクリックします。

右下の「Signed out」をクリックし、「Sign in to use Copilot」をクリック。

出てきたポップアップの「Continue with GitHub」をクリック。

ウェブからGitHubにサインインする。

つまずきポイント：認証がうまくいかない場合

GitHubにログインしていますか？：ブラウザでGitHubにログインしていることを確認してください。
Copilotのサブスクリプションは有効ですか？：GitHubの個人設定ページで、Copilotの契約が有効になっているか確認しましょう。
VSCodeを再起動する：一度VSCodeを完全に終了し、再度開くと解決することがあります。

それでも解決しない場合は、いつでもコーチに相談してください。

【1-2】これがAIコーディングだ！基本操作を体験

目安の学習時間：20分

書いている途中からコードを提案！インライン補完

Copilotが有効になると、その真価をすぐに体験できます。
HTMLファイルやCSSファイルを開き、何か書き始めてみましょう。

例えば、h1 と入力するだけで、"<h1>こんにちは、世界！</h1>" のような完全なタグを提案してくれます。
CSSで .container { と入力すれば、display: flex; や width: 100%; といった、よく使われるプロパティを次々と提案（インライン補完）してくれます。

提案の受け入れ：
提案が薄い灰色で表示されたら、「Tab」キーを押すことでそのコードを確定できます。
提案の拒否：
提案が不要な場合は、そのまま入力を続けるか、「Esc」キーで消すことができます。

この機能だけで、タイピングの量が劇的に削減されることを実感できるはずです。

教材4 AIアシストコーディング実践 1-1

AIと会話する！Copilot Chatの基本

インライン補完が「予測」の機能だとすれば、Copilot Chat は「対話」の機能です。
より複雑なコードの生成や、コードに関する質問は、このチャット機能を使うことで解決できます。
VSCodeのアクティビティバーにあるCopilotのアイコンをクリックすると、チャットウィンドウが開きます。
ここに、人間と会話するように自然言語で指示や質問を入力できます。

試しにチャットウィンドウに「こんにちは」と入力してみましょう。
AIが挨拶を返してくれます。
このチャット機能が、これからコーディングのあらゆる場面で、最強の武器になります。

【1-3】1章 -章末課題- [Copilotとの最初の会話]

目安の学習時間：10分

問題

VSCodeでCopilot Chatを開き、以下の2つの質問をしてみてください。

「HTMLの header タグの役割を教えてください」
「CSSで文字を中央揃えにする方法を教えてください」

解答手順

操作手順

VSCodeの左側のアクティビティバーから、吹き出しにCopilotのロゴが入った「チャット」アイコンをクリックし、Copilot Chatのビューを開きます。
ビュー下部の入力欄に「HTMLの`header`タグの役割を教えてください」と日本語で入力し、「Enter」キーを押します。AIがタグの役割について分かりやすく解説してくれることを確認します。
続けて、同じ入力欄に「CSSで文字を中央揃えにする方法を教えてください」と入力し、「Enter」キーを押します。AIが`text-align: center;`などの具体的なコード例を交えて回答することを確認します。

この章のまとめ

これで「1章：コーディングの常識が変わる！Copilot革命」の解説を終わります。

Copilotの導入と、その基本的な機能である「インライン補完」と「チャット」を体験しました。
もう、あなたの開発環境は以前とは全く違うものになったはずです。

次の章では、このチャット機能をさらに活用し、日本語の「コメント」だけでHTML、CSS、JavaScriptのコードを自在に生成する、魔法のようなテクニックを学びます。

前の章に戻る次の章に進む