Java Scriptの基礎その26　クラスとプロトタイプ　その1

イントロダクション

JavaScriptでは、クラスとプロトタイプを使ってオブジェクト指向プログラミングを行うことができます。この解説では、JavaScriptのクラスとプロトタイプを使ったコードを具体例とともに紹介します。各コードの意味を丁寧に説明し、どのように動作するのかを理解できるようにします。特に、オブジェクトの作成、メソッドの追加、プロパティの設定などについて学びましょう。

オブジェクトの作成と初期化

コンストラクタ関数の使用

"use strict";

const currentYear = 2024;

const personData = function (firstName, birthYear) {
  this.firstName = firstName;
  this.birthYear = birthYear;
};

const nobiNobita = new personData("Nobita", 1961);
console.log(nobiNobita); // { firstName: 'Nobita', birthYear: 1961 }
const goudaTakeshi = new personData("Takeshi", 1960);
console.log(goudaTakeshi); // { firstName: 'Takeshi', birthYear: 1960 }
console.log(nobiNobita, goudaTakeshi); // { firstName: 'Nobita', birthYear: 1961 } { firstName: 'Takeshi', birthYear: 1960 }

このコードでは、personDataというコンストラクタ関数を使って新しいオブジェクトを作成しています。newキーワードを使ってオブジェクトをインスタンス化し、それぞれのプロパティを初期化しています。

プロトタイプメソッドの追加

personData.prototype.calcAge = function () {
  console.log(currentYear - this.birthYear);
};

nobiNobita.calcAge(); // 63
console.log(nobiNobita.__proto__); // { calcAge: [Function (anonymous)] }
console.log(nobiNobita.__proto__ === personData.prototype); // true

ここでは、calcAgeというメソッドをpersonDataのプロトタイプに追加しています。これにより、すべてのpersonDataオブジェクトがこのメソッドを使用できるようになります。

プロパティの追加

personData.prototype.species = "Human";
console.log(nobiNobita.species); // "Human"

プロトタイプにプロパティを追加することで、すべてのインスタンスにそのプロパティを継承させることができます。

配列のプロトタイプ

const arraySample = [1, 2, 3, 4, 5, 6, 7];
console.log(arraySample.__proto__); // [constructor: ƒ, concat: ƒ, ...]

この例では、配列arraySampleのプロトタイプを確認しています。JavaScriptのすべての配列は共通のプロトタイプを持ち、多くの便利なメソッドが含まれています。

ゲッターとセッター

オブジェクトリテラルの使用

const accountData = {
  ownerName: "Doraemon",
  accountMovement: [100, 2300, 300, 4800],
  get latestMovement() {
    return this.accountMovement.slice(-1).pop();
  },
  set latestMovement(mov) {
    this.accountMovement.push(mov);
  },
};

console.log(accountData.latestMovement); // 4800

accountData.latestMovement = 100;
console.log(accountData.accountMovement); // [100, 2300, 300, 4800, 100]

ここでは、ゲッターとセッターを使用してオブジェクトのプロパティにアクセスしています。latestMovementゲッターは最新の移動を返し、セッターは新しい移動を追加します。

クラスの使用

クラス定義とインスタンスの作成

class personalData {
  constructor(lastName, graduationYear) {
    this.lastName = lastName;
    this.graduationYear = graduationYear;
  }
  calcCareerYears() {
    console.log(currentYear - this.graduationYear);
  }
  greetingLive() {
    console.log(`Hey ${this.lastName}`);
  }
  get careerYears() {
    return currentYear - this.graduationYear;
  }
  set fullName(name) {
    if (name.includes(" ")) this._fullName = name;
    else console.log(`${name} is not a full name`);
  }
  get fullName() {
    return this._fullName;
  }
  static heyThere() {
    console.log("Hey there!");
    console.log(this);
  }
}
const johnSmith = new personalData("Smith", 2011);
console.log(johnSmith); // { lastName: 'Smith', graduationYear: 2011 }
console.log(johnSmith.__proto__ === johnSmith.prototype); // false
johnSmith.calcCareerYears(); // 13
johnSmith.greetingLive(); // "Hey Smith"

クラスを使ってオブジェクトを定義し、インスタンスを作成しています。クラスはコンストラクタ、メソッド、ゲッター、セッター、および静的メソッドを含むことができます。

静的メソッド

const walterWhite = new personalData("Walter White", 1965);
personalData.heyThere(); // "Hey there!"

静的メソッドはクラスそのものに関連付けられ、インスタンスではなくクラス名を使用して呼び出されます。

オブジェクトの作成とプロトタイプの使用

Object.createメソッド

const personalDataProto = {
  calcAge() {
    console.log(currentYear - this.birthYear);
  },
  init(firstName, birthYear) {
    this.firstName = firstName;
    this.birthYear = birthYear;
  },
};

const peterParker = Object.create(personalDataProto);
console.log(peterParker); // {}
peterParker.name = "Peter";
peterParker.birthYear = 1988;
peterParker.calcAge(); // 36

const bruceWayne = Object.create(personalDataProto);
bruceWayne.init("Bruce", 1982);
bruceWayne.calcAge(); // 42

Object.createメソッドを使って、新しいオブジェクトを特定のプロトタイプを持つように作成します。この方法を使うと、プロトタイプチェーンをカスタマイズできます。

まとめ

JavaScriptのクラスとプロトタイプを使うことで、オブジェクト指向プログラミングがより柔軟に行えます。コンストラクタ関数、プロトタイプメソッド、クラスの使用方法を理解することで、効率的なコードを書くことができます。また、ゲッターとセッター、静的メソッド、Object.createメソッドを使うことで、さらに高度なオブジェクト操作が可能になります。これらの知識を活用して、実際の開発で役立ててください。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！