GitHub Copilotの支援を受けてエラーを解決
一通りの実装が完了したので実行してみます。Expressプロジェクト→Reactプロジェクトの順番で実行すると、表示されるReactのWebページは図10の通りとなり、スマートフォンの一覧が表示されません。
この時、Webブラウザーのコンソールには、図11の通りエラーが出力されます。
［補足］コンソールにエラーが2回出力される理由
図11でコンソールにエラーが2回出力されているのは、ReactのStrictModeが有効になっているためです。この件もCopilot Chatに質問すると、図12の通り教えてくれます。
このエラーを、GitHub Copilotの支援を受けて解決してみましょう。エラーの内容をそのままCopilot Chatに貼り付けて質問すると、図13の通り回答がもらえ、CORSヘッダーの設定が必要と案内されます。この事象は、同一オリジンポリシーにより、クライアント側のWebページ（http://localhost:5173/）から、オリジンが異なるWeb API（http://localhost:3000/phones）へのアクセスができないことが原因です。
Copilot Chatで提示された解決策を実行します。「npm install cors」コマンドでcorsパッケージをインストール後、サーバー側のコードを修正します。提案されたコードはリスト5の通りです。（1）でcorsパッケージからcors関数を取得し、（2）のapp.useメソッドにcors関数の戻り値を与えて実行し、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）と同じ修正が提案されます。
ここまで修正後、もう一度Expressプロジェクト→Reactプロジェクトの順に実行して、Webブラウザーで「http://localhost:5173/」にアクセスすると、図15の通りスマートフォンのリストが表示されます。GitHub Coplotに全面的に頼りながら、ExpressによるWeb APIと、それにアクセスして画面に表示するReactのWebページが完成しました。
［補足］テスト用のデータをGitHub Copilotに生成させる
本記事では、プログラムの実装をGitHub Coplotに生成させましたが、テストに利用するデータの生成にもGitHub Copilotが活用できます。特に大量のテストデータが必要とされる場合に便利です。
例えば、brandとmodelを含むスマートフォンのデータを1000個、JSON形式で生成しようとした場合、Copilot Chatで図16の通り生成方法を提案してくれます。
図16で提案された生成方法は、p003-testdataサンプルコードに含まれています。
さいごに
本記事では、GitHub Copilotに全面的に頼りながら、クライアント側にReact、サーバー側にExpressを利用したWebページを作成しました。プロジェクト生成や実装、エラー解決などのさまざまな場面で、GitHub Copilotの支援を受けて効率よく作業できることがわかります。
GitHub CopilotはAIを利用したツールなので、提案された内容を全面的に信用してよいものではなく、最終判断の責任は人間にあります。とはいえGitHub Copilotを利用すると、人間が考える手掛かりとなる提案を、必要な時に好きなだけ受けることができるので、作業効率を大幅に向上させられます。AIの可能性と限界を知ったうえで上手に使っていきたいツールといえるでしょう。
