JavaScriptのclassとは？多数のコードで丁寧に解説

（最終更新月：2023年10月）

✔当記事は以下のような方に向けて作成されています

✔当記事でお伝えすること

• JavaScriptのクラスの基礎知識
• JavaScriptのクラスの作り方とその利用方法
• JavaScriptでクラスを作成する際の実例

当記事では、JavaScriptのクラスの基本から実践的な作り方まで、具体的なサンプルを交えつつ詳細に解説しています。

ぜひ最後までお読みいただき、JavaScriptのクラスを理解しましょう。

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

• 見るからにきれいなコードの書き方
• コードの分割方法
• 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640(2023/12/02 14:00:36時点 Amazon調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

JavaScriptの基本

こちらでは、JavaScriptとその中でのクラスの概念についてお伝えしていきます。

クラスについて理解することで、効率的なコード設計とオブジェクト指向プログラミングの基礎を身につけることができます。

• JavaScriptとその特徴
• クラス: 概念と重要性

JavaScriptとその特徴

JavaScriptは、ウェブページの動的な動作を制御するためのプログラミング言語です。

非同期処理やイベント駆動型の特徴を持ち、ブラウザだけでなくサーバーサイドでも使用されるようになりました。

例えば、以下のような動作はJavaScriptによって実現されています。

• ボタンをクリックしたときの反応
• データの動的な取得

クラス: 概念と重要性

クラスは、オブジェクト指向プログラミングの中心的な概念で、データとそれを操作するメソッドを一つの単位としてまとめられるもの。

クラスを使用することで、コードの再利用性を高め、構造化されたプログラムの設計が可能です。

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

JavaScriptクラスの作り方と定義

こちらでは、JavaScriptでのクラスの作成方法とその定義について詳しく見ていきましょう。

クラスの正しい定義方法を学ぶことで、効率的なオブジェクトの生成と操作が可能です。

• クラスの宣言と式
• メソッドとコンストラクターの定義
• プロパティとフィールド: パブリックからプライベートまで
• Strictモードの意義と利用

クラスの宣言と式

JavaScriptのクラスは、classキーワードを使用して宣言します。

また、クラス式を使用して、匿名クラスや名前付きクラスの定義も可能です。

// クラス宣言
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

// クラス式
let Square = class {
  constructor(sideLength) {
    this.sideLength = sideLength;
  }
};

メソッドとコンストラクターの定義

クラス内でのメソッドの定義は、関数と同じ構文を使用しますが、functionキーワードは不要です。

またconstructorメソッドは、クラスのインスタンスを作成する際に自動的に呼び出される特別なメソッド。

class Circle {
  constructor(radius) {
    this.radius = radius;
  }
  area() {
    return Math.PI * this.radius * this.radius;
  }
}

コンストラクタの引数は、インスタンス作成時に必ず指定しましょう。

プロパティとフィールド: パブリックからプライベートまで

JavaScriptのクラス内では、データを保持するためのプロパティやフィールドの定義が可能。

これらのアクセスレベルを適切に設定することで、データの安全性や操作性を向上させられます。

class Car {
  constructor(brand) {
    this._brand = brand;  // プライベートフィールドのように扱う
  }
  get brand() {  // ブランドの取得
    return this._brand;
  }
  set brand(newBrand) {  // ブランドの設定
    this._brand = newBrand;
  }
}
let myCar = new Car("Toyota");
console.log(myCar.brand);  // Toyota
myCar.brand = "Honda";
console.log(myCar.brand);  // Honda

Strictモードの意義と利用

JavaScriptのStrictモードは、より厳格なエラーチェックをおこない、一部の古い機能を無効にするモードです。

クラスの定義内では、自動的にStrictモードが適用されます。

これにより、予期しないエラーやバグを早期に検出できるのです。

class Bike {
  constructor(type) {
    undeclaredVariable = type;  // Strictモードのため、エラーが発生
  }
}

JavaScriptクラスの操作

こちらでは、JavaScriptのクラスを操作する基本的な方法について詳しく解説します。

これらの操作をマスターすることで、オブジェクト指向プログラミングの実践的なスキルを習得できるでしょう。

• クラスからオブジェクトの生成(newの使用)
• プロパティのアクセスと操作
• プロトタイプと静的メソッド

クラスからオブジェクトの生成(newの使用)

クラスからオブジェクトを生成するには、newキーワードを使用。

これにより、クラスのconstructorメソッドが呼び出され、新しいオブジェクトが返されます。

class Animal {
  constructor(name) {
    this.name = name;
  }
}
let dog = new Animal("Buddy");
console.log(dog.name);  // Buddy

プロパティのアクセスと操作

クラスのインスタンスから、定義されたプロパティやメソッドにアクセスできます。

これにより、オブジェクトの状態を取得、更新できるのです。

例:

class Book {
  constructor(title, author) {
    this.title = title;
    this.author = author;
  }
}
let myBook = new Book("1984", "George Orwell");
console.log(myBook.title);  // 1984
myBook.title = "Animal Farm";
console.log(myBook.title);  // Animal Farm

プロトタイプと静的メソッド

JavaScriptのクラスは、プロトタイプベースの継承を使用しています。

また、クラス自体に関連するメソッドを定義するための静的メソッドもサポート。

class MathUtil {
  static square(number) {
    return number * number;
  }
}
console.log(MathUtil.square(5));  // 25

クラスの発展的な話題

こちらでは、JavaScriptのクラスに関する発展的なトピックを取り上げます。

これらの高度な機能を理解することで、より複雑なオブジェクト指向プログラムの設計が可能です。

• 継承とextendsの使用
• superによるスーパークラスの呼び出し
• Speciesとミックスインの概要
• クラス定義の再実行とその目的

継承とextendsの使用

JavaScriptのクラスでは、extendsキーワードを使用してほかのクラスを継承できます。

継承により、既存のクラスのプロパティやメソッドを再利用しつつ、新しい機能を追加できるのです。

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

let dog = new Dog("Rex");
dog.speak();  // Rex barks.

superによるスーパークラスの呼び出し

superキーワードを使用することで、サブクラスからスーパークラスのコンストラクターやメソッドを呼び出せます。

これにより、継承されたメソッドの上書きや拡張が容易です。

class Cat extends Animal {
  speak() {
    super.speak();  // スーパークラスのspeakメソッドを呼び出す
    console.log(`${this.name} meows.`);
  }
}

let cat = new Cat("Whiskers");
cat.speak();  
// Whiskers makes a noise.
// Whiskers meows.

Speciesとミックスインの概要

Symbol.speciesは、派生クラスが親クラスのメソッドからオブジェクトを作成する際、使用されるコンストラクタを指定するものです。

ミックスインは、クラスにメソッドを追加するためのパターンで、複数のクラス間でメソッドを共有できます。

let SerializableMixin = {
  serialize() {
    return JSON.stringify(this);
  }
};

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

Object.assign(User.prototype, SerializableMixin);

let user = new User("Tom", 30);
console.log(user.serialize());  // {"name":"Tom","age":30}

クラス定義の再実行とその目的

クラス定義は、条件に基づいてクラスの再定義が可能です。

その理由は、クラス定義が、実行時に評価されるから。

これにより、環境や条件に応じて異なるクラスの実装を提供できます。

let MyClass;
if (someCondition) {
  MyClass = class {
    // 何らかの実装
  };
} else {
  MyClass = class {
    // 別の実装
  };
}

初心者が陥りがちな間違い

こちらでは、JavaScriptのクラスを学ぶ初心者が陥りがちな間違いや誤解について解説します。

これらのポイントを押さえることで、効率的な学習と実践的なコードの実装が可能です。

• クラスと関数の混同
• クラスメソッドとインスタンスメソッドの理解
• 正しいthisの使い方

クラスと関数の混同

JavaScriptの関数とクラスは、見た目が似ているため、初心者はしばしば混同してしまいます。

しかしクラスはメソッドやプロパティを持つオブジェクトの設計図で、関数は単なる処理のまとまりといえるでしょう。

function MyFunction() {
  // これは関数
}

class MyClass {
  constructor() {
    // これはクラスのコンストラクタ
  }
}

クラスメソッドとインスタンスメソッドの理解

クラスには、インスタンスメソッドとクラスメソッドの2タイプのメソッドがあります。

インスタンスメソッドはクラスのインスタンスに関連し、クラスメソッドはクラス自体に関連するものです。

class MyClass {
  static classMethod() {
    console.log('This is a class method.');
  }

  instanceMethod() {
    console.log('This is an instance method.');
  }
}

MyClass.classMethod();  // This is a class method.
let instance = new MyClass();
instance.instanceMethod();  // This is an instance method.

正しいthisの使い方

JavaScriptのthisキーワードは、実行コンテキストによって異なるオブジェクトを参照します。

クラスのメソッド内でthisを使用する場合は、そのクラスのインスタンスを指すのが一般的。

ただしイベントリスナーやコールバック関数内でのthisの挙動に注意が必要です。

class Button {
  constructor(element) {
    this.element = element;
    this.element.addEventListener('click', this.handleClick);
  }

  handleClick() {
    console.log(this);  // 注意: ここでのthisはButtonのインスタンスではなく、クリックされたDOM要素を指す
  }
}

JavaScriptクラスの実例

こちらでは、JavaScriptのクラスを使用した具体的な実例を紹介します。

実際のコードを通じて、クラスの実用的な利用方法を学びましょう。

• 簡単なゲームの設計
• ページの動的更新

簡単なゲームの設計

JavaScriptのクラスを使用して、簡単なゲームを設計する方法を紹介します。

クラスを使用することで、ゲームの各要素をモジュール化し、コードの再利用性と可読性を向上させられるでしょう。

class Player {
  constructor(name, health) {
    this.name = name;
    this.health = health;
  }

  attack(target) {
    console.log(`${this.name} attacks ${target.name}!`);
    target.health -= 10;
  }
}

class Game {
  constructor(player1, player2) {
    this.player1 = player1;
    this.player2 = player2;
  }

  start() {
    while (this.player1.health > 0 && this.player2.health > 0) {
      this.player1.attack(this.player2);
      this.player2.attack(this.player1);
    }
  }
}

const playerA = new Player("Alice", 100);
const playerB = new Player("Bob", 100);
const newGame = new Game(playerA, playerB);
newGame.start();

ページの動的更新

JavaScriptのクラスを使用して、ウェブページの内容を動的に更新する方法をご覧ください。

クラスを使用することで、DOMの操作やイベントの処理を効率的におこなえます。

class PageUpdater {
  constructor(element) {
    this.element = element;
  }

  update(content) {
    this.element.innerHTML = content;
  }
}

const updater = new PageUpdater(document.querySelector("#content"));
document.querySelector("#updateButton").addEventListener("click", () => {
  updater.update("New content added!");
});

まとめ

当記事では、JavaScriptのクラスについて学習してきました。

• クラスの定義
• プロパティ
• メソッド
• 継承
• 実例

理解を深めるためには、実際にコードを書いてみることが最も効果的です。

簡単なアプリケーションを設計する、または既存のコードにクラスを導入してみるなど、実践的な練習がおすすめ。

ぜひ手を動かしながらいろいろと学んでみましょう。