【React】【Vue】など流行りのフレームワークを使うもののためのJS基礎「クラス、インスタンス」

流行りのフレームワークを使っていると忘れがち（意識しなくてよい）JS の基礎を学び直してみた。

関数とメソッドの違い

結論：オブジェクトに入っているのかどうか

• 関数 → 複数の箇所から共通で呼び出せるプログラムの塊
• メソッド → オブジェクトがプロパティとして持っている関数

関数

const sample = () => {
  console.log("hello");
};

sample();

メソッド

const person = {
  name: "菅田将暉",
  age: 28,
  sample: () => {
    console.log("結婚おめでとう！");
  },
};

person.sample();

クラス・インスタンス

クラス

• 設計図をイメージ
• クラス名は基本的に大文字から始める

class Car {}

インスタンス

オブジェクトを生成するための設計図（class）が用意できたので、
その設計図から実際にオブジェクトを生成する為には、「new クラス名()」とする。
クラスから生成したオブジェクトはインスタンスと呼ぶ。

class Car {}

// Carクラスのインスタンスを定数carに代入
const car = new Car();

コンストラクタ

クラスにはコンストラクタと呼ばれる機能が用意されている。
コンストラクタはインスタンスを生成するときに実行したい処理や設定を追加するための機能。
クラスの中括弧 { } 内に　「constructor() {}」と記述する。

class Car {
  // クラスの中に追加
  constructor() {}
}

コンストラクタの処理

コンストラクタの中に処理を記述することで、ここに書いた処理は
インスタンスが生成された直後に実行される。
そして、大切なのは、インスタンスごとに毎回実行されるという事。

class Car{
  constructor() {
    console.log("新車が発売されます！");
  }
}

const car1 = new Car();
const car2 = new Car();

// 出力結果
// インスタンスごとに実行される
新車が発売されます！
新車が発売されます！

プロパティと値を追加

コンストラクタの中で、生成したインスタンスに関する情報を追加するには、
コンストラクタの中で「this.プロパティ = 値」とする事で、
生成されたインスタンスにプロパティと値を追加する事が出来る。

class Car {
  constructor() {
    this.プロパティ名 = 値;
  }
}

コンストラクタの中で追加した値は、
「インスタンス.プロパティ」とする事でクラスの外で使用出来る。

class Car {
  constructor() {
    this.name = "トラック";
  }
}
const car = new Car();
// 「名前: 〇〇」となるように出力
console.log(`名前: ${car.name}`);

// 出力結果;
名前: トラック;

引数ごとに値を変える

コンストラクタでは、関数と同じように、引数を受け取ることが可能。
「constructor」の後の括弧「( )」内に引数名を記述することで、
その引数をコンストラクタの処理内で使用出来る。

コンストラクタに引数として値を渡すには、
「new クラス名( )」の括弧「( )」内に値を追加する。

class Car {
  constructor(name, color) {
    this.name = name;
    this.color = color;
  }
}
// 引数に「"トラック"」と「黒」を渡す
const car = new Car("トラック", "黒");
// 「名前: 〇〇」となるように出力
console.log(`名前: ${car.name}`);
// 「色: 〇〇」となるように出力
console.log(`色: ${car.color}`);

// 出力結果;
名前: トラック;
色: 黒;

メソッド

メソッドとはそのインスタンスの「動作」のようなもの。
「名前」や「年齢」などの情報はプロパティで追加したのに対して、
メソッドは「挨拶をする」「値を計算する」などの処理のまとまりを表す。

メソッドの定義

メソッドはクラスの中で定義します。
「メソッド名() { }」とすることでメソッドは定義出来る。
メソッドは関数と似たようなもので、中括弧「{ }」の中にそのメソッドで行いたい処理を記述する。

class Car {
  メソッド名() {
    // 行いたい処理
  }
}

メソッドの呼び出し方

「インスタンス.メソッド名()」とする事でそのメソッドを呼び出し、
処理を実行することが出来る。

class Car {
  constructor(name, color) {
    this.name = name;
    this.color = color;
  }
  // actionメソッドを追加
  action() {
    console.log("走る");
  }
}
const car = new Car("トラック", "黒");
// carに対してactionメソッドを呼び出す
car.action();

//出力結果;
走る;

メソッド内で値を使う

メソッド内でインスタンスの値を使用するには、「this」という特殊な値を用いて、
「this.プロパティ名」とします。

class Car{
  constructor(name, color) {
    this.name = name;
    this.color = color;
  }
  action() {
    console.log(`${this.name}は、走る`);
  }
}
const car = new Car("トラック", "黒");
// carに対してactionメソッドを呼び出す
car.action();

// 出力結果
トラックは、走る

メソッド内でのメソッド呼び出し

メソッド内で他のメソッドを呼び出すことも可能。
メソッド内で「this.メソッド名()」とすることで、同じクラスの他のメソッドを使うことが出来る。

class Car{
  constructor(name, color) {
    this.name = name;
    this.color = color;
  }
  // actionメソッド
  action() {
    console.log(`${this.name}は、走る`);
  }
  // infoメソッド
  info() {
    // actionメソッドを呼び出す
    this.action();

    console.log(`この車は${this.name}です`);
    console.log(`${this.color}色です`);
  }
}
const car = new Car("トラック", "黒");

car.info();

// 出力結果
トラックは、走る
この車はトラックです
黒色です

static

インスタンス化しなくても使える

class Car {
  static run(color) {
    console.log(`この${color}色の車は走ります`);
  }
}

Car.run("黒");

// 出力結果;
この黒色の車は走ります;

インスタンス化せずにつかう有名なクラスに[Math]とかがある。

実際の使用方法

JS(フロントエンドでは)実際クラスを作ってインスタンス化して使うことはあまりしないと思います。
元から用意されている物を使うのが一般的かなと思います。

下の例では Date というもともと用意されたクラスを使用しています。
そのクラスをインスタンス化して、クラスの中にある getDate()などのメソッドを使用しています。

//インスタンス化(初期化)
let today = new Date();
//引数を渡してインスタンス化
let newYear = new Date(2021, 1, 1);
//インスタンスに元から入っているメソッドを使う
today.getDate();
newYear.getFullYear();