React上のfilterで条件に一致した配列を返す方法！複数条件も！

React上のfilterで条件に一致した配列を返したいときはないでしょうか。
けど、そんな中で悩むことは、

ですよね。

今回はそんなお悩みを解決する

についてまとめます！

filter() メソッドとは

filter() メソッドは、配列の中から、条件に一致した要素のみを抽出することができます。

構文

引数

参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

React上のfilterで条件に一致した配列を返す方法

React上のfilterで条件に一致した配列を返す方法について説明をします。

useStateで配列の値を代入し、条件に応じて各配列の要素を出力していきます。

const [value1, setValue1] = useState([
    "A1アプリ",
    "A1アプリdev",
    "A2アプリ",
    "A2アプリdev",
    "B1アプリ",
    "B2アプリ",
    "B2アプリdev",
    "C1アプリ",
    "C1アプリdev",
    "C2アプリ",
  ]);

前方一致で検索/出力

前方一致で検索し出力していきます。
条件は頭文字がAとなっている要素の値を対象に絞り込んでいきます。

サンプルコード

import { useState } from "react";

function App() {
  const [value1, setValue1] = useState([
    "A1アプリ",
    "A1アプリdev",
    "A2アプリ",
    "A2アプリdev",
    "B1アプリ",
    "B2アプリ",
    "B2アプリdev",
    "C1アプリ",
    "C1アプリdev",
    "C2アプリ",
  ]);

  const list = value1
    .filter((value) => value.match(/^A/g))
    .map((value, index) => <li key={index}>{value}</li>);

  return (
    <div>
      <ul>{list}</ul>
    </div>
  );
}

export default App;

結果です。

後方一致で検索/出力

後方一致で検索し出力していきます。
条件は後ろの文字がdevとなっている要素の値を対象に絞り込んでいきます。

サンプルコード

import { useState } from "react";

function App() {
  const [value1, setValue1] = useState([
    "A1アプリ",
    "A1アプリdev",
    "A2アプリ",
    "A2アプリdev",
    "B1アプリ",
    "B2アプリ",
    "B2アプリdev",
    "C1アプリ",
    "C1アプリdev",
    "C2アプリ",
  ]);

  const list = value1
    .filter((value) => value.match(/dev$/g))
    .map((value, index) => <li key={index}>{value}</li>);

  return (
    <div>
      <ul>{list}</ul>
    </div>
  );
}

export default App;

結果です。

部分一致で検索/出力

部分一致で検索し出力していきます。
条件は1または2を含む要素の値を対象に絞り込んでいきます。
部分一致の方式としてはmatch版とindexOf版の2種類あります。

サンプルコード：match

import { useState } from "react";

function App() {
  const [value1, setValue1] = useState([
    "A1アプリ",
    "A1アプリdev",
    "A2アプリ",
    "A2アプリdev",
    "B1アプリ",
    "B2アプリ",
    "B2アプリdev",
    "C1アプリ",
    "C1アプリdev",
    "C2アプリ",
  ]);

  const list = value1
    .filter((value) => value.match(/1/g))
    .map((value, index) => <li key={index}>{value}</li>);

  return (
    <div>
      <ul>{list}</ul>
    </div>
  );
}

export default App;

結果です。

サンプルコード：indexOf

indexOfで文字列に該当文字があれば文字位置を返すことを利用し、部分一致判定をすることができます。
条件は2を含む文字列であれば出力する設定にしています。

import { useState } from "react";

function App() {
  const [value1, setValue1] = useState([
    "A1アプリ",
    "A1アプリdev",
    "A2アプリ",
    "A2アプリdev",
    "B1アプリ",
    "B2アプリ",
    "B2アプリdev",
    "C1アプリ",
    "C1アプリdev",
    "C2アプリ",
  ]);

  const list = value1
    .filter((value) => value.indexOf(2) >= 0)
    .map((value, index) => <li key={index}>{value}</li>);

  return (
    <div>
      <ul>{list}</ul>
    </div>
  );
}

export default App;

結果です。

完全一致で検索/出力

完全一致で検索し出力していきます。
条件は”A1アプリ”となっている要素の値を対象に絞り込んでいきます。

サンプルコード

import { useState } from "react";

function App() {
  const [value1, setValue1] = useState([
    "A1アプリ",
    "A1アプリdev",
    "A2アプリ",
    "A2アプリdev",
    "B1アプリ",
    "B2アプリ",
    "B2アプリdev",
    "C1アプリ",
    "C1アプリdev",
    "C2アプリ",
  ]);

  const list = value1
    .filter((value) => value === "A1アプリ")
    .map((value, index) => <li key={index}>{value}</li>);

  return (
    <div>
      <ul>{list}</ul>
    </div>
  );
}

export default App;

結果です。

React上のfilterで複数の条件に一致した配列を返す方法

React上のfilterで複数の条件に一致した配列を返す方法について説明をします。

関数内で必要な数の条件を指定することができます。条件をつなげるためには論理演算子 ( &&（and）およびや||（or）など) を使用して組みあわせていきます。

andで条件をつなげる

andで複数の条件をつなげる方法となります。文字列に2を含み、末尾がdevである値を対象に抽出します。

サンプルコード

import { useState } from "react";

function App() {
  const [value1, setValue1] = useState([
    "A1アプリ",
    "A1アプリdev",
    "A2アプリ",
    "A2アプリdev",
    "B1アプリ",
    "B2アプリ",
    "B2アプリdev",
    "C1アプリ",
    "C1アプリdev",
    "C2アプリ",
  ]);

  const list = value1
    .filter((value) => value.indexOf(2) >= 0 && value.match(/dev$/g))
    .map((value, index) => <li key={index}>{value}</li>);

  return (
    <div>
      <ul>{list}</ul>
    </div>
  );
}

export default App;

結果です。

orで条件をつなげる

orで複数の条件をつなげる方法となります。文字列に”C”または末尾がdevである値を対象に抽出します。

サンプルコード

import { useState } from "react";

function App() {
  const [value1, setValue1] = useState([
    "A1アプリ",
    "A1アプリdev",
    "A2アプリ",
    "A2アプリdev",
    "B1アプリ",
    "B2アプリ",
    "B2アプリdev",
    "C1アプリ",
    "C1アプリdev",
    "C2アプリ",
  ]);

  const list = value1
    .filter((value) => value.indexOf("C") >= 0 || value.match(/dev$/g))
    .map((value, index) => <li key={index}>{value}</li>);

  return (
    <div>
      <ul>{list}</ul>
    </div>
  );
}

export default App;

結果です。

さいごに

いかがでしょうか。

今回は、

についてまとめました。

また、他にも便利な方法がありますので、よろしければご参照頂ければと思います。

タカヒロ

Reactって覚えることが多く難しいですよね...
タカヒロも悩んでいましたが、こちらの本でかなり理解ができるようになりました！


＞＞Amazonで詳細を見る

電子書籍もいいですが、紙質がやわらかく読みやすいので書籍のほうがおすすめです。

この記事の関連キーワード

こちらの記事の関連キーワード一覧です。クリックするとキーワードに関連する記事一覧が閲覧できます。

• 抽出

「抽出」の関連記事

こちらの記事の内容「抽出」に関連する記事一覧です。

• 

  2023.1.6

  React上のfilterで条件に一致した配列を返す方法！複数条件も！