JavaScriptのmap()で配列を変換する方法まとめ｜初心者向けにわかりやすく解説

1. map()メソッドとは？

1. map()メソッドとは？

JavaScriptのmap()メソッドは、配列の要素を一つずつ取り出して、別の値に変換し、新しい配列として返す便利なメソッドです。元の配列はそのまま残ります。これを使うと、繰り返し処理を書かなくても簡単に配列を加工できます。

2. 基本的な使い方

2. 基本的な使い方

まずは数字を2倍にする簡単な例を見てみましょう。

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled);

[2, 4, 6, 8, 10]

このように、map()は元の配列を変えずに、新しい配列を作るのに最適です。

3. アロー関数で簡単に書く方法

3. アロー関数で簡単に書く方法

最近のJavaScriptではアロー関数を使うと、より簡単に書けます。

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled);

[2, 4, 6, 8, 10]

アロー関数を使うとコードが短く、見やすくなります。

4. 文字列の配列を変換する

4. 文字列の配列を変換する

数字だけでなく、文字列の配列もmap()で加工できます。例えば、名前の文字列をすべて大文字にする場合です。

const names = ['Alice', 'Bob', 'Charlie'];
const upperNames = names.map(name => name.toUpperCase());
console.log(upperNames);

['ALICE', 'BOB', 'CHARLIE']

このように、文字列に対しても簡単に変換できます。

5. オブジェクトの配列を変換する

5. オブジェクトの配列を変換する

オブジェクトの配列でもmap()は使えます。例えば、ユーザー情報から名前だけを取り出す場合です。

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];
const userNames = users.map(user => user.name);
console.log(userNames);

['Alice', 'Bob', 'Charlie']

オブジェクトの特定の値だけを取り出したい場合にも便利です。

6. indexを使った変換

6. indexを使った変換

map()のコールバック関数では、第2引数に配列のインデックスが渡されます。これを利用してインデックスを含む加工も可能です。

const fruits = ['apple', 'banana', 'cherry'];
const indexedFruits = fruits.map((fruit, index) => `${index + 1}: ${fruit}`);
console.log(indexedFruits);

['1: apple', '2: banana', '3: cherry']

このように番号付きリストのような配列も簡単に作れます。

7. map()で条件付きの変換

7. map()で条件付きの変換

map()の中で条件を指定して変換することも可能です。例えば、偶数だけ2倍にする場合です。

const numbers = [1, 2, 3, 4, 5];
const transformed = numbers.map(num => num % 2 === 0 ? num * 2 : num);
console.log(transformed);

[1, 4, 3, 8, 5]

条件付きの変換もmap()なら1行で簡単に書けます。

8. map()の注意点

8. map()の注意点

map()は新しい配列を返すだけで、元の配列は変更されません。元の配列を変更したい場合はforEach()やループを使う必要があります。また、map()の中で副作用のある処理（画面に表示するなど）は避けるほうが安全です。

9. map()の応用例

9. map()の応用例

map()は単純な計算以外にも応用できます。例えば、数値の配列を文字列に変換してHTMLリストを作ることも可能です。

const numbers = [1, 2, 3];
const listItems = numbers.map(num => `<li>${num}</li>`);
console.log(listItems);

['<li>1</li>', '<li>2</li>', '<li>3</li>']

このように、map()を使えば配列のデータをHTMLや他の形式に簡単に変換できます。

まとめ

まとめ

今回はJavaScriptのmap()メソッドについて詳しく解説しました。map()は配列の各要素に対して処理を行い、新しい配列を作る強力なメソッドであり、元の配列は変更されません。この特性を理解することで、配列の変換やデータ加工を効率的に行えます。基本的な数字の2倍変換から、文字列の大文字化、オブジェクトの特定プロパティの抽出、インデックス利用、条件付き変換まで幅広く応用可能です。また、アロー関数を用いることでコードを短く、可読性を高められます。

実務では、配列から必要な情報を抽出したり、加工した結果をHTMLに反映したりする場面が多く、map()はこれらの作業をシンプルに実現します。例えばユーザー名だけを取り出す場合や、番号付きリストを作る場合、条件付きで変換する場合など、map()を駆使するとコードの冗長さを減らし、メンテナンス性の高いプログラムを書けます。また、map()は副作用のない純粋な関数を使用することが推奨されるため、状態管理やデータフローの予測も容易になります。

さらに、map()はHTMLや文字列、オブジェクト配列など、さまざまなデータ型に対応できるため、フロントエンド開発では特に有用です。Reactなどのフレームワークでも、コンポーネントのリスト表示にmap()を使うことが一般的です。基本を押さえたうえで、条件付き変換やインデックスを活用した応用的な使い方までマスターすると、配列操作の幅が格段に広がります。

ここで、map()の基本例を振り返っておきましょう。数字を2倍にするシンプルな変換です。

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled);

[2, 4, 6, 8, 10]

また、オブジェクト配列から特定のプロパティを取り出す応用例も重要です。例えばユーザー名だけを抽出する場合です。

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];
const userNames = users.map(user => user.name);
console.log(userNames);

['Alice', 'Bob', 'Charlie']

さらに、条件付きで要素を変換したい場合も、map()なら簡単です。偶数だけ2倍にする例を振り返ります。

const numbers = [1, 2, 3, 4, 5];
const transformed = numbers.map(num => num % 2 === 0 ? num * 2 : num);
console.log(transformed);

[1, 4, 3, 8, 5]

このように、map()はシンプルな変換から条件付きの複雑な変換まで柔軟に対応でき、配列操作の基本として押さえておくべきメソッドです。