JavaScriptに新しく追加されたクラス機能。これによってより簡潔でスピーディーにプログラムを書けるようになりました。しかし初心者にとっては、かなりつまずきやすいポイント！クラスだのオブジェクトだの、あまり具体的なイメージが掴めません。
今回はそんな初心者の方に向けて、JavaScriptのクラスに関する基本を徹底解説します！ぜひ自分でもコードを書いて、試しながら読み進めてくださいね。
目次
クラスとは
まずはクラスについて、具体的なイメージを掴めるようにしましょう。
クラスとは簡単に言えば、設計図のようなもの。クラスを作成しただけではまだこの世には存在していない状態で、オブジェクトを生成することで、ようやくこの世に実態ができるのです。
上記の画像では、「個人情報クラス」を作成しました。個人情報クラスは、名前、性別、年齢をデータとして持つことができます。さらにそれぞれのデータを取得する機能も搭載されているのが個人情報クラスです。
個人情報クラスだけでは、当然人間は存在しません。この個人情報クラスを利用してオブジェクトと呼ばれる『実体』を作成することで、ようやく「人間」そのものが作成されるのです。
ここでは佐藤さんと田中さんが生成されました。設定できる情報は、クラスに記載されているもののみです。このようにデータや機能をまとめたものを、プログラミングの世界では「クラス」と呼びます。
早速自分でこのクラスを定義できるように、構文を見ていきましょう！
JavaScriptでのクラス定義
まずはJavaScriptでのクラス定義について見ていきましょう。JavaScriptでのクラス定義の方法は2つ！
①クラス宣言
|
1 |
class Member {} |
1つめの方法は、他の言語と同じようにclassという宣言を付け、クラスを宣言する方法です。classの宣言の後は、クラスに付ける名前「クラス名」を書きます。
これは言語によって異なる場合がありますが、クラス名の一文字目は大文字にするのが慣例です。今回は”Memberクラス”を例として用意しました。
この宣言方法はシンプルで分かりやすい反面、クラス名のないクラスを定義することはできません。
②クラス式（式としてクラスを宣言）
クラス定義の方法はクラス宣言の他にも、式としてクラスを宣言する方法があります。こちらはクラス宣言とは異なり、クラス名なしの無名クラスの作成も可能。実際に例を見てみましょう。
名前なしで宣言
クラス名なしのクラスを生成したい時、そんな時はクラス式を使用してクラスを宣言しましょう。
|
1 |
let Member = class {} |
名前付きで宣言
もちろん名前付きでの宣言もできます。名前を付けるときは、let 〇〇 = classの後にクラス名を付けます。
|
1 |
let Member = class Member {} |
JavaScriptクラスのコンストラクタ
クラス定義をして外枠だけ完成した後は、実際にクラスに属させる変数＝クラス変数を設定しなければなりません。クラス変数はクラスの部品と考えるとわかりやすいでしょう。
|
1 2 3 4 5 |
class Member { constructor(name, number) { this.name = name; this.number = number; } |
先ほど定義したMemberクラスに「コンストラクタ」を書き加えました。コンストラクタとは定義したクラスのオブジェクトを生成すると同時に、クラス変数を初期化する特別なメソッドのこと。
Memberクラスでは名前を持つ『name』と、ID番号を持つ『number』の2つの変数を設定しました。nameは文字を、numberは数字のデータを持つことに注意してくださいね。
3行目と4行目にあるthis.は、簡単に言うと『自分自身』を指す言葉で、
|
1 |
this.name = name |
によって、クラス変数のnameに値を設定することができます。
JavaScriptクラス内でのメソッド定義
クラスに部品であるクラス変数を作成した後は、クラス内の関数＝メソッドを作成していきます。クラス変数の値で演算を行ったり、偶数のみを表示させたり、メソッドでは自分自身で様々な機能を持たせることができます。
では実際のサンプルプログラムを見ながら、メソッドについて理解を深めていきましょう。
ここではオブジェクトを作成した際に作成したnameとnumberから、値を取り出すgetメソッド。nameとnumberに任意の値を設定するsetメソッドを定義します。
get構文
クラス変数nameに値を設定する『getNameメソッド』です。getをメソッド名の前に付け加えることで、そのクラスの値を取得することができます。
get メソッド名() {
処理
}
2行目のreturnでは、先ほど同様this.nameで自分自身の変数を指し、nameに入っている値を取り出します。
|
1 2 3 |
get getName() { return this.name; } |
『getNumberメソッド』では、名前ではなくID番号を取得します。構文などはgetNameメソッド同様、returnでthis.numberを指定することで、変数numberに設定した値を取り出しています。
|
1 2 3 |
get getNumber() { return this.number; } |
set構文
get構文は格納された値を取り出す構文でしたが、set構文では値を外から格納することができます。書き方はget構文と変わりません。実際に値をセットした際の動きは、次の段落で見ていきましょう！
|
1 2 3 |
set setName(name) { this.name = name; } |
set メソッド名() {
処理
}
オブジェクト生成
ここではオブジェクトの生成についてご紹介します。オブジェクトとは何かを冒頭で説明しましたが、今ははっきりとわからない方も多いはず。プログラムを書いていくうちに理解できるようになるので、安心してくださいね。
オブジェクトの生成では、クラス定義時に作成した設計書をもとに、実体＝インスタンスを作成します。
|
1 |
var tanaka = new Member("tanaka", 12); |
ここでは田中さんのインスタンス『tanaka』を作るために、まずは変数tanakaを宣言しました。イコールの先に続いているnewがオブジェクト作成時に必要な構文です。
オブジェクト名 = new クラス名(クラス変数1…)
newの後に、クラス名を続け、括弧でクラス変数にセットする値を囲います。これでオブジェクトの作成は完了しました！
個人情報を管理するための設計図から、「田中」の個人情報を管理するための実体が作成されたのです。
クラス変数の値を取得する
オブジェクトを作成した後は、先ほど定義したgetメソッドを使用していきましょう。メソッドへのアクセスは簡単！
オブジェクト名.メソッド名
たったこれだけでメソッドにアクセスすることができます。
|
1 |
console.log(tanaka.getName) |
console.logでコンソール内に出力を促し、その中でtanaka.getNameとして、tanakaオブジェクトのnameを呼び出します。
先ほどメソッド定義で、return this.nameを設定しているので、tanakaオブジェクトの生成時に設定された”tanaka”という名前が出力されるのです。
クラス変数に値をセットする
|
1 2 |
var yamamoto = new Member(); yamamoto.setName = "yamamoto" |
先ほど作成したtanakaオブジェクトではなく、ここでは新しく『yamamotoオブジェクト』を生成しました。tanakaオブジェクトと違うのは、オブジェクトの作成時に値を設定していない点。
初期値が設定されていないため、yamamotoオブジェクトは単なる空欄の個人状態が生成されてしまいました。しかしここにsetメソッドを使用することで、yamamotoをnameに設定できるのです。
2行目のyamamoto.setName = “yamamoto”では、setNameメソッドを呼び出し、yamamotoオブジェクトのnameに”yamamoto”を設定しました。これでyamamotoオブジェクトは空欄ではなく、nameにyamamotoという情報が追加されたことになります。
クラスの継承
最後はクラスの継承についてご説明します。クラスの継承とは、元となるクラス『親クラス』から派生して『子クラス』を作ることで、親クラスにはない変数やメソッドを子クラスにのみ再定義することができる機能。
親クラスと子クラスは派生の関係がありますが、子クラスに値を定義しても親クラスには反映されません。そのため子クラスをつくることで、より細かなクラス作成が可能になるのです。
|
1 2 3 4 5 6 7 8 9 10 11 |
class Member2 extends Member { constructor(name, number ,age) { super(name, number); this.age = age; } get getAge() { return this.age; } } |
親クラスは『Member』で、子クラスとして『Member2』を作成しました。構文が少し複雑なので、詳しく見ていきましょう。
まずはclass宣言でMember2というクラスを宣言します。これを親クラスからの派生クラスにしたい場合は、extends Memberを後に付けたし、Member2がMemberクラスの派生クラスであることを明示します。
class 子クラス名 extends 親クラス名{}
コンストラクタの部分では親クラスでも定義したname,numberの他にageを新たに付け加えました。これはMember2のみが所持しているクラス変数です。この初期化方法は、先ほど説明した通りです。
親クラスの変数を初期化するにはsuperという構文を使います。
super(親クラスの変数1, … )
これでname,number,ageの3つのデータを持つMember2が完成しました。しかしageはMember2のみが持つデータで、親クラスにはメソッドが定義されていません。そのため6行目以降からはageを取得するgetAgeメソッドを付け加えています。
Member2オブジェクト生成の方法は親クラスと変わりません。またメソッドもオブジェクト名.メソッド名とすることで、親クラスで定義されたメソッドを呼び出すことができます。
JavaScriptクラス まとめ
今回はJavaScriptで新たに追加された、クラスについてご紹介しました！
クラスを定義することでより完結なプログラムになったり、クラス自体を部品として何度も再利用できたり、活用できるところが多いのがおわかりいただけたでしょうか。
今回は最初のステップとしてかなり簡潔にご紹介しましたが、さらに詳しくクラスを学びたいという方は、ぜひこちらのサイトを参考にしてみてくださいね。
まずはクラスを作成するプログラムを書き、徐々に慣れていくところから始めましょう！
参考 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes
