BLOG

ブログ

3分で命名力アップ!分かりやすい変数名の付け方

コードを書く上で、変数や関数の命名に迷ったことはありませんか?

個人的にはロジック的可読性の担保よりも重要な要素だと感じており、命名だけで数十分使うくらいには悩みます。

命名が適当だと可読性が下がり、後々の工程で大変な思いをすることにも繋がるので日頃から意識できるようになりたいですね

命名規則の重要性

可読性の向上

悪い例(意味が曖昧)

function fn(d) {
  return d * 2;
}

const r = fn(10);
console.log(r); // 20

👆 何をする関数なのか、変数 dr が何を表すのかが分かりにくいですね。

良い例(意味のある命名)

function doubleValue(number) {
  return number * 2;
}

const result = doubleValue(10);
console.log(result); // 20

👆 doubleValue という関数名で「値を2倍にする」ことがより明確に伝わりますね。
また、変数 numberresult も意味が分かりやすいです。

もちろんプロダクト的な仕様や前後の内容によって変化させることもありますが、他人や未来の自分が見て理解できる命名にしましょう

メンテナンス性の向上

悪い例(意図が分かりにくく、修正しづらい)

function update(d) {
  if (d < 10) {
    console.log("OK");
  } else {
    console.log("NG");
  }
}

👆 変数 d が何を表すのか分からず、条件の 10 もどこから来た数字なのか不明瞭です。
後から修正しようとしても、何を基準にしているのか不明で困っちまうわけですね。

良い例(意図が明確で、後から修正しやすい)

function updateStock(quantity) {
  const MAX_STOCK = 10; // 在庫の上限

  if (quantity < MAX_STOCK) {
    console.log("在庫は十分です");
  } else {
    console.log("在庫が不足しています");
  }
}

👆 変数 quantityMAX_STOCK の命名で、何をチェックしているのか明確ですね。
後からMAX_STOCKの値を変えるだけで調整できるのでロジックの修正としても楽になります。

バグの防止

悪い例(曖昧な命名でバグの原因に)

const limit = 5;

function check(limit) {
  return limit > 10;
}

console.log(check(limit)); // false

👆 変数 limit グローバルに使用したい「制限値」なのか、関数の「しきい値」なのか が不明瞭です。
意図せず limit が上書きされ、バグの原因になる可能性があります。

良い例(明確な命名でバグを防ぐ)

const maxItems = 5;

function isOverThreshold(value) {
  const THRESHOLD = 10;
  return value > THRESHOLD;
}

console.log(isOverThreshold(maxItems)); // false

👆 maxItems 「最大のアイテム数」 だと明確に分かります。
また、isOverThreshold という関数名で 「しきい値を超えているか?」 という意図が明確になるので、バグを防ぎやすくなるかと思います。

命名のベストプラクティス

意味のある単語を使う

悪い例(曖昧な命名の関数・変数)

const data = getData();  
console.log(data);

const list = fetchList();
console.log(list);

const info = findInfo();
console.log(info);

👆 「どんなデータ?」「何のリスト?」「どんな情報?」といったことが分からず、可読性が低くなっています。

良い例(関数名・変数名ともに具体的に)

const users = fetchUsers();  
console.log(users);

const cartProducts = fetchCartProducts();
console.log(cartProducts);

const userProfile = fetchUserProfile();
console.log(userProfile);

👆 fetchUsers() は「ユーザーを取得する関数」
fetchCartProducts() は「カートの商品を取得する関数」 であることが一目で分かります。
変数名も 具体的なデータ内容を示す名前 になっているので、可読性・保守性が向上していますね。

「list」、「data」、「info」あたりはそもそも抽象的な単語であるため個人的に避けたいなと思っています。

否定形より肯定形を使う

悪い例(否定形を使っていて分かりにくい)

if (!isNotEnabled) {
  submitForm();
}

const canAccess = !isNotRestricted;

👆 !isNotEnabled のような 二重否定 は直感的に理解しづらく、ミスを誘発しやすいですね。
isNotRestricted も、「結局アクセスできるのか?」が一瞬で判断しにくいです。

良い例(肯定形を使って分かりやすく)

if (isEnabled) {
  submitForm();
}

const isAccessible = isAuthorized;

👆 isEnabled にすることで、「有効なら実行する」と 素直に読めます。
isAuthorized も、「認可されているならアクセス可能」と明確になりました。

まとめ

  • 命名は可読性・メンテナンス性・バグ防止に直結する
  • 曖昧な単語や否定形を避け、意味が伝わる名前をつける
  • 一貫性を持たせることで、チーム開発でも理解しやすい

「名前を見ただけで役割が分かるか?」を意識して命名しましょう!

RELATED ARTICLE