Posted at

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


はじめに

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


シリーズ

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