JavaScriptの命名規則マスター！初心者が分かる10選サンプルコード解説

はじめに
●JavaScriptの命名規則とは
- ○基本ルール
- ○キャメルケースとスネークケース
●JavaScript命名規則のサンプルコード1-5
●JavaScript命名規則のサンプルコード6-10
●注意点と対処法
まとめ

はじめに

JavaScriptの命名規則をマスターすることで、プログラミングスキルが大きく向上します。

この記事では、JavaScript初心者の方々にも理解しやすいよう、命名規則に関する10個のサンプルコードを詳しく解説します。

例を通じて、効果的な変数名や関数名の付け方を学びましょう。

●JavaScriptの命名規則とは

プログラミングにおいて、変数や関数に適切な名前を付けることは非常に重要です。

JavaScriptの命名規則とは、コード内で使用する識別子（変数名、関数名、クラス名など）をどのように命名するかを定めたガイドラインのことです。

適切な命名規則を採用することで、コードの可読性が向上し、他の開発者との協力もスムーズになります。

○基本ルール

JavaScriptにおける命名規則の基本的なルールをいくつか紹介します。

このルールを守ることで、エラーを防ぎ、コードの品質を高めることができます。

変数名は必ず英字で始めましょう。数字で始めると、エラーの原因となります。
使用できる文字は、アルファベット、数字、アンダースコア(_)、ドル記号($)に限られます。
JavaScriptは大文字と小文字を区別します。例えば、myVariableとmyvariableは異なる変数として扱われます。

○キャメルケースとスネークケース

JavaScriptでは、主にキャメルケース（camelCase）とスネークケース（snake_case）という2つの命名スタイルが使われます。

キャメルケース -> 複数の単語を連結する際、2番目以降の単語の先頭を大文字にします。最初の単語は小文字で始めます。
例：userName、getTotalPrice

スネークケース -> 単語と単語の間をアンダースコア(_)で区切り、全ての文字を小文字にします。
例：user_name、get_total_price

●JavaScript命名規則のサンプルコード1-5

ここからは、具体的なサンプルコードを通じて、JavaScriptの命名規則の実践的な使い方を見ていきましょう。

○サンプルコード1：変数宣言

変数を宣言する際は、その変数が何を表すのかを明確に示す名前を付けることが重要です。

次の例では、ユーザーの名前と年齢を表す変数をキャメルケースで宣言しています。

let userName = "Taro";
let userAge = 25;

このように命名することで、変数の役割が一目で分かり、コードの可読性が向上します。

○サンプルコード2：関数宣言

関数名は、その関数が何を行うのかを端的に表現するものにしましょう。

次の例では、フルネームを取得する関数をキャメルケースで宣言しています。

function getFullName(firstName, lastName) {
  return firstName + " " + lastName;
}

この関数名getFullNameから、姓と名を組み合わせてフルネームを返す機能だということが即座に理解できます。

○サンプルコード3：オブジェクトのプロパティ

オブジェクトのプロパティ名もキャメルケースを使用するのが一般的です。

次の例では、ユーザー情報を含むオブジェクトを作成しています。

let user = {
  firstName: "Taro",
  lastName: "Yamada",
  age: 25
};

このように命名することで、オブジェクトの構造が分かりやすくなり、プロパティへのアクセスも直感的に行えます。

○サンプルコード4：クラス定義

クラス名は、通常アッパーキャメルケース（パスカルケース）を使用します。

これは最初の文字も大文字にする方式です。

次の例では、ユーザーモデルを表すクラスを定義しています。

