Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

今回は、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です

スクリーンショット 2019-08-18 17.06.52.png

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

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

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本格入門 ~モダンスタイルによる基礎から現場での応用まで | 山田 祥寛
ryosuketter
偏差値50台 大学理系院卒、一部上場企業でWebエンジニア(3年目)半人前レベル。普通の34歳おっさんでも頑張ったら一人前のフロントエンドエンジニアになれるのか?の検証 Qiita です。
https://note.com/ryosuketter
life-a-tm
人生のイベントや日常生活に密着した比較サイト、情報サイト等様々なウェブサービスを企画・開発・運営
https://life.a-tm.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした