【初級編1】JavaScriptのmapで配列処理を行おう

JavaScript入門

本記事では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メソッドの使い方、をみていきましょう。

手に職をつけてプログラマー転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてプログラマーやエンジニアに転職したいなぁ。でも、プログラミングスクールってものすごくたくさんあるし、なんか敷居が高いのよね

これからプログラマーやエンジニアへの転身を目指すあなたに、どのスクールがもっとも適しているのかを紹介します。

JavaScript入門
【この記事を書いた人】
谷津弘樹

某自社開発のIT企業に勤めていた元webプログラマーです。主にサーバーサイド側を担当し、phpを使った開発経験があります。現在は退職しフリーランスライターとして活動中。IT系の記事を主に執筆し生計を立てています。

CANIT
タイトルとURLをコピーしました