このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【JavaScript入門】クラスの作成

クラスの作成

　ES2015 で導入された class 構文により、JavaScript でも “設計図 → インスタンス” という王道のオブジェクト指向が書きやすくなりました。ここでは クラス宣言 → インスタンス生成 → 静的メンバー → 継承 という流れを、小さなサンプルを交えながら段階的に解説します。

１．クラス宣言の基本

1.1. クラス構文とコンストラクター

要素書き方役割
クラス宣言class Book { … }設計図を定義
コンストラクターconstructor(...) { ... }new 時に 1 回だけ呼ばれ、this でプロパティ初期化
class Book{
  constructor(title, price){
    this.title = title;
    this.price = price;
  }
}

1.2. インスタンスメソッド

class Book{
  /* …constructor 省略… */
  info(){                         // インスタンスメソッド
    return `${this.title}：${this.price}円`;
  }
}

２．静的プロパティ・メソッド

キーワード例説明
staticstatic tax = 0.1;インスタンスを介さず Book.tax で参照
static メソッドstatic withTax(p){ … }共通計算やファクトリ関数に便利
class Book{
  static tax = 0.1;
  static withTax(price){ return Math.round(price * (1 + Book.tax)); }
}

３．継承とメソッドオーバーライド

3.1. extends と super

class Ebook extends Book{
  constructor(title, price, format){
    super(title, price);      // 親の初期化
    this.format = format;
  }
  info(){                     // オーバーライド
    return `${super.info()}（${this.format}版）`;
  }
}

3.2. ポリモーフィズムの利用例

配列に Book と Ebook を混在させても、info() を呼ぶだけで正しい文字列が返る。

4．実践サンプル：書籍カタログ

ファイル名： class_create_demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>クラスの作成デモ</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body{font-family:sans-serif;margin:2rem}
pre{background:#f4f4f4;padding:1rem}
</style>
</head>
<body>
<h2>📚 書籍カタログ</h2>
<pre id="out">実行結果を表示中…</pre>

<script>
class Book{
  static tax = 0.1;
  constructor(title, price){
    this.title = title;
    this.price = price;
  }
  priceWithTax(){
    return Math.round(this.price * (1 + Book.tax));
  }
  info(){
    return `${this.title}：${this.priceWithTax()}円（税込）`;
  }
}

class Ebook extends Book{
  constructor(title, price, format){
    super(title, price);
    this.format = format;
  }
  info(){
    return `${super.info()}【${this.format}版】`;
  }
}

// インスタンス生成
const paper  = new Book('JavaScript入門', 2800);
const kindle = new Ebook('モダンJS大全', 2200, 'EPUB');

// 画面に出力
const lines = [
  paper.info(),
  kindle.info()
];
document.getElementById('out').textContent = lines.join('\n');
</script>
</body>
</html>

ブラウザの表示例

プログラム解説

  • Book.tax は 静的プロパティ。税率を 1 箇所で管理できる。
  • priceWithTax() はインスタンスメソッドだが Book.tax を参照。
  • Ebook が info() をオーバーライドし、super.info() を再利用して拡張。

まとめ

  • クラスは class 宣言＋constructor でプロパティ初期化、メソッドは波括弧内にそのまま記述。
  • 共通計算や設定値は 静的メンバー としてクラスに集約できる。
  • extends / super により継承とオーバーライドが簡潔になり、ポリモーフィズムも自然に実現。

　サンプルを改造し、静的プロパティで割引率を追加したり、多段継承を試すことで、クラス構文の柔軟さを体感してみてください。