【JavaScript入門】class宣言・class式でクラスを定義する │ TechMania

オブジェクト指向プログラミングの概念を実現する上で切り離せないのが、クラスという機能です。
JavaScriptもオブジェクト指向言語の１つであり、クラスを定義することができます。

そこで今回は、JavaScriptでクラスを定義する方法について、詳しく解説していきたいと思います。
基本構文から応用的な内容まで紹介していきますので、ぜひ参考にしてみてください。

1. JavaScriptのクラスとは？
- 1.1. 以前はJavaScriptにclassは無かった
2. class宣言・class式の使い方
3. class構文の活用
4. クラスを継承する
- 4.1. extends でクラスを継承する
- 4.2. super で継承元のクラスをオーバーライドする
5. まとめ
6. JavaScriptの勉強方法は？

JavaScriptのクラスとは？

クラスとは、複数のオブジェクトで共通して持たせたいプロパティやメソッドを定義し、1つのテンプレートしてまとめる機能のことを言います。
オブジェクト指向プログラミングに欠かせない重要なシステムの1つであり、Javaを始めとする様々なオブジェクト指向言語で採用されている機能です。

クラスは、その役割からオブジェクトの設計図とも呼ばれます。
定義したクラスを元に実体(インスタンス)を作成することで、複数のオブジェクトに同様の振る舞いをさせることができます。

以前はJavaScriptにclassは無かった

JavaScriptはオブジェクト指向言語の1つではありますが、プロトタイプベースと呼ばれるスタイルに基づくため、元々はクラスが存在しませんでした。

プロトタイプベースでのオブジェクト指向プログラミングは、多くのオブジェクト指向言語で採用されているクラスベースに比べ、可読性やメンテナンス性、拡張性などが低くなりがちな傾向にあります。
こうした難点を解消してくれるのが、ES2015(ES6) より新たに追加された class 構文です。

class宣言・class式の使い方

JavaScriptにおけるクラスは、厳密には関数の一種とされています。
そのため、関数の定義方法に関数宣言と関数式の２つがあるように、class構文もまた、class宣言と class式の２通りの定義方法があります。

それぞれの定義の仕方について見ていきましょう。

class宣言の基本構文

class宣言で定義する際は、以下のような構文で記述します。

【基本構文】

class クラス名 {
    //定義内容
}

{} の中には、インスタンス生成時に行う初期化処理（コンストラクタ）や、オブジェクトが保有するプロパティやメソッドなどを定義します。

クラスの定義が完了すると、以下のように newキーワードを使ってインスタンスを生成できるようになります。

【サンプルコード】

class sampleClass {
    sayHello() {
        console.log("Hello")
    }
}

const sample = new sampleClass();
sample.sayHello();

class式の基本構文

class式で定義する際は、以下のような構文で記述します。

【基本構文】

const sample = class {
    //定義内容
}

class宣言の場合は必ずクラス名を記述する必要がありますが、class式では省略が可能です。
インスタンスを生成する際は、定義したクラスを代入した変数を使用します。

【サンプルコード】

const sampleClass = class {
    sayHello() {
        console.log("Hello")
    }
}

const sample = new sampleClass();
sample.sayHello();

コンストラクタを作る

class構文では、インスタンス生成時に一度だけ実行される特別なメソッドを定義することができます。
それが、コンストラクタです。

コンストラクタは基本的に、生成するインスタンスの初期化を行うために使用されます。
定義する際の構文は、以下の通りです。

【基本構文】

class sample {
    constructor() {
         // 初期化内容;
    }
}

コンストラクタを定義する場合は、メソッド名を必ず constructor と記述して定義します。
引数の指定方法は、通常のメソッドと同様です。

【サンプルコード】

class sample {
    constructor(text) {
         this.text = text;
    }
}

また、コンストラクタを含むメソッド内では、上記のようにプロパティを新たに追加することもできます。
プロパティの追加はクラスフィールドでも実行可能ですが、コンストラクタを使用することにより、プロパティの宣言と初期化を１つの処理にまとめることができます。

メソッドを定義する

続いて、クラスメソッドを定義する方法について見ていきましょう。

メソッドを定義する際の基本構文は、以下の通りです。

【サンプルコード】

class sample {
    メソッド名() {
         // 処理内容;
    }
}

クラスメソッドの場合、通常の関数を定義する時とは異なり、functionキーワードは使わずにメソッド名のみを記述します。
定義したメソッドは、「オブジェクト.メソッド名()」の形式で呼び出し可能です。

【サンプルコード】

class sampleClass {
    constructor(text) {
         this.text = text;
    }
    sayText() {
        console.log(this.text);
    }
}

const sample = new sampleClass("Hello");
sample.sayText();

class構文の活用

上述した基本的な内容の他にも、class構文で使える様々な機能があります。
順に見ていきましょう。

ゲッターメソッドを作る

クラス内のプロパティに対して操作を行う際は、コードの保守性などの観点から、プロパティに直接アクセスして操作するのではなく、専用のメソッドを通して操作することをおすすめします。

まずは、プロパティの値を取得するための専用メソッドを作成してみましょう。
JavaScriptでは、get構文を使用してゲッターメソッドを定義することができます。

【サンプルコード】

class Student {

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

    get myName() {
        return this.name;
    }

    get myAge() {
        return this.age;
    }
}

const yamada = new Student("山田太郎", 16);

console.log(`名前：${yamada.myName}`);
console.log(`年齢：${yamada.myAge}歳`);

【実行結果】

名前：山田太郎
年齢：16歳

get構文を使用して定義したメソッドは、プロパティの呼び出しを行うのと同じように、メソッド名のみでの実行ができるようになります。
これにより、通常のクラスメソッドよりもコードを簡潔に記述できるのが特徴です。

また、上記のようにメソッドを通してプロパティの操作を行うことで、意図せず値を変更してしまうなどのミスが防ぎやすくなるメリットがあります。
コードの修正を行う際も、メソッド内の処理を変更するだけで済むようになるため、メンテナンスがしやすくなるのも利点の１つです。

セッターメソッドを作る

ゲッターメソッドとは反対に、プロパティの値を変更する際に使用可能なセッターメソッドを定義することもできます。
セッターメソッドは、set構文を使用して定義することが可能です。

【サンプルコード】

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

    set myName(name) {
        this.name = name;
    }

    set myAge(age) {
        this.age = age;
    }
    
    get myName() {
        return this.name;
    }

    get myAge() {
        return this.age;
    }
}

const yamada = new Student("山田太郎", 16);

yamada.myName = "山田 次郎";
yamada.myAge = 17;

console.log(`名前：${yamada.myName}`);
console.log(`年齢：${yamada.myAge}歳`);

【実行結果】

名前：山田 次郎
年齢：17歳

通常のメソッドの場合、引数に渡す値は()の中に記述しますが、セッターメソッドの場合はプロパティと同様に代入式で値を渡します。
そのため、ゲッターメソッドとセットメソッドの名前を同一に揃えることで、プロパティと同じような感覚で値の取得や代入を行うことができるようになります。

静的メソッドを作る

class構文では、staticキーワードを使用して静的メソッドを定義することもできます。

静的メソッドとは、インスタンスごとに保有するデータに影響されない処理を定義したメソッドのことを言います。
通常のメソッドは使用時にインスタンスを生成する必要がありますが、静的メソッドの場合は、インスタンスを生成せずにクラスから直接呼び出すことができるのが特徴です。

【サンプルコード】

class User {

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

    static sayHello() {
        return "Hello!";
    }

    get myName() {
        return this.name;
    }
}

console.log(User.sayHello());

【実行結果】

Hello!

クラスを継承する

class構文で使用できる機能の中に、クラスの継承とオーバーライドがあります。
それぞれの動作や詳しい使い方について、順に見ていきましょう。

extends でクラスを継承する

定義が完了したクラスは、extendsキーワードを使って継承することができます。

継承とは、対象のクラスで定義したプロパティやメソッドなどの内容を引き継いだ上で、新たなクラスを定義することを言います。
既存クラスの定義内容はそのままに、一部の内容のみを変更したり、新たに追加したい場合に活用できる機能です。

クラスの継承を行う際は、以下のように記述します。

【基本構文】

class クラス名 extends 継承元のクラス {
    // 定義内容
}

継承元のクラス（親クラス）で定義されたプロパティやメソッドは、そのまま継承先のクラスで使用することができます。

【サンプルコード】

class User {

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

    showProfile() {
        console.log(`名前：${this.name}, 年齢：${this.age}`);
    }
}

class Student extends User {
    sayHello() {
        console.log("Hello!");
    }
}

const yamada = new Student("山田太郎", 16);

yamada.showProfile();
yamada.sayHello();

【実行結果】

名前：山田太郎, 年齢：16
Hello!

super で継承元のクラスをオーバーライドする

クラスの継承と合わせて活用できるのが、オーバーライドです。
オーバーライドとは、親クラスで定義したメソッドの内容を、継承先のクラス（子クラス）で上書きすることを言います。

メソッドのオーバーライドをする際は、上書きしたいメソッドと同名のメソッドを子クラス内で定義します。

【サンプルコード】

class User {

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

    showProfile() {
        console.log(`名前：${this.name}, 年齢：${this.age}`);
    }
}

class Student extends User {
    
    showProfile() {
        console.log(`名前：${this.name}, 年齢：${this.age}`);
        console.log("Hello!");
    }
}

const yamada = new Student("山田太郎", 16);
yamada.showProfile();

【実行結果】

名前：山田太郎, 年齢：16
Hello!

コンストラクタも同様に、オーバーライドすることが可能です。
子クラスで新たにプロパティを追加したい場合に活用できます。

コンストラクタをオーバーライドする場合は、1行目にsuper()と記述し、親クラスのコンストラクタを呼び出す必要があります。

【サンプルコード】

class User {

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

    showProfile() {
        console.log(`名前：${this.name}, 年齢：${this.age}`);
    }
}

class Student extends User {
    
    constructor(name, age, myclass) {
        super(name, age);
        this.myclass = myclass;
    }
    
    showProfile() {
        console.log(`名前：${this.name}, 年齢：${this.age}, クラス：${this.myclass}`);
    }
}

const yamada = new Student("山田太郎", 16, "1年B組");
yamada.showProfile();

【実行結果】

名前：山田太郎, 年齢：16, クラス：1年B組

なお、オーバーライドを行なっても親クラスの定義内容に影響はないため、異なる処理として使用可能です。

【サンプルコード】

const yamada = new Student("山田太郎", 16, "1年B組");
yamada.showProfile();

const sato = new User("佐藤次郎", 18);
sato.showProfile();

【実行結果】

名前：山田太郎, 年齢：16, クラス：1年B組
名前：佐藤次郎, 年齢：18

まとめ

いかがでしたか？今回は、JavaScriptでクラスを定義する方法について解説しました。

クラスの定義は、オブジェクト指向のプログラミングをする上で欠かせない重要な機能なので、使い方をしっかりと覚えて活用できるようにしておきましょう。

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

＜テックマニアの特徴＞
・たしかな育成実績と親身な教育　～セカンドキャリアを全力支援～
・講師が現役エンジニア　～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート　～「わからない」を徹底解決～
・実務ベースでスキルを習得　～実践的な凝縮カリキュラム～

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。