【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④

JavaScriptちゃんと学習中。
ほぼ自分の勉強メモです。
割と見られているみたいなので、ちょっと工夫して書いてみますが、
過度な期待はしないでください。

オブジェクトと関数

• オブジェクトとは

　オブジェクトは配列と同じく複数のデータをまとめて管理するもの。　
　オブジェクトは、それぞれの値にプロパティと呼ばれる名前をつけて管理する。
　書き方：{プロパティ1: 値1, プロパティ2: 値2} のように書き作成する。

• 関数とは

　関数は、「いくつかの処理をまとめたもの」
　定数や変数を定義した横に、「function()」と書き、その後ろの中括弧「{ }」の中に
　まとめたい処理を書くことで関数を用意することが出来る。
　
　アロー関数を用いれば、「function()」の部分を「( ) =>」と省略して書く事が出来る。
　今回ここでは、この書き方で記載している。

• オブジェクトと関数

　オブジェクトの「値」の部分には、関数を用いることも出来る。
　書き方は、書きに記載。

　また、その関数を呼び出すには、「定数名.プロパティ名()」と記載する。
　プロパティ名の後ろの( )を忘れがち。

書き方

const 定数名 = {
  プロパティ名:() =>{
    //まとめたい処理内容
  }
};

// 関数の呼び出し
定数名.プロパティ名();

例

// 定数animalを定義
const animal = {
  type:"ライオン",
  age:5,
  name:() => {
    console.log("シンバ");
  }
}
// animalのtypeプロパティの値を出力
console.log(animal.type);

// animalのnameプロパティの関数を実行、console.log()は必要無し
animal.name();

出力結果

// animalのtypeプロパティの値を出力
ライオン

// animalのnameプロパティの関数を実行
シンバ

クラス

• クラスとは

　「もの」を生成する仕組み。その「もの」を生成するには、まずその「設計図」を用意する必要がある。
　その設計図のことをクラスという。
　「class クラス名」とすることで新しくクラスを用意する事が出来る。
　クラス名は基本的に大文字から始める

例

// クラスを作成
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.action();

出力結果

トラックは、走る
この車はトラックです
黒色です

継承

• 継承とは

　継承とは、すでにあるクラスをもとに、新しくクラスを作成する方法のこと
　例、「Carクラス」から「Truckクラス」を継承すると、「Carクラス」の全ての機能を引き継いで、
　「Truckクラス」を作成することが出来る。

• 継承の書き方

　継承を用いてクラスを作成するには「extends」を用いる。
　「Carクラス」を継承して「Truckクラス」を作成するには、
　「class Truck extends Car」と書きます。
　継承では元となるクラスを親クラス（Carクラス）、
　新しく作成するクラスを子クラス（Truckクラス）と呼ぶ。

書き方

class Truck extends Car{
}

　「Truckクラス」は「Carクラス」のすべての機能を引き継いるため、
　「Truckクラス」内にはまだ何もメソッドは定義されてないが、
　「Carクラス」に定義されている「infoメソッド」などを使用することが出来る。

例

class Car{
  constructor(name, color) {
    this.name = name;
    this.color = color;
  }
  action() {
    console.log(`${this.name}は、走る`);
  }
  info() {
    this.action();

    console.log(`この車は${this.name}です`);
    console.log(`${this.color}色です`);
  }
}
// 「Carクラス」を継承して「Truckクラス」を定義
class Truck extends Car{
}

// 定数truckにTruckクラスのインスタンスを代入
const truck = new Truck("トラック", "黒");

// truckに対してinfoメソッドを呼び出す
truck.action();

出力結果

トラックは、走る
この車はトラックです
黒色です

• 子クラスにメソッド追加

　継承して作成したクラス（子クラス）にも、これまでと同じようにメソッドを追加出来る。
　今回は、戻り値を使って追加。

　ちなみに、子クラスで定義したメソッドは、親クラスから呼び出すことは出来ない。

例

class Car{
  constructor(name, color) {
    this.name = name;
    this.color = color;
  }
  action() {
    console.log(`${this.name}は、走る`);
  }
  info() {
    this.action();

    console.log(`この車は${this.name}です`);
    console.log(`${this.color}色です`);
  }
}

class Truck extends Car{
  detailsColor(){
    return `色の詳細は${this.color}と白です`;
  }
}

const truck = new Truck("トラック", "黒");
const detail = truck.detailsColor();
console.log(detail);

出力結果

色の詳細は黒と白です

過去投稿記事

【JavaScript ~変数・定数、if文・switch文~】勉強メモ
【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②
【JavaScript ~関数について~】勉強メモ③
【JavaScript ~ファイルの分割について~】勉強メモ⑤
【JavaScript 読み込み】勉強メモ⑥
【JavaScript ~配列のメソッド~】勉強メモ⑦
【JavaScript ~コールバック関数~】勉強メモ⑧
【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨
【JavaScript ~イベント~】勉強メモ⑩
【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11
【JavaScript ~Mathオブジェクト~】勉強メモ12