本記事ではmapメソッドについて解説していきます。
YouTubeでも解説していますので動画で見たい方は以下からどうぞ。
mapメソッドの概要
mapメソッドは、配列の各要素に対して指定した関数を実行し、新しい配列を作成するメソッドです。
forEachメソッドと同じように、引数にコールバック関数を指定する高階関数となります。
元の配列は変更せずに、新しい配列を生成するのが特徴です。
function myFunction() {
const users = ['佐藤', '鈴木', '高橋'];
const respectedUsers = users.map(function(user) {
return user + 'さん';
});
console.log(respectedUsers);
}コールバックをアロー関数で書き直すと以下になりますね。
function myFunction() {
const users = ['佐藤', '鈴木', '高橋'];
const respectedUsers = users.map(user => user + 'さん');
console.log(respectedUsers);
}こちらの実行結果は以下の通り。
- 元の配列:
users = [ '佐藤', '鈴木', '高橋' ] - 新しい配列:
respectedUsers = [ '佐藤さん', '鈴木さん', '高橋さん' ]
元の配列usersから、それぞれの要素に「さん」をつけたrespectedUsersという配列が新たに生成されました。
これをmapを使わず単純なfor文で書くと、以下のように書けますね。
function myFunction() {
const users = ['佐藤', '鈴木', '高橋'];
const respectedUsers = [];
for (const user of users) {
respectedUsers.push(user + 'さん');
}
console.log(respectedUsers);
}これを短く書くためにmapメソッドがあると考えてもらったらわかりやすいかと思います。
mapメソッドの特徴
forEachと同じように、コールバックの第2引数で配列のインデックス番号を受け取ることができます。
function myFunction() {
const users = ['佐藤', '鈴木', '高橋'];
const usersIndex = users.map((user, index) => `${user}さんは${index}番`);
console.log(usersIndex);
}こちらの実行結果は以下の通り。
mapメソッドの語源
なぜ「map」というのでしょうか？これは、数学用語のmapping(写像)に由来します。
かの有名なひろゆきと勝間和代の対談でのひろゆきの一言、「なんですか？シャゾウって？」の写像ですね。
写像についての解説は以下の記事などを参考にしてください。
まあこちらを読んでも「なにがなにやら」となる人も多いと思いますが、とりあえず冒頭の画像のイメージだけ持ってればいいと思います。
これを今回のmapメソッドの例に置き換えると以下のようになるわけですね。
なんとなくイメージで掴んでください。
mapメソッドの使用例
たとえば、以下のようなオブジェクトの配列usersがあったとき、姓と名を半角スペースでつないだフルネームの配列をmapメソッドで生成することができます。
function getFullNames() {
const users = [
{ lastName: '佐藤', firstName: '一郎' },
{ lastName: '鈴木', firstName: '亮太' },
{ lastName: '高橋', firstName: '美奈子' },
];
const fullNames = users.map(user => `${user.lastName} ${user.firstName}`);
return fullNames
}こちらの関数を実行すると、以下の配列を取得できます。
[ '佐藤 一郎', '鈴木 亮太', '高橋 美奈子' ]まとめ
mapはforEachとよく似た動きをする高階関数です。ただし、2つは以下のような違いがあります。
| メソッド | 戻り値 | 用途 |
|---|---|---|
| map | 変換後の新しい配列を返す | 配列の要素を変換し、新しい配列を作成する場合 |
| forEach | なし(undefined) | 配列の各要素に対して処理を実行する場合(単純なループ) |
2つの違いを意識することで、理解を深めることができます。
まあ、正直私自身はGASでmapを使うことはあまりないのですが、ReactやNext.jsなどJavaScriptのフレームワークでWeb開発をする際は必ず使用するメソッドになりますので、覚えておいて損はないでしょう。
「mapとは写像のことである」という語源と、写像についてのざっくりとしたイメージを持っていれば、より理解がしやすいですね。
写像についての数学的な理解は必要ないのですが、気になる場合はChatGPTに次のような質問を投げかけてみてください。
写像ってなんですか？
コメント