{"id":81058,"date":"2024-05-01T06:42:02","date_gmt":"2024-04-30T21:42:02","guid":{"rendered":"https://freelance.indieverse.co.jp/media/?p=81058"},"modified":"2025-11-01T16:33:42","modified_gmt":"2025-11-01T07:33:42","slug":"javascript-map","status":"publish","type":"post","link":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-map","title":{"rendered":"JavaScriptのmapメソッドとMapオブジェクトの使い方"},"content":{"rendered":"<p>この記事では、</p>\n<ul>\n<li>JavaScriptでmapメソッドの基本的な使い方を知りたい</li>\n<li>JavaScriptの配列操作メソッド(map, filter, reduce)の各メソッドの適切な使用シーンを理解したい</li>\n<li>mapメソッドと他のメソッドとの具体的な違いや利用シーンの違いを知りたい</li>\n<li>Mapオブジェクトと通常のオブジェクトの違いを理解して、適切なツールを選びたい</li>\n<li>データ処理の効率を上げるためにMapオブジェクトのメリットを学びたい</li>\n</ul>\n<p>という悩みを抱えている向けに、</p>\n<ul>\n<li>プログラミングにおいてmapメソッドをうまく使いこなすための具体例</li>\n<li>JavaScriptでmap関数を使う最も一般的な例</li>\n<li>Mapオブジェクトと基本的なオブジェクトの違いと、それがどのように使われるべきか</li>\n</ul>\n<p>について解説していきたいと思います。</p>\n<h2>JavaScriptのmapメソッドとMapオブジェクトの違い</h2>\n<p>JavaScript には、<code>Array</code>のインスタンスメソッド<code>map</code>()と、標準組み込みオブジェクトである<code>Map</code>があります。</p>\n<p><span>JavaScriptにおける<code><strong>Map</strong></code>オブジェクトは、キー（key）とそれに対応する値（value）を対応させて保持するオブジェクトです。配列や通常のJavaScriptオブジェクトとは異なり、キーには文字列や数値だけでなく、真偽値（Boolean）などを自由に設定できるメリットがあります。</span></p>\n<p><code>map</code><strong>メソッド</strong><span>はJavaScriptの配列を操作するために用意されている便利なメソッドです。このメソッドは、配列の各要素に対して指定した関数を適用し、新しい配列を生成します。</span></p>\n<p>参照：<a href=\"https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map\" target=\"_blank\" rel=\"noopener\">Array.prototype.map()｜JavaScriptリファレンス</a></p>\n<p><span>一方、<code>Map</code>オブジェクトはES2015（ES6）で新たに登場した機能であり、古いブラウザ（例：IE11）では動作しないことがあります。しかし、現代的なブラウザでは問題ありません。</span></p>\n<p>参照：<a href=\"https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map\" target=\"_blank\" rel=\"noopener\">Map｜JavaScriptリファレンス</a></p>\n<p>両者は名前が似ているため混同されることがありますが、使い分けを理解して効果的に活用することが大切です。<code>M</code><code>map</code>メソッド、<code>ap</code>オブジェクトの具体的な使い方については、次項から詳しく説明します。</p>\n<h2>JavaScriptのmapメソッド</h2>\n<h3>mapメソッドの基本</h3>\n<p>JavaScriptでの<code>map</code>メソッドは、配列の各要素に対して指定された関数を実行し、その結果から新しい配列を作成します。これはデータ処理やデータ変換の際に非常に便利な機能です。配列内の各要素を別の値にマッピングするために使用されます。</p>\n<p>基本的な使い方は以下のようになります。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const numbers = [1, 2, 3, 4];\r\nconst doubled = numbers.map(number =&gt; number * 2);\r\n\r\nconsole.log(doubled); // 出力: [2, 4, 6, 8]</code></pre>\n</div>\n<p>このコードでは、配列<code>numbers</code>のそれぞれの要素が2倍され、新しい配列<code>doubled</code>が生成されます。このシンプルな例からもわかるように、<code>map</code>メソッドは配列の各要素を自由に加工・変換できるため、データの整形に広く利用されます。</p>\n<h3>mapメソッドの応用例</h3>\n<p><code>map</code>メソッドは、より複雑なデータ構造の変換にも利用できます。例えば、オブジェクトの配列を扱う場合、特定のプロパティに基づいた新しい配列を作成することができます。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const fruits = [\r\n    { name: 'apple', color: 'red' },\r\n    { name: 'banana', color: 'yellow' },\r\n    { name: 'grape', color: 'purple' }\r\n];\r\n\r\nconst fruitNames = fruits.map(fruit =&gt; fruit.name);\r\n\r\nconsole.log(fruitNames); // 出力: [\"apple\", \"banana\", \"grape\"]\r\n</code></pre>\n</div>\n<p>このコードでは、各オブジェクトから<code>name</code>プロパティのみを抽出して新しい配列を作成しています。このように、<code>map</code>メソッドを使うことで、元のデータ構造を保持しながら必要な情報だけを抜き出す操作が簡単に行えます。</p>\n<h2>メソッド比較とベストプラクティス</h2>\n<h3>mapとfilter</h3>\n<p><code>map</code>と<code>filter</code>はJavaScriptにおいて配列を操作するための2つの重要なメソッドです。これらはしばしば併用されますが、用途は異なります。<code>map</code>は配列内の各要素を何らかの基準で変換するのに対し、<code>filter</code>は配列から特定の条件を満たす要素だけを取り出すために使用されます。</p>\n<p>以下に例を示します。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const numbers = [1, 2, 3, 4, 5];\r\nconst evenNumbers = numbers.filter(number =&gt; number % 2 === 0);\r\nconst doubledEvenNumbers = evenNumbers.map(number =&gt; number * 2);\r\n\r\nconsole.log(doubledEvenNumbers); // 出力: [4, 8]</code></pre>\n</div>\n<p>この例では、まず<code>filter</code>メソッドで偶数だけを抽出し、その後<code>map</code>メソッドを使って偶数を2倍にしています。</p>\n<h3>mapとreduce</h3>\n<p><code>map</code>と<code>reduce</code>もまた、JavaScriptでよく使われる配列操作メソッドです。<code>map</code>が配列の各要素に関数を適用して新しい配列を生成するのに対し、<code>reduce</code>は配列内のすべての要素を結合し、単一の値を返すのに使用されます。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const numbers = [1, 2, 3, 4];\r\nconst sum = numbers.reduce((total, current) =&gt; total + current, 0);\r\n\r\nconsole.log(sum); // 出力: 10</code></pre>\n</div>\n<p>このコードでは、<code>reduce</code>メソッドを使用して、配列内の数値を合計しています。</p>\n<h3>forEachとの違い</h3>\n<p><code>map</code>と<code>forEach</code>の大きな違いは、<code>map</code>が新しい配列を返すのに対して、<code>forEach</code>は何も返さない点です。以下のコードは、<code>forEach</code><span>と</span><code>map</code><span>を組み合わせて使用している例です。</span></p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const numbers = [1, 2, 3, 4, 5]; \r\n\r\nconst doubledNumbers = []; \r\n\r\n//foreachで<span>配列の要素を2倍した配列を作成</span>\r\nnumbers.forEach((number) =&gt; { doubledNumbers.push(number * 2); }); \r\n\r\n//map<span>でそれぞれの要素を二乗した新しい配列を作成</span>\r\nconst squaredNumbers = doubledNumbers.map((number) =&gt; { \r\n    return number * number; \r\n}); \r\n\r\nconsole.log(squaredNumbers); // 出力: [4, 16, 36, 64, 100]</code></pre>\n</div>\n<p>上記の例では、<span>まず</span><code>forEach</code><span>で配列の要素を2倍した配列を作成し、次に</span><code>map</code><span>でそれぞれの要素を二乗した新しい配列を作成しています。注意点として、<code>forEach</code>と<code>map</code>は新しい配列を作成する際に元の配列を変更しないことが重要です。</span></p>\n<p>このように、<code>forEach</code>は配列の各要素に対して副作用を持つ関数を適用する場合に使用しますが、<code>map</code>はデータの変換に特化しています。</p>\n<p>これらのメソッドとその使い分けを理解することで、JavaScriptでの配列操作がより効果的になります。</p>\n<h2>JavaScriptのMapオブジェクトについて</h2>\n<h3>Mapオブジェクトとは</h3>\n<p>JavaScriptの<code>Map</code>オブジェクトは、キーと値のペアを持つコレクションです。一般的なオブジェクトとは異なり、<code>Map</code>はどんな値でもキーとして使用でき、オブジェクトリテラルのように文字列のみをキーとする必要はありません。これにより、より柔軟なデータ構造が可能になります。</p>\n<p><code>Map</code>オブジェクトの基本的な使用方法は次のとおりです。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>let myMap = new Map();\r\n\r\n// キーと値を追加\r\nmyMap.set('key1', 'value1');\r\nmyMap.set({}, 'value2');\r\nmyMap.set(function(){}, 'value3');\r\n\r\n// キーを使用して値を取得\r\nconsole.log(myMap.get('key1')); // 出力: \"value1\"\r\nconsole.log(myMap.get({})); // 出力: \"undefined\" キーを設定していないため取得できない\r\nconsole.log(myMap.get(function(){})); // 出力: \"undefined\" キーを設定していないため取得できない\r\n// キーの存在を確認\r\nconsole.log(myMap.has('key1')); // 出力: true\r\n\r\n// Mapのサイズ\r\nconsole.log(myMap.size); // 出力: 3\r\n\r\n// キーに対応する値を削除\r\nmyMap.delete('key1');\r\nconsole.log(myMap.has('key1')); // 出力: false</code></pre>\n</div>\n<p>この例からわかるように、<code>Map</code>オブジェクトは簡単にキーと値を管理できるため、動的なデータセットを扱う際に非常に便利です。またキーにはあらゆるタイプの値（オブジェクトを含む）を使用できるため、さまざまなデータを保持することができます。</p>\n<h3>ObjectとMapの比較</h3>\n<p>JavaScriptでは、従来から<code>Object</code>をマップとして使用してきましたが、<code>Map</code>オブジェクトにはいくつかの重要な利点があります。</p>\n<ul>\n<li>キーとしてあらゆるタイプの値（オブジェクトを含む）を使用できる。</li>\n<li>キーの挿入順序が維持される。</li>\n<li>直接的にサイズ（エントリーの数）を取得できる。</li>\n<li>パフォーマンスが向上：特に頻繁に要素を追加・削除する場合、<code>Map</code>が望ましい選択肢となります。</li>\n</ul>\n<p>ObjectとMapの比較を以下の表にまとめます。</p>\n<table style=\"border-collapse: collapse; width: 100%; height: 320px;\">\n<tbody>\n<tr style=\"height: 24px; background-color: #bfe6f5;\">\n<td style=\"width: 33.3333%; height: 24px; text-align: center;\">比較項目</td>\n<td style=\"width: 33.3333%; height: 24px; text-align: center;\">Map</td>\n<td style=\"width: 33.3333%; height: 24px; text-align: center;\"><span>Object</span></td>\n</tr>\n<tr style=\"height: 80px;\">\n<td style=\"width: 33.3333%; height: 80px;\">キー</td>\n<td style=\"width: 33.3333%; height: 80px;\"><span>既定ではキーを持たない。明示的に設定したものだけを含む。</span></td>\n<td style=\"width: 33.3333%; height: 80px;\"><span>プロトタイプがあり、既定のキーを含む。キー名を工夫しないと自分のキーと衝突する可能性がある。</span></td>\n</tr>\n<tr style=\"height: 120px;\">\n<td style=\"width: 33.3333%; height: 120px;\">セキュリティ</td>\n<td style=\"width: 33.3333%; height: 120px;\"><span>ユーザーが設定したキーと値を使用しても安全。</span></td>\n<td style=\"width: 33.3333%; height: 120px;\"><span>ユーザーが提供したキーと値のペアを </span><code>Object</code><span> に設定すると、攻撃者がオブジェクトのプロトタイプを上書きできてしまい、<a href=\"https://github.com/eslint-community/eslint-plugin-security/blob/main/docs/the-dangers-of-square-bracket-notation.md\" target=\"_blank\" rel=\"noopener\">オブジェクトインジェクション攻撃</a>につながる可能性がある。</span></td>\n</tr>\n<tr style=\"height: 48px;\">\n<td style=\"width: 33.3333%; height: 48px;\">キーの型</td>\n<td style=\"width: 33.3333%; height: 48px;\"><span>キーは関数、オブジェクト、あらゆるプリミティブなどの値を設定できる </span></td>\n<td style=\"width: 33.3333%; height: 48px;\"><code>Object</code><span> のキーは文字列またはシンボルのみ設定できる</span></td>\n</tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 33.3333%; height: 24px;\">キーの順序</td>\n<td style=\"width: 33.3333%; height: 24px;\"><span>キーは、単純で直感的な方法で順序付けられる。反復処理を行うと挿入順でキーを返す。</span></td>\n<td style=\"width: 33.3333%; height: 24px;\">キーの<span>順序付けはECMAScript 2015で初めて定義されたため複雑。基本的に順序には頼らない方が良い。</span></td>\n</tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 33.3333%; height: 24px;\">アイテム数</td>\n<td style=\"width: 33.3333%; height: 24px;\"><span>中のアイテム数は、 </span><code>size</code><span> プロパティで簡単に取得できる。</span></td>\n<td style=\"width: 33.3333%; height: 24px;\"><span> <code>Object.keys()</code> から返される配列の <code>length</code>で取得できる</span><span>。</span></td>\n</tr>\n<tr>\n<td style=\"width: 33.3333%;\">反復処理</td>\n<td style=\"width: 33.3333%;\"><span> 直接反復処理が可能。</span></td>\n<td style=\"width: 33.3333%;\"><span> 反復処理プロトコルを実装していないので、 for&#8230;of 文を使用した直接反復処理は（</span><span>規定では）利用不可。オブジェクトに反復処理プロトコルを実装したり、 <code>Object.keys</code> または <code>Object.entries</code> を使用した反復処理、for&#8230;in 文による列挙可能なプロパティを反復処理することか可能。</span></td>\n</tr>\n<tr>\n<td style=\"width: 33.3333%;\">最適化</td>\n<td style=\"width: 33.3333%;\"><span>キーと値のペアを頻繁に追加したり削除したりすることに最適化されている</span></td>\n<td style=\"width: 33.3333%;\"><span>キーと値のペアを頻繁に追加したり削除したりすることに最適化されていない</span></td>\n</tr>\n</tbody>\n</table>\n<p>参照：<a href=\"https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map\" target=\"_blank\" rel=\"noopener\">Map｜JavaScriptリファレンス</a></p>\n<h3>Mapオブジェクトのメリットとユースケース</h3>\n<p><code>Map</code>オブジェクトは特に、以下のようなユースケースでその真価を発揮します。</p>\n<ul>\n<li>頻繁に要素を追加・削除する状況</li>\n<li>キーにさまざまな型を使用したいとき</li>\n<li>エントリーの追加順序を記憶する必要があるとき</li>\n<li>データセットのサイズを簡単に取得したいとき</li>\n</ul>\n<p>これらの特性により、特定の場面で<code>Map</code>を使うことが、コードの効率化と可読性の向上につながるのです。</p>\n<h2>Mapオブジェクトの基本操作</h2>\n<h3>Mapの作成と要素の追加</h3>\n<p>JavaScriptの<code>Map</code>オブジェクトは、キーと値のペアを管理するのに最適なツールです。<code>Map</code>オブジェクトの作成と要素の追加は非常に直感的で、以下の例のように行います。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>// Mapオブジェクトの作成\r\nconst map = new Map();\r\n\r\n// 要素の追加\r\nmap.set('apple', 'green');\r\nmap.set('banana', 'yellow');\r\nmap.set('orange', 'orange');\r\n\r\n// 追加された要素の確認\r\nconsole.log(map);</code></pre>\n</div>\n<p>実行結果:</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>Map(3) {\"apple\" =&gt; \"green\", \"banana\" =&gt; \"yellow\", \"orange\" =&gt; \"orange\"}</code></pre>\n</div>\n<p>このように、<code>.set</code>メソッドを使用して簡単にキーと値のペアを<code>Map</code>オブジェクトに追加できます。また、同じキーを再び使用して<code>.set</code>を呼び出した場合、そのキーの値が更新されます。これは、<code>Map</code>がキーのユニーク性を保証するためです。</p>\n<h3>Mapからの要素の取得・削除</h3>\n<p>追加した要素を<code>Map</code>から取得したり、削除したりするには、<code>.get</code>メソッドと<code>.delete</code>メソッドを使用します。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>// 要素の取得\r\nconsole.log(map.get('apple')); // \"green\"\r\n\r\n// 要素の削除\r\nmap.delete('apple');\r\n\r\n// 削除後の確認\r\nconsole.log(map.has('apple')); // false\r\n</code></pre>\n</div>\n<p><code>.get</code>メソッドを使うことで、指定したキーの値を取得できます。そして、<code>.delete</code>メソッドにより、指定したキーの要素を<code>Map</code>から削除できます。要素が削除されると、そのキーはもはや<code>Map</code>内に存在しないため、<code>.has</code>メソッドで確認した際に<code>false</code>が返されます。</p>\n<h3>Mapのサイズとキーの存在確認</h3>\n<p><code>Map</code>オブジェクトのサイズ（つまり、キーと値のペアの数）を知りたい場合には、<code>.size</code>プロパティを用います。また、特定のキーが<code>Map</code>に存在するかどうかを確認するには<code>.has</code>メソッドを使います。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>// Mapのサイズ確認\r\nconsole.log(map.size); // 出力例: 2\r\n\r\n// キーの存在確認\r\nconsole.log(map.has('banana')); // true\r\nconsole.log(map.has('apple')); // false</code></pre>\n</div>\n<p><code>.size</code>プロパティによって<code>Map</code>が持つキーと値のペアの数を確認でき、<code>.has</code>メソッドによって特定のキーが<code>Map</code>内に存在するかどうかを簡単に確認できます。これらの基本的な操作をマスターすることで、JavaScriptにおけるデータ管理が大幅に効率化されます。</p>\n<h2>Mapオブジェクトの応用</h2>\n<h3>Mapでの繰り返し処理</h3>\n<p><code>Map</code>オブジェクト内のデータに対して繰り返し処理を行いたい場合には、<code>forEach</code>メソッドや<code>for...of</code>ループが使用できます。</p>\n<h4>MapでのforEachメソッドの使用</h4>\n<p><code>forEach</code>メソッドを用いることで、<code>Map</code>内の各エントリー（キーと値のペア）に対して関数を実行できます。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>//Mapオブジェクトの作成\r\nlet map = new Map();\r\n\r\n//要素の追加\r\nmap.set('grape', 'purple');\r\nmap.set('strawberry', 'red');\r\n\r\n//forEach関数で要素を取得\r\nmap.forEach((value, key) =&gt; {\r\n    console.log(${key}: ${value});\r\n});\r\n</code></pre>\n</div>\n<p>実行結果:</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>grape: purple\r\n\r\nstrawberry: red</code></pre>\n</div>\n<p>この方法では、<code>Map</code>の各要素に対して順に関数が適用されます。この例では、各フルーツの名前と色を表示しています。</p>\n<h4>Mapでのfor..ofループ</h4>\n<p><code>for...of</code>ループを使用することもできます。この方法では、<code>Map</code>の<code>entries</code>メソッドを使用して、キーと値のペアのイテレーターを取得し、それをループします。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>for (let [key, value] of map.entries()) {\r\n    console.log(`${key}: ${value}`);\r\n}</code></pre>\n</div>\n<p>実行結果は<code>forEach</code>メソッドを使用した場合と同様ですが、<code>for...of</code>ループを使用することで、ループの中でより複雑な条件分岐や操作が可能になります。</p>\n<h3>MapとArrayの関連操作</h3>\n<h4>Mapから配列を生成</h4>\n<p><code>Map</code>オブジェクトから配列を生成することも、よくある操作です。これには、<code>Array.from</code>メソッドやスプレッド構文を使用できます。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>//Mapオブジェクトの作成\r\nlet map = new Map();\r\n\r\n//要素の追加\r\nmap.set('grape', 'purple');\r\nmap.set('strawberry', 'red');\r\n\r\n// Mapから配列を生成（キーのみ）\r\nconst keysArray = Array.from(map.keys());\r\nconsole.log(keysArray);\r\n\r\n// Mapから配列を生成（値のみ）\r\nconst valuesArray = [...map.values()];\r\nconsole.log(valuesArray);</code></pre>\n</div>\n<p>実行結果</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>[ 'grape', 'strawberry' ] \r\n[ 'purple', 'red' ]</code></pre>\n</div>\n<p>このように、<code>Map</code>オブジェクトのキーや値を配列として抽出することができるため、データの加工や操作が非常に柔軟に行えるようになります。</p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScriptのmapメソッドとMapオブジェクトの違い・使い方を基礎から解説。map・filter・reduceの比較や実例で配列変換とデータ処理を効率化できます。</p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[192],"tags":[316,287],"class_list":["post-81058","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-java","tag-javascript"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.3 - aioseo.com -->\n\t<meta name=\"description\" content=\"JavaScriptのmapメソッドとMapオブジェクトの違い・使い方を基礎から解説。map・filter・reduceの比較や実例で配列変換とデータ処理を効率化できます。\" />\n\t<meta name=\"robots\" content=\"max-image-preview:large\" />\n\t<meta name=\"author\" content=\"DAI\"/>\n\t<link rel=\"canonical\" href=\"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-map\" />\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" />\n\t\t<meta property=\"og:locale\" content=\"ja_JP\" />\n\t\t<meta property=\"og:site_name\" content=\"インディバースフリーランスメディア - Indieverse Freelanceの公式メディアです\" />\n\t\t<meta property=\"og:type\" content=\"article\" />\n\t\t<meta property=\"og:title\" content=\"JavaScriptのmapメソッドとMapオブジェクトの使い方 - インディバースフリーランスメディア\" />\n\t\t<meta property=\"og:description\" content=\"JavaScriptのmapメソッドとMapオブジェクトの違い・使い方を基礎から解説。map・filter・reduceの比較や実例で配列変換とデータ処理を効率化できます。\" />\n\t\t<meta property=\"og:url\" content=\"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-map\" />\n\t\t<meta property=\"article:published_time\" content=\"2024-04-30T21:42:02+00:00\" />\n\t\t<meta property=\"article:modified_time\" content=\"2025-11-01T07:33:42+00:00\" />\n\t\t<meta name=\"twitter:card\" content=\"summary\" />\n\t\t<meta name=\"twitter:title\" content=\"JavaScriptのmapメソッドとMapオブジェクトの使い方 - インディバースフリーランスメディア\" />\n\t\t<meta name=\"twitter:description\" content=\"JavaScriptのmapメソッドとMapオブジェクトの違い・使い方を基礎から解説。map・filter・reduceの比較や実例で配列変換とデータ処理を効率化できます。\" />\n\t\t<script type=\"application/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\/\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-map#blogposting\",\"name\":\"JavaScript\\u306emap\\u30e1\\u30bd\\u30c3\\u30c9\\u3068Map\\u30aa\\u30d6\\u30b8\\u30a7\\u30af\\u30c8\\u306e\\u4f7f\\u3044\\u65b9 - \\u30a4\\u30f3\\u30c7\\u30a3\\u30d0\\u30fc\\u30b9\\u30d5\\u30ea\\u30fc\\u30e9\\u30f3\\u30b9\\u30e1\\u30c7\\u30a3\\u30a2\",\"headline\":\"JavaScript\\u306emap\\u30e1\\u30bd\\u30c3\\u30c9\\u3068Map\\u30aa\\u30d6\\u30b8\\u30a7\\u30af\\u30c8\\u306e\\u4f7f\\u3044\\u65b9\",\"author\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/author\\/wpmaster#author\"},\"publisher\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/#organization\"},\"datePublished\":\"2024-05-01T06:42:02+09:00\",\"dateModified\":\"2025-11-01T16:33:42+09:00\",\"inLanguage\":\"ja\",\"mainEntityOfPage\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-map#webpage\"},\"isPartOf\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-map#webpage\"},\"articleSection\":\"javascript, Java, JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-map#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/#listItem\",\"position\":1,\"name\":\"\\u30db\\u30fc\\u30e0\",\"item\":\"https:\\/\\/freelance.dividable.net\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/category\\/programming#listItem\",\"name\":\"\\u30d7\\u30ed\\u30b0\\u30e9\\u30df\\u30f3\\u30b0\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/category\\/programming#listItem\",\"position\":2,\"name\":\"\\u30d7\\u30ed\\u30b0\\u30e9\\u30df\\u30f3\\u30b0\",\"item\":\"https:\\/\\/freelance.dividable.net\\/category\\/programming\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/category\\/programming\\/javascript#listItem\",\"name\":\"javascript\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/#listItem\",\"name\":\"\\u30db\\u30fc\\u30e0\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/category\\/programming\\/javascript#listItem\",\"position\":3,\"name\":\"javascript\",\"item\":\"https:\\/\\/freelance.dividable.net\\/category\\/programming\\/javascript\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-map#listItem\",\"name\":\"JavaScript\\u306emap\\u30e1\\u30bd\\u30c3\\u30c9\\u3068Map\\u30aa\\u30d6\\u30b8\\u30a7\\u30af\\u30c8\\u306e\\u4f7f\\u3044\\u65b9\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/category\\/programming#listItem\",\"name\":\"\\u30d7\\u30ed\\u30b0\\u30e9\\u30df\\u30f3\\u30b0\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-map#listItem\",\"position\":4,\"name\":\"JavaScript\\u306emap\\u30e1\\u30bd\\u30c3\\u30c9\\u3068Map\\u30aa\\u30d6\\u30b8\\u30a7\\u30af\\u30c8\\u306e\\u4f7f\\u3044\\u65b9\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/category\\/programming\\/javascript#listItem\",\"name\":\"javascript\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/#organization\",\"name\":\"Indieverse Freelance\",\"description\":\"Indieverse Freelance\\u306e\\u516c\\u5f0f\\u30e1\\u30c7\\u30a3\\u30a2\\u3067\\u3059\",\"url\":\"https:\\/\\/freelance.dividable.net\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/author\\/wpmaster#author\",\"url\":\"https:\\/\\/freelance.dividable.net\\/author\\/wpmaster\",\"name\":\"DAI\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-map#webpage\",\"url\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-map\",\"name\":\"JavaScript\\u306emap\\u30e1\\u30bd\\u30c3\\u30c9\\u3068Map\\u30aa\\u30d6\\u30b8\\u30a7\\u30af\\u30c8\\u306e\\u4f7f\\u3044\\u65b9 - \\u30a4\\u30f3\\u30c7\\u30a3\\u30d0\\u30fc\\u30b9\\u30d5\\u30ea\\u30fc\\u30e9\\u30f3\\u30b9\\u30e1\\u30c7\\u30a3\\u30a2\",\"description\":\"JavaScript\\u306emap\\u30e1\\u30bd\\u30c3\\u30c9\\u3068Map\\u30aa\\u30d6\\u30b8\\u30a7\\u30af\\u30c8\\u306e\\u9055\\u3044\\u30fb\\u4f7f\\u3044\\u65b9\\u3092\\u57fa\\u790e\\u304b\\u3089\\u89e3\\u8aac\\u3002map\\u30fbfilter\\u30fbreduce\\u306e\\u6bd4\\u8f03\\u3084\\u5b9f\\u4f8b\\u3067\\u914d\\u5217\\u5909\\u63db\\u3068\\u30c7\\u30fc\\u30bf\\u51e6\\u7406\\u3092\\u52b9\\u7387\\u5316\\u3067\\u304d\\u307e\\u3059\\u3002\",\"inLanguage\":\"ja\",\"isPartOf\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-map#breadcrumblist\"},\"author\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/author\\/wpmaster#author\"},\"creator\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/author\\/wpmaster#author\"},\"datePublished\":\"2024-05-01T06:42:02+09:00\",\"dateModified\":\"2025-11-01T16:33:42+09:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/#website\",\"url\":\"https:\\/\\/freelance.dividable.net\\/\",\"name\":\"\\u30a4\\u30f3\\u30c7\\u30a3\\u30d0\\u30fc\\u30b9\\u30d5\\u30ea\\u30fc\\u30e9\\u30f3\\u30b9\\u30e1\\u30c7\\u30a3\\u30a2\",\"description\":\"Indieverse Freelance\\u306e\\u516c\\u5f0f\\u30e1\\u30c7\\u30a3\\u30a2\\u3067\\u3059\",\"inLanguage\":\"ja\",\"publisher\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/#organization\"}}]}\n\t\t</script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"JavaScriptのmapメソッドとMapオブジェクトの使い方 - インディバースフリーランスメディア","description":"JavaScriptのmapメソッドとMapオブジェクトの違い・使い方を基礎から解説。map・filter・reduceの比較や実例で配列変換とデータ処理を効率化できます。","canonical_url":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-map","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https://schema.org","@graph":[{"@type":"BlogPosting","@id":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-map#blogposting","name":"JavaScriptのmapメソッドとMapオブジェクトの使い方 - インディバースフリーランスメディア","headline":"JavaScriptのmapメソッドとMapオブジェクトの使い方","author":{"@id":"https://freelance.indieverse.co.jp/media/author/wpmaster#author"},"publisher":{"@id":"https://freelance.indieverse.co.jp/media/#organization"},"datePublished":"2024-05-01T06:42:02+09:00","dateModified":"2025-11-01T16:33:42+09:00","inLanguage":"ja","mainEntityOfPage":{"@id":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-map#webpage"},"isPartOf":{"@id":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-map#webpage"},"articleSection":"javascript, Java, JavaScript"},{"@type":"BreadcrumbList","@id":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-map#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/#listItem","position":1,"name":"ホーム","item":"https://freelance.indieverse.co.jp/media/","nextItem":{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/category/programming#listItem","name":"プログラミング"}},{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/category/programming#listItem","position":2,"name":"プログラミング","item":"https://freelance.indieverse.co.jp/media/category/programming","nextItem":{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/category/programming/javascript#listItem","name":"javascript"},"previousItem":{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/#listItem","name":"ホーム"}},{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/category/programming/javascript#listItem","position":3,"name":"javascript","item":"https://freelance.indieverse.co.jp/media/category/programming/javascript","nextItem":{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-map#listItem","name":"JavaScriptのmapメソッドとMapオブジェクトの使い方"},"previousItem":{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/category/programming#listItem","name":"プログラミング"}},{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-map#listItem","position":4,"name":"JavaScriptのmapメソッドとMapオブジェクトの使い方","previousItem":{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/category/programming/javascript#listItem","name":"javascript"}}]},{"@type":"Organization","@id":"https://freelance.indieverse.co.jp/media/#organization","name":"Indieverse Freelance","description":"Indieverse Freelanceの公式メディアです","url":"https://freelance.indieverse.co.jp/media/"},{"@type":"Person","@id":"https://freelance.indieverse.co.jp/media/author/wpmaster#author","url":"https://freelance.indieverse.co.jp/media/author/wpmaster","name":"DAI"},{"@type":"WebPage","@id":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-map#webpage","url":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-map","name":"JavaScriptのmapメソッドとMapオブジェクトの使い方 - インディバースフリーランスメディア","description":"JavaScriptのmapメソッドとMapオブジェクトの違い・使い方を基礎から解説。map・filter・reduceの比較や実例で配列変換とデータ処理を効率化できます。","inLanguage":"ja","isPartOf":{"@id":"https://freelance.indieverse.co.jp/media/#website"},"breadcrumb":{"@id":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-map#breadcrumblist"},"author":{"@id":"https://freelance.indieverse.co.jp/media/author/wpmaster#author"},"creator":{"@id":"https://freelance.indieverse.co.jp/media/author/wpmaster#author"},"datePublished":"2024-05-01T06:42:02+09:00","dateModified":"2025-11-01T16:33:42+09:00"},{"@type":"WebSite","@id":"https://freelance.indieverse.co.jp/media/#website","url":"https://freelance.indieverse.co.jp/media/","name":"インディバースフリーランスメディア","description":"Indieverse Freelanceの公式メディアです","inLanguage":"ja","publisher":{"@id":"https://freelance.indieverse.co.jp/media/#organization"}}]},"og:locale":"ja_JP","og:site_name":"インディバースフリーランスメディア - Indieverse Freelanceの公式メディアです","og:type":"article","og:title":"JavaScriptのmapメソッドとMapオブジェクトの使い方 - インディバースフリーランスメディア","og:description":"JavaScriptのmapメソッドとMapオブジェクトの違い・使い方を基礎から解説。map・filter・reduceの比較や実例で配列変換とデータ処理を効率化できます。","og:url":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-map","article:published_time":"2024-04-30T21:42:02+00:00","article:modified_time":"2025-11-01T07:33:42+00:00","twitter:card":"summary","twitter:title":"JavaScriptのmapメソッドとMapオブジェクトの使い方 - インディバースフリーランスメディア","twitter:description":"JavaScriptのmapメソッドとMapオブジェクトの違い・使い方を基礎から解説。map・filter・reduceの比較や実例で配列変換とデータ処理を効率化できます。"},"aioseo_meta_data":{"post_id":"81058","title":null,"description":null,"keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":{"id":"#aioseo-article-67f5c820371ac","slug":"article","graphName":"Article","label":"記事","properties":{"type":"BlogPosting","name":"#post_title","headline":"#post_title","description":"#post_excerpt","image":"","keywords":"","author":{"name":"#author_name","url":"#author_url"},"dates":{"include":true,"datePublished":"","dateModified":""}}},"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":"{\"article\":{\"articleType\":\"BlogPosting\"},\"course\":{\"name\":\"\",\"description\":\"\",\"provider\":\"\"},\"faq\":{\"pages\":[]},\"product\":{\"reviews\":[]},\"recipe\":{\"ingredients\":[],\"instructions\":[],\"keywords\":[]},\"software\":{\"reviews\":[],\"operatingSystems\":[]},\"webPage\":{\"webPageType\":\"WebPage\"}}","pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"limit_modified_date":false,"created":"2024-04-29 07:12:46","updated":"2025-09-09 01:20:13","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https://freelance.indieverse.co.jp/media/\" title=\"ホーム\">ホーム</a>\n\t\t</span><span class=\"aioseo-breadcrumb-separator\">»</span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https://freelance.indieverse.co.jp/media/category/programming\" title=\"プログラミング\">プログラミング</a>\n\t\t</span><span class=\"aioseo-breadcrumb-separator\">»</span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https://freelance.indieverse.co.jp/media/category/programming/javascript\" title=\"javascript\">javascript</a>\n\t\t</span><span class=\"aioseo-breadcrumb-separator\">»</span><span class=\"aioseo-breadcrumb\">\n\t\t\tJavaScriptのmapメソッドとMapオブジェクトの使い方\n\t\t</span></div>","aioseo_breadcrumb_json":[{"label":"ホーム","link":"https://freelance.indieverse.co.jp/media/"},{"label":"プログラミング","link":"https://freelance.indieverse.co.jp/media/category/programming"},{"label":"javascript","link":"https://freelance.indieverse.co.jp/media/category/programming/javascript"},{"label":"JavaScriptのmapメソッドとMapオブジェクトの使い方","link":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-map"}],"meta_description":"JavaScriptのmapメソッドとMapオブジェクトの違い・使い方を基礎から解説。map・filter・reduceの比較や実例で配列変換とデータ処理を効率化できます。","_links":{"self":[{"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/posts/81058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/posts"}],"about":[{"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/types/post"}],"author":[{"embeddable":true,"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/users/1"}],"replies":[{"embeddable":true,"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/comments?post=81058"}],"version-history":[{"count":11,"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/posts/81058/revisions"}],"predecessor-version":[{"id":93412,"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/posts/81058/revisions/93412"}],"wp:attachment":[{"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/media?parent=81058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/categories?post=81058"},{"taxonomy":"post_tag","embeddable":true,"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/tags?post=81058"}],"curies":[{"name":"wp","href":"https://api.w.org/{rel}","templated":true}]}}