はじめに
配列の各要素に対して処理を行い、新しい配列を作成するには、TypeScriptのmapメソッドが非常に便利です。このメソッドを使うことで、元の配列を変更することなく、要素一つ一つに対する操作の結果を新たな配列として取得できます。
この記事では、mapメソッドの基本的な使い方から、引数や戻り値の扱い、さらには複雑なデータ構造に対する応用までを幅広くカバーします。さまざまな使用例を通じて、読者のTypeScriptにおける配列操作の理解を深めることを目指します。
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、TypeScriptの世界が変わる
mapメソッドの基本
mapメソッドは、配列の各要素に対して関数を実行し、その結果からなる新しい配列を生成します。このメソッドは、元の配列を変更せず、新しい配列を返す点でforEachメソッドとは異なります。
ソースコード例
|
1 2 |
let numbers = [1, 2, 3, 4, 5]; let squaredNumbers = numbers.map(number => number * number); |
出力結果:
出力結果
[1, 4, 9, 16, 25]
この例では、配列numbersの各要素を二乗し、その結果を新しい配列squaredNumbersとして生成しています。
オブジェクトの配列での応用
mapメソッドは、オブジェクトの配列に対しても同様に有効です。例えば、ユーザーのリストから名前だけを抽出する場合などに役立ちます。
ソースコード例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
interface User { id: number; name: string; age: number; } let users: User[] = [ { id: 1, name: "Alice", age: 30 }, { id: 2, name: "Bob", age: 25 }, { id: 3, name: "Charlie", age: 28 } ]; let names = users.map(user => user.name); |
出力結果:
出力結果
["Alice", "Bob", "Charlie"]
ここでは、users配列からnameプロパティだけを抽出して新しい配列namesを作成しています。
複雑なデータ変換
mapメソッドを利用することで、より複雑なデータ変換も容易に実現できます。例えば、ユーザーのリストを受け取り、各ユーザーの年齢から成人かどうかを判断する情報を含む新しい配列を作成することができます。
ソースコード例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
interface User { id: number; name: string; age: number; } let users: User[] = [ { id: 1, name: "Alice", age: 30 }, { id: 2, name: "Bob", age: 25 }, { id: 3, name: "Charlie", age: 28 } ]; let userStatus = users.map(user => { return { name: user.name, isAdult: user.age >= 20 }; }); |
出力結果:
出力結果
[{ name: "Alice", isAdult: true }, { name: "Bob", isAdult: true }, { name: "Charlie", isAdult: true }]
この方法により、各ユーザーの成人判定を含む新しい配列を生成しています。
mapメソッドとその他の配列メソッドの連携
TypeScriptでの配列操作では、mapメソッドを他の配列メソッドと組み合わせて使うことで、より複雑で強力なデータ処理を実現できます。例えば、mapメソッドとfilterメソッドを連携させることで、特定の条件に一致する要素のみを変換し、新しい配列を作成することが可能です。また、reduceメソッドと組み合わせることで、変換後の配列を基に集計を行うこともできます。
mapとfilterの連携
例えば、ユーザーリストから成人ユーザーの名前のみを抽出する場合、まずfilterメソッドで成人ユーザーを抽出し、その後mapメソッドで名前を取得するという処理が考えられます。
ソースコード例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
interface User { id: number; name: string; age: number; } let users: User[] = [ { id: 1, name: "Alice", age: 30 }, { id: 2, name: "Bob", age: 25 }, { id: 3, name: "Charlie", age: 28 } ]; let adultNames = users.filter(user => user.age >= 20).map(user => user.name); |
出力結果:
出力結果
["Alice", "Bob", "Charlie"]
この例では、まずfilterメソッドで年齢が20歳以上のユーザーを抽出し、その結果に対してmapメソッドを適用してユーザーの名前を新しい配列として取得しています。
mapとreduceの連携
mapメソッドでデータを変換した後に、reduceメソッドを使用して、変換したデータの集計を行うこともできます。例えば、ユーザーの年齢の合計を計算する場合は以下のようになります。
ソースコード例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
interface User { id: number; name: string; age: number; } let users: User[] = [ { id: 1, name: "Alice", age: 30 }, { id: 2, name: "Bob", age: 25 }, { id: 3, name: "Charlie", age: 28 } ]; let totalAge = users.map(user => user.age).reduce((total, age) => total + age, 0); |
出力結果:
出力結果
83
この処理では、まずmapメソッドでユーザーの年齢のみを取り出し、その後reduceメソッドで年齢の合計を計算しています。
こちらもCHECK
-
-
【TypeScript】配列操作、配列の基本的な使い方を徹底解説！
Typescriptでの配列の使い方完全ガイド この記事では、Typescriptを使った配列の基本から応用までを網羅的に解説します。 配列はプログラミングにおいて非常によく使われるデータ構造の一つで ...
続きを見る
まとめ
TypeScriptにおけるmapメソッドは、配列の各要素に対して一貫した操作を行い、その結果を新しい配列として取得する強力なツールです。基本的な使用方法から、オブジェクトの配列の処理、さらには複雑なデータ変換まで、mapメソッドを使いこなすことで、効率的かつ宣言的なデータ操作が可能になります。
最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！
