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

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

はじめに

この記事を読めば、JavaScriptの命名規則をマスターできるようになります。

JavaScript初心者にも分かりやすく、命名規則に関するサンプルコードを10選ご紹介します。

●JavaScriptの命名規則とは

JavaScriptでプログラムを書く際に、変数や関数の名前をどのようにつけるべきかというルールのことです。

命名規則を統一することで、他の開発者とのコミュニケーションがスムーズになり、プログラムの可読性が向上します。

○基本ルール

JavaScriptの命名規則では、次の基本ルールがあります。

変数名は英字で始める（数字で始めない）
アルファベット、数字、アンダースコア(_)、ドル記号($)が使用できる
大文字と小文字は区別される

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

JavaScriptでは、変数名や関数名にはキャメルケース（camelCase）やスネークケース（snake_case）が一般的に使用されます。

キャメルケース：単語の先頭文字を大文字にし、他の文字を小文字にする。最初の単語は小文字で始める。

例：userName、getTotalPrice スネークケース：単語をアンダースコア(_)で区切り、すべての文字を小文字にする。

例：user_name、get_total_price

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

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

// 変数名はキャメルケースを使用
let userName = "Taro";
let userAge = 25;

上記のサンプルでは、変数userNameとuserAgeをキャメルケースで宣言しています。

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

// 関数名はキャメルケースを使用
function getFullName(firstName, lastName) {
  return firstName + " " + lastName;
}

上記のサンプルでは、getFullName関数をキャメルケースで宣言しています。

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

// オブジェクトのプロパティ名はキャメルケースを使用
let user = {
  firstName: "Taro",
  lastName: "Yamada",
  age: 25
};

上記のサンプルでは、オブジェクトuserのプロパティ名をキャメルケースで宣言しています。

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

// クラス名はアッパーキャメルケース（先頭も大文字）を使用
class UserModel {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

上記のサンプルでは、UserModelクラスをアッパーキャメルケースで定義しています。

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

// イベントハンドラはキャメルケースを使用し、接頭語「on」を付ける
function onButtonClick() {
  // ボタンがクリックされたときの処理
}

上記のサンプルでは、イベントハンドラonButtonClickをキャメルケースで宣言し、イベントタイプを示す接頭語「on」を付けています。

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

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

// 定数名は全て大文字で記述し、単語間はアンダースコア(_)で区切る
const API_KEY = "your_api_key";
const TIMEOUT = 5000;

上記のサンプルでは、定数API_KEYとTIMEOUTを大文字で宣言し、単語間はアンダースコアで区切っています。

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

// モジュール名はアッパーキャメルケース（先頭も大文字）を使用
class UserModule {
  // モジュール内の処理
}

上記のサンプルでは、UserModuleクラスをアッパーキャメルケースで定義しています。

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

// DOM要素を操作する変数名には、接尾語「Element」を付ける
const buttonElement = document.getElementById("submit-button");
const usernameInputElement = document.getElementById("username-input");

上記のサンプルでは、DOM要素を操作する変数buttonElementとusernameInputElementに、接尾語「Element」を付けています。

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

// jQueryオブジェクトを格納する変数名には、接頭語「$」を付ける
const $submitButton = $("#submit-button");
const $usernameInput = $("#username-input");

上記のサンプルでは、jQueryオブジェクトを格納する変数$submitButtonと$usernameInputに、接頭語「$」を付けています。

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

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

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

上記のサンプルでは、非公開メンバ（変数とメソッド）の命名にアンダースコア_を接頭語として使用しています。

●注意点と対処法

予約語の回避

JavaScriptには、言語機能のために予約されている単語があります。

これらの予約語は変数名や関数名として使用しないように注意してください。

予約語を使用すると、予期しない動作やエラーが発生することがあります。

名前の衝突

グローバル変数やグローバル関数を多用すると、名前の衝突が発生する可能性があります。

名前空間を使用するか、モジュールパターンを活用して、名前の衝突を防ぐようにしましょう。

意味のある名前の使用

変数名や関数名には、その目的や機能を明確に示す名前を付けることが重要です。

一文字の変数名や分かりにくい略語は避け、コードが読みやすくなるように心掛けましょう。

長すぎる名前の回避

名前が長すぎると、コードの可読性が低下することがあります。

適切な長さを保ちながら、名前に意味を持たせるバランスを見つけることが重要です。

コンスタントケースとキャメルケースの混在

コード内で定数と変数・関数の命名規則が混在すると、可読性が低下します。

命名規則を統一し、コード全体で一貫性を保つことが重要です。

まとめ

JavaScriptの命名規則は、コードの可読性と保守性に大きく寄与します。

この記事で紹介した命名規則や注意点を参考に、より良いコーディングスタイルを身につけましょう。

適切な命名規則を実践することで、他の開発者との協力や将来の自分がスムーズにコードを読み解くことができるようになります。