• Home
  • Web制作
  • JavaScriptのClass超入門！ 初心者でも安心の徹底解説

JavaScriptのClass超入門！ 初心者でも安心の徹底解説

schedule

JavaScriptのClassとは？ オブジェクト指向をわかりやすく解説！

JavaScriptは、Webページに動きを与えることができるプログラミング言語です。そして、このJavaScriptにおいて重要な概念の一つが「Class」です。

Classとは、オブジェクトの設計図となるもの、とイメージすると理解しやすいかもしれません。

例えば、「車」というオブジェクトがあるとします。

車には、

  • 色
  • メーカー
  • 車種

といった様々な属性がありますね。

これらの属性と、車を動かすための「アクセルを踏む」「ブレーキをかける」といった動作をまとめて定義したものが「Class」です。

Classを定義することで、同じ設計図から複数の車を生成することができます。

これが、Classの基本的な考え方です。

Classの基本構文： 実際に書いてみよう！

それでは、実際にJavaScriptでClassを定義する方法を見ていきましょう。

Classは、classキーワードを使って定義します。

class 車 {
  // コンストラクタ
  constructor(色, メーカー, 車種) {
    this.色 = 色;
    this.メーカー = メーカー;
    this.車種 = 車種;
  }

  // メソッド
  アクセルを踏む() {
    console.log(`${this.メーカー}の${this.車種}が走ります！`);
  }

  ブレーキをかける() {
    console.log(`${this.メーカー}の${this.車種}が止まります！`);
  }
}

上記のコードでは、「車」Classを定義しています。

Class定義の中に、

  • コンストラクタ
  • メソッド

が定義されていることがわかります。

それぞれ見ていきましょう。

コンストラクタ： オブジェクトの初期化を行う

コンストラクタは、Classからオブジェクト（ここでは「車」）を生成する際に、最初に実行される特別なメソッドです。

constructorキーワードを使って定義し、オブジェクトの初期化を行います。

先ほどの「車」Classを例に説明すると、

constructor(色, メーカー, 車種) {
  this.色 = 色;
  this.メーカー = メーカー;
  this.車種 = 車種;
}

このコンストラクタは、

  1. 「色」「メーカー」「車種」の３つの引数を受け取ります。
  2. 受け取った引数を、それぞれthis.色、this.メーカー、this.車種に代入することで、オブジェクトのプロパティとして定義しています。

thisは、生成されるオブジェクト自身を指すキーワードです。

メソッド： オブジェクトの動作を定義する

メソッドは、オブジェクトに紐づけられた関数のことです。

先ほどの「車」Classでは、「アクセルを踏む」「ブレーキをかける」という２つのメソッドを定義しました。

アクセルを踏む() {
  console.log(`${this.メーカー}の${this.車種}が走ります！`);
}

ブレーキをかける() {
  console.log(`${this.メーカー}の${this.車種}が止まります！`);
}

これらのメソッドは、オブジェクトのプロパティ（ここでは「メーカー」「車種」）にアクセスし、それぞれの動作を実現しています。

Classを使ってみよう！： オブジェクトの生成とメソッドの実行

Classを定義したら、実際にオブジェクトを生成し、メソッドを実行してみましょう。

オブジェクトは、newキーワードを使って生成します。

// 車Classからオブジェクトを生成
const myCar = new 車('赤', 'トヨタ', 'プリウス');

// メソッドの実行
myCar.アクセルを踏む(); // 出力結果: トヨタのプリウスが走ります！
myCar.ブレーキをかける(); // 出力結果: トヨタのプリウスが止まります！

new 車('赤', 'トヨタ', 'プリウス')で、「車」Classから新しいオブジェクトを生成し、変数myCarに代入しています。

そして、myCar.アクセルを踏む();のように、オブジェクト名に.を繋げてメソッドを呼び出すことができます。

まとめ： JavaScriptのClassで効率的な開発を！

今回は、JavaScriptのClassについて、基本的な構文から使い方まで解説しました。

Classを理解することで、

  • コードの再利用性が高まり、開発効率が向上する
  • オブジェクト指向の考え方を学ぶことができる

といったメリットがあります。

ぜひ、この機会にJavaScriptのClassをマスターしましょう！

関連記事