class UserModel {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

クラス名をUserModelとすることで、このクラスがユーザー関連のデータモデルを表していることが明確になります。

○サンプルコード5：イベントハンドラ

イベントハンドラの命名には、一般的に接頭辞「on」を付け、その後にイベントの種類を示す単語を続けます。

次の例では、ボタンクリック時の処理を行う関数を定義しています。

function onButtonClick() {
  // ボタンがクリックされたときの処理
}

この命名規則を採用することで、関数がイベントハンドラであることが即座に理解でき、コードの意図が明確になります。

●JavaScript命名規則のサンプルコード6-10

引き続き、より高度な命名規則のサンプルコードを見ていきましょう。

この例を通じて、様々な状況での適切な命名方法を学びます。

○サンプルコード6：定数宣言

定数は、プログラム全体を通じて値が変わらない変数を表します。

JavaScriptでは、定数名を全て大文字で記述し、複数の単語を使用する場合はアンダースコア(_)で区切るのが慣例です。

const API_KEY = "your_api_key";
const TIMEOUT = 5000;

このような命名方法を採用することで、定数であることが一目で分かり、誤って値を変更しようとするミスを防ぐことができます。

○サンプルコード7：モジュール名

モジュールは関連する機能をまとめたコードの集まりです。

モジュール名には通常、アッパーキャメルケースを使用します。

次の例では、ユーザー関連の機能をまとめたモジュールを定義しています。

class UserModule {
  // モジュール内の処理
}

このように命名することで、コードの構造が明確になり、モジュール間の関係性も理解しやすくなります。

○サンプルコード8：DOM要素操作

DOM（Document Object Model）要素を操作する変数名には、その要素の種類を示す接尾辞を付けるのが一般的です。以下の例では、ボタンと入力フィールドの要素を取得しています。

const buttonElement = document.getElementById("submit-button");
const usernameInputElement = document.getElementById("username-input");

この命名規則を採用することで、変数が DOM 要素を参照していることが明確になり、コードの意図が伝わりやすくなります。

○サンプルコード9：jQueryにおける命名規則

jQueryを使用する場合、jQueryオブジェクトを格納する変数名の先頭に「$」記号を付けるのが慣例です。

これにより、通常のJavaScript変数とjQueryオブジェクトを区別しやすくなります。

const $submitButton = $("#submit-button");
const $usernameInput = $("#username-input");

この命名規則を使うことで、コード内でjQueryを使用している箇所が一目で分かり、保守性が向上します。

○サンプルコード10：非公開メンバの命名

JavaScriptにはプライベートメンバを直接サポートする機能がありませんが、慣例として非公開のプロパティやメソッドの名前の先頭にアンダースコア(_)を付けることがあります。

class PrivateMemberExample {
  constructor() {
    this._privateVar = "private value";
  }

  _privateMethod() {
    // 非公開メソッドの処理
  }
}

この命名規則を採用することで、クラス外部からアクセスすべきでないメンバを明示的に示すことができます。

ただし、技術的には外部からアクセス可能なので、完全な隠蔽ではありません。

●注意点と対処法

JavaScriptの命名規則を適切に使用するためには、いくつかの注意点があります。

これを意識することで、より質の高いコードを書くことができます。

予約語の回避 -> JavaScriptにはif、for、whileなどの予約語があります。これらの単語は変数名や関数名として使用できません。予約語を使用しようとすると、構文エラーが発生しますので、注意が必要です。
名前の衝突 -> グローバルスコープで変数や関数を定義すると、名前の衝突が起こる可能性があります。これを避けるために、名前空間を使用したり、即時関数（IIFE）でスコープを限定したりする方法があります。
意味のある名前の使用 -> 変数名や関数名は、その目的や機能を適切に表現するものを選びましょう。例えば、xやtempのような意味の薄い名前ではなく、userCountやcalculateTotalのような具体的な名前を使用することで、コードの意図が明確になります。
長すぎる名前の回避 -> 名前が長すぎると、コードの可読性が低下する場合があります。適度な長さを保ちつつ、必要な情報を含める工夫が必要です。例えば、veryLongVariableNameForUserInputよりもuserInputのほうが適切でしょう。
コンスタントケースとキャメルケースの混在 -> 定数にはコンスタントケース（全て大文字）、変数や関数にはキャメルケースを使用するなど、一貫性のある命名規則を採用しましょう。これにより、コードの可読性と保守性が向上します。