【JavaScript】メンバ変数・クラス変数・インスタンス変数とは？違いなどを解説！

JavaScriptのクラスにはメンバ変数・クラス変数・インスタンス変数という用語が登場します。

この記事では、各用語の違いや特徴を図やシンプルなサンプルコードを用いてわかりやすく解説します。

メンバ変数とは

メンバ変数は、クラスやそのインスタンスが持っている変数の総称です。主に以下の2種類に分類されます。

• クラス変数
  • クラスに属し、全インスタンス間で値を共有する変数。
• インスタンス変数
  • インスタンスに属し、各インスタンスごとに異なる値を持つ変数。

クラス変数とは

クラス変数は、クラスに属し、全インスタンス間で値を共有する変数です。

• 定義方法
  • staticキーワードを使って定義します。
• アクセス方法
  • クラス名.クラス変数でアクセスします。

サンプルコードを以下に示します。

class User {
  // クラス変数（全インスタンスで値を共有する）
  static totalUsers = 0;

  constructor(name) {
    this.name = name;
    User.totalUsers += 1; // インスタンス生成時にクラス変数を1増やす
  }

  // クラス変数を参照するメソッド
  static getTotalUsers() {
    return User.totalUsers;
  }
}

let user1 = new User('Alice');
console.log(User.totalUsers); // 出力: 1
console.log(User.getTotalUsers()); // 出力: 1

let user2 = new User('Bob');
console.log(User.totalUsers); // 出力: 2
console.log(User.getTotalUsers()); // 出力: 2

上記のサンプルコードにおいて、totalUsersはクラス変数であり、Userクラスに属しています。

このクラス変数は全インスタンスで共有され、User.totalUsersのようにクラス名を通じてアクセスします。

インスタンス変数とは

インスタンス変数は、インスタンスに属し、各インスタンスごとに異なる値を持つ変数です。

• 定義方法
  • コンストラクタ関数内でthisを使って定義します。
• アクセス方法
  • クラス内ではthis.インスタンス変数でアクセスします。
  • クラス外ではインスタンス名.インスタンス変数でアクセスします。

サンプルコードを以下に示します。

class User {
  constructor(name, age) {
    // インスタンス変数 (各インスタンスごとに異なる値を持つ)
    this.name = name;
    this.age = age;
  }

  getUserInfo() {
    return `名前: ${this.name}, 年齢: ${this.age}`;
  }
}

let user1 = new User('Alice', 25);
let user2 = new User('Bob', 30);

console.log(user1.name); // Alice
console.log(user2.name); // Bob
console.log(user1.getUserInfo()); // 出力: 名前: Alice, 年齢: 25
console.log(user2.getUserInfo()); // 出力: 名前: Bob, 年齢: 30

上記のサンプルコードにおいて、nameとageはインスタンス変数であり、各インスタンス（user1, user2）に属しています。

このインスタンス変数は各インスタンスごとに異なる値を持ち、クラス内ではthis.nameのようにthisを使ってアクセスします。クラス外ではuser1.nameのようにインスタンス名を通じてアクセスします。

本記事のまとめ

この記事ではメンバ変数・クラス変数・インスタンス変数について、以下の内容を説明しました。

• メンバ変数
  • クラスやそのインスタンスが持っている変数の総称。
• クラス変数
  • クラスに属し、全インスタンス間で値を共有する変数。
  • staticキーワードを使用して定義する。
  • クラス名.クラス変数でアクセスする（例: User.totalUsers）。
• インスタンス変数
  • インスタンスに属し、各インスタンスごとに異なる値を持つ変数。
  • コンストラクタ関数内でthisを使って定義する。
  • クラス内ではthis.インスタンス変数でアクセスする（例: this.name）。
  • クラス外ではインスタンス名.インスタンス変数でアクセスする（例: user1.name）。

お読み頂きありがとうございました。