APIキーは安全に管理する

第3回と第4回でOpenWeather APIを使用した際、APIキーをJavaScriptコードに直接記述した。開発時はこれで問題ないが、コードを公開する際には注意が必要だ。APIキーはそのサービスを利用するための「自分専用の鍵」のようなものなので、この鍵が第三者に知られると、不正利用や予期しない使用料金が発生してしまう可能性がある。

ありがちな失敗は、GitHubなどの公開リポジトリにAPIキーを含んだソースコードをそのままアップロードしてしまうことだ。これをやると、世界中の誰でもそのキーでAPIを使えるようになってしまう。

そのような事態を回避する最も基本的な対策は、APIキーを含むファイルをGitの管理対象から除外することである。どのようにすればいいかCopilot Chatに相談してみよう。

APIキーをGitHubにアップロードしないようにする方法を教えてください。

すると、次のように詳細にその方法を教えてくれるはずだ。

APIキーをGitHubにアップロードしないための方法は以下の通りです。

1. APIキーをコードから分離する
　APIキーを直接JavaScriptやソースコードに書かず、外部ファイル（例: .envやconfig.jsなど）に保存します。

2. .gitignoreに追加する
　APIキーを含むファイル（例: .env, config.jsなど）を.gitignoreに追加し、Gitの管理対象外にします。
例（.gitignoreに追加）:
----
.env
config.js
----

3. 公開リポジトリにpushする前に確認する
　git statusやgit diffでAPIキーが含まれていないか確認します。

4. 万が一アップロードしてしまった場合は、すぐにAPIキーを無効化・再発行する
　公開されたAPIキーは第三者に悪用される可能性があるため、速やかに対応してください。

フロントエンドアプリの場合はAPIキーの秘匿が難しいため、アクセス制限（リファラ制限や利用制限）をAPI管理画面で設定することも重要です。

あとは、Copilot Chatに指示してこの手順を順番に実施していけばいい。まず、APIキーの宣言をconfig.jsに分離する。

APIキーをconfig.jsに記述するようにscript.jsを修正してください。

この指示で、API_KEY変数の宣言を記述したconfig.jsが作成されて、script.jsにはダミーのキーが設定されるようになったはずだ。index.htmlもconfig.jsもロードするように変更されただろう。

続いてGitにconfig.jsをアップロードしないように.gitignoreファイルを作成する。

config.jsをGitにアップロードしないように、プロジェクトのルート.gitignoreファイルを作成してください。

これで、.gitignoreファイルが作成されて、そこにconfig.jsをGitの管理対象から外す設定が書き込まれる。これで設定は完了だが、リポジトリーにpushする前にはconfig.jsが管理対象から外れているかどうかをかならず確認しよう。

生成されたコードの品質をチェックする

たとえCopilot Chatがそれっぽいコードを生成してくれたとしても、それをそのまま信用して使うのではなく、必ず品質をチェックする習慣をつけることが重要だ。ここでは、生成されたコードの基本的なチェック方法を紹介する。

まずは実行して、エラーの内容を確認する

最も基本的なチェック方法は、実際にコードを動かしてみて、エラーが出ないか確認することだ。正常な入力での動作確認だけでなく、空文字や存在しない都市名など、異常な入力での動作も確認しよう。ここでもしもエラーが出たら、そのメッセージをコピーしてCopilot Chatに質問してみればよい。

さきほど提案してくれたコードを実行して、フォームから次のデータを送ってみました。

// フォームに入力した内容を記述

その結果、次のエラーが出ました。

// エラーメッセージを貼る

エラーの意味と、どのように修正すればよいかを教えてください。
初心者にもわかるように説明してください。

単に修正を依頼するだけでなく、エラーの意味を解説してもらうことで、自分の理解を深めることができる。

コードの意図を説明させる

前述の「解説依頼型」で解説したように、Copilot Chatが生成したコードが理解しにくかったときは、かならずその意図を説明してもらうようにしよう。コードの中身をちゃんと理解することで、問題を早期に発見できることに加えて、自分のスキルアップにつながるというメリットもある。

Copilot Chatにコードレビューを依頼する

Copilot Chatは、コードの問題点を指摘してもらう用途にも使える。GitHub CopilotのAIモデルは膨大なソースコードを学習しているため、さまざまな問題コードも熟知しているからだ。たとえば次のように質問すれば、セキュリティ上の問題になりそうな箇所を探してもらうことができる。

このコードに、セキュリティ上の問題や、将来的にバグになりそうな書き方はありますか？
初学者向けに、気をつけるポイントがあれば教えてください。

もちろんCopilotの回答が絶対というわけではないが、注意すべき観点のヒントにはなるはずだ。

Copilot Chatがうまく動作しないときの対処法

Copilot Chatから期待通りの回答が得られないときの対処法も知っておこう。

質問を言い換える

同じことを違う表現で聞き直すと、より良い回答が得られることがある。例えば、「ボタンのスタイルを変えて」ではなく「検索ボタンの背景色を青にして、角を丸くしてください」のように指示を具体的にすることで、意図を正確に伝えることができる。

コンテキストを追加する

次のように、条件や状況を明示的に伝えるようにすれば、回答の精度を上げられる可能性が高い。

別のアプローチを依頼する

提案された方法がうまくいかない場合は、思い切って別の方法を聞いてみるという手もある。

提案された方法では◯◯のようなエラーが出ました。
これを回避するための別のアプローチはありますか。

短時間にいろいろな方法を試して試行錯誤を繰り返すことができるのもAIアシスタントを使うメリットの1つである。

Copilot Chatは日本語で指示を出すだけで簡単にコードを作ってくれるが、「ボタンひとつで完璧なコードを出してくれる魔法の箱」というわけではない。どんなふうに聞けば意図が伝わるかを意識しつつ、自分なりの効率のいい使い方を見つけることが大切だ。