導入
JavaScript では、古典的な for ループから forEach() メソッドまで、データセットを反復処理するための様々なテクニックやメソッドが存在します。最も人気のあるメソッドの一つが .map() メソッドです。.map() は、親配列の各項目に対して特定の関数を呼び出すことで配列を作成します。.map() は、呼び出し元の配列のみを変更する変更メソッドとは異なり、新しい js 配列を作成する非変更メソッドです。このメソッドは、配列の操作において様々な用途があります。このチュートリアルでは、JavaScript における .map() の4つの重要な用途、すなわち配列要素からの関数の呼び出し、文字列から配列への変換、JavaScript ライブラリでのリストのレンダリング、配列オブジェクトの再フォーマットについて説明します。.
前提条件
このチュートリアルではコーディングは必要ありませんが、例に沿って進めたい場合は、Node.js REPL またはブラウザ開発者ツールを使用できます。.
配列内の各項目に対してJS関数を呼び出す方法
.map() は引数の一つとしてコールバック関数を受け取ります。この関数の重要なパラメータは、関数によって処理された項目の現在の値です。これは必須パラメータです。このパラメータを使用することで、配列内の任意の項目を変更し、それを新しい配列の変更されたメンバーとして返すことができます。.
次に例を示します。
const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => {
return sweetItem * 2
})
console.log(sweeterArray)次の出力がコンソールに記録されます:
Output
[ 4, 6, 8, 10, 70 ]
これを次のように簡略化してわかりやすくすることができます。
// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;
// we have an array
const sweetArray = [2, 3, 4, 5, 35];
// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);同じ出力がコンソールに記録されます。
Output
[ 4, 6, 8, 10, 70 ]
sweetArray.map(makeSweeter) のようなコードを使用すると、コードが少し読みやすくなります。.
JS文字列を配列に変換する方法
map() は配列プロトタイプに属します。このステップでは、これを使用して文字列を配列に変換します。ここでは文字列用のメソッドは開発しません。代わりに、特別な .call() メソッドを使用します。.
JavaScript のあらゆるものはオブジェクトであり、メソッドはこれらのオブジェクトに付随する関数です。Call() を使うと、あるオブジェクトのテキストを別のオブジェクトで使用できます。つまり、.map() のテキストを文字列の配列にコピーすることができます。.
Call() には、コンテキスト引数とパラメータをメイン関数の引数に渡すことができます。.
次に例を示します。
const name = "Sammy"
const map = Array.prototype.map
const newName = map.call(name, eachLetter => {
return `${eachLetter}a`
})
console.log(newName)次の出力がコンソールに記録されます:
Output
[ "Sa", "aa", "ma", "ma", "ya" ]ここでは、文字列に対して .map() 関数を使用し、 .map() が期待する関数引数を渡しました。.
これは文字列の split() メソッドと同様に動作しますが、配列で返される前に個々の文字列文字を変更できる点が異なります。.
JavaScriptライブラリでリストをレンダリングする方法
ReactなどのJavaScriptライブラリは、リスト内の項目をレンダリングするために.map()を使用します。ただし、.map()メソッドはJSX構文でラップされているため、JSX構文が必要になります。.
以下は React コンポーネントの例です。
import React from "react";
import ReactDOM from "react-dom";
const names = ["whale", "squid", "turtle", "coral", "starfish"];
const NamesList = () => (
<div>
<ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);これは、リストを含む div 要素をレンダリングするステートレスな React コンポーネントです。個々のリスト項目は、名前の配列を反復処理する .map() を使用してレンダリングされます。コンポーネントは、ルート ID を持つ DOM 要素に対して ReactDOM を使用してレンダリングされます。.
JavaScript配列オブジェクトのフォーマットを変更する方法
.map() は、配列内のオブジェクトを反復処理し、各オブジェクトの内容を変更して、従来の配列と同様に新しい配列を返すために使用できます。この変更は、コールバック関数で返される内容に基づいて行われます。.
次に例を示します。
const myUsers = [
{ name: 'shark', likes: 'ocean' },
{ name: 'turtle', likes: 'pond' },
{ name: 'otter', likes: 'fish biscuits' }
]
const usersByLikes = myUsers.map(item => {
const container = {};
container[item.name] = item.likes;
container.age = item.name.length * 10;
return container;
})
console.log(usersByLikes);次の出力がコンソールに記録されます:
Output
[
{shark: "ocean", age: 50},
{turtle: "pond", age: 60},
{otter: "fish biscuits", age: 50}
]
ここでは、配列内の各オブジェクトを括弧とドット表記法を使って変更しています。このユースケースは、受信したデータをフロントエンドアプリケーションで保存または解析する前に、処理または圧縮するために使用できます。.
結果
このチュートリアルでは、JavaScript における .map() メソッドの 4 つの使用例を見てきました。他のメソッドと組み合わせることで、.map() の機能を拡張できます。.
