JavaScriptクラス入門｜private・static・継承を比較表で解説

JavaScriptのクラスとは、データ（フィールド）とそれを扱う処理（メソッド）をひとまとめにし、同じ形のオブジェクトを new で何個でも作れるようにする構文です。 ES2022 で # から始まる本当に外から見えない private フィールド・メソッド、static フィールド、static 初期化ブロック、#x in obj によるチェックがそろい、Node.js 22 や現在の主要ブラウザでそのまま使えます。

この記事では、まずクラス構文のすべてを1枚の早見表にまとめ、次に全機能を使った架空の在庫管理クラスを Node.js 22.22.2 で実行して出力を掲載します。さらに #x と _x と TypeScript の private の違いを実行して比較し、つまずきやすい実際のエラー文の一覧と、クラス・関数・オブジェクトリテラルのどれを選ぶかの判断基準まで解説します。

JavaScript クラス構文の早見表

対応環境： private フィールド・メソッド、static フィールド、static {}、#x in obj はすべて ES2022 の仕様で、Node.js 16.11 以降と現在の主要ブラウザで使えます。この記事の出力は Node.js 22.22.2 で実行したものです。

クラスの基本形：constructor・フィールド・メソッド

最小のクラスは「フィールドを宣言 → constructor で値を入れる → メソッドで操作する」の3つでできています。

class Task {
  title;            // public フィールド（宣言だけ。初期値は undefined）
  done = false;     // 初期値つきのフィールド

  constructor(title) {
    this.title = title;
  }

  complete() {
    this.done = true;
    return this;
  }
}

const t = new Task('備品の発注');
t.complete();
console.log(t);
// Task { title: '備品の発注', done: true }

フィールドは constructor の先頭で実行される代入と同じ働きをします。クラスの冒頭にフィールドを並べておくと、そのオブジェクトがどんな項目を持つか一目でわかるのが利点です。

全機能を使った完成例：在庫管理クラス

早見表のすべての機能を1つにまとめた、架空の在庫管理クラスです。 そのまま inventory.mjs として保存し、node inventory.mjs で動きます。

// 架空の在庫管理クラス（Node.js 22 で実行）
class InventoryItem {
  // static フィールド：クラス全体で1つ
  static count = 0;
  static #units;                       // static private フィールド

  // static {} ブロック：クラス定義時に1回だけ動く初期化
  static {
    InventoryItem.#units = new Set(['個', '箱', '本']);
  }

  // public フィールド（インスタンスごと）
  name;
  unit = '個';

  // private フィールド（クラスの中からだけ読める）
  #stock = 0;
  #history = [];

  constructor(name, { stock = 0, unit = '個' } = {}) {
    if (!InventoryItem.#units.has(unit)) {
      throw new RangeError(`unknown unit: ${unit}`);
    }
    this.name = name;
    this.unit = unit;
    this.#stock = stock;
    InventoryItem.count++;
  }

  // getter：プロパティのように読める
  get stock() {
    return this.#stock;
  }

  // setter：代入時に検証できる
  set stock(value) {
    if (!Number.isInteger(value) || value < 0) {
      throw new RangeError(`stock must be a non-negative integer: ${value}`);
    }
    this.#record('set', value - this.#stock);
    this.#stock = value;
  }

  // 通常のメソッド（prototype に1つだけ作られる）
  receive(qty) {
    this.#record('receive', qty);
    this.#stock += qty;
    return this; // メソッドチェーン用
  }

  ship(qty) {
    if (qty > this.#stock) {
      throw new Error(`${this.name}: 在庫不足（在庫 ${this.#stock}, 出荷 ${qty}）`);
    }
    this.#record('ship', -qty);
    this.#stock -= qty;
    return this;
  }

  get history() {
    return this.#history.map((h) => ({ ...h })); // コピーを返す
  }

  // private メソッド
  #record(type, diff) {
    this.#history.push({ type, diff });
  }

  // static メソッド：インスタンスを作らずに呼ぶ
  static isItem(obj) {
    return #stock in obj;               // ブランドチェック（ES2022）
  }

  static addUnit(unit) {
    InventoryItem.#units.add(unit);
  }

  toJSON() {
    return { name: this.name, unit: this.unit, stock: this.#stock };
  }

  toString() {
    return `${this.name}: ${this.#stock}${this.unit}`;
  }
}

// 継承：extends と super
class PerishableItem extends InventoryItem {
  #expiresOn;

  constructor(name, { expiresOn, ...options } = {}) {
    super(name, options);              // this を使う前に必ず呼ぶ
    this.#expiresOn = new Date(expiresOn);
  }

  isExpired(today = new Date()) {
    return today > this.#expiresOn;
  }

  // オーバーライドして親の処理も呼ぶ
  toString() {
    return `${super.toString()}（期限 ${this.#expiresOn.toISOString().slice(0, 10)}）`;
  }
}

