概要
- index.htmlだけでCSVを検索するシステムをつくるという記事を以前に投稿しました
- コードや実際に動くものを公開しています
-
index.htmlだけでお手軽にCSVが検索できることから初心者の方やお試ししたい方などちょっとした需要があるようでした - ご利用いただいている状況など考えると改善したいポイントがいくつかあったので、このシステムを改善しようと思います
まずはダメ出し（改善ポイントを洗い出す）
CSVをそのままテーブルとして表示しちゃっている
- エンジニアのあるあるですがCSVやデータベースなどをそのまま工夫せずテーブルとして表示しています
- まあテーブルでも一覧で見やすいかもしれませんがそこはウェブシステムなので何かしらの工夫をしてより見やすい形を考えるべきでしょう
- 誰だ！このシステムを作ったやつは！！女将を呼べ！！！（ワタシです・・・）
検索できるモードを数値やキーワードで切り替えられる
- 機能としては切り替えられてよさそうなのですが開発する面で辛みが出ています
- 複数の状況変化を持つことで機能拡張するときにいろいろ気にしないといけなかったり・・・
- そのままテーブル表示問題でもいえることですが数値データを表示するならグラフとか見せ方があるはずです
- つまり数値をフィルターする画面とキーワードで検索する画面の見た目って一緒でイイんですか？
- 機能として切り替えられるようにしているけどエクセルの囚われていないですか？
- 誰だ！このシステムを作ったやつは！！女将を呼べ！！！（ワタシです・・・）
検索する仕組みで複数の列項目で絞り込むことができない
- 検索する列を指定するインターフェースなため複数の列で絞り込む拡張が現時点ではムリです
- 検索する上でどんどん絞り込んでいくことはしたいため見た目の問題で拡張できないのはしんどい
- 誰だ！このシステムを作ったやつは！！女将を呼べ！！！（ワタシです・・・）
データ量が多いCSVを読み込むと全て描画するので重い
- そのまま表示しちゃっている延長で大量のデータを描画しています
- ２万件くらい表示するとめちゃくちゃ重いです
- 料理で言うところのダシを取ろうとして煮込みすぎて苦味が超出ているやつです（例えが違ってても知りません）
- 誰だ！このシステムを作ったやつは！！女将を呼べ！！！（ワタシです・・・）
データ構造ってこれでベストなんでしたっけ？
- CSVのデータを「カラムのデータの配列」と「検索するデータの配列」で全部配列で管理しています
- 辞書や連想配列使ってなんとかならんかったのかなと思います
- あと最近だったらGraphQLとかもありますですよ・・・
- 誰だ！このシステムを作ったやつは！！女将を呼べ！！！（ワタシです・・・）
改善案
どう改善していくか作戦を考える
- 上記のダメ出し（改善ポイント）によって５回も女将を呼ばれてしまいました
- とはいえ全ての改善ポイントを対応するのも辛いです
- 時間は有限でありますですしゲームだってしたいですなぁ・・・
- 既存のシステムを改善するということで再利用できるところは再利用したい
今回は見た目の部分だけにフォーカスする
- 上記の改善ポイントについて見た目の部分で改善できることが多そうです
- CSVをJavaScriptで扱う部分については読み込む部分については流用しようと思います
- 全てを作り変えることでよくすることもできますが部分的にフォーカスすることで改善に掛かるコストを抑えます
- ４女将は対応して１女将はとりあえず諦める形でいこうと思います（女将：改善するポイントの単位）
開発
コードと公開先
- ソースコード
- 公開先
改善した内容
表示形式をカードにする
- CSVをそのままテーブルとして表示しちゃっている件に対する内容です
- テーブルの場合は１行で１つのデータを見ることができますがカラム数が多いと横スクロールしたり辛いです
- カードにすることで１つのデータを１つのくくりとして捉えやすくなり縦に並べることで読みやすくもなります
- カードは横に複数に並べることができ量が多いデータも画面を無駄なく一覧として表示できます
- カラム数が多いと不要な情報が多くなって見づらくなりますが項目の表示非表示を切り替えることができます
カード形式での表示
表示するカラムを表示・非表示できる
複数の列項目で絞り込める
- 検索する仕組みで複数の列項目で絞り込むことができない件に対する内容です
- 常に絞り込みたいわけではないので絞り込みたいときに
Search Optionを開いて絞り込み機能を利用できます - 各項目ごとにサジェスト機能（入力候補）があり入力中にもどのようなデータがあるか把握できます
- 検索できるモードを数値やキーワードで切り替えられる件については数値検索機能を落としました
- これは別の画面で構成した方がやりやすく今回の改善とは別のアプローチでやるべきと判断しました
全ての列の検索と特定のカラムによる絞り込み
検索ボックスではサジェストも表示
ページネーションを使って件数を区切って表示する
- データ量が多いCSVを読み込むと全て描画するので重い件に対する内容です
- ページ数で３０件ずつ表示することで表示する量を絞っています
- データ数が多くなっても表示が遅くなることはなくなります
- ページ数の指定などの機能はまだありません
ふりかえり
- 以前に作った
index.htmlだけでCSVを検索するシステムの使い勝手がよくなったと思います（所感ですが・・・） - CSVからデータを取得する部分についてはそのまま流用することができました
- 絞り込む機能についてはデータ構造を一新することができました
- バックエンド（CSVからのデータ取得まで）・フロントエンド（データを元にどう表示・表現するか）を分けて対応できて改善もやりやすかったです
- よくレガシーな環境をリプレースするにあたって一気にやることを考えたりしますが改善したいポイントを分離したり段階的に取り組むことで進めることも可能かもしれません