excess

ブラウザで動くCSV/TSVビューア＆エディタを作った。

サーバーには何も送らず、全部ブラウザの中で処理する。

サイト: https://excess.urtell.com/

SolidJS + Vite + Bun + TypeScript。

作った理由

Shift-JISのCSVをサッと開きたいことがあるんだけど、Excelで開こうとするとデリミタや対象カラムの設定みたいな面倒なダイアログが出る。

スプレッドシートで開いてもいいが、なんせ開くのが面倒くさい。開いた後も、列幅を調整しないと全体が見えないし、ヘッダ行をヘッダとして扱えなかったりする。

CSV / TSV / JSON / Markdown table みたいなフォーマットと、エンコーディングを指定して出力し直すだけでも、地味に役に立つ。

CLIツールでもいいけど、配布しても誰も使わないし、そもそもコマンドラインに慣れてない人もいるだろうから、ブラウザで完結するのがいいかなと思った。

できること

  • ソート（複数列）
  • フィルタ（contains / regex / 比較など12種）
  • セル編集、undo / redo（履歴ドロワーつき）、コピー & ペースト
  • 行・列の挿入 / 削除 / 移動 / リネーム
  • 列の型の自動判定（string / number / date / boolean）
  • エクスポート（CSV / TSV / JSON / NDJSON / YAML / HTML Table / Markdown / SQL INSERT）
  • エンコーディングは UTF-8 / Shift-JIS / EUC-JP の自動判定・変換
  • 新規ブランクの作成、クリップボードからのインポート

検索機能は無い。

データ処理は全部ブラウザ内で完結していて、サーバーには何も送らない。

大容量ファイルへの対応

大容量ファイルを扱うためにサーバーを用意したくなかったので、ブラウザの中で頑張ることにした。

  • 10MB を超えると大容量モードに切り替わる（5MB 以下で解除。ヒステリシスを持たせている）
  • 行・列とも仮想スクロール
  • ファイルは OPFS（Origin Private File System）に保存し、1000行ブロック単位のインデックスを作ってランダムアクセスする
  • パースはストリーミングで、逐次 OPFS に書き込む。全データをメモリに載せない
  • ブロックキャッシュは LRU で最大50ブロック、先読みあり
  • パーサは PapaParse、デリミタの判定は自作
  • Web Worker は使っていない。メインスレッドで setTimeout で yield しているだけ

使ってみて

CSV / TSV のビューアとして、地味に使えるときがある。やっぱり列幅の調整とエクスポートが便利。

WEBアプリなので OPFS でブラウザに保存しているわけだが、ローカルファイルに直接アクセスできないのはちょっと不便。仕方ないけど。