JavaScript #9 メソッドチェーン

2020年12月12日

今回はメソッドチェーンに関してまとめてみたいと思います。
メソッドチェーンとは、メソッドをチェーンする!ってことなのですが、雑すぎますね。
複数のメソッドをつなげて処理をするようなものです。Bashシェルの「|」みたいな使い方です。
それでは、具体的に見ていきましょう。

以下の例では、変数SampleTextに格納されている文字列データ対して、文字列の置換メソッドであるreplaceで文字を置き換えていっているものです。文字列を置換する度に1行1行コードを書いていますね。

let SampleText='わたしの名前はQ太郎です。';
console.log('文字列:' + SampleText);
let RepText = SampleText.replace('Q太郎','ラーメン二郎');
console.log('文字列:' + RepText);
RepText = RepText.replace('わたし','あなた');
console.log('文字列:' + RepText);

これをメソッドチェーンで書くと、以下のようになります。
2回の文字列の置換を1行で書くことができます。1回目の置換した結果を次の置換した処理に渡しています。
このようにすることとで、コードが見やすくなります。

let SampleText='わたしの名前はQ太郎です。';
console.log('文字列:' + SampleText);
let RepText = SampleText.replace('Q太郎','ラーメン二郎').replace('わたし','あなた');;
console.log('文字列:' + RepText);

これまで説明した例は文字列を対象としていましたが、実はメソッドはオブジェクトが保持するもののため、以下のようなことができます。オブジェクトappleに対してプロパティとメソッドを準備します。2つのメソッドgetName()、getKakaku()の戻り値にthis(このオブジェクト)を指定することで、メソッドはオブジェクトを返すため、getNmae()の結果にappleオブジェクトが帰ってくるので、次のgetKakaku()をつなげて処理することができます。

let apple ={
  name : 'ふじ',
  kakaku : 100,

  getNmae(){
    console.log('このりんごは' + this.name + 'です');
    return this;
  },

  getKakaku(){
    console.log('このりんごの値段は' + this.kakaku + '円です');
    return this;
  }
};
apple.getNmae().getKakaku();

今回はメソッドチェーンに関してまとめてみました。

Program

Posted by Qtaro