Java Scriptの基礎その28　クラスとオブジェクト

イントロダクション

JavaScriptは、クラスとオブジェクトを使用してデータとメソッドをまとめることができるプログラミング言語です。この記事では、特定のJavaScriptコードを用いて、クラスの定義、コンストラクタ、メソッド、プロパティ、そしてオブジェクトの操作方法について丁寧に解説します。この記事を通じて、JavaScriptのクラスとオブジェクトの基本的な使い方と、それに関連する概念を理解することができます

クラスの定義とコンストラクタ

"use strict";

class accountClass {
  constructor(owner, currency, pin) {
    this.owner = owner;
    this.currency = currency;
    this._pin = pin;
    // protected property
    this._movements = [];
    this.locale = navigator.language;
    console.log(`Thanks for opening an account, ${owner}`);
  }
}

クラスの定義

class accountClass は、クラスを定義するための構文です。このクラスには、口座の所有者や通貨、暗証番号を含む情報を持たせることができます。

コンストラクタ

• constructor(owner, currency, pin) は、クラスがインスタンス化されたときに呼び出される特別なメソッドです。ここで、オブジェクトの初期化を行います。

• this.owner = owner と this.currency = currency は、インスタンスのプロパティに値を設定します。

• this._pin は、プライベートなプロパティとして暗証番号を設定しています。

• this._movements は、口座の取引履歴を保持するための配列です。

• this.locale は、ユーザーのロケール（地域設定）を取得します。

• console.log は、コンソールにメッセージを表示するためのメソッドです。ここでは、口座が開設されたことを示すメッセージを出力します。

メソッドの定義

class accountClass {
  // 省略...
  
  //Public interface
  getMovements() {
    return this._movements;
  }

  accountDeposit(val) {
    this._movements.push(val);
    return this;
  }

  accountWithdraw(val) {
    this.accountDeposit(-val);
    return this;
  }
}

getMovementsメソッド

getMovements() メソッドは、取引履歴を返すためのものです。このメソッドを呼び出すことで、現在の取引履歴を確認することができます。

accountDepositメソッド

accountDeposit(val) メソッドは、指定した金額を口座に入金するためのものです。ここでは、取引履歴にその金額を追加し、メソッドチェーンを可能にするために this を返しています。

accountWithdrawメソッド

accountWithdraw(val) メソッドは、指定した金額を口座から引き出すためのものです。実際には、負の値を accountDeposit メソッドに渡すことで実現しています。

オブジェクトの生成と操作

const accountTom = new accountClass("Tom", "USD", 4352);

accountTom._movements.push(300);
accountTom._movements.push(-120);
console.log(accountTom);
accountTom.getMovements();

accountTom.accountDeposit(460);
accountTom.accountWithdraw(900);

console.log(accountTom);
console.log(accountTom.pin);

//Chaining
accountTom
  .accountDeposit(500)
  .accountDeposit(400)
  .accountWithdraw(400)
  .accountWithdraw(200);

console.log(accountTom.getMovements());

オブジェクトの生成

const accountTom = new accountClass("Tom", "USD", 4352); では、accountClass の新しいインスタンスを作成しています。Tom が口座所有者で、通貨は USD、暗証番号は 4352 です。

プロパティへの直接アクセスと変更

accountTom._movements.push(300); とaccountTom._movements.push(-120); は、取引履歴に直接アクセスして変更しています。これは、通常は避けるべきですが、ここではデモンストレーションのために行っています。

メソッドの使用

• accountTom.getMovements(); では、現在の取引履歴を取得します。

• accountTom.accountDeposit(460); は、460を口座に入金します。

• accountTom.accountWithdraw(900); は、900を口座から引き出します。

チェイニング

accountTom.accountDeposit(500).accountDeposit(400).accountWithdraw(400).accountWithdraw(200); は、メソッドチェーンを使用して複数の操作を連続して行っています。

出力結果

console.log(accountTom);
// accountClass {owner: "Tom", currency: "USD", _pin: 4352, _movements: [300, -120], locale: "en-US"}

console.log(accountTom.getMovements());
// [300, -120, 460, -900]

console.log(accountTom.getMovements());
// [300, -120, 460, -900, 500, 400, -400, -200]

まとめ

この記事では、JavaScriptのクラスとオブジェクトの基本的な使い方について学びました。クラスの定義からコンストラクタ、メソッドの実装、オブジェクトの生成と操作方法まで、具体的なコード例を通じて解説しました。クラスを使用することで、コードの再利用性が高まり、オブジェクト指向プログラミングの利点を享受できます。これを機に、さらに複雑なクラスやメソッドを作成し、JavaScriptのスキルを向上させてください。

Githubでも公開してるよ！

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