【 reduce()メソッド】React.js で難しい このメソッドの使用方法の例を紹介 (TypeScript)

reduce() メソッドを理解するのに苦労したので、僕が理解できたコードをシェアしたいと思います。

JavaScriptのreduce()メソッドは数値の計算にとてもよく使われます。それだけに限らず、色んな用途で使われるとても汎用性の高い関数です。

reduce()は配列の各要素に対して（左から右へ）関数を適用し、単一の出力値（累積値）を生成します。

高度な使い方になってくると、
数値の計算だけでなく、下記のような多くのシナリオで使われます。

• オブジェクトの操作
• 配列の操作
• データ構造の変換

この記事を読むことで rduce() メソッドの理解の足掛かりになるかと思います。
今回は TypeScript を使っています。 それでは下記でコードを紹介します。

ファイル構成

src
  -- App.tsx
      -- components (フォルダ)
          -- Counter.tsx

まずは簡単な例

数値の計算

一番よく使われる例で、配列に含まれる数値の合計や平均を計算する例です。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 0は初期値です。
console.log(sum); // 出力: 15

オブジェクトの操作

オブジェクトの配列から特定のプロパティに基づく集計をすることができます。

const people = [
  { name: 'Alice', age: 22 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 25 }
];

const totalAge = people.reduce((accumulator, person) => accumulator + person.age, 0);
console.log(totalAge); // 出力: 77

データ構造の変換

配列を違うデータ構造に変換することも可能です。

const fruits = ['apple', 'banana', 'orange', 'apple', 'banana'];
const fruitCounts = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});

console.log(fruitCounts); // 出力: { apple: 2, banana: 2, orange: 1 }

『実践編』 React VITE のセットアップ

npm create vite@latest

App.tsx ファイル

import { useState } from 'react';

// Counterコンポーネントをインポート。これは、各カウンターを表示するために使用
import Counter from './components/counter';

function App() {
  // counters状態を定義して初期化。各カウンターのidとvalueを含むオブジェクトの配列です。
  const [counters, setCounters] = useState([
    { id: 1, value: 0 },
    { id: 2, value: 0 },
    { id: 3, value: 0 },
  ]);

  // sum状態を定義して初期化します。これは、カウンターの合計値を管理
  const [sum, setSum] = useState(0);

  // カウンターをインクリメント（増加）する関数。
  // 引数はカウンターオブジェクト({ id: number, value: number })
  const handleIncrement = (counter: { id: number, value: number }) => {
    const countersDuplicate = [...counters]; // counters配列の複製を作成
    const index = countersDuplicate.indexOf(counter); // クリックされたカウンターのインデックスを見つける
    countersDuplicate[index] = { ...counter }// カウンターのコピーを作成
    countersDuplicate[index].value++; // カウンターの値を1増やす
    setCounters(countersDuplicate); // 更新されたカウンター配列で状態を更新します。
  }

  // reduce()メソッドを使用し、カウンターの値の合計を計算します。
  const handleSumUp = () => {
    const sumReduce = counters.reduce((acc, counter) => acc + counter.value, 0);
    setSum(sumReduce);
    return sumReduce;
  }

  return (
    <div className="container">

      {/* counters配列をマップして、各カウンターに対してCounterコンポーネントをレンダリングします。
            onIncrementプロパティにhandleIncrement関数を渡します。 */}
      <div>
        {counters.map(counter =>
          <Counter onIncrement={handleIncrement} key={counter.id} counter={counter}></Counter>)}
      </div>

      {/* 合計値を計算するボタンです。カウンターのいずれかの値が0より大きい場合にのみ有効。 */}
      <button
        onClick={() => handleSumUp()}
        disabled={counters.filter(item => item.value > 0).length > 0 ? false : true}
        className="btn btn-warning mt-3"
      >
        計算
      </button>
      <h1>{sum}</h1>
    </div>
  );
}

export default App;

Counter.tsx (App .tsx の子コンポーネント)

function Counter({ ...props }) {
    console.log(props);
    return (
        <div>
            <span style={{fontSize:"2rem" }}>{props.counter.value}</span>
            <button onClick={() => props.onIncrement(props.counter)} className="btn btn-primary my-2 mx-2">加算</button>
        </div>
    );

}

export default Counter;

最後に

配列内の要素を基に計算を行い、その結果を単一の値にまとめ上げる際に特に有効です。
この記事で少しでも reduce() メソッドの理解に繋がれば幸いです。