0Pricing
JavaScript Academy · レッスン

クラスフィールド、privateな#フィールド、staticメンバー

publicフィールドを持つクラスを作り、privateな#フィールドでデータを隠し、staticプロパティやメソッドを追加します。

「クラスフィールド、privateな#フィールド、staticメンバー」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。

クラスを使う理由

目標:小さく明確なクラスを作ります。

  • パブリックフィールドとメソッド
  • 状態を隠す#privateフィールド
  • クラスレベルのヘルパーに使うstaticプロパティとメソッド
  • 例は小さく読みやすく保ちます
クラスフィールド、privateな#フィールド、staticメンバー — イラスト1

パブリックフィールドとコンストラクター

パブリックフィールドと小さなメソッドを持つクラスを作ります。初心者向けに、ロジックはシンプルに保ちます。

// Public fields and a simple method
class Counter {
  // public field with default
  value = 0;

  constructor(start) {
    // use a default if start is not provided
    this.value = Number.isFinite(start) ? start : 0;
  }

  inc() {
    this.value = this.value + 1;
  }
}

const c1 = new Counter(2);
c1.inc();
console.log("value:", c1.value); // 3
クラスフィールド、privateな#フィールド、staticメンバー — イラスト2

プライベート#フィールド

#privateフィールドは言語によって強制され、クラス本体の内部でのみ使用できます。必要に応じて、読み取り用メソッドを公開します。

// Private # fields hide internal state
class SafeCounter {
  // private field (only inside the class)
  #value = 0;

  constructor(start) {
    this.#value = Number.isFinite(start) ? start : 0;
  }

  inc() { this.#value = this.#value + 1; }
  getValue() { return this.#value; } // expose via method
}

const sc = new SafeCounter(5);
sc.inc();
console.log("safe value:", sc.getValue());

// External access fails (uncommenting the next line would throw):
// console.log(sc.#value);
クラスフィールド、privateな#フィールド、staticメンバー — イラスト3

安全に読み取るためのgetter

getterは、フィールドをプライベートに保ったまま、派生値や検証済みの値を返せます。

// Getters provide read-only views; simple guard logic
class User {
  #name = "Anonymous";
  constructor(name) {
    if (typeof name === "string" && name.trim().length > 0) {
      this.#name = name.trim();
    }
  }
  get name() {
    return this.#name;
  }
}

const u = new User(" Ayla ");
console.log("name:", u.name);
クラスフィールド、privateな#フィールド、staticメンバー — イラスト4

staticメンバー

staticメンバーはインスタンスではなくクラスから呼び出します(例:MathHelp.circleArea())。

// Static = belongs to the class, not to instances
class MathHelp {
  static PI = 3.14159;
  static circleArea(r) {
    if (!(typeof r === "number" && r >= 0)) return 0;
    return MathHelp.PI * r * r;
  }
}

console.log("PI:", MathHelp.PI);
console.log("area r=2:", MathHelp.circleArea(2));

// Instances do not have the static members:
const mh = new MathHelp();
console.log("instance has PI?", "PI" in mh); // false
クラスフィールド、privateな#フィールド、staticメンバー — イラスト5

初心者に適した習慣

ヒント:

  • メソッドが少なく、明確な小さなクラスを優先します。
  • 本当のプライバシーには#privateを使います。アンダースコアは命名規則にすぎません。
  • 定数やユーティリティはstaticメンバーに置きます。
  • 外部からのアクセスが必要なら、最小限の読み取り用メソッド(getter)だけを公開します。
クラスフィールド、privateな#フィールド、staticメンバー — イラスト6

プライベートフィールドの基礎クイズ

クイックチェック:#privateフィールドです。

クラスフィールド、privateな#フィールド、staticメンバー — イラスト7

まとめ

まとめ:単純な状態にはパブリックフィールドを使い、内部を隠すには#privateを使い、クラスレベルのヘルパーにはstaticを使います。各クラスは小さく、読みやすく保ちます。

クラスフィールド、privateな#フィールド、staticメンバー — イラスト8

よくある質問

「クラスフィールド、privateな#フィールド、staticメンバー」レッスンは無料ですか?

はい。「クラスフィールド、privateな#フィールド、staticメンバー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。

「クラスフィールド、privateな#フィールド、staticメンバー」で何を学びますか?

publicフィールドを持つクラスを作り、privateな#フィールドでデータを隠し、staticプロパティやメソッドを追加します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。

「クラスフィールド、privateな#フィールド、staticメンバー」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか?

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. クラスフィールド、privateな#フィールド、staticメンバー
  2. 継承、super、コンポジションを優先する場面
  3. Mixin(体験) — 深い階層なしで簡単に再利用
← JavaScript Academyに戻る