オブジェクトと関数（１）
オブジェクトの「値」の部分には、関数を用いることもできます。
下図のようにプロパティの値として関数を記述します。また、その関数を呼び出すには、「定数名.プロパティ名()」とします。プロパティ名の後ろの()を忘れないようにしましょう。
オブジェクトの設計図
効率よくオブジェクトを作成していくための方法として、最初に「設計図」を用意する方法があります。
例えばユーザーのデータをいくつも作成する場合、最初に「ユーザーを生成するための設計図」を用意し、その設計図をもとにユーザーのデータを生成していく、といったことができます。
クラス
前のスライドで説明した「設計図」のことをJavaScriptでは「クラス」と呼びます。
図のように「class クラス名」とすることで新しくクラスを用意できます。なお、クラス名は基本的に大文字から始めるようにしましょう。
// Animalクラスを定義してください
class Animal{};
インスタンスの生成
オブジェクトを生成するための設計図を用意できたので、その設計図から実際にオブジェクトを生成してみましょう。クラスからオブジェクトを生成するには、図のように「new クラス名()」とします。
クラスから生成したオブジェクトは特別にインスタンスと呼びます。また、AnimalクラスのインスタンスをAnimalインスタンスと呼びます。
インスタンスの確認
今回はAnimalクラスから生成したAnimalインスタンスをコンソールに出力し、右の図のようにインスタンスが空のオブジェクトであることを確認してみましょう。（{}の前にクラス名のAnimalも表示されますが、気にしないでください。）
// Animalクラスのインスタンスを定数animalに代入してください
const animal = new Animal();
// 定数animalの値を出力してください
console.log(animal);
設計図の中身を追加する
ここまでで、設計図（クラス）を用意し、それをもとにインスタンスを生成する方法を学習してきました。しかし、今はまだクラスに何も処理を追加していないため、白紙の設計図のような状態です。
コンストラクタとは
クラスにはコンストラクタと呼ばれる機能が用意されています。コンストラクタはインスタンスを生成するときに実行したい処理や設定を追加するための機能です。
まず、図のように、クラスの中括弧 { } 内に「constructor() { }」と記述します。
// コンストラクタを追加してください
constructor(){
console.log(“インスタンスを生成しました”);
}
プロパティと値を追加する
コンストラクタの中で、生成したインスタンスに関する情報を追加してみましょう。
コンストラクタの中で「this.プロパティ = 値」とすることで、生成されたインスタンスにプロパティと値を追加することができます。
プロパティと値を追加する
コンストラクタの中で、生成したインスタンスに関する情報を追加してみましょう。
コンストラクタの中で「this.プロパティ = 値」とすることで、生成されたインスタンスにプロパティと値を追加することができます。
class Animal {
constructor() {
// nameの値に文字列「レオ」を代入してください
this.name = “レオ”;
// ageの値に数値の「3」を代入してください
this.age = 3;
}
}
const animal = new Animal();
// 「名前: 〇〇」となるように出力してください
console.log(`名前:${animal.name}`);
// 「年齢: 〇〇」となるように出力してください
console.log(`年齢:${animal.age}`);
class Animal {
// 引数に「name」と「age」を追加してください
constructor(name, age) {
// 「”レオ”」の代わりに引数nameの値を代入してください
this.name = name;
// 「3」の代わりに引数ageの値を代入してください
this.age = age;
}
}
// 引数に「”モカ”」と「8」を渡してください
const animal = new Animal(“モカ”, 8);
console.log(`名前: ${animal.name}`);
console.log(`年齢: ${animal.age}`);
メソッドとは
ここからクラスの重要な機能の1つである「メソッド」について学習していきましょう。
メソッドとはそのインスタンスの「動作」のようなものです。「名前」や「年齢」などの情報はプロパティで追加したのに対して、メソッドは「挨拶をする」「値を計算する」などの処理のまとまりを表します。
メソッドはクラスの中で定義します。「メソッド名() { }」とすることでメソッドは定義できます。
メソッドは関数と似たようなもので、中括弧「{ }」の中にそのメソッドで行いたい処理を記述します。
メソッドの使い方
メソッドは、そのクラスから生成したインスタンスに対して呼び出します。
具体的には、以下の図のように「インスタンス.メソッド名()」とすることでそのメソッドを呼び出し、処理を実行することができます。
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
// greetメソッドを追加してください
greet() {
console.log(“こんにちは”);
}
}
const animal = new Animal(“レオ”, 3);
console.log(`名前: ${animal.name}`);
console.log(`年齢: ${animal.age}`);
// animalに対してgreetメソッドを呼び出してください
animal.greet();
メソッド内で値を使う
では次に、「name」の値を用いて「名前は〇〇です」と出力するメソッドを作成してみましょう。
メソッド内でインスタンスの値を使用するには、「this」という特殊な値を用いて、「this.プロパティ名」とします。
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
// greetメソッドを追加してください
greet() {
console.log(“こんにちは”);
}
}
const animal = new Animal(“レオ”, 3);
console.log(`名前: ${animal.name}`);
console.log(`年齢: ${animal.age}`);
// animalに対してgreetメソッドを呼び出してください
animal.greet();
メソッド内で値を使う
では次に、「name」の値を用いて「名前は〇〇です」と出力するメソッドを作成してみましょう。
メソッド内でインスタンスの値を使用するには、「this」という特殊な値を用いて、「this.プロパティ名」とします。
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(“こんにちは”);
}
// infoメソッドを追加してください
info() {
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
}
}
const animal = new Animal(“レオ”, 3);
animal.greet();
// animalに対してinfoメソッドを呼び出してください
animal.info();
コンストラクタの処理
図のように、コンストラクタの中には処理を記述することができます。
ここに書いた処理はインスタンスが生成された直後に実行されます。
大切なのは、インスタンスごとに毎回実行されるということです。以下の図では2回「new Animal()」としているので、その度にコンストラクタ内の処理が実行されます。
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(“こんにちは”);
}
info() {
// greetメソッドを呼び出してください
this.greet();
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
}
}
const animal = new Animal(“レオ”, 3);
// 以下の1行を消してください
animal.info();
継承の書き方
継承を用いてクラスを作成するには「extends」を用います。
「Animalクラス」を継承して「Dogクラス」を作成するには、図のように「class Dog extends Animal」と書きます。
また、継承では元となるクラスを親クラス（今回はAnimalクラス）、新しく作成するクラスを子クラス（今回はDogクラス）と呼びます。
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(“こんにちは”);
}
info() {
this.greet();
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
}
}
// Animalクラスを継承してDogクラスを定義してください
class Dog extends Animal {
}
const animal = new Animal(“レオ”, 3);
animal.info();
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(“こんにちは”);
}
info() {
this.greet();
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
}
}
class Dog extends Animal {
// getHumanAgeメソッドを追加してください
getHumanAge() {
return this.age * 7;
}
}
const dog = new Dog(“レオ”, 4);
dog.info();
// 定数humanAgeを定義し、定数dogに対してgetHumanAgeメソッドを呼び出した値を代入してください
const humanAge = dog.getHumanAge();
// 「人間年齢で〇〇歳です」と出力してください
console.log(`人間年齢で${humanAge}歳です`);
オーバーライド
親クラスと同じ名前のメソッドを子クラスに定義すると、子クラスのメソッドが優先して使用されます。
これは、子クラスのメソッドが親クラスのメソッドを上書きしていることから、オーバーライドと呼ばれます。
infoメソッドの上書き
今回は、Dogクラスのinfoメソッドで人間年齢も出力するようにしましょう。前のページで定義したgetHumanAgeメソッドを使って以下のように書き換えます。
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(“こんにちは”);
}
info() {
this.greet();
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
}
}
class Dog extends Animal {
// infoメソッドを追加してください
info() {
this.greet();
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
const humanAge = this.getHumanAge();
console.log(`人間年齢で${humanAge}歳です`);
}
getHumanAge() {
return this.age * 7;
}
}
const dog = new Dog(“レオ”, 4);
dog.info();
コンストラクタの
オーバーライド（1）
メソッドと同じように、コンストラクタもオーバーライドすることができます。例えば、子クラスにプロパティを追加したい場合などに用います。
ただし、コンストラクタをオーバーライドする際は1行目に「super()」と記述する必要があります。これについて、次のスライドで詳しくみてみましょう。
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(“こんにちは”);
}
info() {
this.greet();
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
}
}
class Dog extends Animal {
// constructorを追加してください
constructor(name, age, breed) {
super(name, age);
this.breed = breed;
}
info() {
this.greet();
console.log(`名前は${this.name}です`);
// 「犬種は〇〇です」と出力してください
console.log(`犬種は${this.breed}です`);
console.log(`${this.age}歳です`);
const humanAge = this.getHumanAge();
console.log(`人間年齢で${humanAge}歳です`);
}
getHumanAge() {
return this.age * 7;
}
}
// 3つ目の引数に「”チワワ”」を渡してください
const dog = new Dog(“レオ”, 4, “チワワ”);
dog.info();