未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

【JavaScript】クラス(class)の書き方・使い方をマスターしよう!

本記事ではJavaScriptのクラスの書き方・使い方について解説しています。

クラスは多くのプログラミング言語で使われていたのですが、JavaScriptでは導入されておらず使用することができませんでした。しかしES6からクラスが導入されたので、他のプログラミングを使っていた人もJavaScriptで開発がしやすくなりました。

また、JavaScriptだけ触ってきた人もクラスの使い方を覚えることで他のプログラミング言語を学習する際に理解のスピードが格段に上がるので頑張って習得しましょう!

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのJavaScriptメカニズム

作成者 CodeMafia
学習時間 20.5時間
受講者数 16,593人
レビュー (2,383件)

クラスの書き方

クラス宣言

クラスを使うためには関数と同じように宣言する必要があります。クラスを宣言する時の書き方は以下のとおりです。

JavaScript
class クラス名{
  /* 後に追加していきます */
}

クラス名は関数などと混ざらないように基本的に頭文字を大文字にします。例えば人の情報を扱うクラス(user)の場合はclass Userにします。

constructorで初期値を設定

constructorはインスタンス化(new クラス名();)した時に渡された値を引数に受け取り、その値を初期値として設定します。このconstructorはデフォルトで用意されているメソッドでクラス内で使用することができます。

JavaScript
class Animal{
  constructor(name,height,weight){
    this.name = name;
    this.height = height;
    this.weight = weight;
  }
}

インスタンスの生成

constructorで初期値を設定したら、インスタンスを生成して初期値を渡しましょう。「new クラス名」でインスタンスを生成することができます。

HTML
const dog = new Animal(dog,60,15);
const cat = new Animal(dog,45,5);

メソッドを定義する

インスタンスされたものに対して何かしらの処理をするメソッドを定義してみましょう。

先ほどconstructorで初期値を設定したので、その初期値が正しく設定されているかの確認も兼ねて値をコンソールで表示させます。

JavaScript
class Animal {
  constructor(name, height, weight) {
    this.name = name;
    this.height = height;
    this.weight = weight;
  }
  info() {
    console.log(
      `動物:${this.name},体長:${this.height}cm,体重:${this.weight}kg`
    );
  }
}

const dog = new Animal("イヌ", 60, 15);
const cat = new Animal("ネコ", 45, 5);
dog.info(); // -> 動物:イヌ,体長:60cm,体重:15kg
cat.info(); // -> 動物:ネコ,体長:45cm,体重:5kg

正しく名前・体長・体重が表示されていることが確認できました。上記のコードでは、インスタンスされた変数(オブジェクト)に対してメソッドを実行させる処理を記述しましたが、インスタンスされたものに対して必ず実行させたい処理がある場合、constructor内にメソッド名を記述して強制実行させることも可能です。

JavaScript
class Animal {
  constructor(name, height, weight) {
    this.name = name;
    this.height = height;
    this.weight = weight;
    this.info(); // -> インスタンスが生成された時にinfo()を実行
  }
  info() {
    console.log(
      `動物:${this.name},体長:${this.height}cm,体重:${this.weight}kg`
    );
  }
}

const dog = new Animal("イヌ", 60, 15);
const cat = new Animal("ネコ", 45, 5);

クラス継承

クラス継承とは、新しいクラスを作成する時に継承元のプロパティやメソッドなどを呼び出すことができます。

クラス継承を行うには、クラス宣言をする時に「新しいクラス名 extends 継承元クラス名」の形で記述します。続いて、super(スーパー)と呼ばれるものを使用します。

HTML
class Animal {
  constructor(name, height, weight) {
    this.name = name;
    this.height = height;
    this.weight = weight;
  }
}

class JapaneseAnimal extends Animal { // -> Animalのクラスを継承
  constructor(name, height, weight, habitat) {
    super(name, height, weight); // -> Animalのプロパティを継承
    this.habitat = habitat;
  }
  info() {
    console.log(
      `動物:${this.name},体長:${this.height}m,体重:${this.weight}kg,生息地:${this.habitat}`
    );
  }
}

const kiji = new JapaneseAnimal("キジ", 0.8, 1, "日本");
kiji.info(); // -> 動物:キジ,体長:0.8m,体重:1kg,生息地:日本

今回の例では登場していませんが、継承元のメソッドを呼び出す場合「super.継承元のメソッド」で呼び出すことができます。