【初心者向け】JavaScript ES6でクラス内部を隠蔽！プライベートプロパティの使い方

JavaScript ES6 クラスにおけるプライベートプロパティ

ES6 から、クラス内部でのみアクセス可能な プライベートプロパティ を定義できるようになりました。これは、カプセル化を強化し、コードの読みやすさと保守性を向上させるのに役立ちます。

記法

プライベートプロパティは、ハッシュ記号 (#) を接頭辞として名前を付けて宣言します。

class Person {
  #name; // プライベートプロパティ

  constructor(name) {
    this.#name = name;
  }

  getName() {
    return this.#name;
  }
}

注意点

• プライベートプロパティは、クラス内部からのみアクセス可能です。外部からは一切アクセスできません。
• プライベートプロパティは、サブクラスからも継承されません。
• プライベートプロパティは、動的に生成することはできません。クラス定義時にのみ宣言する必要があります。

利点

• コードのカプセル化を強化し、内部実装の詳細を隠すことができます。
• コードの読みやすさと保守性を向上させることができます。
• 意図せぬプロパティの書き換えを防ぎ、プログラムの安定性を向上させることができます。

例

以下の例では、Person クラスの #name プロパティはプライベートプロパティとして宣言されています。このプロパティは、getName メソッドからのみアクセスできます。

class Person {
  #name;

  constructor(name) {
    this.#name = name;
  }

  getName() {
    return this.#name;
  }
}

const person = new Person('田中');
console.log(person.getName()); // 田中
console.log(person.#name); // エラー: #name はプライベートです

代替手段

プライベートプロパティがサポートされていない環境では、以下の代替手段を使用できます。

• アンダースコア記法 : 非公式な慣習として、プライベートプロパティにはアンダースコア (_) を接頭辞として付けることがあります。ただし、これは単なる規約であり、厳格な区別ではありません。
• シンボル : シンボルを使用して、プライベートプロパティを一意に識別できます。ただし、シンボルは、古いブラウザではサポートされていない場合があります。

ES6 のプライベートプロパティは、コードのカプセル化を強化し、コードの読みやすさと保守性を向上させる強力なツールです。新しいプロジェクトでは積極的に活用することを検討しましょう。

サンプルコード：プライベートプロパティとgetter/setter

class Person {
  #name;

  constructor(name) {
    this.#name = name;
  }

  getName() {
    return this.#name;
  }

  setName(newName) {
    this.#name = newName;
  }
}

const person = new Person('田中');
console.log(person.getName()); // 田中

person.setName('佐藤');
console.log(person.getName()); // 佐藤

解説

• #name プロパティはプライベートプロパティとして宣言されています。
• getName メソッドは、#name プロパティの値を取得します。
• メソッドを使用して、プライベートプロパティへのアクセスと変更をカプセル化することで、コードの可読性と保守性を向上させることができます。

getter/setterの利点

• プロパティのアクセスと変更を制御できます。
• プロパティの値に検証処理を施すことができます。
• プロパティの変更をログ記録するなどの処理を実行できます。

この例は、プライベートプロパティとgetter/setterを使用して、コードのカプセル化と可読性を向上させる方法を示しています。

• パスワードの保存: パスワードを安全に保存するために、プライベートプロパティとgetter/setterを使用できます。getter メソッドはパスワードを返しますが、setter メソッドはパスワードをハッシュ化してから保存します。
• データの検証: プロパティの値が有効な範囲内にあることを確認するために、setter メソッドで検証処理を実行できます。
• イベントのトリガー: プロパティの値が変更されたときにイベントをトリガーするために、setter メソッドでイベントリスナーを呼び出すことができます。

プライベートプロパティとgetter/setterは、JavaScript で強力なカプセル化とデータアクセス制御を実現するための強力なツールです。これらの機能を積極的に活用することで、コードの読みやすさ、保守性、セキュリティを向上させることができます。

JavaScript ES6 クラスでプライベートプロパティを定義する代替方法

代替方法

1. アンダースコア記法

非公式な慣習として、プライベートプロパティにはアンダースコア (_) を接頭辞として付けることがあります。これは、シンプルで分かりやすい方法ですが、厳密な区別ではなく、規約に依存するという点に注意が必要です。

class Person {
  _name; // プライベートプロパティを想定

  constructor(name) {
    this._name = name;
  }

  getName() {
    return this._name;
  }
}

1. シンボル

const _name = Symbol(); // プライベートプロパティを表すシンボル

class Person {
  constructor(name) {
    this[_name] = name;
  }

  getName() {
    return this[_name];
  }
}

1. WeakMap

WeakMapを使用して、プライベートプロパティをインスタンスごとに保持できます。WeakMapは、ガベージコレクションの対象となるため、注意が必要です。

const privatePropertyMap = new WeakMap();

class Person {
  constructor(name) {
    privatePropertyMap.set(this, { name });
  }

  getName() {
    return privatePropertyMap.get(this).name;
  }
}

それぞれの方法の比較

ES6の公式な記法が最も推奨されますが、状況によっては上記の代替方法も検討することができます。いずれの方法を選択する場合も、それぞれの長所と短所を理解し、適切に使用するようにしましょう。