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

# はじめに

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

# シリーズ

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

[State を使った React コンポーネントを利用したアプリ開発（React基礎講座7） \- Qiita](https://qiita.com/ryosuketter/items/40ff3ed4dee18c373a33)

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

[Reactを使ってJSXの内容をレンダリングする（create\-react\-app）（React基礎講座1） \- Qiita](https://qiita.com/ryosuketter/items/dbac89f398787a1a73d4)

# map

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

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

```js
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`するメソッドです。

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

```js
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);
```

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

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

# map, filter を使ったReact アプリ

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

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

手順

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

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

```js
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`では配列として吐き出されていることが分かります。

```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です

<img width="347" alt="スクリーンショット 2019-08-18 17.06.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14191/b43612ad-a634-b9d8-eb49-08e5f4cc247e.png">

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

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

```react: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本格入門 ~モダンスタイルによる基礎から現場での応用まで | 山田 祥寛