React開発で見かける配列処理系のメソッド map , filter について（React基礎講座8）

はじめに

今回は、React開発で見かける配列処理系のメソッド map と filter について見ていきたいと思います。

シリーズ

本記事はReact基礎講座のための連載になっています。気になる方のために、前の章は以下です。

State を使った React コンポーネントを利用したアプリ開発（React基礎講座7） - Qiita

最初の記事は、以下です。

Reactを使ってJSXの内容をレンダリングする（create-react-app）（React基礎講座1） - Qiita

map

mapは配列内の要素をコールバックで処理（加工）して、配列としてreturnするメソッドです。

実際に使って見ましょう。

const members = ["Araki", "Ibata", "Fukutome", "Woods", "Alex", "Tatsunami"];

const dragons_2006_members = members.map((output, index) => {
  return `${index + 1}番目は${output}`;
});

console.log(dragons_2006_members);

mapの第一引数outputは配列membersで定義した中身です。
また、第二引数はindexは配列members各要素のインデックス番号です。

console

["1番目はAraki", "2番目はIbata", "3番目はFukutome", "4番目はWoods", "5番目はAlex", "6番目はTatsunami"]

各配列にアクセスして、処理（加工）をして、新たな配列を作成していることがわかりますね。

filter

続いては、filterを見ていきましょう。filterは、その中で定義た条件にTRUEな要素だけが配列としてreturnするメソッドです。

実際に使って見ましょう。

const members = ["Araki", "Ibata", "Fukutome", "Woods", "Alex", "Tatsunami"];

const filter_include_a = members.filter((output, index) => {
  return output.includes("a");
});

console.log(filter_include_a);

["Araki", "Ibata", "Tatsunami"]
0: "Araki"
1: "Ibata"
2: "Tatsunami"

各配列にアクセスして、処理（加工）をして、TRUEな要素（文字列、小文字の"a"が含まれている要素）の新たな配列を作成していることがわかりますね。

map, filter を使ったReact アプリ

習ったことを生かして、簡単なReactアプリを作って見ましょう。

今回はタスク管理ツールです。

手順

• consttasks配列の中にオブジェクト（連想配列でkeyにidとtitleを入れて定義する）
• ある特定のidを消去するための変数（deleteTaskId）を定義
• 上で定義した変数をfilterメソッドを使って消去したように見せる処理を書く

ざっくりこんな感じです。実際に書いて見ましょう。

const tasks = [
  { id: 1, title: "one" },
  { id: 2, title: "two" },
  { id: 3, title: "three" },
  { id: 4, title: "four" },
  { id: 5, title: "five" }
];

const deleteTaskId = 1;

const deleteTasks = tasks.filter(task => {
  return task.id !== deleteTaskId;
});

console.log(deleteTasks);

変数（deleteTaskId = 1）以外がconsoleでは配列として吐き出されていることが分かります。

[Object, Object, Object, Object]
　0: Object
　　id: 2
　　title: "two"
　1: Object
　　id: 3
　　title: "three"
　2: Object
　　id: 4
　　title: "four"
　3: Object
　　id: 5
　　title: "five"

次に、上記で作成した処理を生かして、タスク管理アプリになるように、taskをコンポーネントにしてレンダリングするReactのアプリを作っていきます。

具体的に言うと、mapを使って配列を作成し、それをreactElementにして、それをコンポーネント化してレンダリングする処理を書いていきます。

手順は、以下のような感じです。

• 配列はtasksをそのまま利用する
• ReactコンポーネントTasksをレンダリングする際にpropsとしてtasks={tasks}を渡す
• Tasksコンポーネントの定義部分は
  • まず引数としてtask（名前はなんでもいい）を受け取って
  • taskは複数あるので、mapで全要素をliタグに入るように生成し、変数（list）に格納する
  • 変数（list）を今度はulタグでラッピングして、returnするコンポーネントにします
• それを、renderメソッドでTasksコンポーネントでレンダリングして、以下のようにviewとして吐き出されればOKです

少し難しいですが、これまでに説明した内容の集積でもありますので、ぜひ、まずは何も見ないでやって見てください。

自分は、以下のように実装しました。

index.js

import React from "react";
import { render } from "react-dom";

const tasks = [
  { id: 1, title: "one" },
  { id: 2, title: "two" },
  { id: 3, title: "three" },
  { id: 4, title: "four" },
  { id: 5, title: "five" }
];

const Tasks = ({ tasks }) => {
  const list = tasks.map(task => {
    return (
      <li>
        id is {task.id}, title is "{task.title}"
      </li>
    );
  });
  return <ul>{list}</ul>;
};

render(<Tasks tasks={tasks} />, document.getElementById("root"));

以上です。参考にしてみてください。

参考

• 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで | 山田 祥寛