React,JavaScriptでよく使うmap()の使い方
公開: 2023-11-21
Reactを勉強し始めてから配列操作系のメソッドをよく使うようになりました。その中でも、リスト表示などでよく使うmapメソッドについて改めてまとめました。
mapメソッドの基礎
まずは基礎おさらいから。
map()は、配列の全ての要素に対して与えられた関数を呼び出して、その結果から新しい配列を作ります。
const array = [1, 2, 3, 4, 5];
const newArray = array.map((x) => x + 100);
console.log(array); // [1, 2, 3, 4, 5]
console.log(newArray); // [101, 102, 103, 104, 105]
- 既存の配列(
array)の各要素をxで受けて+100した結果を返している - 既存の配列(
array)を変更せずに新しい配列を返す
構文の理解
mapは引数にコールバック関数を受け取ります。
map(callbackFn)
引数のコールバック関数もまた、以下の引数を受け取ります。
-
callbackFnがとる引数:-
element: 配列内で現在処理中の要素 -
index: 現在処理中の要素の添字 -
array:map()が呼び出された配列（元の配列）
-
冒頭の例では、elementとしてxを使って処理していました。試しに、全ての引数を使った例を書いてみます。
const array = [1, 2, 3, 4, 5];
const newArray = array.map((element, index, array) => element + array[index]);
console.log(array); // [1, 2, 3, 4, 5]
console.log(newArray); // [2, 4, 6, 8, 10]
色々な書き方
JavaScriptの文法の話にはなりますが、次のように色々な記法があり、全て同じ結果を得られます。
// 元の例（標準的なアロー関数の記法）
const array = [1, 2, 3, 4, 5];
const newArray = array.map((x) => x + 100);
// アロー関数では引数が一つならカッコを省略可能
const newArray2 = array.map(x => x + 100);
// アロー関数でブロック構文（{ ... }）を使用
// 引数が一つのためカッコ省略も可能
const newArray3 = array.map((x) => {
return x + 100;
});
// 通常の関数の記法（無名関数）
const newArray4 = array.map(function(x) {
return x + 100;
});
// 関数を外部に定義
const newArray5 = array.map(sampleMethod);
function sampleMethod(x) {
return x + 100;
}
オブジェクトとの組み合わせ
オブジェクトを格納した配列の場合、特定のプロパティにアクセスして新しい配列を作る例。
const objectsArray = [{ value: 10 }, { value: 20 }, { value: 30 }];
const valuesArray = objectsArray.map((obj) => obj.value);
console.log(objectsArray); // [{value: 10},{value: 20},{value: 30}]
console.log(valuesArray); // [10, 20, 30]
上記コードを、 分割代入（デストラクチャリング）を使って書き換えた例です。
const objectsArray = [{ value: 10 }, { value: 20 }, { value: 30 }];
const valuesArray = objectsArray.map(({ value }) => value);
console.log(objectsArray); // [{value: 10},{value: 20},{value: 30}]
console.log(valuesArray); // [10, 20, 30]
メソッドチェーンを使う
他の配列メソッドとチェーンして使うこともできます。filter()で要素を絞り込んだ後にmap()で変換しています。
const array = [1, 2, 3, 4, 5];
const newArray = array.filter(x => x > 3).map(x => x + 100);
console.log(array); // [1, 2, 3, 4, 5]
console.log(newArray); // [104, 105]
Reactでmapメソッドを使う
例えば、ブログサイトの各記事のidとtitleデータを持ったオブジェクトの集合を配列で持っているとします。以下の例では、React コンポーネントとmap()を使って記事のタイトルをリスト表示しています。
const articles = [
{ id: 1, title: 'Reactの基本'},
{ id: 2, title: 'Laravelの導入方法'},
{ id: 3, title: 'PHPの基礎'},
];
function ArticleList() {
return (
<ul>
{articles.map(article => (
<li key={article.id}>
{article.title}
</li>
))}
</ul>
);
}
上記のarticlesのような配列形式は、通常バックエンドのデータベースからAPI経由で取得して、React コンポーネントでprops を通じて受け取って使うことが多いと思います。
JSX構文で使うにはkeyが必要
JSX（JavaScriptの構文拡張）内でmap()のようなループを使ってリストを作成する場合は、各要素に一意のキーが必要です。
参考ソース
map()の文法:
Reactでリスト表示する時にキーが必要:
