JavaScriptのメソッドチェーンとは？初心者向けに基本と実践例をわかりやすく解説

メソッドチェーンとは

メソッドチェーン（Method Chaining）は「カスケーディング（Cascading）」とも呼ばれ、1つの連続したコードの中で、同じオブジェクトのメソッドを次々と呼び出していく手法です。この仕組みを活用すると、同じオブジェクト名を何度も書く冗長なコードを避けられます。ここでは、車（Car）クラスを例に、メソッドチェーンがどのようにコードの重複をなくすのかを見ていきましょう。

通常の実装例

まずは、ごく一般的なCarクラスの実装です。

class Car {
  constructor() {
    this.wheels = 4;
    this.doors = 4;
    this.topSpeed = 100;
    this.fuelCapacity = "400 Litres";
  }
  setWheels(w) {
    this.wheels = w;
  }
  setDoors(d) {
    this.doors = d;
  }
  setTopSpeed(t) {
    this.topSpeed = t;
  }
  setFuelCapacity(fc) {
    this.fuelCapacity = fc;
  }
  displayCarProps() {
    console.log(`Your car has ${this.wheels} wheels, ${this.doors} doors with a top speed of ${this.topSpeed} and fuel capacity of ${this.fuelCapacity}`);
  }
}

let sportsCar = new Car();
sportsCar.setDoors(2);
sportsCar.setTopSpeed(250);
sportsCar.setFuelCapacity("600 Litres");
sportsCar.displayCarProps();

実行結果

Your car has 4 wheels, 2 doors with a top speed of 250 and fuel capacity of 600 Litres

sportsCarが何度も不必要に繰り返されているのがわかりますね。この重複は、メソッドチェーンを使えば解消できます。方法はシンプルで、各セッターメソッドの最後にthisを返す（return this）ようにするだけです。こうすることで、メソッドの戻り値としてオブジェクト自身が得られるため、そのまま続けて別のメソッドを呼び出せるようになります。

メソッドチェーン対応版の実装

各セッターでthisを返すように変更したコードがこちらです。

class Car {
  constructor() {
    this.wheels = 4;
    this.doors = 4;
    this.topSpeed = 100;
    this.fuelCapacity = "400 Litres";
  }
  setWheels(w) {
    this.wheels = w;
    return this;
  }
  setDoors(d) {
    this.doors = d;
    return this;
  }
  setTopSpeed(t) {
    this.topSpeed = t;
    return this;
  }
  setFuelCapacity(fc) {
    this.fuelCapacity = fc;
    return this;
  }
  displayCarProps() {
    console.log(`Your car has ${this.wheels} wheels, ${this.doors} doors with a top speed of ${this.topSpeed} and fuel capacity of ${this.fuelCapacity}`);
  }
}

これで、車オブジェクトの生成部分を、より読みやすく重複の少ないコードに書き換えられます。

メソッドチェーンを使った呼び出し例

let sportsCar = new Car()
  .setDoors(2)
  .setTopSpeed(250)
  .setFuelCapacity("600 Litres")
  .displayCarProps();

実行結果

Your car has 4 wheels, 2 doors with a top speed of 250 and fuel capacity of 600 Litres

まとめ

メソッドチェーンは「流れるようなインターフェース（Fluent Interface）」とも呼ばれます。オブジェクト名を何度も書いて処理の流れを断ち切ることなく、メソッドだけで一気通貫に操作できるためです。セッター系メソッドでthisを返す習慣をつければ、jQueryやPromiseなどでも採用されているこの洗練された書き方を、自分のコードにも簡単に取り入れることができます。