【10分でざっくり!】コードレビューのTop10項目
コードレビューは、ソフトウェア開発過程で重要なステップの一つです。 チームメンバー間のコミュニケーションを円滑にし、コードの品質を向上させ、バグを防止し、最適化されたソリューションを導き出すのに役立ちます。効果的なコードレビューのための10のヒントをご紹介します。
まず、コードレビューを行うには、最後まできちんと読みます。 そして、設計が確定しているかどうかを確認しながら、より柔軟にレビューを進めましょう。製造されて出てきたコードであれば、下記のように10個程度の基準を決めてコードを評価しましょう。
1. エラーや例外処理に問題はありませんか?
良いコードでは、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つを挙げたいと思います。 この程度さえうまくやれば、かなりセンスあるコードが作れると思います。
向上心のエンジニア
ソンさん
この記事が気に入ったらサポートをしてみませんか?