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.プロパティ=値
この記事が気に入ったらサポートをしてみませんか?