「プログラミングを始めたいけど、まず開発環境を作るところでつまずいてしまう……」
そんな経験、ありませんか？
プログラミングの勉強を始めると、最初に出てくるのがVS Codeのインストール、各種ツールの設定、ライブラリの準備、Gitの設定などです。
コードを書く前なのに、やることが多いんですよね。
僕自身も最初は「これ、コードを書く前に疲れてしまうのでは？」と思っていました。
そこで今回使っていくのがGitHub Codespacesです。
GitHub Codespacesは、クラウド上に用意された開発環境です。ブラウザからアクセスして、Visual Studio Codeを使うような感覚でプログラミングできます。GitHub公式ドキュメントでも、ブラウザ版のVS Codeを利用してCodespaces上で開発できることが案内されています。
さらに今回は、そこへGitHub Copilotも導入していきます。
つまり、今回のゴールは次の状態です。
- GitHubのリポジトリを用意する
- GitHub Codespacesを起動する
- ブラウザ上のVS Codeを使えるようにする
- GitHub Copilotをインストールする
- GitHub Copilotの認証を行う
- Copilot Chatでコードについて質問できる状態にする
ここまでできれば、AIを使ったプログラミング学習を始める準備はかなり整います。
GitHub Codespacesとは？初心者でも使いやすいクラウド開発環境
まず、Codespacesが何なのかを簡単に説明しておきましょう。
GitHub Codespacesとは、クラウド上に用意された開発環境です。
通常、プログラミングを始める場合、自分のパソコンにVS Codeなどのエディターをインストールし、さらに開発に必要な環境を準備します。
ところがCodespacesなら、GitHubから開発環境を立ち上げ、ブラウザからVS Codeベースの環境にアクセスできます。
GitHub公式でも、Codespacesはクラウドでホストされる開発環境として説明されており、ブラウザ、VS Code、GitHub CLIなどから利用できます。
特に初心者にとって便利なのが、「環境構築の手間を減らせる」というところです。
GitHub Codespacesを使うメリット
- ブラウザから開発環境を利用できる
- ローカルPCへの環境構築を減らせる
- GitHubリポジトリと連携しやすい
- VS Codeに近い操作感で開発できる
- パソコンを変えても同じ開発環境にアクセスしやすい
- GitHub Copilotと組み合わせてAI開発を進められる
たとえば旅行先でノートパソコンを開いて、「ちょっとコードを修正したい」と思ったとします。
そんなときでも、Codespacesならブラウザから開発環境へアクセスできます。
「開発環境は自宅のパソコンにしかない」という状態から、一歩進んだ開発スタイルを作れるわけです。
GitHub Codespacesの環境構築を始める前に準備するもの
それでは、実際に環境構築を始めていきましょう。
今回のハンズオンでは、GitHub上に用意されたリポジトリを利用します。
まずは教材やコースに用意されているMarkdownファイルを確認してください。
今回のようなハンズオン形式の教材では、リポジトリへのリンクがMarkdownファイルなどに記載されているケースがあります。
そのリンクをコピーして、GitHubのリポジトリページへ移動します。
画面を開いたときに、今回利用するGitHub Copilotのハンズオン用リポジトリが表示されれば準備完了です。
GitHubリポジトリを確認する
ここで一度、落ち着いてリポジトリの画面を確認しておきましょう。
「どこをクリックすればいいの？」と焦る必要はありません。
今回のポイントは、GitHubリポジトリにある「Code」ボタンです。
このボタンからCodespacesを起動していきます。
GitHub Codespacesの使い方｜リポジトリから起動する方法
それでは、いよいよCodespaceを起動します。
GitHub Copilotのハンズオン用リポジトリを開いたら、緑色の「Code」ボタンを探してください。
このボタンをクリックすると、ローカル環境とCodespacesに関する選択肢が表示されます。
ここで「Codespaces」のタブを選択します。
すると、Codespaceを新しく作成するためのボタンが表示されます。
今回の教材では、「Create Codespace on Main」というボタンから起動します。
なお、GitHubの画面はアップデートによって表示や名称が変わる場合があります。そのため、ボタン名が完全に同じでなくても、「Codespaceを新規作成する」という意味の項目を探してみてください。
GitHub公式ドキュメントでも、リポジトリのブランチを指定してCodespaceを作成する方法が案内されています。
Codespaceを作成すると何が起こる？
ボタンをクリックすると、すぐに開発画面が表示されるとは限りません。
最初は少し待ち時間があります。
「あれ？止まった？」
と感じるかもしれませんが、ここは焦らなくて大丈夫です。
Codespaceでは、開発環境を準備するために仮想マシンやコンテナなどが用意され、リポジトリの内容が開発環境に配置されます。
そのため、初回起動時には多少時間がかかることがあります。
GitHub公式の説明でも、Codespaceの作成時にはVMやストレージの割り当て、コンテナの作成、リポジトリのクローンなど複数の処理が行われるとされています。
ブラウザ版VS Codeが起動したら確認するポイント
セットアップが完了すると、新しいタブが開き、ブラウザ上にVS Codeの開発画面が表示されます。
ここが最初の「おお！」というポイントです。
普段パソコンにインストールして使っているVS Codeに近い画面が、ブラウザ上に表示されます。
「本当にこれだけで開発できるの？」
最初はそんな感じがするかもしれません。
でも、この状態がGitHub Codespacesの大きな魅力です。
GitHub公式ドキュメントでも、ブラウザ内のCodespacesではコード編集、デバッグ、Gitコマンド、アプリケーション実行などの開発作業ができると説明されています。
Explorerにファイルが表示されているか確認
VS Codeが起動したら、まず左側のExplorerを確認します。
今回のハンズオンでは、たとえば次のようなファイルが表示されている状態を確認します。
- Main.py
- Document.md
- README
ファイルが表示されていれば、リポジトリの内容がCodespaceに展開され、開発環境として利用できる状態になっていると考えられます。
ここまで来れば、最初の大きな山場はクリアです。
GitHub CopilotをVS Codeにインストールする方法
次はいよいよGitHub Copilotを導入します。
GitHub Copilotは、コードを書くときにAIから支援を受けられる開発ツールです。
GitHub CodespacesでもVS Code拡張機能を追加することでGitHub Copilotを利用できます。GitHub公式ドキュメントでも、CodespacesでGitHub Copilotを使用するためにVisual Studio Code Marketplaceの拡張機能をインストールする方法が案内されています。
では、実際にインストールしてみましょう。
VS CodeでGitHub Copilotを検索する
まず、Codespaceで起動しているVS Codeの左側にあるサイドバーから「拡張機能」を選択します。
拡張機能の検索画面が表示されたら、検索ボックスに次のように入力します。
GitHub Copilot
検索結果にGitHub Copilotが表示されたら、インストールを進めます。
ここで一つ覚えておきたいのが、GitHub Copilotは単なるコード補完だけではなく、現在ではチャットを使ったAIとの対話型開発にも活用できるということです。
つまり、コードを入力してAIの提案を待つだけではありません。
「このコードは何をしているの？」
「このエラーの原因は？」
「この処理をもっとシンプルにできる？」
といった質問をしながら開発を進められます。
GitHub Copilot Chatを使える状態にする
GitHub Copilotの拡張機能をインストールしたら、次は認証を確認します。
すでにGitHub Copilotを利用した経験があり、認証が済んでいる場合は、この操作を飛ばせることがあります。
一方、初めて利用する場合は、Copilotの利用開始やGitHubアカウントとの認証が必要になる場合があります。
Copilot Chatが表示されない場合
まず、VS Codeのヘッダー部分にあるCopilot関連のアイコンを確認します。
現在のVS Codeでは、UIの変更によってアイコンの見た目や位置が以前と異なる場合があります。
そのため、「教材の画面とアイコンが違う！」となっても慌てなくて大丈夫です。
Copilot関連のアイコンを選択して、チャット画面を開いてみましょう。
もし「Start GitHub Copilot Free」のような利用開始ボタンが表示された場合は、それを選択して利用開始の手続きを進めます。
認証のためにブラウザが新しく開く場合があります。
その場合は、GitHub側で必要な操作を終えたあと、Codespaceの画面へ戻ります。
必要に応じてブラウザをリロードすると、Copilot Chatが利用できるようになる場合があります。
GitHub Copilot Chatでできること
ここまで設定できたら、いよいよAIとの対話です。
Copilot Chatの画面が表示されると、コードについて質問したり、実装方法を相談したりできます。
ここからが、AIを使ったプログラミング学習の面白いところです。
たとえば、コードを見ながら次のような質問をしてみます。
- 「このコードが何をしているのか初心者向けに説明してください」
- 「このコードにエラーが出る原因を調べてください」
- 「この処理を関数に分けてください」
- 「Python初心者にもわかるように説明してください」
- 「このコードを読みやすく改善する方法を提案してください」
すると、コードを眺めているだけでは気づかなかったポイントを、AIとの会話を通して確認できます。
もちろん、AIの回答をそのまま鵜呑みにするのではなく、自分でもコードを確認することが重要です。
GitHub Copilotのエージェント機能も活用できる
さらに、現在のCopilotでは、単純な質問だけでなく、エージェントを活用した開発支援も重要になっています。
たとえば、「この機能を実装したい」という目的を伝えて、複数のファイルを確認しながら作業を進めてもらう、といった使い方ができます。
ただし、AIにすべて任せるのではなく、「何を変更したのか」「なぜそのコードになったのか」を確認する習慣をつけるのがおすすめです。
AIを使うことでコードを書くスピードを上げるだけではなく、コードを読む力も一緒に鍛えていく。
これが、これからのプログラミング学習ではかなり重要になってくると思います。
GitHub CodespacesとCopilotを組み合わせるメリット
ここまで設定してみると、CodespacesとCopilotを組み合わせる意味が見えてきます。
Codespacesが「開発する場所」だとすれば、Copilotは「開発をサポートしてくれるAI」です。
この2つを組み合わせることで、環境構築からAIを使ったコーディングまでをGitHub中心で進めやすくなります。
初心者におすすめしたい理由
- ローカル環境構築の負担を減らせる
- ブラウザからVS Codeを利用できる
- GitHubリポジトリと開発環境をつなげやすい
- AIにコードについて質問できる
- エラーやコードの意味を確認しながら学習できる
- AIを活用した開発スタイルを体験できる
特に「プログラミングを勉強したいけど、環境構築が難しくて先に進めない」という人には、試してみる価値があります。
GitHub Codespacesでつまずきやすいポイント
実際に操作していると、いくつか「あれ？」と思う場面が出てきます。
Codespaceの起動に時間がかかる
Codespaceはクラウド上に開発環境を準備するため、起動直後に少し待つ場合があります。
特に初回は、「ボタンを押したのに画面が変わらない」と感じることもあるでしょう。
そんなときは、すぐに何度もボタンを押すのではなく、まずセットアップ処理が進んでいないか確認しましょう。
教材と画面が少し違う
GitHubやVS Codeはアップデートされるため、教材で紹介されている画面と現在の画面が完全に一致しない場合があります。
特にアイコンやボタンの位置は変更されることがあります。
そんなときは、名称そのものよりも「何をするための機能なのか」を考えて探すのがおすすめです。
GitHub Copilot Chatが表示されない
Copilot Chatが見つからない場合は、次の項目を順番に確認してみてください。
- GitHub Copilotの拡張機能がインストールされているか
- GitHubアカウントで認証されているか
- Copilotの利用開始手続きが完了しているか
- VS Codeやブラウザをリロードしてみたか
- Copilot関連のアイコンからChatを開いているか
一つずつ確認していけば、意外と簡単に原因を見つけられます。
GitHub Copilotを使うときに意識したいこと
ここで一つ、AIを使ったプログラミング学習で大切なことがあります。
それは、「AIにコードを書いてもらうこと」と「プログラミングを理解すること」は別だということです。
Copilotが素早くコードを生成してくれると、つい「完成したからOK」と思ってしまいます。
でも、本当に大切なのはその先です。
「このコードは何をしているのか？」
「なぜこの書き方なのか？」
「別の方法ではできないのか？」
こうした疑問をCopilotに質問してみましょう。
AIを先生のように使うことで、単なるコード生成ツールではなく、学習パートナーとして活用できます。
GitHub CodespacesとGitHub Copilotの環境構築まとめ
今回は、GitHub Codespacesを使ってブラウザ上に開発環境を構築し、GitHub Copilotを導入するところまで進めました。
最初は「Codespacesって何？」「Copilotはどこから入れるの？」と少し戸惑うかもしれません。
でも、実際に操作してみると、流れはそれほど複雑ではありません。
今回の手順をまとめると、次のようになります。
- GitHub Copilotのハンズオン用リポジトリを開く
- 「Code」ボタンを選択する
- 「Codespaces」タブを開く
- Codespaceを作成する
- ブラウザ版VS Codeが起動するまで待つ
- Explorerでリポジトリのファイルを確認する
- VS Codeの拡張機能を開く
- GitHub Copilotを検索する
- GitHub Copilotをインストールする
- 必要に応じてGitHubアカウントの認証を行う
- Copilot Chatを開く
- AIにコードについて質問してみる
ここまでできれば、GitHub Codespaces上でGitHub Copilotを利用した開発環境が整います。
個人的には、この環境の面白いところは「コードを書く場所」と「AIに相談する場所」がかなり近くなることだと思います。
わからないコードが出てきたら、その場で質問する。
エラーが出たら、原因を確認する。
新しい機能を作りたいなら、実装方法を相談する。
そんなふうにAIと会話しながらプログラミングを進められるのは、これまでの開発環境とは少し違った感覚があります。
そして、何より最初の環境構築でつまずいてしまう時間を減らせるのが大きなポイントです。
まずは難しいことを考えすぎず、Codespaceを起動してみる。
そしてVS Codeがブラウザに表示されたら、Copilotをインストールしてみる。
最後にCopilot Chatへ簡単な質問を投げてみる。
この順番で進めれば、AIを活用したプログラミングの第一歩を踏み出しやすくなります。
さあ、ここからが本番です。
環境構築が終わったら、次は実際にGitHub Copilotへコードを書いてもらいながら、AIを使った開発を体験していきましょう。
※GitHub CodespacesやGitHub Copilotの画面、料金、利用可能なプラン、ボタン名などはアップデートによって変更される場合があります。実際の操作では、現在のGitHub公式ドキュメントもあわせて確認することをおすすめします。
参考：GitHub公式ドキュメントでは、Codespacesの作成方法、ブラウザ版VS Codeでの開発、CodespacesでのGitHub Copilot利用方法などが公開されています。
[GitHub Codespaces公式ドキュメント｜リポジトリからCodespaceを作成する](https://docs.github.com/ja/codespaces/developing-in-a-codespace/creating-a-codespace-for-a-repository?utm_source=chatgpt.com)
[GitHub Codespaces公式ドキュメント｜Codespacesとは](https://docs.github.com/ja/codespaces/about-codespaces/what-are-codespaces?utm_source=chatgpt.com)
0 件のコメント:
コメントを投稿