【TypeScript】reduceの基本的な使い方とobjectの配列を集約する方法

こんにちは！
今日は、TypeScriptでのreduceメソッドの使い方についてです。
TypeScriptはJavaScriptのスーパーセットであり、型安全性を高めるために使用されることが多いですね。

プログラミングをしていると、配列の要素を一つずつ処理して特定の結果を得たい場面が多々あります。
そんなときに便利なのがreduceメソッドです。
このメソッドを使えば、配列の全要素を一つにまとめる処理が簡単に書けるんですよ。

例えば、数値の配列を合計したり、文字列の配列を一つの文字列に結合したりする場合に活躍します。
初心者の方でもすぐに理解できるよう、わかりやすい例を交えながら説明していきますね。

この記事でわかること

TypeScriptでのreduceメソッドの基本的な使い方
オブジェクトの配列を処理する方法

Contents

reduceメソッドとは？
reduceメソッドの基本的な使い方
- 数値の配列を合計する例
- 文字列の配列を結合する例
オブジェクトの配列を処理する
まとめ

reduceメソッドとは？

reduceメソッドとは、配列の全要素を一つにまとめるための強力なメソッドです。
このメソッドを使うと、配列の要素を順番に処理し、最終的に単一の値を生成できます。

基本的な使い方はとてもシンプル。


const result = array.reduce((accumulator, currentValue, index, array) => {
  // ここにロジック
  return 戻り値;
}, initialValue);

それぞれのパラメータについての説明です。

accumulator: 累積値
currentValue: 現在の配列要素
index: 現在のインデックス（省略可能）
array: 元の配列（省略可能）
initialValue: 初期値（省略可能）

累積値については初回は最初のインデックスの値、2回目以降は前回のコールバック関数の戻り値が渡されます。

reduceメソッドの基本的な使い方

それでは、reduceメソッドを使った基本的な例をいくつか見てみましょう。
このセクションでは、具体的なコード例を通じてreduceメソッドの使い方を理解していただきます。

数値の配列を合計する例


const numbers: number[] = [1, 2, 3, 4, 5];

const total = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
});

console.log(total); // 出力: 15

この例では、配列numbersの全ての要素を合計しています。
accumulatorには初期値として0が設定されており、各要素を順番に加算していくことで最終的な合計を得ることができます。

文字列の配列を結合する例


const words: string[] = ['Hello', 'World', 'TypeScript'];

const sentence = words.reduce((accumulator, currentValue) => {
  return accumulator + ' ' + currentValue;
});

console.log(sentence); // 出力: " Hello World TypeScript"

この例では、words配列の要素を一つの文字列に結合しています。
accumulatorの初期値は空の文字列で、各要素をスペースで区切って結合することで、最終的な文を作成しています。

reduceメソッドは、配列の要素を一つにまとめる処理に非常に便利です。
これらの基本的な例を通じて、reduceメソッドの基本的な使い方が理解できたでしょうか？

オブジェクトの配列を処理する

TypeScriptでreduceメソッドを使うと、オブジェクトの配列も簡単に処理できます。
これにより、より複雑なデータ構造を効率的に操作できるようになります。
ここでは、具体的な例を通じてオブジェクトの配列をどのように処理するかを見ていきましょう。

オブジェクトのプロパティを合計する

例えば、次のようなオブジェクトの配列があるとします。


const items = [
  { name: 'apple', quantity: 10 },
  { name: 'banana', quantity: 5 },
  { name: 'orange', quantity: 8 }
];

この配列から、全てのquantityを合計したい場合、reduceメソッドを使って以下のように処理します。


const totalQuantity = items.reduce((accumulator, currentValue) => {
  return accumulator + currentValue.quantity;
}, 0);

console.log(totalQuantity); // 出力: 23

この例では、accumulatorに初期値0を設定し、各オブジェクトのquantityプロパティの値を加算しています。
これにより、全てのquantityの合計が計算されます。

条件分岐を使って集計する

次に、より具体的な例として、特定の条件に合致するオブジェクトのみを集計する方法を見てみましょう。
例えば、quantityが6以上のアイテムのみを合計する場合です。


const filteredQuantity = items.reduce((accumulator, currentValue) => {
  if (currentValue.quantity >= 6) {
    return accumulator + currentValue.quantity;
  } else {
    return accumulator;
  }
}, 0);

