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

「GitHub Copilot」入門 第3回

GitHub Copilotの支援を受けてエラーを解決

　一通りの実装が完了したので実行してみます。Expressプロジェクト→Reactプロジェクトの順番で実行すると、表示されるReactのWebページは図10の通りとなり、スマートフォンの一覧が表示されません。

図10　ReactのWebページにスマートフォンの一覧が表示されない様子（p001-react）

　この時、Webブラウザーのコンソールには、図11の通りエラーが出力されます。

図11　図10の実行時にコンソールに出力されるエラー（p001-react）

［補足］コンソールにエラーが2回出力される理由

　図11でコンソールにエラーが2回出力されているのは、ReactのStrictModeが有効になっているためです。この件もCopilot Chatに質問すると、図12の通り教えてくれます。

図12　コンソールにエラーが2回出力される理由を質問した様子

　このエラーを、GitHub Copilotの支援を受けて解決してみましょう。エラーの内容をそのままCopilot Chatに貼り付けて質問すると、図13の通り回答がもらえ、CORSヘッダーの設定が必要と案内されます。この事象は、同一オリジンポリシーにより、クライアント側のWebページ（http://localhost:5173/）から、オリジンが異なるWeb API（http://localhost:3000/phones）へのアクセスができないことが原因です。

図13　エラー内容をCopilot Chatに貼り付けて質問した様子（p001-react）

　Copilot Chatで提示された解決策を実行します。「npm install cors」コマンドでcorsパッケージをインストール後、サーバー側のコードを修正します。提案されたコードはリスト5の通りです。（1）でcorsパッケージからcors関数を取得し、（2）のapp.useメソッドにcors関数の戻り値を与えて実行し、CORSミドルウェアを使用するようにします。

［リスト5］CORS対応を行うサーバー側コードの提案内容

const express = require('express');
const cors = require('cors'); // ...（1）
const app = express();

// CORSミドルウェアを使用 ...（2）
app.use(cors());

app.get('/phones', (req, res) => {
  res.json([
    { brand: 'Apple', model: 'iPhone 12' },
    { brand: 'Samsung', model: 'Galaxy S21' }
  ]);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

　ただし、リスト5はエラーコードから推測して生成したコードなので、元のコード（リスト2）と見比べると、/phones APIの戻り値が変わっている、port変数が消滅している（ポート番号3000が即値になっている）といった、不必要な変更が見られます。

　そこでリスト5と同じ修正内容をリスト2に適用させてみます。リスト2（index.jsの内容）を全選択してインラインチャットを開き、CORSに対応するよう命令すると、図14の通り、リスト5（1）（2）と同じ修正が提案されます。

図14　既存のサーバー側コードに対してCORS対応を提案させた様子（p002-express/index.js）

　ここまで修正後、もう一度Expressプロジェクト→Reactプロジェクトの順に実行して、Webブラウザーで「http://localhost:5173/」にアクセスすると、図15の通りスマートフォンのリストが表示されます。GitHub Coplotに全面的に頼りながら、ExpressによるWeb APIと、それにアクセスして画面に表示するReactのWebページが完成しました。

図15　Web APIから取得したデータを表示するReactのWebページ（p001-react）

［補足］テスト用のデータをGitHub Copilotに生成させる

　本記事では、プログラムの実装をGitHub Coplotに生成させましたが、テストに利用するデータの生成にもGitHub Copilotが活用できます。特に大量のテストデータが必要とされる場合に便利です。

　例えば、brandとmodelを含むスマートフォンのデータを1000個、JSON形式で生成しようとした場合、Copilot Chatで図16の通り生成方法を提案してくれます。

図16　テストデータの生成方法を質問した様子

　図16で提案された生成方法は、p003-testdataサンプルコードに含まれています。

さいごに

　本記事では、GitHub Copilotに全面的に頼りながら、クライアント側にReact、サーバー側にExpressを利用したWebページを作成しました。プロジェクト生成や実装、エラー解決などのさまざまな場面で、GitHub Copilotの支援を受けて効率よく作業できることがわかります。

　GitHub CopilotはAIを利用したツールなので、提案された内容を全面的に信用してよいものではなく、最終判断の責任は人間にあります。とはいえGitHub Copilotを利用すると、人間が考える手掛かりとなる提案を、必要な時に好きなだけ受けることができるので、作業効率を大幅に向上させられます。AIの可能性と限界を知ったうえで上手に使っていきたいツールといえるでしょう。

参考資料

• GitHub Copilot
• GitHub