JavaScript 逆引き集 | class 構文

JavaScript JavaScript
スポンサーリンク

class 構文 — class A { constructor(x){ this.x = x } method(){} }

JavaScript の class 構文は、オブジェクト指向プログラミングをわかりやすく書くための仕組みです。
昔は「コンストラクタ関数＋プロトタイプ」で書いていましたが、class を使うとシンプルに「クラス（設計図）」を定義できます。

基本のコード例

class A {
  constructor(x) {
    this.x = x; // インスタンスごとのプロパティ
  }

  method() {
    console.log("値は " + this.x);
  }
}

const obj = new A(10); // インスタンス生成
obj.method(); // → "値は 10"
JavaScript
  • class A { ... } → クラス定義。
  • constructor → インスタンス生成時に呼ばれる特別な関数。
  • this.x = x → インスタンスごとに持つプロパティ。
  • method() → クラスに属するメソッド。

よく使うテンプレート集

複数メソッドを持つクラス

class Calculator {
  constructor() {
    this.result = 0;
  }

  add(n) { this.result += n; }
  sub(n) { this.result -= n; }
  show() { console.log("結果:", this.result); }
}

const calc = new Calculator();
calc.add(5);
calc.sub(2);
calc.show(); // → 結果: 3
JavaScript

継承（extends）

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + " が鳴いた");
  }
}

class Dog extends Animal {
  bark() {
    console.log(this.name + " がワンワン！");
  }
}

const d = new Dog("ポチ");
d.speak(); // "ポチ が鳴いた"
d.bark();  // "ポチ がワンワン！"
JavaScript

静的メソッド（static）

class MathUtil {
  static square(x) {
    return x * x;
  }
}

console.log(MathUtil.square(5)); // → 25
JavaScript

例題: ユーザー管理クラス

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`こんにちは、${this.name} (${this.age}歳)`);
  }
}

const u1 = new User("Aki", 20);
const u2 = new User("Mika", 25);

u1.greet(); // "こんにちは、Aki (20歳)"
u2.greet(); // "こんにちは、Mika (25歳)"
JavaScript
  • 効果: クラスを使うと「ユーザー」という概念をまとめて表現できる。

実務でのコツ

  • クラスは設計図: 同じ構造を持つオブジェクトを簡単に作れる。
  • constructor: 初期化処理を書く場所。
  • メソッド: 共通の処理をまとめる。
  • 継承: 共通部分を親クラスにまとめ、子クラスで拡張。
  • static: インスタンス不要で呼べる便利関数。

ありがちなハマりポイントと対策

  • this が分からない:
    • クラスのメソッド内では this がインスタンスを指す。
  • constructor を忘れる:
    • 初期化処理が必要なら必ず constructor を書く。
  • 継承時に super を忘れる:
    • 子クラスの constructor では super(...) を呼んで親を初期化する。

練習問題（Todoクラス）

class Todo {
  constructor() {
    this.items = [];
  }

  add(task) {
    this.items.push(task);
  }

  list() {
    console.log("Todo:", this.items);
  }
}

const todo = new Todo();
todo.add("買い物に行く");
todo.add("勉強する");
todo.list(); // Todo: ["買い物に行く", "勉強する"]
JavaScript
  • 効果: クラスを使って「Todoリスト」をオブジェクトとして管理できる。

直感的な指針

  • class = オブジェクトの設計図。
  • constructor = 初期化処理。
  • method = インスタンスが持つ機能。
  • extends = 親クラスを継承して拡張。
  • 初心者は「ユーザー」「カウンター」「Todoリスト」をクラスで作る練習をすると理解が深まる。

これを覚えれば「オブジェクトを整理」「共通処理をまとめる」「継承で拡張」といった場面でクラスを自在に使えるようになります。

スポンサーリンク
タイトルとURLをコピーしました