レビュー観点を定義してコードをレビューしてもらう

最終更新日時

Dec 6, 2024 8:53 AM

ツール

ChatGPTGitHub Copilot

利用シーン

実装/コードレビュー

GitHub Copilot
ChatGPT

レビュー観点を定義することで、より効果的なレビューを期待することができます。

‣

GitHub Copilot

‣

ChatGPT

質問例

あなたは優秀なプログラマーです。
以下の制約に従いレビューしてください。

# 要件
- Next.js v13 / TypeScript v5 で記述している
- Next.jsでボタンをクリックしたら画像を選択してブラウザに表示する

# 制約
- モダンでシンプルな記述にすること
- KISSの原則を守ること
- 複雑な処理を避けるために高階関数は使用できることとする
- リーダブルなコードにすること
- メソッドは動詞始まりにすること
- メソッドの責務は小さく分割すること
- 単一責任の原則を守ること
- 命名は言語に則り適切に行うこと
- 条件分岐は早期returnなどを使ってネストを浅くすること
- 多重ループ処理を極力避けるロジックにすること
- オニオンアーキテクチャに則り各レイヤーの責務を適切にすること
- 知識はdomainレイヤーへ集約すること
- テスタビリティであること
- マジックナンバーは使わないようにすること
- letなどのミュータブルな変数は使用しないこと
  - ミュータブルな変数を避けるために即時関数は使用可能とする

# コード
import { NextPage } from 'next';
import React, { useState } from 'react';

const IndexPage: NextPage = () => {
  const [image, setImage] = useState<string | undefined>(undefined);

  const onChangeImage = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = () => {
      setImage(reader.result as string);
    };
    reader.readAsDataURL(file);
  };

  return (
    <div>
      <input type="file" onChange={onChangeImage} />
      {image && <img src={image} />}
    </div>
  );
};

export default IndexPage;

アウトプット例

このコードは、Next.js v13 と TypeScript v5 を使用して、ユーザーが画像ファイルを選択し、選択した画像をブラウザに表示する機能を提供しています。全体的にシンプルで読みやすいコードですが、提出された要件と制約に基づいて、いくつかの改善点を提案します。
改善提案
関数コンポーネントの型定義の改善
NextPage 型は使用していますが、コンポーネントのpropsに型を指定する必要がある場合を除き、通常の関数コンポーネントとしても十分です。この場合、propsを受け取らないので、NextPage の使用は適切です。
即時関数の使用
このコードではミュータブルな変数を避けており、即時関数の使用は見受けられませんが、FileReader の処理を即時関数でラップする必要もありません。現在の方法はシンプルで読みやすく、KISS原則に従っています。
マジックナンバーの回避
提示されたコードにはマジックナンバーは使用されていません。ファイル選択や画像表示に関わる数値や定数は導入されていないため、この点は問題ありません。
命名規則の遵守
onChangeImage は動詞始まりで、メソッドの責務を適切に表しています。変数名も直感的に理解しやすいものが選ばれており、良い実践例です。
早期リターンの使用
onChangeImage 関数では、ファイルが存在しない場合に早期リターンを使用しています。これにより、ネストが深くなることを防ぎ、コードの可読性を高めています。
テスタビリティ
現在のコード構造では、テストのしやすさについて特に問題はありません。ただし、より大規模なアプリケーションでは、ファイル読み込みのロジックを別の関数やカスタムフックに分割することで、テストがしやすくなる可能性があります。
オニオンアーキテクチャとドメイン知識の集約
提示されたコードは比較的単純で、オニオンアーキテクチャの各レイヤーの責務を分離するほど複雑ではありません。しかし、アプリケーションが成長するにつれ、ビジネスロジックやドメイン知識をドメインレイヤーに集約し、プレゼンテーションロジックと分離することが重要になります。
総評
提示されたコードは、要件と制約に基づいて十分にシンプルで効果的です。提案した改善点は、コードのさらなる成長や、より大きなアプリケーションへの応用を見据えたものです。現状のコードは、モダンなフロントエンド開発のベストプラクティスを遵守しており、読みやすく、拡張しやすい
良い出発点になっています。

リンクは準備中

参考：ChatGPTとCopilotに要件だけ伝えて自動コーディングしてもらう(AIペアプロ)

レビュー観点を定義してコードをレビューしてもらう

GitHub Copilot

手順

プロンプト

ChatGPT

質問例

アウトプット例

改善提案

総評