クラスとインスタンス｜基礎を学ぶ

このレッスンで分かること

class は ES6 で導入された コンストラクタ関数の糖衣構文

constructor でプロパティ初期化、メソッドは prototype に追加される

new ClassName(...) でインスタンス生成、instanceof で型チェック

this はメソッドを呼び出したインスタンスを指す

クラスとインスタンスとは

classの定義、constructor、メソッド、インスタンスの作成を学ぼう。本レッスンでは、クラスとインスタンスの基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

クラスとインスタンス

ES6で導入されたclass構文を使って、オブジェクトの設計図を作り、インスタンスを生成する方法を学びましょう。

classの定義

JavaScript

class User {
  // constructorでプロパティを初期化
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // メソッドの定義
  greet() {
    return `こんにちは、${this.name}です。${this.age}歳です。`;
  }

  // メソッドは複数定義できる
  isAdult() {
    return this.age >= 18;
  }
}

インスタンスの作成

newキーワードを使ってインスタンスを作成します。

JavaScript

const user1 = new User("太郎", 25);
const user2 = new User("花子", 17);

console.log(user1.greet()); // "こんにちは、太郎です。25歳です。"
console.log(user2.isAdult()); // false

// インスタンスごとに独立したプロパティを持つ
console.log(user1.name); // "太郎"
console.log(user2.name); // "花子"

constructorの役割

constructorはnewでインスタンスを作る際に自動的に呼ばれる特別なメソッドです。

JavaScript

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.createdAt = new Date(); // 自動で現在日時を設定
    this.id = Math.random().toString(36).slice(2); // ランダムID
  }

  // 税込み価格を計算するメソッド
  taxIncluded() {
    return Math.floor(this.price * 1.1);
  }

  display() {
    return `${this.name}: ${this.taxIncluded()}円（税込）`;
  }
}

const item = new Product("ノート", 200);
console.log(item.display()); // "ノート: 220円（税込）"

thisキーワード

クラスのメソッド内でのthisは、そのメソッドを呼び出したインスタンスを指します。

JavaScript

class Counter {
  constructor() {
    this.count = 0;
  }

  increment() {
    this.count++;  // thisはこのCounterインスタンスを指す
    return this;   // thisを返すとメソッドチェーンが可能に
  }

  getCount() {
    return this.count;
  }
}

const counter = new Counter();
counter.increment().increment().increment();
console.log(counter.getCount()); // 3

クラスの利点

JavaScript

//  関数で毎回オブジェクトを作成
function createUser(name, age) {
  return {
    name,
    age,
    greet() { return `${name}です`; }
  };
}

//  クラスで設計図を定義
class User2 {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() { return `${this.name}です`; }
}

// instanceofで型チェックができる
const u = new User2("太郎", 25);
console.log(u instanceof User2); // true

実務で遭遇するパターン

中級レッスンで学んだことが、実際の業務コードでどう登場するかを整理します。

ドメインモデル ─ User Order Product のような業務エンティティ
フォームコンポーネント ─ React/Vue のクラスコンポーネント (関数コンポーネントが主流になったが現役)
ライブラリの API ─ new EventEmitter() new URL("...") 等の組み込みクラス
ステート管理 ─ class Counter { count = 0; increment() {...} } のような状態保持クラス

コードレビューで指摘されがちなポイント

PR を出すとシニアから入りやすい指摘です。先回りで身につけておけばレビューが一発で通ります。

プレーンオブジェクトで済むのに class ─ 状態 + メソッドが少ないなら { name, greet() {} } で十分
this を矢印関数で固定し忘れ ─ コールバック内で this が undefined になる罠、bind / アロー関数で対処
クラスフィールドがバラバラ ─ 全てのプロパティを constructor で初期化、または class field 構文で宣言
継承の過剰使用 ─ 多くの場合 composition (this.helper = new Helper()) のほうが柔軟

パフォーマンス考慮事項

プロトタイプベース ─ メソッドはインスタンスごとにコピーされない、メモリ効率がいい
class 構文は function と同じバイトコード ─ 実行時オーバーヘッドはなし
フィールド初期化の順序 ─ constructor で super の後、フィールド宣言の順に評価
プライベートフィールド (#) ─ 規約に頼る _prefix と違い、クラス外から本当にアクセスできない真のプライベートになる

この章のポイント

ここまでの要点 class はコンストラクタ関数の糖衣、メソッドは prototype 上。new でインスタンス生成、# でプライベートフィールド。

まとめ

classはオブジェクトの設計図
constructorでプロパティを初期化
newキーワードでインスタンスを作成
メソッドでインスタンスの振る舞いを定義
thisはそのインスタンス自身を指す

よくある質問

Q. クラスとインスタンスの違いは？

A. クラスは設計図、インスタンスは設計図から作った具体的なオブジェクトです。Person クラスから new Person('Alice', 20) でインスタンスを作ると、それぞれが別の name と age を持ちます。クラスは 1 つでもインスタンスは何個でも作れます。

Q. インスタンスを作る new は何をしていますか？

A. メモリを確保し、コンストラクタを呼び出し、初期化されたオブジェクトの参照を返します。Java/JavaScript は new 必須、Python は new なしで Person() と呼ぶだけ（内部的に new + init が走る）です。

Q. 1 つのクラスから複数のインスタンスを管理するには？

A. ArrayList / 配列 / Map に格納するのが定石です。各インスタンスは独立した状態を持つので、ループで for (Product p : products) のように回せます。集合操作（合計、最大値）は Stream API（Java）/ map・reduce（JS）が便利です。

次のレッスン

次は カプセル化とgetter/setter で、classの定義、constructor、メソッド、インスタンスの作成を学ぼうを学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

クラスとインスタンスの要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. クラスとインスタンスとは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン