絞り込み検索機能について、複数・並列のフィルタをどう処理したらいいのか

Question

前提・実現したいこと

Vue.js、Vuexを使って用語集っぽいものを作っているのですが、絞り込み機能の実装に苦戦しています。

↓元になるCSVファイル。

見出語	見出語読み	語義	タグ	簡易版フラグ
林檎	りんご	赤くて甘い。	果物	1
人参	にんじん	オレンジ色で独特の風味。	野菜	1
菊芋	きくいも	「豚いも」と呼ばれたことも。	野菜	0
西瓜	すいか	熊本が生産量1位。	野菜,果物	1

用語集には通常版と簡易版があり、
簡易版フラグが1になっているもののみ、簡易版でも表示します。

想定しているフィルタ

フィルタはすべてandの関係です。
templateではフィルタがかけられた後のデータ（getter/filteredData）を展開します。

検索条件の操作パネルで管理するフィルタ

state/filterの中に条件を保存しています。
「検索条件をクリア」（action/filterReset）により値が初期化されます。

1. 「見出語」を対象としたテキスト入力検索（state/filter.text）
2. 各行あ段のボタンを配置し、「見出語読み」を参照して絞り込み（state/filter.char）
3. 用語のグルーピングをタグとする。（state/filter.tag）

すべてのタグをボタンとして配置し、「タグ」を参照して絞り込み
※1つの用語に対して複数個のタグがつくことを想定

操作パネル以外のフィルタ

通常版/簡易版をURLで切り分けます。（state/systemMode）
例）/glossary?mode=simple
「検索条件をクリア」（action/filterReset）により値が初期化されません。

課題

1. getter/filteredDataの汚さをどうにかしたいのですが、方法がわかりません。

1つ1つのフィルタ処理を関数（action？getter？）として切り出す？

1. 五十音のフィルタを実装するにあたって、参考にできるサイト・記事が見つけられませんでした。

何かもっと良い方法があれば教えていただきたいです。

1. 「動きはするが、とにかく汚い。改善方法はわからない」という状況に陥ったとき、皆さんはどう解決しているのでしょうか。

filterやmapのcallbackの引数が乱雑なのはご容赦ください。
今回、template側は関係ないと思い記載を省いていますが、必要であれば追記・修正依頼をお願いします。

該当のソースコード

store/glossary.js

抜粋

const getters = {
  filteredData : state => {
    var filteredData = state.data.slice()

    // 五十音によるフィルタ
    if (state.filter.char.length > 0) {
      // 取得する文字の範囲を求める
      // 選択した文字～次の文字の1文字前の範囲を取得
      var premissionRange = []
      state.filter.char.map((c, i, self) => {
        var startIndex = state.charList.indexOf(c)
        var nextIndex = startIndex + 1
        // 「わ行（五十音リスト最後の文字）」が来てしまったときの処理
        // 現状、範囲を「わ」のみするという処理が書かれているが、アルファベット対応するなら使えない
        if ( state.charList.length === startIndex + 1 ) nextIndex = startIndex
        var startCharCode = c.charCodeAt(0)
        var finishCharCode = state.charList[nextIndex].charCodeAt(0)-1
        premissionRange.push([startCharCode, finishCharCode])
      })
      filteredData = filteredData.filter(x => {
        var charCode = x.見出語読み.slice(0, 1).charCodeAt(0)
        return premissionRange.some(val => {
          return charCode >= val[0] && charCode <= val[1]
        })
      })
    }

    // タグによるフィルタ
    if (state.filter.tag.length > 0) {
      filteredData = filteredData.filter(x => {
        return state.filter.tag.some(c => {
          return x.タグ ? ~x.タグ.indexOf(c) : null
        })
      })
    }

    // 入力によるフィルタ
    if (state.filter.text) {
      var pattern =  new RegExp('^' + state.filter.text + '.*', 'g')
      filteredData = filteredData.filter(v => pattern.test(v.見出語) || pattern.test(v.見出語読み))
    }

    // モードによるフィルタ
    if (state.systemMode === 'simple') {
      console.log(true)      filteredData = filteredData.filter(v => v.簡易版フラグ)
    }

    return filteredData
  }
};

store全体

const data = dataLoad()

function dataLoad () {
  var data = require('@/assets/csv/glossary.csv')
　// 複数個カンマ区切りで渡されることを想定
  const objectHeader = ['タグ']
  data = JSON.parse(JSON.stringify(data), function(key, value){
    if (~objectHeader.indexOf(key) && typeof(value) === 'string') value = value.split(',')
    return value
  })
  return data
}

const initialState = () => ({
  data: data,
  filter: {
    char: [],
    tag: [],
    text: ''
  },
  charList: ['あ', 'か', 'さ', 'た', 'な', 'は', 'ま', 'や', 'ら', 'わ'],
  searchMethod: {
    method: ['TEXT_FORWARD', 'TEXT_FULL', 'TEXT'],
    mode: 'TEXT_FORWARD'
  }
});

const state = () => ({
  ...initialState(),
  systemMode: 'default'
})

