Javascript ES6メモ

JavaScriptのES6について学んだので、個人的なメモ程度に記述します。
勉強途中のため、随時追記予定です。

JavaScript ES6について

JavaScript ES6は、従来の記法に比べより効率的にコードが書けることから近年注目を集めています。
今回は、ES6で新たに実装された機能に注目しながら、学んだ内容を記述して行きます。

ES6の新機能まとめ

• 変数の追加
• テンプレートリテラル
• アロー関数
• クラス

変数の追加

従来のvarに加え、letとconstが使用できるようになりました。
それぞれの違いは以下です。

let

「let」は変数を定義する際に使用します。
具体的な使用方法は以下です。

test.js

let name = "田中";

console.log(name);

出力結果は以下です。
田中

変数名の指定にはいくつかルールがあります。
- 変数名を数字で開始するとエラーが出る
- 変数名を日本語のローマ字表記にするのは好ましくない
- 日本語

また、変数の内容は更新することが可能です。

test.js

let name = "田中";
console.log(name);

// 変数の更新
name = "山田";
console.log(name);

出力結果は以下です。
田中
山田

変数を更新する際は、変数名の前にletをつけないことが注意点です。

const

「const」は、定数を定義する際に使用します。
具体的な使用方法は以下です。

test.js

const name = "田中";

console.log(name);

出力結果は以下です。
田中

変数との違いは、一度定義した定数の中身は更新できないという点です。

そのため、用途に合わせて「let」と「const」を使い分ける必要があります。

テンプレートリテラル

テンプレートリテラルは、ES6から実装された文字列や定数の連結手法です。
この手法は「+」記号を使用せずに文字列や定数を連結できます。
例えば、テンプレートリテラルの手法を用いてコンソールに文字列を表示する方法は以下です。

test.js

const name = "田中";
console.log('こんにちは、${name}さん');

出力結果は以下になります。
こんにちは、田中さん

上記のように、文字列の中で「${定数}」とすることで、「+」記号を使用せず、文字列の連結が可能となります。
また、同じ文字列の中に、複数の定数や変数を連結することも可能です。

アロー関数

アロー関数は、従来関数を定義する際に「function」を用いていましたが、それに代わる手法になります。
アロー関数を用いることで、「function」を使用するより、記述をシンプルにすることができます。
具体的には、以下のように記述します。

test.js

const greet = () => {
  console.log("こんにちは！");
}

// 関数の呼び出し
greet();

出力結果は以下になります。
こんにちは！

また、従来の関数同様、引数を指定することも可能です。
関数内では、引数とテンプレートリテラルを用いた記述も可能です。

test.js

const greet = (name) => {
  // テンプレートリテラルの手法を使用し、引数を代入
  console.log(`こんにちは、${name}さん`);

};

// 関数の呼び出しと引数の指定
greet("田中");

出力結果は以下になります。
こんにちは、田中さん

クラス

クラスは、オブジェクトを効率良くたくさん作成する際に使用します。
内容が多いため、いくつかの内容に分けて記述します。

• クラスの作成
• インスタンスの作成
• コンストラクタ
• メソッド
• クラスの継承
• オーバーライド

クラスの作成

クラスの作成方法は以下のように行います。

test.js

class Animal{

}

インスタンスの作成

クラスが作成できたら、クラスからオブジェクトを作成します。
クラスから作成したオブジェクトをインスタンスと呼びます。

インスタンスの作成方法は以下のように行います。

test.js

const animal = new Animal();

コンストラクタ

コンストラクタは、クラスの性質を決定するためのものです。
例えば、今回は「Animal」というクラスなので「犬、５歳」のように性質を決めていきます。

具体的には、以下のように使用します。

test.js

class Animal {
  // ここにコンストラクタを追加します
  constructor(){
    console.log("インスタンスを生成しました");
  }

}

コンストラクタに記述した処理は、インスタンスを作成した直後に実行されます。
また、この処理は、インスタンスごとに毎回実行されます。

コンストラクタの中で、プロパティと値を追加することも可能です。
プロパティと値を追加するには、「this」を使用します。

test.js

class Animal {
  constructor() {
    // nameプロパティに「犬」という値を追加します。
    this.name = "犬";
  }
}

const animal = new Animal();
console.log("名前: " + animal.name);

実行結果は以下になります。
名前:犬

また、クラスを作成する際に、引数を渡すことも可能です。

test.js

class Animal {
  // ここで引数を指定
  constructor(name) {
    // 値の代わりに引数を指定
    this.name = name;
  }
}

// 引数に「"犬"」を渡します。
const animal = new Animal("犬");

console.log(`名前: ${animal.name}`);

実行結果は以下になります。
名前:犬

メソッド

メソッドはクラスの動き（処理）を定義します。
具体的には、以下のように使用します。

test.js

class Animal {
  constructor(name) {
    this.name = name;
  }

  // ここでメソッドを定義します。
  greet(){
    console.log("こんにちは");
  }
}

const animal = new Animal("犬");

console.log(`名前: ${animal.name}`);

// ここでメソッドを呼び出します。
animal.greet();

実行結果は以下になります。
名前:犬
こんにちは

クラスの継承

新たに作成するクラスがすでに作成済みのクラスの一種である場合、クラスの継承を行うことで非常に効率的に作業を進めることが可能です。
継承とは、すでにあるクラスをもとに新たにクラスを作成する方法のことです。

クラスを引き継ぐには、「extends」を使用します。
具体的な使用方法は以下です。

test.js

// Animalクラスを継承してCatクラスを定義してください
class Cat extends Animal{
}

Catクラスには何も定義されていないように見えますが、この状態でAnimalクラスに定義されているコンストラクタやメソッドは使用可能です。

また、Animalクラスを継承して作成されたCatクラスに、メソッドを追加することも可能です。

test.js

class Cat extends Animal {
  // 継承したクラス内でメソッドを追加します。
  morning() {
    console.log("おはようございます。");
  }
}

また、子クラスで定義したメソッドは、親クラスで呼び出すことはできません。

オーバーライド

親クラスにあるメソッドと同名のメソッドを子クラスで定義した場合、子クラスのメソッドが優先的に使用されます。
これをオーバーライドと呼びます。

メソッド同様、コンストラクタもオーバーライドすることが可能ですが、その場合、コンストラクタの１行目に「super()」と記述する必要があります。

test.js

class Dog extends Animal {
  // ここにコンストラクタを追加します。
  constructor(name,age){
  // ここに「super()」を追加します。
    super(name);
    this.age = age;
  }