const pen = new InventoryItem('ボールペン', { stock: 10, unit: '本' });
pen.receive(5).ship(3);
console.log(String(pen));
console.log(pen.stock);
pen.stock = 20;
console.log(pen.history);
console.log(JSON.stringify(pen));
console.log(Object.keys(pen));

const milk = new PerishableItem('牛乳', { stock: 6, unit: '本', expiresOn: '2026-10-05' });
console.log(String(milk));
console.log(milk.isExpired(new Date('2026-10-01')), milk.isExpired(new Date('2026-10-06')));
console.log(milk instanceof PerishableItem, milk instanceof InventoryItem, pen instanceof PerishableItem);
console.log(InventoryItem.isItem(milk), InventoryItem.isItem({ stock: 1 }));
console.log(InventoryItem.count, typeof pen.isItem, typeof InventoryItem.prototype.receive);

try { pen.ship(100); } catch (e) { console.log(`${e.name}: ${e.message}`); }
try { pen.stock = -1; } catch (e) { console.log(`${e.name}: ${e.message}`); }
try { new InventoryItem('机', { unit: '台' }); } catch (e) { console.log(`${e.name}: ${e.message}`); }
InventoryItem.addUnit('台');
console.log(String(new InventoryItem('机', { unit: '台', stock: 2 })), InventoryItem.count);

実行結果（Node.js 22.22.2）

ボールペン: 12本
12
[
  { type: 'receive', diff: 5 },
  { type: 'ship', diff: -3 },
  { type: 'set', diff: 8 }
]
{"name":"ボールペン","unit":"本","stock":20}
[ 'name', 'unit' ]
牛乳: 6本（期限 2026-10-05）
false true
true true false
true false
2 undefined function
Error: ボールペン: 在庫不足（在庫 20, 出荷 100）
RangeError: stock must be a non-negative integer: -1
RangeError: unknown unit: 台
机: 2台 3

出力から読み取れること

getter / setter を使うと、pen.stock = 20 という自然な書き方のまま検証を挟めます。 一方で、外から書き換えさせたくない値は setter を作らず getter だけにします（代入するとエラーになります。後述）。

static と static {} ブロックの使いどころ

static は「インスタンスごとではなく、クラスに1つあればよいもの」に使います。

static {} ブロックの中では、同じクラスの private 要素（#units）に触れられます。 初期化が1行で済むなら static #units = new Set([...]); と書いても同じです。

static private と this の注意点

static メソッドの中で this.#make() と書くと、子クラスから呼んだときに this が子クラスになり、エラーになります。

