解説
「メソッドチェーン」とは、オブジェクトを返すメソッドのあとに、そのオブジェクトのメソッドを書き、鎖のように繋げて書く方法のことを指します。
たとえば、データを加工して返すメソッドのあとに、さらにデータを加工するメソッドを書くなど、データを次々と加工していく時に、この書き方はよく出てきます。
メソッドのあとに続けてメソッドが書いてある場合は、前のメソッドの戻り値のオブジェクトのメソッドが使われています。
サンプル
「メソッドチェーン」のサンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>「メソッドチェーン」のサンプル</title>
<style> #output { font-size: 32px; line-height: 1.5; } </style>
</head>
<body>
<pre id="output"></pre>
<script>
window.addEventListener('DOMContentLoaded', e => {
// 出力用の関数
const print = function() {
const el = document.querySelector('#output');
el.textContent += [...arguments].join(', ') + '\n';
};
// メソッドチェーン
arr = ['犬', '猫', '駱駝']
arr
.filter(x => x.length == 1) // 1文字の動物を取り出して
.map(x => `${x}募集!`) // 募集のメッセージを作り
.forEach(x => print(x)); // 出力する
});
</script>
</body>
</html>
出力結果
犬募集! 猫募集!
フィードバックお待ちしております！
ご感想、解説してほしい用語、解説内容のアドバイスなどございましたら、FacebookやTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。
