【モダンJavaScript】繰り返し処理｜map・filter・index

2024年2月11日

当ページには広告が含まれています。

こんにちは、DXCEL WAVEの運営者(@dxcelwave)です！

こんな方におすすめ！

JavaScriptのmap関数を用いた繰り返し処理方法が知りたい！
map関数を併せて用いるfilter関数やindex関数の活用方法が知りたい！

【JavaScript】map・filter関数とは

本記事ではJavaScriptで繰り返し処理を実現する関数の活用方法について詳しく説明します。

map関数

map()関数とは、指定の配列を順番に処理し、その結果を新しい配列として返す関数です。

index関数

index関数とは、指定の配列要素のインデックス（何番目の要素）か確認できる関数です。

filter関数

filter()関数は、与えられた条件に基づいて配列内の要素をフィルタリングし、条件を満たす要素だけを返す関数です。

【JavaScript】map関数の活用方法

はじめにmap関数の基本操作について解説します。

基本操作

map関数の概要理解に際して、以下のコードを実行してみましょう。

コード

// 配列
const capitals = ["東京", "大阪", "福岡", "北海道", "神奈川", "埼玉"];

// map関数を用いた関数作成
const my_func = capitals.map((capital) => {
    console.log(capital);
});

// 出力結果
// 東京
// 大阪
// 福岡
// 北海道
// 神奈川
// 埼玉

map関数作成に際する詳細解説

上記のmap関数を作成手順に沿って解説します。

まず、map関数は配列に対して、配列.map()という形で宣言します。

// map関数を用いた関数作成
const my_func = capitals.map();

次に、（）内にアロー関数()=>{}を書きます。

// map関数を用いた関数作成
const my_func = capitals.map(() => {});

配列を順番に格納する引数（capital）をアロー関数の引数として定義します。

// map関数を用いた関数作成
const my_func = capitals.map((capital) => {});

最後に、繰り返し実行する処理の内容を{}内に記述すれば完成です。

// map関数を用いた関数作成
const my_func = capitals.map((capital) => {
    console.log(capital);
});

map関数を用いた繰り返し処理イメージ

前述のmap関数を用いて繰り返し処理を実現するイメージを以下ご紹介します。

以下はmap関数を用いて既存の配列に情報を加えた新規配列を作成するためのコード例です。

// 配列
const my_arr = ["東京", "大阪", "新潟", "愛媛"]

// map関数
const my_func = my_arr.map((name) => {
    if (name === "東京"){
        return `${name} is 関東`;
    } else if (name === "大阪") {
        return `${name} is 関西`;
    } else {
        return `${name} is その他`;
    }
});

// 出力
console.log(my_func);  // ["東京 is 関東", "大阪 is 関西", "新潟 is その他", "愛媛 is その他"]

【JavaScript】map関数とindex関数の活用方法

配列の繰り返し処理時に「何番目の要素」か確認したい場合、index関数が役に立ちます。

以下、mapとindex関数を用いたコード例をご紹介します。

// 配列
const capitals = ["東京", "大阪", "福岡", "北海道", "神奈川", "埼玉"];

// map関数を用いた関数作成
capitals.map((capital, index) => {
    console.log(`${index+1}: ${capital}`);
});

// 出力
// 1: 東京
// 2: 大阪
// 3: 福岡
// 4: 北海道
// 5: 神奈川
// 6: 埼玉

【JavaScript】filter関数の活用方法

filter関数はmap関数と挙動がほぼ同じですが、returnの後に条件式を記述すると、条件に一致した配列の要素のみを取り出すことができるようになります。

以下、filter関数の利用例を示します。

// 配列
const nums = [1, 2, 3, 4, 5, 6];

// filter関数を用いた関数作成
const my_func2 = nums.filter((num) => {
    return num % 2 === 0;
});


// 出力
console.log(my_func2);  // [2, 4, 6]