class Base {
  static #make() { return 'made'; }
  static build() { return this.#make(); }       // this は呼び出し元のクラス
  static buildSafe() { return Base.#make(); }   // クラス名で呼ぶ
}
class Derived extends Base {}
console.log(Base.build(), Derived.buildSafe());
// made made
try { Derived.build(); } catch (e) { console.log(`${e.name}: ${e.message}`); }
// TypeError: Receiver must be class Base

static の private 要素は、this ではなくクラス名（Base.#make()）で呼ぶと継承しても動きます。

#x と _x と TypeScript の private の比較

「外から触らせない」書き方は3通りありますが、実際に隠れるのは # だけです。 3つを実行して比べました。

class Hash { #secret = 'h'; name = 'item'; readFrom(o) { return o.#secret; } }
class Under { _secret = 'u'; name = 'item'; }
class ChildHash extends Hash { peek() { return this.secret; } }
class ChildUnder extends Under { peek() { return this._secret; } }
const h = new Hash(), u = new Under();
console.log('read  #:', h.secret, '| _:', u._secret, "| h['#secret']:", h['#secret']);
console.log('JSON  #:', JSON.stringify(h), '| _:', JSON.stringify(u));
console.log('keys  #:', Object.keys(h), '| _:', Object.keys(u));
console.log('child #:', new ChildHash().peek(), '| _:', new ChildUnder().peek());
console.log('log   #:', h, '| _:', u);
console.log('spread #:', { ...h }, '| clone:', structuredClone(h));
try { h.readFrom({}); } catch (e) { console.log(`${e.name}: ${e.message}`); }

read  #: undefined | _: u | h['#secret']: undefined
JSON  #: {"name":"item"} | _: {"_secret":"u","name":"item"}
keys  #: [ 'name' ] | _: [ '_secret', 'name' ]
child #: undefined | _: u
log   #: Hash { name: 'item' } | _: Under { _secret: 'u', name: 'item' }
spread #: { name: 'item' } | clone: { name: 'item' }
TypeError: Cannot read private member #secret from an object whose class did not declare it

TypeScript の private / protected は TypeScript 7.0.2 でコンパイルして確かめました。

class TsItem {
  private secret = 't';
  protected note = 'n';
  name = 'item';
}
class TsChild extends TsItem {
  peekNote() { return this.note; }
  peekSecret() { return this.secret; }
}
const t = new TsItem();
console.log('read:', t.secret);
console.log('bracket:', t['secret']);
console.log('JSON:', JSON.stringify(t), 'keys:', Object.keys(t));
console.log('child:', new TsChild().peekNote());

$ npx tsc --target es2022 --module nodenext --strict ts-private.ts
ts-private.ts(8,30): error TS2341: Property 'secret' is private and only accessible within class 'TsItem'.
ts-private.ts(11,24): error TS2341: Property 'secret' is private and only accessible within class 'TsItem'.

$ node ts-private.js   # エラーがあっても JS は出力される
read: t
bracket: t
JSON: {"secret":"t","note":"n","name":"item"} keys: [ 'secret', 'note', 'name' ]
child: n

判断の目安は次のとおりです。

• 外から絶対に触らせたくない値（在庫数を setter 経由でしか変えさせない等）→ #
• 子クラスからは使わせたい（JS には protected がない）→ TypeScript の protected、または _ の命名＋ドキュメント
• JSON.stringify にそのまま出したい → public フィールド、または # ＋ toJSON()
• TypeScript で書くなら、# と private は併用できます。実行時にも隠したいなら # を選びます

クラスでよく出るエラー文一覧

Node.js 22.22.2 で実際に出たエラー文です。 1行ずつ別ファイルにして実行しました。

クラスの中は常に strict モードです。 そのため getter のみのプロパティへの代入は、黙って無視されずに TypeError になります。

this が外れる問題の直し方

イベントハンドラやコールバックにメソッドを渡すと、this が undefined になります。直し方は2つです。

class Counter {
  #n = 0;
  inc() { this.#n++; return this.#n; }
  incArrow = () => { this.#n++; return this.#n; };   // アロー関数のフィールド
}
const c = new Counter();
const f1 = c.inc.bind(c);   // 方法1：bind で this を固定
const f2 = c.incArrow;      // 方法2：アロー関数のフィールドは this が固定される
console.log(f1(), f2(), Object.keys(c), typeof Counter.prototype.incArrow);
// 1 2 [ 'incArrow' ] undefined

クラス・関数・オブジェクトリテラルの使い分け

JavaScript では、クラスを使わなくても関数とオブジェクトで同じことが書けます。 どれを選ぶかの判断表です。

関数（クロージャ）で書くと次のようになります。

const createCounter = () => {
  let n = 0;                       // 外から触れない状態
  return { inc: () => ++n };
};
const cc = createCounter();
cc.inc();
console.log(cc.inc(), Object.keys(cc));
// 2 [ 'inc' ]

迷ったら「状態を持つか」「いくつ作るか」の2点で判断します。 状態がなければ関数、状態があって複数作るならクラス、1つだけならオブジェクトリテラル、が目安です。継承は便利ですが、階層が3段以上になる場合は、部品を組み合わせる（コンポジション）書き方も検討すると変更しやすくなります。設計の考え方そのものは「オブジェクト指向とは」「デザインパターンの使いどころ」の記事で扱っています。

クラスを書くときのチェックリスト

よくある質問

Q. JavaScript に protected はありますか？ A. ありません。 # の private は子クラスからも使えません。子クラスに使わせたい値は、親クラスに getter やメソッドを用意するか、TypeScript の protected を使います。

Q. #x in obj はいつ使いますか？ A. 「このオブジェクトは本当にこのクラス（またはその子）が作ったものか」を例外なしで確かめたいときです。instanceof は prototype を差し替えると結果が変わりますが、#x in obj は private フィールドの有無で判定するため、より確実です。

Q. private フィールドはデバッグで見られますか？ A. Node.js 22 の console.log には出ませんでした。ブラウザの開発者ツールではオブジェクトの中身として表示されることがありますが、プログラムから読めるのはクラスの中だけです。調査用に値を見たいときは getter か toJSON() を用意すると便利です。

Q. クラスのメソッドとアロー関数のフィールドはどちらがよいですか？ A. 基本はメソッド（prototype で共有され、継承で super.method() も使える）です。イベントハンドラなどにそのまま渡す必要があるものだけアロー関数のフィールドにすると、両方の利点を活かせます。

まとめ

• クラスはフィールド・constructor・メソッドの3つが基本。メソッドは prototype で共有される
• # の private は実行時に本当に隠れる。Object.keys・JSON.stringify・子クラスからも見えない
• _x は目印、TypeScript の private はコンパイル時だけの制限。実行時は読める
• static はクラスに1つ。static private は this ではなくクラス名で呼ぶ
• 子の constructor では super() を最初に。#x in obj で安全に型を確かめられる
• 状態なしなら関数、1つだけならオブジェクトリテラル、状態があり複数作るならクラスが目安

株式会社RJCでは、JavaScript のクラス設計を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。