【JavaScript入門】JavaScriptのオブジェクト指向

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

JavaScriptのオブジェクト指向

　ES6 以前の JavaScript は プロトタイプチェーン によってオブジェクト指向を実現していました。しかし「関数をコンストラクタにする」「prototype にメソッドを追加する」といった書き方は直感的ではありませんでした。
　ES6（2015）で導入された class 構文 は、内部でプロトタイプを利用しつつ “クラスベース” らしい文法を提供します。本稿ではクラス宣言・インスタンス生成・静的メンバー・継承という 4 要素を整理し、ブラウザで動くサンプルで挙動を確認します。

１．クラス宣言とインスタンス生成

構文	説明
`class クラス名 { … }`	クラス本体を定義
`constructor(…)`	`new` 時に呼ばれる初期化メソッド
`new クラス名(…)`	インスタンスを生成し `constructor` を実行

例）

class Animal {
  constructor(name){           // インスタンスプロパティ
    this.name = name;
  }
  greet(){                     // インスタンスメソッド
    return `${this.name} が鳴きました`;
  }
}
const dog = new Animal('ポチ');
console.log(dog.greet());      // → ポチ が鳴きました

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

　クラス自体に紐づくメンバー。全インスタンスで共有する定数やユーティリティ関数を定義する際に使用します。クラス宣言の中では、次のように static キーワードを付けます。

キーワード	作用
`static`	クラス自身にプロパティ / メソッドを定義（インスタンスからは参照不可）

class Counter {
  static count = 0;            // 静的プロパティ
  constructor(){ Counter.count++; }
  static reset(){ Counter.count = 0; }
}
new Counter(); new Counter();
console.log(Counter.count);    // → 2
Counter.reset();

３．継承と `super`

構文	説明
`class 子 extends 親`	親クラスを継承
`super()`	親の `constructor` 呼び出し
`super.メソッド()`	親メソッドを明示的に呼ぶ

class Engineer extends Animal{
  constructor(name, lang){
    super(name);               // Animal の constructor
    this.lang = lang;
  }
  greet(){
    return `${super.greet()}（${this.lang} エンジニア）`;
  }
}

４．実践サンプル ― クラス・静的メンバー・継承をまとめて体験

ファイル名： oop_demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript のオブジェクト指向デモ</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="log">実行結果が表示されます…</pre>

<script>
/* ---------- 1. 親クラス ---------- */
class Person {
  static total = 0;                          // 静的プロパティ
  constructor(name){
    this.name = name;                        // インスタンスプロパティ
    Person.total++;
  }
  hello(){                                   // インスタンスメソッド
    return `こんにちは、${this.name} です`;
  }
  static getTotal(){                         // 静的メソッド
    return `登録人数は ${Person.total} 人です`;
  }
}

/* ---------- 2. 子クラス ---------- */
class Engineer extends Person {
  constructor(name, lang){
    super(name);                             // 親の初期化
    this.lang = lang;
  }
  hello(){                                   // オーバーライド
    return `${super.hello()}（${this.lang} エンジニア）`;
  }
}

/* ---------- 3. 動作確認 ---------- */
const taro  = new Person('太郎');
const hanako= new Engineer('花子','JavaScript');

const lines = [
  taro.hello(),
  hanako.hello(),
  Person.getTotal()
];

/* 画面と Console に出力 */
document.getElementById('log').textContent = lines.join('\n');
console.log(...lines);
</script>
</body>
</html>

ブラウザ表示例

デバックコンソールの出力

こんにちは、太郎 です こんにちは、花子 です（JavaScript エンジニア） 登録人数は 2 人です

プログラム解説

番号	ポイント
1	`Person` クラスに静的プロパティ `total` を置き、インスタンス数を自動加算
2	`Engineer` が `extends Person` で継承し、`super()` で親の `constructor` を呼び出し
3	`hello()` をオーバーライドし、`super.hello()` で親メソッドの結果を再利用

✅ console.log(…lines);の意味

console.log(...lines);

　この命令は、lines 配列の中身を展開して、個々の値を console.log() に渡して出力するという意味です。

🔍 ...lines の意味（スプレッド構文）

スプレッド構文（Spread Syntax）とは？

　... は JavaScript で「スプレッド構文」と呼ばれ、配列やオブジェクトの中身を展開（展開＝一つずつ取り出して渡す）するために使われます。

例）

const lines = ["apple", "banana", "cherry"];
console.log(...lines);  // ← これと ↓ は同じ意味

console.log("apple", "banana", "cherry");

　このように、lines が配列の場合、...lines は配列の要素をそれぞれ取り出して、console.log() に個別の引数として渡します。

🧠 なぜ使うの？

　console.log(lines); とすると 配列全体が1つの引数として扱われるので、次のように出力されます。

["apple", "banana", "cherry"]

javascriptコピーする編集する["apple", "banana", "cherry"]

でも console.log(...lines); とすると、配列の各要素が個別の引数として渡されるので、

apple banana cherry

のように、スペース区切りで個別に表示されます。

まとめ

class 構文 により、コンストラクタ / インスタンスメソッド / 静的メンバー / 継承が直感的に書ける。
インスタンス生成は new、静的メソッドはクラス名から直接呼び出す。
継承では extends と super を組み合わせ、コードの再利用と拡張性を両立できる。

　サンプルを改造してプロパティ追加や多段継承を試し、JavaScript のオブジェクト指向モデルを体感してみてください。

【JavaScript入門】JavaScriptのオブジェクト指向