Javascript【クラス】とは？初心者向け

Javascriptの「クラス」
JavaScript(ES6)から実装されました。

私も説明するのが面倒です。
なんちゃって。
Javascriptの「クラス」
1つ1つ丁寧に説明していきます。

Javascript「クラス」ってなに？

以下のように記述します。

class クラス名{　}

始まりにclassを記述します。これは決まった型です。

クラス名は自分できます。
決め事として「クラス名」の頭文字は大文字にします。
後で見て、これだクラスだと判断がつくようにです。
例）Animal　Man

Javascript「クラス」何に使うの？

Javascriptでたくさんのデータを管理しなければならないとしましょう。
何千、何万人という個人のデータを管理しなければならないとしましょう。

しかも個人のデータというのは、色々な種類があります。
その人の身長、体重、年齢、職業、家族構成などなどです。
毎回毎回、そのデータを作成するのは面倒です。

ざっくり言うと、class クラス名{　}ではデータのひな型を作成することが出来ます。重要なことが伝わりますでしょう。

class クラス名{　}
後ろには何の記号もつきません。

Javascript「クラス」に中身を設定

Javascript「クラス」に中身を設定します。

クラスの中にデータを設定する。これは決まった形があります。
constructor(){　}
constructor意味:建設者

class Human {

　constructor() {

　}

}

実際にコードを書いてみましょう。

クラスはコードを書いただけでは実行はされません。

関数もそうでした。
関数の場合は「関数の呼び出し」をかく必要がありました。

例
const introduction = function() {

　console.log(“おはよう”);

};

introduction();

クラスの場合は、クラス独自のインスタンスを記述する必要があります。

Javascript「クラス」のインスタンスとは？

先ほどのコードなら、

class Human{

　constructor() {

　　console.log(“おはよう”);

　}

}

new Human();

new Human();がインスタンスになります。
そして今回なら、Humanインスタンスと呼ばれます。

「new クラス名()」
newは決まった単語です。

「class」を使うなら「new」をつくる。
セットで考えて下さい。

クラスはインスタンスがあることで初めて処理が実行されます。

クラスの中にデータを入れる

class Human{

　constructor(){

　　データを入れる。

　}

}

new Human();

↓

class Human{

　constructor(){

　　this.name = “太郎”;

　}

}

new Human();

const human = new Human();

console.log(human.name);

実際にコードを書いてみましょう

ディスプレイに

太郎

が、出力されます。

補足

↓説明のため2行にわけました。慣れてきたら1行でかいたほうがシンプルです。

クラスにデータを入れるには、constructor（コンストラクタ）の中で「this.プロパティ = 値」と記述します。
name太郎がクラスHumanのデータに入ります。

console.log(human.name);
そしてname内のデータの指定方法です。
「human.name」
プロパティを指定します。

現段階でクラスの便利さのイメージがわかないと思います。
どう便利なのか考えてみましょう。

Javascript「クラス」便利なの？

引数をかえれば出力される記述を変えることができます。

Javascriptのクラス「メソッド」とは？

メソッドとは、そのインスタンスの「動作」のようなものです。
「メソッド名() { }」とすることでメソッドは定義できます。
メソッド名は自分でつけます。

メソッドは関数と似たようなもので、中括弧「{ }」の中にそのメソッドで行いたい処理を記述します。

メソッドは「そのクラス」から生成したインスタンスに対して呼び出します。
「インスタンス.メソッド名( )」でメソッドを呼び出して処理を実行します。

先ほどのコードを使って実際に記述してみます。

メソッド内で値を使う場合

メソッド内でインスタンスの値を使用するには「this」という値を使います。
「this.プロパティ名」記述します。

Javascriptのクラス「継承」とは？

すでにある「クラス」をもとにして、新しく「クラス」を作成する方法のことです。全ての機能を引き継ぐことができます。

クラスHuman から、新しいクラスManに機能を引き継ぐとします。
また、「継承」では元となるクラスを親クラス（今回はHumanクラス）、
新しく作成するクラスを子クラス（今回はManクラス）と呼びます。

継承するコードの記述です。

class Man extends Human {

}

※extends意味：拡張する 拡大する

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

greet() {
　this.greet();
　console.log(名前は${this.name}です);
　console.log(${this.age}歳です);
　}
}

class Man extends Human {
}

「Manクラス」はHumanクラスのすべての機能を引き継いでいます。
greeメソッドを使用することができます。
「class Man」の「new Man」を作成します。

↓

ディスプレイには

名前は次郎です
23歳です

が、出力されます。