JavaScriptの配列を操作するメソッドの中で、map()は特に便利なメソッドの１つです。今回は、map()の基本的な使い方から使用時の注意点までをまとめていきたいと思います。
目次 非表示
map()メソッドは、配列の各要素に対して関数を適用し、新しい配列を作成するメソッドです。元の配列は変更されません。
JavaScript
// 数値の配列を定義
let numbers = [1, 2, 3, 4, 5];
// 各要素を2倍にした新しい配列を作成
let doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]オブジェクトの配列をmap()で変換することも可能です。
JavaScript
// ユーザー情報の配列
let users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Chris' }
];
// 名前だけの配列を作成
let userNames = users.map(user => user.name);
console.log(userNames); // ["Alice","Bob","Chris"]map()を使ってHTMLのリストを動的に作成できます。
JavaScript
// 商品リスト
let products = ['コーヒーサーバー', 'ドリッパー', 'ケトル'];
// 各商品をリストアイテム（li要素）に変換
let listItems = products.map(product => `<li>${product}</li>`);
// 結果を表示
console.log(listItems.join('\n'));金額をフォーマットする例です。
JavaScript
let prices = [1000, 2000, 3000];
// 日本円のフォーマットに変換
let formattedPrices = prices.map(price => `¥${price.toLocaleString()}`);
console.log(formattedPrices); // ["¥1,000","¥2,000","¥3,000"]map()は元の配列を変更せず、新しい配列を返します。変更を期待する場合はforEach()などを検討しましょう。
map()内で値を返さないと、新しい配列にはundefinedが入ってしまいます。
JavaScript
let numbers = [1, 2, 3];
let newNumbers = numbers.map(num => {
num * 2; // 値を返していないため、結果は [undefined, undefined, undefined]
});
console.log(newNumbers)正しくはreturnを明示するか、アロー関数の省略形を使いましょう。
JavaScript
let numbers = [1, 2, 3];
let correctNumbers = numbers.map(num => num * 2);
console.log(correctNumbers); // [2, 4, 6]