const getters = {
  filteredData : state => {
    var filteredData = state.data.slice()

    // 五十音によるフィルタ
    if (state.filter.char.length > 0) {
      // 取得する文字の範囲を求める
      // 選択した文字～次の文字の1文字前の範囲を取得
      var premissionRange = []
      state.filter.char.map((c, i, self) => {
        var startIndex = state.charList.indexOf(c)
        var nextIndex = startIndex + 1
        // 「わ行（五十音リスト最後の文字）」が来てしまったときの処理
        // 現状、範囲を「わ」のみするという処理が書かれているが、アルファベット対応するなら使えない
        if ( state.charList.length === startIndex + 1 ) nextIndex = startIndex
        var startCharCode = c.charCodeAt(0)
        var finishCharCode = state.charList[nextIndex].charCodeAt(0)-1
        premissionRange.push([startCharCode, finishCharCode])
      })
      filteredData = filteredData.filter(x => {
        var charCode = x.見出語読み.slice(0, 1).charCodeAt(0)
        return premissionRange.some(val => {
          return charCode >= val[0] && charCode <= val[1]
        })
      })
    }

    // タグによるフィルタ
    if (state.filter.tag.length > 0) {
      filteredData = filteredData.filter(x => {
        return state.filter.tag.some(c => {
          return x.タグ ? ~x.タグ.indexOf(c) : null
        })
      })
    }

    // 入力によるフィルタ
    if (state.filter.text) {
      var pattern =  new RegExp('^' + state.filter.text + '.*', 'g')
      filteredData = filteredData.filter(v => pattern.test(v.見出語) || pattern.test(v.見出語読み))
    }

    // モードによるフィルタ
    if (state.systemMode === 'simple') {
      filteredData = filteredData.filter(v => v.簡易版フラグ)
    }

    return filteredData
  }
};

const actions = {
  toggleCharFilter ({ commit, state }, char) {
    if (state.filter.char.includes(char)) {
      commit('removeCharFilter', char)
    } else {
      commit('addCharFilter', char)
    }
  },
  toggleTagFilter ({ commit, state }, tag) {
    if (state.filter.tag.includes(tag)) {
      commit('removeTagFilter', tag)
    } else {
      commit('addTagFilter', tag)
    }
  },
  setTextFilter ({commit}, text) {
    commit('setTextFilter', text)
  },
  changeSearchMethod ({commit, state}, mode) {
    state.searchMethod.method.includes(mode)
      ? commit('changeSearchMethod', mode)
      : commit('changeSearchMethod', 'TEXT_FORWARD')
  },
  setSystemMode ({commit}, mode) {
    commit('setSystemMode', mode)
  }
};

const mutations = {
  addCharFilter (state, payload) {
    state.filter.char.push(payload)
  },
  removeCharFilter (state, payload) {
    state.filter.char = state.filter.char.filter(x => x !== payload)
  },
  addTagFilter (state, payload) {
    state.filter.tag.push(payload)
  },
  removeTagFilter (state, payload) {
    state.filter.tag = state.filter.tag.filter(x => x !== payload)
  },
  setTextFilter (state, payload) {
    state.filter.text = payload
  },
  filterReset (state) {
    Object.assign(state, initialState())
  },
  changeSearchMethod (state, payload) {
    state.searchMethod.mode = payload
  },
  setSystemMode (state, payload) {
    state.systemMode = payload
  }
};

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

補足情報（FW/ツールのバージョンなど）

Vue: 2.6.10
Vuex: 3.1.0

Answer 1

データはサーバー側で管理してapiを用意しキーワードとマッチ方法を渡して
絞り込んだ値をjsonで返して、jsで表示するのが妥当だと思いますが
常に全データをやり取りすると相当なオーバーヘッドとメモリの無駄遣いだと思います

どうしてもクライアント側でフィルタ処理をしたいなら
jsonが配列型ならjsのfilterで処理すればいいでしょう

sample

jsonをクライアントでフィルタするならこう
※よみがなを前方、部分、完全で一致させる

var data=[["林檎","りんご","赤くて甘い。","果物",1],["人参","にんじん","オレンジ色で独特の風味。","野菜",1],["菊芋","きくいも","「豚いも」と呼ばれたことも。","野菜",0],["西瓜","すいか","熊本が生産量1位。","野菜,果物",1]];
var keyword="りん";
var zenpou=data.filter(x=>new RegExp("^"+keyword).test(x[1]));
console.log(zenpou);
var keyword="ん";
var bubun=data.filter(x=>new RegExp(keyword).test(x[1]));
console.log(bubun);
var keyword="きくいも";
var kanzen=data.filter(x=>new RegExp("^"+keyword+"$").test(x[1]));
console.log(kanzen);

※あとはデータの持ち方と、複合時の指定の仕方次第

Comments

[chibi144]

ご回答ありがとうございます。

①DB操作に不慣れな人にも元データを弄ってもらいたい。
②↑の人たちのために編集用の画面を開発するコストに見合うほどのリターンが見込めない。
③500語程度の登録で頭打ちになる。（用語の性質上、大幅な増加はありえない）
といった事情から、csvファイルをloaderでjsonにして取り込む形で実装してみています。

違う質問になってしまいますが、
トータルで500語くらいの場合、
サーバー側で管理する（条件を変えるたびにAPIにアクセスし直してデータを取得し直す）のと、
フロント側で管理する（データの取得はローカルから１回。配列操作で表示用のデータを生成する）のでは
どれくらいパフォーマンスが異なるものなのでしょうか。

[yambejp]

500語くらいなら微妙なところですね
jsonデータにしてajaxで読み込めばキャッシュも期待できるので
クライアントでできないことはないかなとは思います