マジックナンバーに名前を付ける

可読性

マジックナンバー(Magic Number)とは、正確な意味を説明せずにソースコードの中に直接数字の値を入れることを指します。

例えば、見つからないことを示すHTTPステータスコードとして404の値をそのまま使用することや、 1日を表す86400秒をそのまま使用することがこれに該当します。

📝 コード例

次のコードは、いいねボタンを押した時にいいねの数を新しく取得する関数です。

async function onLikeClick() {
  await postLike(url);
  await delay(300);
  await refetchPostLike();
}

👃 コードの不吉な臭いを嗅いでみる

可読性

このコードは、delay関数に渡された300という値がどのようなコンテキストで使われているのかが不明です。 元のコードを書いた開発者でなければ、300msの待機がどのような目的で行われているのかは分かりません。

• アニメーションが完了するまで待機しているのか？
• いいねを反映させるのに時間がかかって待機しているのか？
• テストコードをうっかり削除し忘れただけなのか？

複数の開発者が1つのコードを共同で修正していく中で、その意図が正確に理解できないと、コードが意図しない方向に修正される可能性があります。

INFO

この Hook は凝集度の観点からも考えることができます。

✏️ リファクタリングしてみる

数字の300というコンテキストを正確に示すために、定数のANIMATION_DELAY_MSとして宣言することができます。

const ANIMATION_DELAY_MS = 300;

async function onLikeClick() {
  await postLike(url);
  await delay(ANIMATION_DELAY_MS);
  await refetchPostLike();
}

🔍 もっと調べてみる

マジックナンバーは凝集度の観点からも考えることができます。マジックナンバーを排除するのドキュメントも参考にしてみてください。