JavaScript    ②　ES5 ~ ES6　変更点  　（自分用）

>先ほど、　```jsの記法を教えて頂きました。
見易さに驚きました。大変感謝致します。
今後はきちんと活用させて頂きます。
ありがとうございます。


##【varは使わない】##
＊宣言はスコープ範囲注意

###let 変数###
再宣言不可、再代入可能
（let宣言は1回で、変数名で代入していく。）

###const　定数###
再宣言不可、再代入不可


＊ver :再宣言、再代入が可能。旧記法
##【アロー関数】##

```js
＜これがES5＞

const 変数　= function() {
関数
}
変数();

---------　↓　↓　------

＜ES6だと＞

アロー関数で表すと
const 変数　= () => {
関数
}
変数();
```

##【テンプレートリテラルの導入】##

**console.log(｀シングルクオートではなく　${変数など}　バックティック文字で囲む｀)；**

*バックティック文字　＝　＠　＋　shift*


##【クラスの導入】##
（クラス理解はReact, Vue.js 　には必須）
クラス名は同じく大文字開始


####newクラス名();####


```js
class User {
 処理内容
}

const nnn = new User();   ←//クラスのインスタンスをに代入
console.log(nnn);

ーーーーーーー
＜コンソール結果＞

＊処理内容

```

####*constructor：インスタンスの内容（実行したい処理や設定）を追加するための機能####
**インスタンスが生成された直後に実行される。**


####（インスタンスにプロパティ：値をつける）　this.プロパティ名 = 値(インスタンス）####
```js
class User {
 
  constructor(nam,ag) {        ←//引数分かりやすい様にe削除した
                                       
    this.name = nam;
    this.age = ag;
  }
}

const staff = new User("Aさん", 55);

console.log(`名前: ${staff.name}`);         ←//プロパティ名を呼び出している
console.log(`年齢: ${staff.age}`);

ーーーーーーー
＜コンソール結果＞

名前: Aさん
年齢: 55
```

###メソッド　＝　インスタンスの動作###

```js
class User {
 
  constructor(nam,ag) {        
                                       
    this.name = nam;
    this.age = ag;
  }
  
  greet() {
    console.log("D部配属です。");
  }
  
}

const staff = new User("Aさん", 55);

console.log(`名前: ${staff.name}`);         
console.log(`年齢: ${staff.age}`);

staff.greet();　　　　　　　　　　　　　←（const staff）＝Userクラスのgreet()を呼び出した

ーーーーーーー
＜コンソール結果＞

名前: Aさん
年齢: 55
D部配属です。　　　　　　　　　　　　　　　←（const staff）＝Userクラスのgreet()を呼び出した
```



####メソッド内でインスタンスを使用する   =   this.プロパティ名
 ```js
⑴　
 class User {
  constructor(nam,ag) {                                          
    this.name = nam;
    this.age = ag;
  }
  
  greet() {
    console.log("D部配属です。");
  }
  
  info () {                                       ←//info メソッド内でthis.nameを受け取る
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
  }
  
}

const staff = new User("Aさん", 55);

console.log(`名前: ${staff.name}`);         
console.log(`年齢: ${staff.age}`);
staff.greet();　　

staff.info();　　　　　　　　　　

ーーーーーーー
＜コンソール結果＞

名前: Aさん
年齢: 55
D部配属です。　
名前はAさんです
55歳です
　　　　　　　　　　　　　
```

####メソッド内にthis.メソッド名()記載　＝　同じクラス内の、他のメソッド利用可。####
####つまり⑴と⑵は同じ結果####

```js
⑵　
class User {
  constructor(nam,ag) {                                          
    this.name = nam;
    this.age = ag;
  }
  
  greet() {
    console.log("D部配属です。");
  }

info () {  
    this.greet();                                 ←//info メソッド内でgreetメソッドを受け取る
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
  }
  
}

const staff = new User("Aさん", 55);

console.log(`名前: ${staff.name}`);         
console.log(`年齢: ${staff.age}`);

staff.info();　　　　　　　　　　　　　　　　　　　 　←// staff.greet();　は不要となった　　　

