JavaScriptコース4 クラスの基本まで

◆オブジェクト

const 定数　={プロパティ名1:その値,プロパティ名2:その値};
console.log(定数.プロパティ名2);
　→プロパティ名2の値が表示される

・オブジェクトの値を関数にすることもできる。

const 定数 ={

プロパティ名:()=>{

処理

}

};

定数名.プロパティ名():
　↑で上記の処理が呼び出される

const animal ={
 name:"レオ",
 age:3,
 greet:() => {
   console.log("こんにちは");
 }
};
// animalのnameプロパティの値を出力してください
console.log(animal.name);

// animalのgreetプロパティの関数を実行してください

animal.greet();

console.log(animal.name);
　→レオ
animal.greet();
　→こんにちわ

◆オブジェクトの量産

・クラス

オブジェクトの設計図を作る→それをもとに各ユーザーのデータを生成する
このオブジェクトのことを「クラス」という

class クラス名{

}

クラス名は大文字で始める

・インスタンス

class Animal{

}

const animal = new Animal();

定数animalは、=new Animal();によって、クラスAnimalsを代入される
　クラスから生成されるオブジェクトをインスタンスと呼ぶ。
　　定数animalはクラスAnimalからから生成されるのでAnimalインスタンスと呼ぶ

・コンストラクタ

class Animal{
 constructor(){

 }

}

クラスの中に constructor(){ }で実行したい処理を追加する

class Animal{
 constructor(){
  console.log("こんにちは！")

 }

}
const animal1 = new Animal();　
const animal2 = new Animal();

1.定数animal1にクラスAnimalを代入してインスタンスを生成
　2.クラスAnimalはコンストラクタ中の処理を実行し"こんにちは！"が表示される
 　　3.animal2も同様に処理される

・this.プロパティ=値

class Animal{
 constructor(){
  this.name　="レオ";

 }

}

コンストラクタ内にthis.プロパティ=値とすることで、
　インスタンスにプロパティと値を追加
　　コンストラクタ内で設定したプロパティがクラスの外でも使える

console.log(`名前：${animal.name}`);で
　「名前：レオ」が出力される

・引数

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

 }

}
const animal =new Animal("レオ",3);

インスタンスanimalにクラスAnimalを代入
　クラスAnimalはプロパティnameの値が引数name、プロパティageの値が引数age
 const animal =new Animal("レオ",3);で、プロパティ1に「レオ」、2に「3」の引数が渡される。

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}`);

◆メソッド

プロパティ→インスタンスの情報などを追加するのに使う
メソッド→インスタンスの動作、処理のまとまり

class Animal{
 constructor(){
 　…
   }
 メソッド名(){
  //行いたい処理
 }
}

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();

コントラクタ内のgreet(){}によってメソッドが定義され、
　「インスタンス.メソッド名();」→animal.greet();によってメソッドが呼び出される。

クラスAnimalのメソッドgreetによって、クラスAnimalが代入される定数animalは「console.log("こんにちは");」という処理を行う。(インスタンス)

class Animal {
 constructor(name, age) {
   this.name = name;
   this.age = age;
   
 }
 
 greet() {
   console.log("こんにちは");
 }
 
 // infoメソッドを追加してください
 
 info(){
   console.log(`名前は${this.name}です`);
   console.log(`${this.age}歳です`);
 }
 //メソッド内でインスタンスの値を使用する際は「this.プロパティ名」という特別な値を使う
 
}

const animal = new Animal("レオ", 3);
animal.greet();

// animalに対してinfoメソッドを呼び出してください
animal.info();

クラスAnimalのコンストラクタ内のプロパティnameの値は引数name
                                                           プロパティ age  の値は引数age
「名前はnameです」、「age歳です」と表示する処理をするメソッドinfoを作成

メソッド内でインスタンスの値を使用する際は「this.プロパティ名」という特別な値を使う

nameに引数レオ、ageに引数3のクラスAnimalが代入される定数animal
 animal.info();でメソッドinfoが処理

・クラス
　オブジェクトの設計図
　　class クラス名{}

・インスタンス→クラスから生成されるオブジェクト
　const animal = new Animal();で、クラスAnimalを代入する定数animalというオブジェクトが生成される。これがインスタンス

・プロパティ→インスタンスの情報などを追加するのに使う
・メソッド→インスタンスの動作、処理のまとまり

コンストラクタ

this.プロパティ=値