ChatGPTにGitHubのコードを直接レビューしてもらおう&単体試験項目も作ってもらおう！
Web Browseの機能を活用し、直接GitHubのページからコードレビューを依頼する方法を解説します。
レビューをしてもらうついでに、脆弱性確認や単体テストの試験項目もサクッと作ってもらいます。
コードレビューとは
コードレビューはプログラミング品質を向上させる手法の1つです。
通常はレビューア（レビュアー）とレビューイ（レビューを受ける人）の二つの役割が存在し、レビューイは自身のコーディングしたコードなどをレビューアに説明し、フィードバックを得ます。
これが基本的なコードレビューの流れとなります。
今回紹介するのは、レビューアとしての役割をChatGPTに依頼する方法です。
やり方
以下の記事に記載されている通り、コードをそのままペーストしてもChatGPTが素晴らしいレビューを行ってくれます。
しかし、今回はGitHubのページを直接指定し、そのコードをレビューしてもらう方法をご紹介します。
以前、ChatGPTに作成してもらったChromeの拡張機能で試してみます
（以下、私が以前書いた記事です）。
レビューを依頼するコード（ページ）は以下です。
尚このコードは99%、ChatGPTが作成したものです。
プロンプト・レビュー結果
次のレビューをお願いします：https://github.com/tanuu5/ChatGPT_ex_chrome
シンプルに上記の質問をしました。
返答が以下になります。
コードを確認しました。以下にいくつかの点を挙げます：
1. コードの構造と処理フロー: コードはきちんと整理されていて、特定の機能が分かりやすい関数に分割されています。全体的に処理フローは明確で、コードを読むだけで何をしているか理解できます。
2. APIの利用: OpenAIのChat APIを適切に利用しています。APIキーは`chrome.storage.sync.get`を使用して取得し、リクエストは`XMLHttpRequest`オブジェクトを使用して送信されています。これは非同期操作で、レスポンスが返ってきたときに実行されるコールバック関数が設定されています。
3. エラーハンドリング: このコードではAPIのレスポンスが200ステータスコード（成功）であるときのみメッセージを表示しますが、エラーステータスコード（例えば、400ステータスコードや500ステータスコード）が返ってきた場合のエラーハンドリングが見当たりません。また、APIキーが存在しない、または無効な場合の処理も考慮していないようです。これらのシナリオに対処するためのエラーハンドリングを追加することをお勧めします。
4. ユーザーインターフェース(UI): ユーザーが入力したメッセージとChatGPTからのレスポンスを表示する部分は適切に機能していそうです。ただし、エラーメッセージやシステムメッセージを表示する機能があると、よりユーザーフレンドリーになるでしょう。
5. モデルの選択: 現在、コードは 'gpt-3.5-turbo' モデルを使用しています。これはOpenAIの旧モデルであり、2022年以降は新しいモデル（例えば、GPT-4）が提供されています。モデルの選択は要件によるところが大きいですが、可能であれば新しいモデルを試してみるのも一つの選択です【11†source】。
それぞれ的確にレビューしてくれた気がします。
これを参考にして、さらにブラッシュアップしていくこともできますね。
続けてバグや脆弱性についても聞いてみます。
バグや脆弱性の有無
バグや脆弱性についてはわかりますか？
この提供されたコードを見る限り、明確なバグやセキュリティ脆弱性は特定できませんが、以下の点について注意が必要です：
1. APIキーの取り扱い: このコードはChromeの同期ストレージからAPIキーを取得しています。この方法はキーを秘密に保つための一つの方法ですが、他のユーザーが同じChromeプロファイルにアクセスできる場合、そのキーも共有されます。これは意図したものでなければ、セキュリティリスクとなりえます。
2. エラーハンドリングの不足: エラーハンドリングの不足はバグや脆弱性につながる可能性があります。現在のコードは成功したレスポンス（ステータスコード200）にのみ対応しています。しかし、APIからエラーレスポンス（400や500ステータスコードなど）が返された場合、またはAPIキーが無効な場合、このコードは無効な状態や未定義の挙動を引き起こす可能性があります。
3. 入力の検証: ユーザーからの入力を直接APIに渡しています。この例では大きな問題にはならないかもしれませんが、一般的にはユーザー入力は検証やサニタイズ（特殊文字のエスケープなど）を行うべきです。これは、意図しない挙動を引き起こす可能性のある特殊文字や攻撃者による悪意のあるコードを防ぐためです。
4. 情報の表示: ユーザーからの入力とChatGPTのレスポンスを表示していますが、この表示される情報が適切にエスケープされているか確認する必要があります。これは、クロスサイトスクリプティング（XSS）と呼ばれる一般的なウェブアプリケーションの脆弱性を防ぐためです。ただし、このコードでは`textContent`プロパティを使用しているため、XSS攻撃のリスクは低いと思われます。
以上の点を踏まえて、コードの改善やリファクタリングを検討することをお勧めします【11†source】。
間違いは無いかな、と思います。
続いて、単体試験用の試験項目を作成してもらいます。
単体試験項目の作成
コーディングの後、通常の流れとしては単体試験、統合試験、システム試験という順番で進行します。（呼び名は現場により異なります。）
今回は、個々のコードの部品（関数やメソッドなど）が正しく動作するかを検証する単体試験項目を作成してもらいます。
単体試験レベルの試験項目をあげてもらうことはできますか？
はい、単体試験の目的は、個々のコードの部品（関数やメソッドなど）が正しく機能していることを保証することです。以下にこのコードに対する単体試験のいくつかの例を挙げます：
1. `sendToChatGPT`関数のテスト:
- APIキーが有効である場合、関数が正常にAPIリクエストを送信し、レスポンスを受け取ること。
- APIキーが無効または存在しない場合、関数が適切にエラーを処理すること。
2. `document.getElementById('chat-form').addEventListener('submit', ...)` のテスト:
- ユーザーがフォームを送信したとき、`event.preventDefault()`が呼び出されること。
- ユーザーがフォームを送信したとき、`sendToChatGPT`関数が呼び出されること。
- ユーザーがフォームを送信したとき、ユーザーメッセージが正しく表示されること。
3. APIレスポンスを処理するコードのテスト:
- APIからのレスポンスが200のステータスコードを持つ場合、ChatGPTのメッセージが正しく表示されること。
- APIからのレスポンスがエラーステータスコード（例えば、400または500）を持つ場合、適切にエラーが処理されること。
4. UIのテスト:
- ユーザーメッセージとChatGPTのメッセージが正しくDOMに追加されること。
これらのテスト項目は、関数やメソッドが期待通りに動作すること、そしてエラー状態が適切に処理されることを確認します。ただし、JavaScriptやWeb開発のテストには多くのツールとフレームワーク（例えば、Jest、Mocha、Jasmineなど）があり、それぞれのツールが独自のテスト作成方法と実行方法を持っています。これらのツールを使用して、上記のテスト項目を実装することが可能です。
上記の試験項目をそれぞれの試験フォーマットに合わせれば、そのまま利用することが可能ですね。
まとめ
私自身はコーディングについてあまり詳しくないため、若干抽象的な表現となっていますが、開発現場で上記の方法を活用することは十分可能だと感じます。
また、プライベートで簡単なプログラムを作成した際も、その確認として活用できるでしょう。
ただし注意点として、社外秘のコードなどをそのまま送信すると、その情報がOpenAI社に渡ることとなります。
そのため、コードが誰の資産であるか明確にし、完全に自分のものであるか、あるいは許可を得ている場合のみ利用するようにしましょう。
この記事が気に入ったらサポートをしてみませんか？