クラスはES6から新しく導入された文法。
JavaScriptのライブラリ（React、Vue.jsなど）を学習するうえで必須の知識。
オブジェクトと関数
まずは、オブジェクトの復習から。
オブジェクトは、複数の値をプロパティという名前をつけて管理できるもの。
const user = { name: "伊代",age: 16}; オブジェクト
プロパティ名 値
console.log(user.age); 「定数名.プロパティ名」で値を取得14オブジェクトの「値」の部分には、関数を用いることもでき、プロパティの値として関数を記述する。
また、その関数を呼び出すには「定数名.プロパティ()」とする。
プロパティ名の後ろの()を忘れないように注意。よく使う書き方のなので覚える。
const 定数名 = {
プロパティ名: () = > { 値の部分に関数
処理
}
};
定数名.プロパティ名(); 関数の呼び出し例えば、以下のコードではオブジェクト「greet」プロパティに対応する値に関数（アロー関数）を用いている。
「user.greet()」とすることで関数が実行され、コンソールに表示される。
const user = {
name: "hiro60",
greet: () = > {
console.log("こんにちは！");
}
};
user.greet();オブジェクトを量産する
Webサービスなどでは、上記で作成したようなオブジェクトをいくつも扱っている。
例えば、ログインが必要なサービスでは、ユーザー（利用者）に関するデータ（オブジェクト）を用いている。
これらのデータは毎回ゼロから作成していたら大変なので、効率よく生成する方法を使う。
const user1 = { name: "ユーザー１", greet: ･･･};
const user2 = { name: "ユーザー２", greet: ･･･};
・
・
・
const user100 = { name: "ユーザー１００", greet: ･･･};
似たオブジェクトを大量に作成するのは大変！オブジェクトの設計図
効率よくオブジェクトを作成していくための方法として、最初に「設計図」を用意する必要がある。
例えば、ユーザーのデータをいくつも作成する場合は、最初に「ユーザーを生成するための設計図」を用意し、その設計図をもとにユーザーのデータを生成していくといったことができる。
この設計図のことをJavaScriptでは「クラス」と呼ぶ。
「class クラス名」とすることで、新しくクラスを用意できる。
クラス名は基本的に大文字から始めるようにする。
class User {
↑ クラス名
}インスタンスの生成
オブジェクトを生成するための設計図が用意できたので、その設計図から実際にオブジェクトを生成してみる。
クラスからオブジェクトを生成するには、「new クラス名()」とする。
クラスから生成したオブジェクトは、特別にインスタンスと呼ぶ。
また、AnimalクラスのインスタンスをAnimalインスタンスと呼ぶ。
class Animal {
}
const animal = new Animal();
↑ Animalインスタンス
インスタンスの確認
Animalクラスから生成したAnimalインスタンスをコンソールすると、インスタンスが空のオブジェクトであることがわかる。
class Animal {
}
const animal = new Animal();
console.log(animal);Animal{} ← 空のオブジェクト設計図の中身を追加する
ここまでで、設計図（クラス）を用意し、それをもとにインスタンスを生成する方法を学んだ。
しかし、今はまだクラスに何も処理を追加していないため、白紙の設計図のような状態。
設計図に設定を追加する必要がある。
class Animal {
// ここに設計図の中身を追加する
}コンストラクタとは
クラスにはコンストラクタと呼ばれる機能が用意されている。
コンストラクタはインスタンスを生成するときに実行したい処理や設定を追加するための機能。
クラスの中括弧{}内に「constructor(){}」と記述する。
class Animal {
constructor() {
}
}コンストラクタの処理
コンストラクタの中には処理を記述することができる。
ここに書いた処理はインスタンスが生成された直後に実行される。
大切なのは、インスタンスごとに毎回実行されるということ。
以下は2回「new Animal()」としているので、そのたびにコンストラクタ内の処理が実行されている。
class Animal {
constructor() {
console.log("こんにちは！"); インスタンスが生成された直後に実行される
}
const animal1 = new Animal();
const animal2 = new Animal();
}こんにちは！
こんにちは！プロパティを追加する
コンストラクタの中で「this.プロパティ名 = 値」とすることで、生成されたインスタンスにプロパティと値を追加することができる。
class Animal {
constructor() {
this.name = "hiro60";
}
}インスタンスとプロパティ
インスタンスとはオブジェクトなので、コンストラクタの中で追加した値はオブジェクトと同様に「インスタンス.プロパティ名」とすることで、クラスの外で使用することができる。
class Animal {
constructor() {
this.name = "hiro60";
}
}
const animal = new Animal();
console.log(animal.name); コンストラクタで設定した値が使えるhiro60インスタンスごとに値を変える
コンストラクタ内に処理を追加したことで、生成されるインスタンスの初期設定をすることができた。
しかし、上記のコードで生成されるインスタンスはすべて「hiro60」のように同じ値になってしまう。
コンストラクタの引数
インスタンスごとに自由に値を変える場合は、関数と同じように引数を受け取ることができる。
「constructor」の後のカッコ「()」内に引数を記述することで、その引数をコンストラクタの処理内で使用できる。
class Animal {
constructor(name, age) {
︙ 引数を受け取る
}
}コンストラクタに引数として渡すには、「new クラス名()」のカッコ「()」内に値を追加する。
以下では、文字列「”レオ”」という値が引数として渡され、コンストラクタ内では「name」として使うことができる。
class Animal {
constructor(name, age) {
this.name = name; ← レオ
this.age = age; ← 3
}
}
const animal = new Animal("レオ", 3); 引数に値を渡す
コメント