JavaScript #9 メソッドチェーン
今回はメソッドチェーンに関してまとめてみたいと思います。
メソッドチェーンとは、メソッドをチェーンする!ってことなのですが、雑すぎますね。
複数のメソッドをつなげて処理をするようなものです。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();
今回はメソッドチェーンに関してまとめてみました。
ディスカッション
コメント一覧
まだ、コメントがありません