JavaScriptで関数・クラスの命名規則をわかりやすく解説！初心者向けポイントと注意点

1. JavaScriptの関数命名規則とは？

1. JavaScriptの関数命名規則とは？

JavaScriptで関数を作るときは、キャメルケースを使うのが基本です。キャメルケースとは、単語の先頭は小文字で、二つ目以降の単語の先頭は大文字にする書き方です。

function calculateSum(a, b) {
  return a + b;
}

function showMessage(message) {
  console.log(message);
}

このようにcalculateSumやshowMessageのように、単語の区切りを大文字で表現します。これにより、関数の名前だけで何をする関数かがわかりやすくなります。

2. クラス命名規則はパスカルケース

2. クラス命名規則はパスカルケース

クラスを作るときは、関数とは少し違い、パスカルケースを使います。パスカルケースとは、すべての単語の先頭を大文字にする書き方です。

class UserAccount {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("こんにちは、" + this.name);
  }
}

クラス名を大文字で始めると、関数と区別しやすく、オブジェクト指向のコードが理解しやすくなります。

3. 変数名と関数名の一貫性を意識する

3. 変数名と関数名の一貫性を意識する

関数やクラスだけでなく、変数名も同じルールを意識するとコード全体が見やすくなります。例えば、関数がcalculateSumなら、関連する変数はtotalAmountやsumValueのようにキャメルケースで統一します。

let totalAmount = 100;
let sumValue = calculateSum(50, 50);

こうすることで、コードを読んだ人が一目で変数と関数の関係を理解できます。

4. 名前に意味を持たせる

4. 名前に意味を持たせる

関数やクラスの名前は、できるだけ何をするのかがわかる名前にしましょう。例えば、doSomethingやtempのような名前は避け、calculateTotalPriceやUserAccountのように意味を持たせることが大切です。

function calculateTotalPrice(items) {
  let total = 0;
  for (let item of items) {
    total += item.price;
  }
  return total;
}

こうすると、名前を見るだけで処理の内容がわかるので、チーム開発や後から自分が見直すときに便利です。

5. 命名で避けるべきこと

5. 命名で避けるべきこと

名前を付けるときは、数字だけの名前や意味のない短い名前は避けましょう。また、JavaScriptの予約語（classやfunctionなど）を使うのもエラーの原因になります。

let a = 10; // 悪い例
function b() {} // 悪い例

let userAge = 25; // 良い例
function calculateAge(birthYear) {} // 良い例

分かりやすく意味を持たせた名前を使うことが大切です。

6. アンダースコアやハイフンの使い方

6. アンダースコアやハイフンの使い方

JavaScriptでは関数やクラスの名前に-（ハイフン）は使えません。代わりに_（アンダースコア）を使うことがありますが、最近の書き方ではキャメルケースやパスカルケースを使う方が主流です。

let user_name = "太郎"; // 使えるがあまり推奨されない
let userName = "太郎"; // 推奨される書き方

ハイフンを使うとエラーになるので、必ずキャメルケースやパスカルケースを意識しましょう。

7. 関数やクラスの命名で覚えておきたいポイントまとめ

7. 関数やクラスの命名で覚えておきたいポイントまとめ

• 関数は小文字で始めるキャメルケース
• クラスは大文字で始めるパスカルケース
• 名前には処理の意味を持たせる
• 変数名と一貫性を持たせる
• 予約語や意味のない短い名前は避ける
• ハイフンは使わず、必要ならアンダースコアやキャメルケースを使う

// 関数とクラスの例
function calculateDiscount(price, rate) {
  return price * rate / 100;
}

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  showInfo() {
    console.log(this.name + "の価格は" + this.price + "円です。");
  }
}

このようにルールを守ることで、初心者でも読みやすく、エラーを減らせるコードが書けます。

8. 実際に命名規則を意識してコードを書いてみよう

8. 実際に命名規則を意識してコードを書いてみよう

ここまでのポイントを踏まえて、簡単な関数とクラスを作ってみます。

// 関数
function calculateArea(width, height) {
  return width * height;
}

// クラス
class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  area() {
    return calculateArea(this.width, this.height);
  }
}

const rect = new Rectangle(10, 5);
console.log(rect.area()); // 50

関数とクラスの名前が意味を持っているので、処理内容がすぐに理解できます。

まとめ

まとめ

今回の記事では、JavaScriptで関数やクラスを作成する際の命名規則について詳しく解説しました。まず、関数は小文字で始めるキャメルケースを用いることが基本であり、複数の単語を組み合わせる場合は、単語の先頭を大文字にすることで可読性を高めることができます。例えば、calculateSumやshowMessageといった名前は、何を行う関数かが名前から直感的に理解できるため、チーム開発や将来的なコードメンテナンスにおいて非常に有効です。
次に、クラスではパスカルケースを使用し、全ての単語の先頭を大文字にすることで関数と明確に区別できます。UserAccountやRectangleのようにクラス名を大文字で始めることで、オブジェクト指向の概念をコード上で表現しやすくなります。さらに、変数名や関数名の一貫性を保つことも重要です。関数がキャメルケースであれば、関連する変数もキャメルケースで統一することで、コード全体の可読性と理解のしやすさが格段に向上します。
また、命名の際には意味を持たせることが大切です。doSomethingやtempのような曖昧な名前は避け、処理内容を明確に表す名前を付けることが望ましいです。例としては、calculateTotalPriceやshowInfoなどがあります。これにより、コードを見ただけでどのような処理を行っているか把握でき、後から見直す際の時間を大幅に短縮できます。
さらに、JavaScriptの予約語を避けること、数字だけの名前や意味のない短い名前を避けること、そしてハイフンを使わずキャメルケースやパスカルケースを意識することもポイントです。近年のJavaScriptではアンダースコアの使用は控えめで、可読性を重視したキャメルケースやパスカルケースが推奨されています。
実際のコード例として、関数calculateDiscountやクラスProduct、Rectangleを用いました。これらは命名規則を意識しており、関数やクラスの役割がすぐに理解できる構造になっています。また、コードを書きながら命名規則を意識することで、初めてJavaScriptを学ぶ人でもエラーを減らしつつ、読みやすいコードを作成することが可能です。

 // 関数 function calculateArea(width, height) { return width * height; }
// クラス
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}

area() {
return calculateArea(this.width, this.height);
}
}

const rect = new Rectangle(10, 5);
console.log(rect.area()); // 50