本記事ではJavaScriptのmapについて解説します。
mapが使えるようになるとソースコードを簡易的に書くことが可能です。
しかしmapはJavaScriptの構文の中でも、少し難しめで良く分からない人も多いのではないでしょうか？
本記事では、mapの基本的な使い方に絞って解説します。
この機会にぜひmapが使えるようになってください。
JavaScriptのmapとは？
mapは配列データに使えるメソッドの1つです。
JavaScriptの配列について詳しく知りたい方は【入門編6】JavaScriptの配列を使って複数データを扱おうを参考にしてください。
メソッドとは、関数に使いもので、配列や数値など限定したデータ型のみに使うことができます。
mapはコールバック関数を実行し、新しい配列として返すことができます。
mapの関数内に実行したい処理を書いておけば、配列のデータを自由に操作することが可能です。
なお、mapではなくforEachを使うことでも同じようなことができます。
ただ、mapとforEachでは書き方が少し異なります。
そのあたりについても詳しくみていきましょう。
mapの基本的な使い方
mapメソッドの基本的な使い方をみていきます。
その前に、普通にfor文を使った場合にどのような書き方になるかみていきましょう。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
const list = [1,2,3,4,5];
const list2 = [];
for(let i = 0; i< list.length ; i++){
list2[i] = list[i] * 2
}
console.log(list2);
</script>
</body>
</html>○実行結果
以上のコードではfor文を使って、list配列の数値を1つずつ2倍に増やしています。
このように、配列のデータを1つずつ取り出して弄る場合は、for文を使う手があります。
ところが、もっと良い方法があります。
それがmapメソッドを使う方法です。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
const list = [1,2,3,4,5];
const list2 = list.map(function(num){
return num * 2;
});
console.log(list2)
</script>
</body>
</html>○実行結果
先程と全く同じ処理をmapメソッドで行っています。
mapメソッドは
{配列名}.map(function({配列の要素を格納する用に変数}){
// 関数の中の処理
}
という書き方をします。
このように書くことで、配列の各要素に対し自由に操作が可能です。
上記のデータでは要素を2倍に増やしていますが、もっと複雑なこともできるでしょう。
forEach文の違いについて
JavaScriptにはforEach文という構文もあります。
forEach文でもmapと同じような処理が可能です。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
const list = [1,2,3,4,5];
const list2 = [];
list.forEach(function(num, i){
list2[i] = num * 2;
});
console.log(list2);
</script>
</body>
</html>○実行結果
ただ、forEach文だと変数が1つ増えてしまいますね。
そのため、mapを使った方がコードを見やすく書くことが可能です。
mapオブジェクトの使い方
JavaScriptにはもう1つ、mapオブジェクトというのがあるので、こちらも紹介しておきましょう。
mapオブジェクトを使うと、キーと値のペアを格納し、それを扱うことが可能です。
更に、mapオブジェクトの各メソッドを使うことで、データの追加や取得が簡単に行えます。
mapオブジェクトの作成方法
mapオブジェクトの作成方法からまず解説します。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var map = new Map();
map.set('age', 24);
map.set('gender', 'men');
</script>
</body>
</html>mapオブジェクトを新規作成するには、まずインスタンスを作る必要があります。
クラスを扱うときと同じように、newを使います。
その後、setメソッドを使って、mapにデータを格納していきます。
上記の例では、keyがageとgenderであるデータをそれぞれ格納していますね
mapオブジェクトの取得方法
つづいて、mapオブジェクトの取得方法をみていきましょう。
○コード例
<script>
var map = new Map();
map.set('age', 24);
map.set('gender', 'men');
document.write(map.get('gender'));
</script>○実行結果
上記のようにgetメソッドを使い、引数にkeyを指定するとそのkeyのデータを取得できます。
mapオブジェクトの削除方法
最後にmapに格納したデータを削除する方法をみていきましょう。
○コード例
<script>
var map = new Map();
map.set('age', 24);
map.set('gender', 'men');
map.delete('age');
document.write(map.get('age'));
</script>○実行結果
データを削除する場合はdeleteメソッドを使います。
deleteメソッドの引数にkeyを入れると、そのkeyのデータが削除されます。
mapオブジェクトを使う場合は、set、get、delete、この3つのメソッドの使い方を覚えておきましょう。
まとめ
本記事では、JavaScriptのmapの使い方を解説しました。
関数におけるmapメソッドの使い方やmapオブジェクトの使い方がお分かり頂けたでしょうか？
JavaScriptのmapはつい忘れられがちな機能ですが、使ってみると案外便利なものです。
ぜひmapの使い方を覚えて使ってみてくださいね。
次回はJavaScriptのreplaceメソッドの使い方、をみていきましょう。
