絞り込み機能をリファクタリングしたい

Question

reactとlaravelで出力する値を絞り込む機能を作成しています。

const [data1, setData1] = useState(0)
const [data2, setData2] = useState(0)
const selectedDatas = Datas.filter(row => {
  if(data1 == 0 && data2 == 0) {
    return true
  }
  if(data1 != 0 && data2 == 0 {
    return selectData1 == row.data1
  }
  if(data1 == 0 && data2 != 0 {
    return selectData2 == row.data2
  }
  return selectData1 == row.data1 && selectData2 == row.data2
}

return (
  <>
    <select onChange={e => setData1(e.target.value)}}>
      <option value=0>0<option>
      <option value=1>1<option>
      <option value=2>2<option>
    </select>
    <select onChange={e => setData2(e.target.value)}}>
      <option value=0>0<option>
      <option value=1>1<option>
      <option value=2>2<option>
    </select>
  </>
)

filterメソッドを使って絞り込みを行っています。
stateはそれぞれvalueを持つように設定されていてselectboxのonChangeによってvalueが入る形になっています。
Datasにはオブジェクトが入ります。
これで絞り込みを実装しているのですが、条件が３個、４個と増えていくとその階乗分if文を書く必要があり、冗長な記述になってしまうため、良い方法がないか考えているところです。

const [data1, setData1] = useState(0)
const [data2, setData2] = useState(0)
const [data3, setData3] = useState(0)
const selectedDatas = Datas.filter(row => {
  // 条件がもし増えたら階乗分だけifを書く必要がある。おそらく条件が３個の場合は９個ほど書く必要がある。
  // if...
  // if...
  if(data1 == 0 && data2 == 0 /*&& data3 == 0 */) {
    return true
  }
  if(data1 != 0 && data2 == 0 {
    return selectData1 == row.data1
  }
  if(data1 == 0 && data2 != 0 {
    return selectData2 == row.data2
  }
  return selectData1 == row.data1 && selectData2 == row.data2
}

return (
  <>
    <select onChange={e => setData1(e.target.value)}}>
      <option value=0>0<option>
      <option value=1>1<option>
      <option value=2>2<option>
    </select>
    <select onChange={e => setData2(e.target.value)}}>
      <option value=0>0<option>
      <option value=1>1<option>
      <option value=2>2<option>
    </select>
    <select onChange={e => setData3(e.target.value)}}>
      <option value=0>0<option>
      <option value=1>1<option>
      <option value=2>2<option>
    </select>
  </>
)

こちら何か良い方法がありましたら考え方だけでも構いませんのでご教授いただけたらと思います。

Answer 1

微妙に変数名とか変えましたが、こんな感じでしょうか。

import React, { useState } from 'react';

const fields = [
  { key: 'data1', options: [0, 1, 2] },
  { key: 'data2', options: [0, 1, 2] },
  { key: 'data3', options: [0, 1, 2] },
];

const allData = [
  { id:  0, data1: 0, data2: 0, data3: 0 },
  { id:  1, data1: 1, data2: 0, data3: 0 },
  { id:  2, data1: 2, data2: 0, data3: 0 },
  { id:  3, data1: 0, data2: 1, data3: 0 },
  { id:  4, data1: 1, data2: 1, data3: 0 },
  { id:  5, data1: 2, data2: 1, data3: 0 },
  { id:  6, data1: 0, data2: 2, data3: 0 },
  { id:  7, data1: 1, data2: 2, data3: 0 },
  { id:  8, data1: 2, data2: 2, data3: 0 },
  { id:  9, data1: 0, data2: 0, data3: 1 },
  { id: 10, data1: 1, data2: 0, data3: 1 },
  { id: 11, data1: 2, data2: 0, data3: 1 },
  { id: 12, data1: 0, data2: 1, data3: 1 },
  { id: 13, data1: 1, data2: 1, data3: 1 },
  { id: 14, data1: 2, data2: 1, data3: 1 },
  { id: 15, data1: 0, data2: 2, data3: 1 },
  { id: 16, data1: 1, data2: 2, data3: 1 },
  { id: 17, data1: 2, data2: 2, data3: 1 },
  { id: 18, data1: 0, data2: 0, data3: 2 },
  { id: 19, data1: 1, data2: 0, data3: 2 },
  { id: 20, data1: 2, data2: 0, data3: 2 },
  { id: 21, data1: 0, data2: 1, data3: 2 },
  { id: 22, data1: 1, data2: 1, data3: 2 },
  { id: 23, data1: 2, data2: 1, data3: 2 },
  { id: 24, data1: 0, data2: 2, data3: 2 },
  { id: 25, data1: 1, data2: 2, data3: 2 },
  { id: 26, data1: 2, data2: 2, data3: 2 },
];

const App = () => {
  const [filter, setFilter] = useState({});

  const updateFilter = (key, value) => {
    setFilter({ ...filter, [key]: parseInt(value) });
  };

  const filteredData = allData.filter(row => fields.every(field =>
    !filter[field.key] || row[field.key] == filter[field.key]
  ));

  return (
    <>
      <div>
        Filter:
        {fields.map(field =>
          <select key={field.key} onChange={e => updateFilter(field.key, e.target.value)}>
            {field.options.map(value =>
              <option key={value} value={value}>{value}</option>
            )}
          </select>
        )}
      </div>
      <p>
        DEBUG: filter = {JSON.stringify(filter)}
      </p>
      <ul>
        {filteredData.map(row => 
          <li key={row.id}>id: {row.id}, {fields.map(field =>
            `${field.key}: ${row[field.key]}`
          ).join(', ')}</li>
        )}
      </ul>
    </>
  );
};

export default App;

---

追記。allData の生成もコードでできて、field が増えても対応可能ですが、ベタ書きの方がわかりやすいですね。

const allData = fields.reduce((acc, field) => acc.flatMap(row =>
  field.options.map(value => ({ ...row, [field.key]: value })
)), [{}]).map((row, index) => ({ ...row, id: index }));

Comments

[hello_space]

すごく丁寧に回答していただきありがとうございます。まだコードの内容を完全に理解できていないのですがひとまず高評価だけさせていただきました。実装していく中で疑問点がありましたら追記させていただきます。

[hoshi-takanori]

微妙に訂正がありまして、select と option の id を key に修正しました。
コードの内容は非常にわかりにくい (特に追記) と思いますので、遠慮せずにご質問ください。

[hello_space]

休みもあり時間がかかってしまいましたが、無事実装できました！こんな解法があるなんて全く思い付かず、本当に感謝しています。もしよろしければ参考までにこうした解法を思いつくまでの過程やコツのようなものがあれば是非教えていただきたいです。

[hello_space]

連投すみません。コードについてですが、

const filteredData = allData.filter(row => fields.every(field =>
!filter[field.key] || row[field.key] == filter[field.key]
));

に関しては左辺の値が0だとfalseのため!で変換してtrueにして全てのデータを返す、値が0以外ならtrueのためfalseに変換して右辺の処理に移行。右辺ではデータを比べて同じものがあればtrueを返すためeveryの結果がtrueになり表示される。
という理解であっていますでしょうか？

[hoshi-takanori]

> こうした解法を思いつくまでの過程やコツ
難しい質問ですね…。「抽象化」を意識することでしょうか。
「コンピュータサイエンスにおける問題のすべては、もう一段の間接参照によって解決できる」
という格言がありまして、まぁそんな感じです。

filteredData は、
・filter は実際に選択されたフィルタの状態を表すオブジェクトです。
・allData.filter は、allData に含まれる各データ (row) に対して、row => fields.every( 〜 ) という関数を呼び出して、結果が true であるものだけを取り出します。
・fields.every は、各フィールドに対して field => !filter[field.key] || row[field.key] == filter[field.key] という関数を呼び出して、すべてのフィールドに対する結果が true の時だけ true を返します。
・!filter[field.key] がちょっと曲者で、filter[field.key] が存在しないか、値が 0 の時に true になります。

具体例として、filter の初期値は {} (空オブジェクト) ですが、そこから data1 を 0、data2 を 1 と選択した場合 { data1: 0, data2: 1 } となります。
ここで row が { id: 13, data1: 1, data2: 1, data3: 1 } の場合、
・field.key == 'data1' に対して、filter[field.key] は 0 なので !filter[field.key] は true
・field.key == 'data2' に対して、filter[field.key] は 1 なので !filter[field.key] は flase だが、row[field.key] == filter[field.key] が成り立つので true
・field.key == 'data3' に対して、filter[field.key] は存在せず undefined となるので !filter[field.key] は true
ということで、fields.every は true になり、この row は表示されます。(質問文からフィルターが 0 の場合はすべて表示対象になると判断しましたが、これだと実際のデータが 0 の場合だけ表示するというのができないですね…。)

↑ 読み返したらぜんぜん簡単に説明できてなくてごめんなさい。

[hello_space]

いえいえ、かなり詳細に解説していただきとてもわかりやすかったです。本当にありがとうございます！
実はこのコードは仕事で使用しているコードのため、特定できないように変数名とかもテキトーで実際よりかなりぼやかしながらやりたいことだけをふわっと書いたので自分で質問しておきながらかなりわかりにくい質問であるというのは理解しておりました。
そんななか、これだけ的確な回答ができる理解力とそれを実現できる頭の柔かさに脱帽です！
抽象化、意識してみます！本当にありがとうございました！