console.log(filteredQuantity); // 出力: 18

この例では、条件分岐を使ってquantityが6以上のアイテムのみを累積値に加算しています。
その結果、条件に合致するアイテムの合計quantityが得られます。

オブジェクトのプロパティを集約する

最後に、オブジェクトのプロパティを集約して新しいオブジェクトを作成する方法を見てみましょう。
例えば、各アイテムのnameをキーにしてquantityを値とするオブジェクトを作成する場合です。


const quantityByName = items.reduce((accumulator, currentValue) => {
  accumulator[currentValue.name] = currentValue.quantity;
  return accumulator;
}, {} as { [key: string]: number });

console.log(quantityByName); // 出力: { apple: 10, banana: 5, orange: 8 }

この例では、累積値としてオブジェクトを使用し、各nameプロパティをキー、quantityプロパティを値として設定しています。
これにより、nameをキーとするquantityのオブジェクトが作成されます。

以上のように、reduceメソッドを使うことで、オブジェクトの配列を様々な方法で効率的に処理することができます。

【付録】さらに学びを深めるためのリソース

intersection型について理解を深めたところで、さらに学習を進めたい方のために、いくつかのリソースを紹介します。
これらのリソースを活用することで、TypeScriptの型システムについてより深い知識を得ることができるでしょう。

おすすめの書籍

プロを目指す人のためのTypeScript入門

プロを目指す人のためのTypeScript入門　安全なコードの書き方から高度な型の使い方まで

posted with ヨメレバ

鈴木僚太技術評論社 2022年04月22日頃

楽天ブックス

Amazon

Kindle

プロ開発者への近道！基礎から応用まで幅広くカバー

1一番のおすすめは「プロを目指す人のためのTypeScript入門」です。
この本は、TypeScriptの基礎から高度な使い方まで幅広く解説しています。

初心者でも理解しやすい説明から始まり、徐々に難易度を上げていく構成が特徴。
プログラミング経験者なら、さらに深い理解が得られるでしょう。

実際の開発現場で使えるテクニックも豊富に紹介されているのがポイント。
型の使い方や設計パターンなど、実践的な内容が満載です。

プロの開発者を目指す人はもちろん、TypeScriptをしっかり学びたい人におすすめの一冊。
基礎固めから応用力の向上まで、幅広いニーズに応えてくれます。

現場で使えるTypeScript 詳解実践ガイド

posted with ヨメレバ

菅原浩之/CodeMafia 外村将大マイナビ出版 2024年03月22日頃

楽天ブックス

Amazon

Kindle

実践的スキルを身につけたい人必見！現場のノウハウが詰まった一冊

次におすすめは「現場で使えるTypeScript 詳解実践ガイド」がランクイン。
この本の特徴は、実際の開発現場で役立つ知識が詰まっていること。

TypeScriptの基本的な文法から始まり、実際のプロジェクトでどう活用するかまで丁寧に解説しています。
エラー対処法や性能改善のコツなど、現場ならではの知恵も満載。

特に、大規模なプロジェクトでTypeScriptを使う際のベストプラクティスが学べるのが魅力。
コードの保守性や再利用性を高める方法も詳しく紹介されています。

すでにJavaScriptの経験がある人や、実務でTypeScriptを使いたい人におすすめ。
この本を読めば、現場で即戦力として活躍できる力が身につくはずです。

書籍に関してはこちらの記事も参考にしてくださいね！

オンラインで参照できる公式ドキュメント

TypeScript公式ハンドブック

https://www.typescriptlang.org/docs/
TypeScriptの公式ドキュメントです。
intersection型を含む、すべての型システムの機能について詳細な説明があります。

TypeScript Deep Dive

https://basarat.gitbook.io/typescript/
TypeScriptの深い部分まで掘り下げて解説しているオンラインブックです。
無料で読むことができ、intersection型についても詳しく説明されています。

TypeScriptの学習は終わりがありません。
新しい機能が常に追加され、より良い書き方が発見されています。
継続的に学習を続けることで、より良いTypeScriptプログラマーになれるはずです。

キャリア形成/給与還元
ひとつひとつ真摯に向き合う企業