MENU
SwiftUI/Flutter/Vue等でアプリ開発
  1. ホーム
  2. dev
  3. JavaScript
  4. [JavaScript] クラスの使い方

[JavaScript] クラスの使い方

JavaScript
目次

クラスとは

クラスとは、オブジェクト指向プログラミングにおいて、オブジェクトの設計図のようなものです。つまり、同じ種類のオブジェクトを複数作成するためのテンプレートとなるものです。

JavaScriptにおけるクラスは、ECMAScript 2015（ES6）から導入されました。それ以前は、プロトタイプベースのオブジェクト指向プログラミングが主流でした。

クラスの宣言

クラスを宣言するには、以下のように記述します。

class MyClass {
  constructor() {
    // コンストラクター
  }

  // メソッド
  myMethod() {
    // メソッドの処理
  }
}

上記の例では、MyClassというクラスを宣言しています。クラス名の先頭は大文字にすることが一般的です。クラスの本体は中括弧で囲まれた部分です。

constructorという特別なメソッドは、インスタンスが作成されたときに自動的に呼び出されます。インスタンスが持つプロパティを初期化するために、constructor内で処理を行うことができます。

クラスの使用

クラスを使ってオブジェクトを作成するには、以下のように記述します。

const myObject = new MyClass();

上記の例では、MyClassからmyObjectという名前のオブジェクトを作成しています。new演算子を使って、クラスから新しいインスタンスを作成します。

作成したインスタンスに対して、クラスのメソッドを呼び出すことができます。

myObject.myMethod();

上記の例では、myObjectに対して、myMethodというメソッドを呼び出しています。

クラスの継承

クラスを継承することで、既存のクラスを基にして新しいクラスを作成することができます。継承されるクラスをスーパークラス、継承するクラスをサブクラスと呼びます。

以下の例では、Animalというスーパークラスを定義し、Catというサブクラスを作成しています。

class Animal {
  constructor(name) {
    this.name = name;
  }

  eat() {
    console.log(`${this.name} is eating.`);
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name);
  }

  meow() {
    console.log(`${this.name} says 'meow'.`);
  }
}

上記の例では、Animalクラスを定義し、nameプロパティとeatメソッドを持つクラスです。CatクラスはAnimalクラスを継承しており、nameプロパティとeatメソッドに加えて、meowメソッドを持つクラスとなっています。

Catクラスのconstructor内でsuper(name)という呼び出しがありますが、これはスーパークラスのコンストラクターを呼び出すためのものです。Animalクラスのconstructorに引数を渡すことで、Catクラスでもnameプロパティを利用できるようになります。

Catクラスのmeowメソッド内では、nameプロパティとともに、”meow”という文字列を出力する処理が定義されています。

クラスの静的メソッド

静的メソッドとは、クラス自体に紐付いたメソッドのことです。つまり、インスタンスを作成しなくても、クラスから直接呼び出すことができます。

以下の例では、Mathクラスにあるpowメソッドを使って、2の3乗を計算しています。

const result = Math.pow(2, 3);
console.log(result); // 8

Mathクラスのpowメソッドは、インスタンスを作成せずにクラスから直接呼び出せる静的メソッドとなっています。

クラス内で静的メソッドを宣言するには、staticキーワードを使います。

以下の例では、MyClassというクラスに、静的メソッドのmyStaticMethodを追加しています。

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

MyClass.myStaticMethod(); // This is a static method.

上記の例では、MyClassクラスに定義されたmyStaticMethodという静的メソッドを呼び出しています。

まとめ

JavaScriptのクラスは、オブジェクト指向プログラミングにおいて、オブジェクトの設計図として利用されます。クラスを定義することで、同じ種類のオブジェクトを複数作成することができます。クラスを継承することで、既存のクラスを基にして新しいクラスを作成することができます。静的メソッドを使うことで、インスタンスを作成しなくてもクラスから直接メソッドを呼び出すことができます。

JavaScriptのクラスを使うことで、コードの再利用性が高くなり、保守性が向上するというメリットがあります。また、クラスを使うことで、オブジェクト指向プログラミングに慣れることができるため、より大規模なプロジェクトに取り組む際に役立ちます。

ただし、クラスを使う場合は、コードの複雑さが増すことがあります。また、クラスの継承や静的メソッドの利用など、初心者には難しい概念も含まれています。そのため、クラスを使う場合は、慣れるまではドキュメントなどを参考にして、コードを理解していくことが重要です。

JavaScript
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次