ChatGPTにコードレビューしてもらうときしていること

はじめに

これは、スクリプトでファイル名及びコードの内容を一気に表示してそれを、ChatGPTに渡してレビューしてもらう試みです。
個人開発とかでChatGPTにコードを渡す機会が頻繁にあるんですが、ファイルひとつひとつ手動でコードをコピペするのは面倒なのでなんとかできないかやってみました。（APIは有料なのであまり使いたくない…。）

ChatGPT文字数上限ですが、有料プランであれば２万時でもいけるそうなので、みなさん有料プラン入りましょう。

作ったスクリプト

引数で指定したファイルの中身を出してくれるシンプルなスクリプトです

viewCode.sh

#!/bin/bash

# スクリプトの使い方を表示する関数
usage() {
  echo "Usage: $0 directory_path [file_name_part1] [file_name_part2] ..."
  echo "  directory_path: The root directory to search files from."
  echo "  file_name_part: Parts of the file name to filter files (optional, multiple allowed)."
  exit 1
}

# 引数の数をチェック
if [ "$#" -lt 1 ]; then
  usage
fi

# 引数を変数に格納
DIRECTORY=$1
shift # 最初の引数 (ディレクトリ) をシフトして、残りの引数をファイル名パーツとして扱う
FILE_NAME_PARTS=("$@")

# ディレクトリの存在確認
if [ ! -d "$DIRECTORY" ]; then
  echo "Error: Directory $DIRECTORY does not exist."
  exit 1
fi

# ファイルを再帰的に探索して表示
if [ ${#FILE_NAME_PARTS[@]} -eq 0 ]; then
  # 第二引数以降がない場合、全てのファイルを対象
  find "$DIRECTORY" -type f | while read -r file; do
    echo "[$file]"
    # ファイル内容をすべて表示
    cat "$file"
    echo
  done
else
  # 第二引数以降がある場合、ファイル名に指定文字列を含むファイルを対象
  find "$DIRECTORY" -type f | while read -r file; do
    for part in "${FILE_NAME_PARTS[@]}"; do
      if [[ "$file" == *"$part"* ]]; then
        echo "[$file]"
        # ファイル内容をすべて表示
        cat "$file"
        echo
        break
      fi
    done
  done
fi

スクリプトの内容

使い方

第一引数に対象のディレクトリ
第二引数からは対象のファイル名の一部分を指定します。

例

pages/_app.tsx
pages/detail/[id].tsx
components/detail/PrefectureDetail.tsx
components/detail/index.tsx

例えば、Next.jsでdetal/[id]にコンポーネント'PrefectureDetail'を追加したときの構成が上記だとします。この場合の実行コマンドは

./viewCode ./ _app pages/detail components/detail/index PrefectureDetail

となり実行結果が以下になります。（一部略）

出力結果

[./components/detail/index.tsx]
// components/detail/PrefectureDetail.tsx
import React from "react";
import { Card } from "react-bootstrap";

interface PrefectureDetailProps {
  id: number;
  name: string;
  population: number;
  monthlyWage?: number;
  averageAnnualIncome: number;
  assetBalance?: number;
  incomeRank: number;
  rent1Room: number;
  rent2LDK: number;
  rentRank: number;
  crimeCases: number;
  crimePerThousand: number;
  safetyRank: number;
}

// ...（略）...

[./components/detail/PrefectureDetail.tsx]
import React from "react";
import { Card, Row, Col, Container } from "react-bootstrap";
import { FaUsers, FaMoneyBillWave, FaHome, FaShieldAlt } from "react-icons/fa";

interface PrefectureDetailProps {
  name: string;
  population: number;
  monthlyWage?: number;
  averageAnnualIncome: number;
  assetBalance?: number;
  incomeRank: number;
  rent1Room: number;
  rent2LDK: number;
  rentRank: number;
  crimeCases: number;
  crimePerThousand: number;
}
// ...（略）...

[./pages/detail/[id].tsx]
// pages/detail/[id].tsx
import React from "react";
import { useRouter } from "next/router";
import PrefectureDetail from "../../components/detail/PrefectureDetail";
import Footer from "@components/layout/Footer";
import Breadcrumbs from "@components/layout/Breadcrumbs";
import SimpleHeader from "@components/layout/Header/SimpleHeader";

const DetailPage: React.FC = () => {
  const router = useRouter();
  const { id } = router.query;
// ...（略）...
};

export default DetailPage;

[./pages/_app.tsx]
import "../styles/globals.scss";
import type { AppProps } from "next/app";
import { useEffect } from "react";
// ...（略）...

出力されたソースにレビュー用のプロンプトを追加して、そのままChatGPTに投げます。

プロンプト

これからNext.js,TypeScriptのコンポーネントのソースコードを渡します。
以下のレビュー観点に沿ってレビューしてください

[レビュー観点]
	1.	コード品質
        •	可読性: 変数名、関数名がわかりやすいか
        •	一貫性: コーディングスタイルが統一されているか（例: ESLint, Prettierの使用）
        •	コメント: 必要なコメントが適切に記載されているか
	2.	TypeScript
        •	型安全: 適切に型が定義されているか
        •	インターフェース/タイプ: 明確に定義され、再利用されているか
        •	エラー処理: TypeScriptの型チェックエラーが発生していないか
    3.	Next.js
        •	ディレクトリ構造: Next.jsの規約に従っているか（pages、components、stylesなど）
        •	サーバーサイドレンダリング (SSR): 適切に使用されているか
        •	静的サイト生成 (SSG): 適切に使用されているか
	4.	パフォーマンス
        •	ページのパフォーマンス: 必要な最適化が行われているか（例: 画像の最適化、コードスプリッティング）
        •	メモリリーク: 不要なメモリ消費がないか
	5.	セキュリティ
        •	インジェクション攻撃防止: SQLインジェクション、XSSなどの攻撃対策がされているか
        •	認証/認可: 適切に実装されているか
	6.	レスポンシブデザイン
        •	デザイン: さまざまなデバイスでの表示が確認されているか（モバイルファーストのデザイン）
        •	スタイル: スタイルシートが効率的に管理されているか（CSSモジュール、Styled Componentsの使用）
	7.	アクセシビリティ
        •	アクセシビリティ: ARIA属性が適切に使用されているか
        •	キーボードナビゲーション: キーボードでの操作が可能か
	8.	テスト
        •	テストカバレッジ: 単体テスト、統合テストが適切にカバーされているか
        •	テストの質: テストが意図した動作を正確に検証しているか
	9.	依存関係管理
        •	パッケージ管理: 依存関係が適切に管理されているか（npm、yarnの使用）
        •	バージョン管理: 依存パッケージのバージョンが安定しているか
	10.	ビルドとデプロイ
        •	ビルド設定: ビルドプロセスが効率的であるか（webpack、Babelなどの設定）
        •	デプロイメント: デプロイメントプロセスが自動化されているか（CI/CDの使用）

結果

出力結果です、通常のレビューに加えて、インターフェース/タイプではコンポーネントの前後関係を配慮した、レビューが帰ってきました。コードファイル一つだけ渡すより、はるかに精度の高いレビューをしてくれます。

まとめ

コードをまとめてChatGPTに渡すことで、コンポーネントの前後の関係を配慮したレビューを返してくれました。
手動でコードをコピペする手間を省くために、スクリプトを活用することで効率的なコードレビューが可能になります。皆さんもこの方法を活用して、開発効率を高めてみてください。
またコードレビューだけではなく、プロンプトを変えればコンポーネントの追加も用意にできるので良きです。