自分でコードを書かずにどこまでやれるか？「GitHub Copilot」をフル活用してReact＋ExpressのWebページ実装に挑戦

「GitHub Copilot」入門 第3回

　本連載ではコーディング支援AIツール「GitHub Copilot」のさまざまな機能や活用例を紹介しています。前回はGitHub Copilotのより詳細な操作方法とシーン別の活用法を説明しました。最終回となる今回は、クライアント側にReact、サーバー側にExpressを利用したWebページを、GitHub Coplotに全面的に頼り、できるだけ自分でコードを書かずに実装する事例を紹介します。

はじめに

　「GitHub Copilot」は、プログラムのコーディング支援を想定したAIツールです。本連載では、GitHub Copilotの便利な機能や利用法を、複数回にわたって紹介しています。

図1　GitHub CopilotのWebページ

　前回記事では、ショートカットキーやコマンドといった、GitHub Copilotのより詳細な操作方法と、学習時や開発作業時といったシーン別の活用事例を紹介しました。今回はより具体的な事例として、GitHub Copilotをフル活用したアプリの実装に挑戦します。

　実装するのはクライアント側にReact、サーバー側にExpressを利用したWebページです。実装に際してはGitHub Copilotに全面的に頼り、できるだけ自分で実装を行わないようにします。

　なお、AIの特性上、記事と同じ操作をしても処理結果が同一にならないことがある点に注意してください。

対象読者

• AIによるコーディング支援を実感したい方
• プログラミング作業で少しでも楽をしたい方
• GitHub Copilotがどこまでできるか見定めたい方

必要な環境

　本記事で利用する環境は以下の通りです。GitHub Copilotの契約は個人向けの「Copilot Individual」を利用します。契約や環境構築の手順は本連載の初回記事を参照してください。

• Windows 11
  • Visual Studio Code
  • Visual Studio Code用の拡張機能「GitHub Copilot」と「GitHub Copilot Chat」
  • React 18.3.1
  • Express 4.19.2
  • Node.js 20.16.0 64bit版
  • Python 3.12.5 64bit版
  • Microsoft Edge 127.0.2651.98

　クライアント側（p001-react）とサーバー側（p002-express）のサンプルコードを実行するには、最初に「npm install」コマンドを実行してライブラリをインストールします。その後クライアント側（p001-react）は「npm run dev」コマンドで実行して、Webブラウザーで「http://localhost:5173/」にアクセスしてWebページを表示できます。

　サーバー側（p002-express）は「node index.js」コマンドで実行できます。なおp003-testdataサンプルはPythonで実装されており、「py smartphones.py」コマンドで実行できます。