😁

HTML&VueでCSVをさくさく検索できるようにしたい

2023/04/08に公開

ちょっとした管理表であったり、大きな管理表であったり、ExcelやCSVで表として管理しているものがいろいろありまして、情報によっては週に数回程度の頻度で検索したくなる場合があります。

例えば数十あるサービスのそれぞれのオーナー（担当者）が誰かを見たかったり、サービスとサービスの相互の影響内容を記載した表を見たかったり。

CSVやExcelブックをExcelで絞り込み検索しようとすると列ごとにフィルタを指定する必要があって面倒です。

ChatGPTに手伝ってもらい、CSVをさくさく絞り込み検索できるようにする簡単なHTMLとjsを作成してみました。
vue.jsをちゃんと使ったことがなかったのですが、ChatGPTが難なく生成してくれました。（CSSや細かい動作など調整はかなり必要でしたが）

CSV Grepperという名前で以下で公開しています。

利用イメージ

CSVファイルを画面にドラッグ&ドロップすると、画面上にtableとしてロードされ、検索文字列を入力するとリアルタイムに絞り込み検索されます。
スペース区切りで複数の文字列を入力すると、すべての文字列を含む行に絞り込みされます。

データはブラウザのローカルストレージに保存されるのみで、外部へは一切送信されません。

一度ロードしたデータは"Select Dataset"のメニューから呼び出したり削除したりすることができます。

ローカルストレージ保存のため、利用しているブラウザのデータを消さない限りはデータが保持されます。

から利用できます。

Electronでapp化したものは以下から取得可能です。（AppleシリコンのMac版のみ）