コードレビューは、ソフトウェア開発過程で重要なステップの一つです。 チームメンバー間のコミュニケーションを円滑にし、コードの品質を向上させ、バグを防止し、最適化されたソリューションを導き出すのに役立ちます。効果的なコードレビューのための10のヒントをご紹介します。

まず、コードレビューを行うには、最後まできちんと読みます。 そして、設計が確定しているかどうかを確認しながら、より柔軟にレビューを進めましょう。製造されて出てきたコードであれば、下記のように10個程度の基準を決めてコードを評価しましょう。

１. エラーや例外処理に問題はありませんか？

良いコードでは、async/awaitとtry/catchを使用して、例外処理をより明確に行っています。

悪いコード

const fetchData = () => {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      // データ処理ロジック
    })
    .catch(error => console.error('エラー発生:', error));
};

良いコード

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('サーバーレスポンスエラー');
    }
    const data = await response.json();
    // データ処理ロジック
  } catch (error) {
    console.error('エラー発生:', error);
  }
};

2. コンポーネントが正しく使用されていますか？

良いコードでは、コンポーネントに必要なpropsを明示して、正しく使用しています。

悪いコード

<MyComponent />

良いコード

<MyComponent prop1={value1} prop2={value2} />

3. 識別子の命名が適切ですか？

良いコードでは、変数や関数の名前を明確で意味のあるものにします。

悪いコード

const a = 'apple';
const b = 'banana';
const c = 'cherry';

良いコード

const fruitNames = ['apple', 'banana', 'cherry'];

4. 単数と複数の区別

良いコードでは、単数形の変数名を使用して、可読性を向上させます。

悪いコード

const usersList = [{ name: 'John' }, { name: 'Jane' }];

良いコード

const userList = [{ name: 'John' }, { name: 'Jane' }];

5. マジックナンバーの使用は原則避ける

マジックナンバーを使用すると、コードの読みやすさが低下し、メンテナンスが難しくなります。 そのため、定数を使用して意味を明確にし、コードをより理解しやすくします。

悪いコード

for (let i = 0; i < 3; i++) {
  // コード内容
}

良いコード

const MAX_ITERATIONS = 3;
for (let i = 0; i < MAX_ITERATIONS; i++) {
  // コード内容
}

6. 略語の適切性

良いコードでは、略語を使用する際にもコードの可読性を損なわない範囲で最小限に抑えます。

悪いコード

const usr = 'user';

良いコード

const user = 'user';

7. ネストの深さは適切ですか？

良いコードでは、ネストの深さを最小限に抑えて、コードの可読性を向上させます。

悪いコード

<div>
  <div>
    <div>
      コンテンツ
    </div>
  </div>
</div>

良いコード

<div className="content">
  コンテンツ
</div>

8. 関数が冗長になっていませんか？

良いコードでは、関数が一つのことに専念するようにして、可読性と保守性を高めます。

悪いコード

const fetchDataAndRenderUIAndHandleErrorsAndMore = () => {
  // 長いコード
}

良いコード

const fetchData = () => {
  // データを取得するロジック
}

const renderUI = () => {
  // UIをレンダリングするロジック
}

const handleErrors = () => {
  // エラーを処理するロジック
}

9. APIの要求や応答に問題がないこと

良いコードでは、APIリクエストとレスポンスに対する適切な処理とエラー処理を含めて安定性を確保します。

悪いコード

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // データ処理ロジック
  })
  .catch(error => {
    console.error('エラー発生:', error);
  });

良いコード

try {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('サーバー応答エラー');
  }
  const data = await response.json();
  // データ処理ロジック
} catch (error) {
  console.error('エラー発生:', error);
}

10. 共通化できるところを探す

コードで似たような機能が見つかった場合、その機能を共通化してコードの重複を減らします。 これにより、メンテナンスが容易になり、コードのまとまりが増えます。

悪いコード

const calculateArea = (radius: number) => {
  return Math.PI * radius * radius;
};

const calculateVolume = (radius: number, height: number) => {
  return calculateArea(radius) * height;
};

良いコード

const calculateArea = (radius: number) => {
  return Math.PI * radius * radius;
};

const calculateVolume = (radius: number, height: number) => {
  return calculateArea(radius) * height;
};

コードレビューでよく使う項目10個をみてみましょう。本当に必要な3つを挙げるなら、私はエラーハンドリング、関数分割、関数共用、この3つを挙げたいと思います。 この程度さえうまくやれば、かなりセンスあるコードが作れると思います。

向上心のエンジニア
ソンさん