---------------
＜コンソール結果＞

名前: Aさん
年齢: 55
D部配属です。　
名前はAさんです
55歳です


```



##【クラスの継承】##
>継承：親（スーパー）クラスのメソッド呼び出し可能。また、オーバーライド可。
>注意：子クラスで定義したメソッドは親クラス内では呼び出し不可。

###class 新規クラス名 extends 継承元クラス名 {###
###}###

```js
class User {
  constructor(nam,ag) {                                          
    this.name = nam;
    this.age = ag;
  }
  
  greet() {
    console.log("D部配属です。");
  }

info () {  
    this.greet();                               
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
  }
}

class Section extends User {　　　　　　　　　　←// Userクラスを継承したsectionsクラスを定義
  
}

const staff = new User("Aさん", 55);
const sect = new Section();      ←//Sectionクラスのインスタンスをsectに代入　今回は空要素undefined

console.log(`名前: ${staff.name}`);         
console.log(`年齢: ${staff.age}`);
staff.info();　
　　　　　　　　　　　　　　　　　　
sect.info();　　　　　　　　　　　　　　←// （継承されたsectionsクラス内が空の為、）
　　　　　　　　　　　　　　　　　　　　　　　　　sectionsクラス（のUserクラスのinfoメソッド）を呼びだし
　　　　　　　　　　　　　　　　　　　　　　　　（もし同じメソッド名があれば、子クラスのメソッドが呼び出される。
　　　　　　　　　　　　　　　　　　　　　　　　　　＝親クラスをオーバーライドした）

---------------
＜コンソール結果＞

名前: Aさん
年齢: 55
D部配属です。　
名前はAさんです
55歳です 　　   
D部配属です。
名前はundefinedです　　　　　←//　引数を空にした為、undefinedとなってしまう。
undefined歳です

```

　　　　　　　　　
###↓　undefinedはif文で回避###
```js

class User {
  constructor(nam,ag) {                                          
    this.name = nam;
    this.age = ag;
  }
  
  greet() {
    console.log("D部配属です。");
  }

info () {  
    this.greet();        

   if(this.age === undefined,this.name === undefined) { 
     console.log("名前非開示です");
     console.log("年齢非開示");
     
} else {
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
}                       
}
}
class Section extends User {
  
}

const staff = new User("Aさん", 55);
const sect = new Section();   


staff.info();
sect.info();

---------------
＜コンソール結果＞

D部配属です。　
名前はAさんです
55歳です 　　   
D部配属です。
名前非開示です
年齢非開示

```

```js
こっちでも可
if (this.age !== undefined) {
   console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);

```


-----

##【クラスの継承で　（constructor）インスタンスの継承かつ追加＝オーバーライド可】##

####constructor内の1行目に super() と記述必要####

####super（）内には親クラスのどの引数かを指定必要####

```js
class User {
  constructor(nam,ag) {                                          
    this.name = nam;
    this.age = ag;
  }
  
  greet() {
    console.log("D部配属です。");
  }

info () {  
    this.greet();                               
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
  }
}


class Section extends User {　　　
  constructor(name, age, area) {　　　　　←//引数追加された
    super(name, age); 　　　　　　　　←//super（）で、親クラスのどの引数か指定
      this.are = area;　　　　　　←//area引数をareに代入＝他メソッド内で使える様にする為、this
}
  
  info() {
    this.greet();
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
    console.log(`エリアは${this.are}です`);
    
    const res = this.resign();
    console.log(`再契約まで${res}年です`);
  }
  
  resign() {
    return 65 - this.age;
  }
}



const staff = new User("Aさん", 55);
const sect = new Section("Aさん", 55,"東京");   

staff.info();　　　　　　　　　　　　　　　　　　　
sect.info();　　　　　

---------------
＜コンソール結果＞

D部配属です。　　　　　　←//ここから staff.info();　　
名前はAさんです
55歳です 　　   
D部配属です。　　　←//ここから sect.info();
名前はAさんです
55歳です 　　 
エリアは東京です
再契約まで１０年です

```