メソッドチェーンのパターン

CoddyのJavaScriptジャーニー「オブジェクト指向プログラミング」セクションの一部 — レッスン 16/56。

メソッドチェーンは、1つのステートメントで同じオブジェクトに対して複数のメソッドを呼び出すことを可能にするプログラミングパターンです。各メソッドはオブジェクト自身（this）を返すため、同じ行で次のメソッドを呼び出すことができます。

シンプルなカウンターオブジェクトを作成します：

const counter = {
  count: 0,
  
  increment() {
    this.count++;
    return this;
  },
  
  decrement() {
    this.count--;
    return this;
  },
  
  getValue() {
    return this.count;
  }
};

これで、メソッドをチェーンさせることができます：

// 複数の操作を連結する
counter.increment().increment().decrement();

// カウントは現在1です
console.log(counter.getValue()); // 出力: 1

メソッドチェーンの鍵は、チェーン可能にしたい各メソッドから this を返すことです。

チャレンジ

すでに add() と subtract() メソッドを持っている calculator オブジェクトが与えられています。あなたのタスクは、メソッドチェーンを可能にするために this を返す multiply と divide メソッドを追加することです。

チートシート

メソッドチェーンを使用すると、単一のステートメントで同じオブジェクトに対して複数のメソッドを呼び出すことができます。各メソッドはオブジェクト自体（this）を返すため、次のメソッドを同じ行で呼び出すことが可能になります。

メソッドチェーンを有効にするには、各メソッドから this を返します。

const counter = {
  count: 0,
  
  increment() {
    this.count++;
    return this;
  },
  
  decrement() {
    this.count--;
    return this;
  },
  
  getValue() {
    return this.count;
  }
};

複数のメソッドを連結します：

counter.increment().increment().decrement();
console.log(counter.getValue()); // Output: 1

自分で試してみよう

import { calculator } from './calculator.js';

// テストコード - 変更しないでください
const result1 = calculator.add(10).multiply(2).getValue();
console.log(result1); // 20 が出力されるはずです

// 2番目のテストのためにリセット
calculator.value = 0;
const result2 = calculator.add(20).divide(4).subtract(1).getValue();
console.log(result2); // 4 が出力されるはずです