【Java Script】クラスとインスタンス

オブジェクトの中にも関数を入れることができます。

const member1 = {
  name: 'ケンシロウ', 
  school: '北斗',
  intro: (name, school)=>{
    console.log(`${member1.name}は${member1.school}です`);
  }
};

const member2 = {
  name: 'サウザー', 
  school: '南斗',
  intro: (name, school)=>{
    console.log(`${member2.name}は${member2.school}です`);
  }
};

member1.intro();
member2.intro();

出力結果

チャッピー

いくつも作ると文章全体が長くなりそうだし、修正も面倒くさそう

こばゆた

そんな時にスマートに書けるのがクラスなんだよ

今回の内容

1.クラスとインスタンス
- 1-1.クラスとインスタンス
- 1-2.クラスとインスタンスの作り方
2.メソッド
3.まとめ

1.クラスとインスタンス

1-1.クラスとインスタンス

用語

クラス

効率よくオブジェクトをつくるためのテンプレートのようなもの。

class クラス名{

}

クラス名は好きにつけられますが先頭は大文字にしましょう。

インスタンス

クラスから作られたオブジェクト

new クラス名();

クラスから作るのでクラス名と同じものを付けます。

コンストラクタ

クラスの中にプロパティや処理を書いていくもの

class クラス名{
  constructor(){

  }
}

この中にthis.プロパティ名 =というものを使ってプロパティを追加していきます。

1-2.クラスとインスタンスの作り方

では実際に作ってみましょう！

クラスの作り方

const member1 = {
  name: 'ケンシロウ', 
  school: '北斗',
};

const member2 = {
  name: 'サウザー', 
  school: '南斗',
};

先程のオブジェクトを元にクラスとインスタンスを作ってみましょう。

こばゆた

関数の部分は後から解説するため今は一時的に削除してあります

STEP1
class クラス名をつける
```
class Member{

}
```
クラス名の頭文字は大文字で書き始めます。
STEP2
コンストラクタを書き加える
```
class Member{
  constructor(){

  }
}
```
STEP3
プロパティを追加する
```
class Member{
  constructor(){
    this.name = ;
    this.school = ;
  }
}
```
プロパティを”this.プロパティ名 =”で加えていきます。
STEP4
引数を設定する
```
class Member{
  constructor(name, school){
    this.name = name;
    this.school = school;
  }
}
```
“name”と”school”を変えたいので引数を設定します。

こばゆた

これでクラスは完成です

インスタンスの作り方

STEP1
new クラス名( );を付ける
```
new Member();
```
クラス名と同じにします。

STEP2

変えたいところの引数を設定する

new Member('ケンシロウ', '北斗');
new Member('サウザー', '南斗');

こばゆた

実際に出力してみます

console.log(new Member('ケンシロウ', '北斗'));
console.log(new Member('サウザー', '南斗'));

出力結果

こばゆた

個別の値を出すにはいつも通りプロパティを指定すればOKです

console.log(new Member('ケンシロウ', '北斗').name);
console.log(new Member('ケンシロウ', '北斗').school);

出力結果ケンシロウ
北斗

2.メソッド

関数をプロパティの値にした場合の関数をメソッドといいます。

クラス内で定義することで関数のように呼び出すことができます。

class クラス名{
  constructor(){

  }

  メソッド名(){
    //処理
  }
}
//クラス内でメソッドを定義

インスタンスから呼び出すには以下の通りです。

new クラス名.メソッド名();

こばゆた

では先程のクラスにメソッドを加えてみましょう

メソッドの作り方

STEP1

クラス内にメソッドを書き加える

class Member{
  constructor(name, school){
    this.name = name;
    this.school = school;
  }

  intro(){
    
  }
}

STEP2

処理を作る

class Member{
  constructor(name, school){
    this.name = name;
    this.school = school;
  }

  intro(){
    console.log(`${name}は${school}です`);
  }
}

STEP3

thisを付ける

class Member{
  constructor(name, school){
    this.name = name;
    this.school = school;
  }

  intro(){
    console.log(`${this.name}は${this.school}です`);
  }
}

同じクラス内のプロパティを使うにはメソッドの時も”this”を使います。

こばゆた

呼び出してみましょう

new Member('ケンシロウ', '北斗').intro();
new Member('サウザー', '南斗').intro();

出力結果

3.まとめ

クラスとインスタンスまとめ

オブジェクトを簡潔にかつ楽に書くことができるテンプレートのようなものをクラスという
そこから作り出されたものをインスタンスという
クラス名とインスタンスは同じ名前にし、頭文字は大文字にする
クラスの中にプロパティや処理を書いていくものをコンストラクタという
コンストラクタ内のプロパティにはthis.プロパティ名にする
クラス内で関数を定義して、入れることができる
関数でクラス内のプロパティを使うときはthis.プロパティ名とする

class クラス名{
  constructor(){
    this.プロパティ = ;
    this.プロパティ = ;
  }
}

new インスタンス名();

class Member{
  constructor(name, school){
    this.name = name;
    this.school = school;
  }

  intro(){
    console.log(`${this.name}は${this.school}です`);  
  }
}

new Member('ケンシロウ', '北斗').intro();
new Member('サウザー', '南斗').intro();

出力結果