パブリックとプライベートのクラスフィールド

CoddyのJavaScriptジャーニー「オブジェクト指向プログラミング」セクションの一部 — レッスン 18/56。

JavaScriptのクラスでは、パブリック（public）とプライベート（private）の2種類のクラスフィールドを定義できます。

パブリックフィールドはクラスの外部からアクセス可能で、誰でも使用できます。

パブリックフィールドを持つクラスを作成します：

class Student {
  name = '';
  grade = 0;
  
  constructor(name, grade) {
    this.name = name;
    this.grade = grade;
  }
}

学生のインスタンスを作成します：

const student = new Student('Alice', 95);

クラスの外からパブリックフィールドにアクセスする:

console.log(student.name); // 出力: "Alice"
student.grade = 98;
console.log(student.grade); // 出力: 98

プライベートフィールドは # 記号で表され、クラス内からのみアクセスできます：

class Student {
  name = '';
  #grade = 0;
  
  constructor(name, grade) {
    this.name = name;
    this.#grade = grade;
  }
  
  getGrade() {
    return this.#grade;
  }
  
  updateGrade(newGrade) {
    this.#grade = newGrade;
  }
}

プライベートフィールドの使用:

const student = new Student('Bob', 87);
console.log(student.name); // 出力: "Bob"

// メソッドを使用してプライベートフィールドにアクセスする
console.log(student.getGrade()); // 出力: 87

// メソッドを使用してプライベートフィールドを更新する
student.updateGrade(92);
console.log(student.getGrade()); // 出力: 92

// これはエラーを引き起こします:
// console.log(student.#grade); // SyntaxError

チャレンジ

UserAccount という名前のクラスに2つのフィールドを追加します：
1. 公開フィールド username
2. 非公開フィールド #password
username と password パラメータを受け取る constructor を追加します

チートシート

JavaScriptのクラスは、パブリックフィールドとプライベートフィールドをサポートしています。

パブリックフィールドは、クラスの外部からアクセス可能です：

class Student {
  name = '';
  grade = 0;
  
  constructor(name, grade) {
    this.name = name;
    this.grade = grade;
  }
}

const student = new Student('Alice', 95);
console.log(student.name); // 出力: "Alice"
student.grade = 98;

プライベートフィールドは # 記号を使用し、クラス内からのみアクセスできます：

class Student {
  name = '';
  #grade = 0;
  
  constructor(name, grade) {
    this.name = name;
    this.#grade = grade;
  }
  
  getGrade() {
    return this.#grade;
  }
  
  updateGrade(newGrade) {
    this.#grade = newGrade;
  }
}

const student = new Student('Bob', 87);
console.log(student.getGrade()); // 出力: 87
student.updateGrade(92);
// student.#grade は SyntaxError を発生させます

自分で試してみよう

import { UserAccount } from './userAccount.js';

// テストコード - 変更しないでください
const user = new UserAccount("alice", "secret123");
console.log(user.username);          // "alice" と出力されるはずです