JavaScriptでクラスを利用する方法

JavaScriptは、ES6（ECMAScript 2015）からクラスの概念が導入されています。
これにより、オブジェクト指向プログラミングがより簡単に実現できるようになりました。

クラスを利用することで、コードの再利用性や保守性が向上し、より構造化されたプログラムを書くことができます。

クラスの定義

クラスを定義するには、class キーワードを使います。
クラス名は通常、大文字で始まります。以下は、Rectangle クラスの定義例です。

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }

  getPerimeter() {
    return 2 * (this.width + this.height);
  }
}

このクラスは、幅（width）と高さ（height）をプロパティとして持ちます。
そして、面積を計算する getArea() メソッドと周囲長を計算する getPerimeter() メソッドを持っています。

constructor() メソッドは、クラスのインスタンスを作成するときに呼び出されるメソッドです。
主に、プロパティを初期化するために使用されます。

クラスの利用

クラスを利用するには、まずクラスのインスタンスを作成する必要があります。
new キーワードを使ってインスタンスを作成し、必要な引数を渡します。

const rectangle = new Rectangle(5, 3);

この例では、幅が5、高さが3の Rectangle インスタンスを作成しています。
インスタンスのメソッドを呼び出すには、ドット記法を使います。

console.log(rectangle.getArea());      // 出力: 15
console.log(rectangle.getPerimeter()); // 出力: 16

getArea() メソッドと getPerimeter() メソッドを呼び出し、それぞれの計算結果をコンソールに出力しています。

クラスを別ファイルで定義する

クラスを別のJavaScriptファイルで定義することで、コードの構造が明確になり、再利用性が高まります。
クラスを定義したJavaScriptファイルをHTMLファイルから読み込むことで、クラスを利用できます。

例えば、Rectangle クラスを rectangle.js ファイルで定義し、HTMLファイルからそのファイルを読み込むことができます。

<script src="rectangle.js"></script>

このようにクラスを別ファイルで定義し、HTMLファイルから読み込むことで、コードの管理がしやすくなります。

まとめ

JavaScriptでクラスを利用することで、オブジェクト指向プログラミングの概念を活用できます。
このことにより、構造化されたコードを書くことができます。

クラスを定義し、インスタンスを作成することで、コードの再利用性や保守性が向上します。
また、クラスを別のJavaScriptファイルで定義することで、コードの管理がしやすくなります。

ぜひ、JavaScriptでクラスを活用して、よりクリーンで再利用可能なコードを書いてみてください。