[Javascript] フロントでよく使う配列操作

for文、forEachを乱用していた１年生

Javascriptを使って開発をしていると、頻出する配列操作。
エンジニア１年生の時は、事あるごとにforEachかfor文を使っていたけれど
ネストが深くなったり冗長な処理になってしまう...

便利なメソッドがあると知っていても、
実際に開発をしているとどこで使えばいいのかわからなかったりしますよね。

私のようにエンジニア歴が浅い人の手助けになればいいなという思いも込めて
今回は便利な配列操作メソッドたちをシチュエーション別に備忘録的にまとめてみました〜

配列操作

flatMap()

flatMapは配列の多重階層を解除し、別の配列を作成します。

flatMapの実態はmap関数とflat関数の２つの関数を掛け合わせた関数なので、
map()を実行した後にflat()を実行します。
flatは多次元の配列を１次元にする（フラットにする）ためのメソッドです。

そのため以下memberListのように配列の中に配列が入っていた場合に、
１次元にして新しい配列を作成することができます。

flatMap.js

 const memberList = [
  [
    { id: 1, userName: "nootbar", team: "cardinals" },
    { id: 2, userName: "kondo", team: "softbank" },
    { id: 3, userName: "ohtani", team: "angels" },
  ],
  [
    { id: 4, userName: "murakami", team: "yakult" },
    { id: 5, userName: "yoshida", team: "redsox" },
  ],
  [
    { id: 6, userName: "okamoto", team: "giants" },
    { id: 7, userName: "yamada", team: "yakult" },
    { id: 8, userName: "genda", team: "seibu" },
  ],
];

const flatMappedMember = memberList.flatMap((member) => member); 

console.log(flatMappedMember); 
// [ { "id": 1, "userName": "nootbar", "team": "cardinals" }, { "id": 2, "userName": "kondo", "team": "softbank" }, ..... { "id": 8, "userName": "genda", "team": "seibu" } ]

map()

mapは元の配列から新しい配列を作成します。
そのため配列の中からある要素だけ取り出して異なる配列を作成したい時などに使うことができます。

以下のサンプルでは
先ほどflatMapで作成したflatMappedMemberの中からteam名だけの配列を新たに作成しています。

map.js

[ 
  { id: 1, userName: "nootbar", team: "cardinals" },
  { id: 2, userName: "kondo", team: "softbank" },
  { id: 3, userName: "ohtani", team: "angels" },
  { id: 4, userName: "murakami", team: "yakult" },
  { id: 5, userName: "yoshida", team: "redsox" },
  { id: 6, userName: "okamoto", team: "giants" },
  { id: 7, userName: "yamada", team: "yakult" },
  { id: 8, userName: "genda", team: "seibu" },
];

const teamList = flatMapedMenber.map((member) => member.team);
console.log(teamList); // [ "cardinals", "softbank", "angels", "yakult", "redsox", "giants", "yakult", "seibu" ]

これをforEachで行うと、以下のように一度配列の受け皿を用意して
その中にpushしていく工程が必要になります。

forEach.js

const teamList = [];
flatMapedMenber.forEach((member) => {
  teamList.push(member.team)
});

一度だけならあまり行数は気にならないかもしれないですが、
同様の処理が複数ある場合コード量が多くなるのでmapで書いた方が簡潔ですね。

some()、every()

someは配列内の要素で１つでも条件に合致するものがあるかどうかを調べbooleanを返します。
everyは配列内の全ての要素が条件に合致するかどうかを調べbooleanを返します。

この２つの関数を実際のWeb開発などで使うとすると、
全件選択・全件選択解除のできるチェックボックスの挙動や
入力フォームで複数入力項目のうち１つでも未入力の項目があった場合に「送信」ボタンを非活性にするなどのUIの操作に応用できます。

以下のサンプルコードでは、teamListに格納されているリストの中で条件に合う要素があるか
チェックする処理を書いています。

some.js

// teamList 
// [ "cardinals", "softbank", "angels", "yakult", "redsox", "giants", "yakult", "seibu" ]

// team名に's'がつくチームが１つでもあるかチェック
const hasSTeamName = teamList.some((team) => team.includes("s"));
console.log(hasTeamName); // true

// 全てのteam名に's'が付くかチェック
const hasSAllTeamName = teamList.every((team) => team.includes("s"));
console.log(hasTeamName); // false

// team名が’nipponhamu'のチームが１つでもあるかチェック
const 　isNipponHamu = teamList.some((team) => team == "nipponhamu");
console.log(isNipponHamu); // false

filter()

filterは配列の中からある条件に合致した要素だけを持つ新しい配列を作成します。

検索キーワードを元に絞り込みを行いたい検索機能の実装などを簡単に行うことができます。

下記のサンプルコードでは
flatMappedMember配列の中から、「teamプロパティの値がyakultのメンバーリスト」という条件を
指定してそれに合致した要素だけを持つ配列を作成しています。
条件に一致する要素が一つもない場合は空配列が出来上がります。

filter.js

// flatMappedMember
[ 
  { id: 1, userName: "nootbar", team: "cardinals" },
  { id: 2, userName: "kondo", team: "softbank" },
  { id: 3, userName: "ohtani", team: "angels" },
  { id: 4, userName: "murakami", team: "yakult" },
  { id: 5, userName: "yoshida", team: "redsox" },
  { id: 6, userName: "okamoto", team: "giants" },
  { id: 7, userName: "yamada", team: "yakult" },
  { id: 8, userName: "genda", team: "seibu" },
];

const filterdMember = flatMapedMenber.filter(
  (member) => member.team == "yakult"
);
console.log(filterdMember);
// [{ id: 4, userName: "murakami", team: "yakult" }, { id: 7, userName: "yamada", team: "yakult" } ]

// 条件に一致するものが一つもない場合は、空配列が作成される
const filterdMember2 = flatMapedMenber.filter(
  (member) => member.team == "hanshin"
);
console.log(filterdMember2); // []

find()

findは配列の中から条件に合致する要素を探して、最初に見つかった要素を取得します。
要素ではなくインデックスを取得したい場合はfindIndex()が使えます。

id○番の要素だけ取り出したいなど、特定の要素を１つだけ抽出したい時に便利です。

find.js

// flatMappedMember
[ 
  { id: 1, userName: "nootbar", team: "cardinals" },
  { id: 2, userName: "kondo", team: "softbank" },
  { id: 3, userName: "ohtani", team: "angels" },
  { id: 4, userName: "murakami", team: "yakult" },
  { id: 5, userName: "yoshida", team: "redsox" },
  { id: 6, userName: "okamoto", team: "giants" },
  { id: 7, userName: "yamada", team: "yakult" },
  { id: 8, userName: "genda", team: "seibu" },
];

  const member = flatMappedMember.find((member) => member.userName == 'ohtani');

  console.log(member); // { id: 3, userName: "ohtani", team: "angels" }

最後に

今回は開発を通して、その中でも良く使っている配列操作のメソッドをご紹介しました。

野球は９人スポーツだというご意見もあるかもしれませんが、
そこはグッと堪えて、配列操作へのまとめについて何かありましたらコメント頂ければ嬉しいです