Menu
Coddy logo textTech

配列メソッドのチェーン

CoddyのJavaScriptジャーニー「論理とフロー」セクションの一部。レッスン 55/65。

配列のチェーン(メソッドチェーン)を使用すると、単一のステートメントで配列に対して複数の操作を実行できます。このアプローチにより、コードをより簡潔で読みやすくすることができます。

配列メソッドをチェーン接続する例を次に示します。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const result = numbers
  .filter(num => num % 2 === 0)
  .map(num => num * 2)
  .reduce((sum, num) => sum + num, 0);

console.log(result); // 60

この例では、数値の配列から始め、奇数を `filter` で取り除き、残ったそれぞれの数値を2倍にし、その結果を `sum` します。

チェーン化(メソッドチェーン)の順番は重要です。チェーン内の各メソッドは、前のメソッドの結果に対して操作を行います。

challenge icon

チャレンジ

簡単

フルーツオブジェクトの配列を受け取る processFruits という関数を作成してください。各フルーツオブジェクトは name(文字列)と quantity(数値)のプロパティを持っています。

この関数はメソッドチェーンを使用して以下を行ってください:

  1. quantity が 0 のフルーツを除外する (Filter)
  2. 各フルーツの名前を大文字に変換する
  3. "APPLE: 5, BANANA: 3" のように、すべてのフルーツとその数量を一覧表示する文字列を作成する

簡単なヒント:

.join(", ") 関数を使用すると、文字列の配列を1つの文字列に変換できます。

.join() 関数もチェーンすることが可能です:

arr.filter(...)
   .map(...)
   .join(...)

自分で試してみよう

function processFruits(fruits) {
  // ここにコードを書いてください
}
quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

論理とフローのすべてのレッスン

自分で練習してみよう: JavaScriptオンラインコンパイラ