【JavaScript ES6学習】クラスの定義とインスタンスの作成等

2019/05/30 2019/06/17

【JavaScript ES6学習】基礎文法編目次

codecademyで学習したことをまとめています。
プログラミング初心者の私が学習しながら書いた、完全に自分用のメモみたいなものなので、他人が見ると意味不明だったり、間違いがある可能性があるのでご注意ください。

codecademyは無料でかなりのことが学習できる素晴らしいサイトですが、英語です。
なのでこの記事に書かれている日本語の用語も間違っているかもしれません。

今回学習した項目

codecademy
JavaScript
Lesson 9 Introduction to Classes, Constructor, Instance, Methods, Method Calls

クラスの概要、定義方法

まずクラスとは何か？と言うと、「オブジェクトのテンプレート」と考えればOKみたいです。

以下のコード例は、クラスの定義とインスタンスの作成をしています。

class Dog {
  constructor(name) {
    this._name = name;
    this._behavior = 0;
  }

  get name() {
    return this._name;
  }
  get behavior() {
    return this._behavior;
  }   

  incrementBehavior() {
    this._behavior ++;
  }
}

const halley = new Dog('Halley');

console.log(halley.name); // Print name value to console
console.log(halley.behavior); // Print behavior value to console
halley.incrementBehavior(); // Add one to behavior
console.log(halley.name); // Print name value to console
console.log(halley.behavior); // Print behavior value to console

console.log(halley); // Print "Dog { _name: 'Halley', _behavior: 1 }"

クラスのコンストラクター(constructor)メソッド

クラスとオブジェクトは似てますが、クラスには“constructor()”メソッドがあります。

コンストラクター(constructor)はクラスのインスタンスが新しく作成された時に呼ばれ、プロパティの作成やイニシャライズを行います。

class Dog {
  constructor(name) {
    this.name = name;
    this.behavior = 0;
  }
}

constructorの引数は、この例では“name”一つですが、複数もいけます。
constructorで“name”と“behavior”プロパティを作成していますが、thisキーワードが必要。

インスタンス(Instance)の作成

クラスのインスタンス(Instance)を作成する方法です。
インスタンスとは、クラスのプロパティやメソッドを引き継いだオブジェクトのこと。
クラスは「テンプレート」みたいなものですが、インスタンスは「実体」となります。

次のコードはインスタンスを作成している例。

class Dog {
  constructor(name) {
    this.name = name;
    this.behavior = 0;
  } 
}

const halley = new Dog('Halley'); // Create new Dog instance
console.log(halley.name); // Log the name value saved to halley
// Output: 'Halley'

“const halley = new Dog(‘Halley’);”の部分で、newキーワードを使ってDogクラスのインスタンス“halley”を作成しています。

“new Dog(‘Halley’)”と、引数に’Halley’を入れていますが、これがコンストラクターに渡され、インスタンスが返されます。

クラスでのメソッド、Getters

クラスでGetやメソッドを追加する方法です。
基本的にはオブジェクトにGettersやメソッドを追加するのと同じ書き方です。
ただ、メソッドとメソッドの間に“,(コンマ)”を書いてはいけないので、注意してください。

class Dog {
  constructor(name) {
    this._name = name;
    this._behavior = 0;
  }

  get name() {
    return this._name;
  }

  get behavior() {
    return this._behavior;
  }

  incrementBehavior() {
    this._behavior++;
  }
}

コンストラクター内で追加しているプロパティ名の頭に“_(アンダースコア)“を付けているのは、直接変更してはいけないことを(自分も含めて)コードを読む人に伝えるための慣習です。
オブジェクトのとこでも出てきましたね。

メソッドの呼び出し

クラスに定義されたメソッドを呼び出す方法です。
クラスのメソッドは、オブジェクトのメソッドを呼ぶのと同じ書き方でOK。

コードを見てみましょう。
まずはクラスを定義。

class Dog {
  constructor(name) {
    this._name = name;
    this._behavior = 0;
  }

  get name() {
    return this._name;
  }

  get behavior() {
    return this._behavior;
  }   

  incrementBehavior() {
    this._behavior++;
  }
}

続いてインスタンスを作成して、“nikko.incrementBehavior()”とメソッドを実行しています。

let nikko = new Dog('Nikko'); // Create dog named Nikko
nikko.incrementBehavior(); // Add 1 to nikko instance's behavior
let bradford = new Dog('Bradford'); // Create dog name Bradford
console.log(nikko.behavior); // Logs 1 to the console
console.log(bradford.behavior); // Logs 0 to the console