CSVビューアを作成しました
はじめに
簡単な CSV ビューアを開発しました。
CSV ファイルを確認する（Check CSV）意味を込め、ccsv と名付けました。
この記事や開発したサービスがお役に立ちましたら幸いです。
サービス紹介
Excel のような操作感で CSV ファイルのデータを表示することができるアプリとなっています。
CSV ファイルの中身を確認することに特化しており、主に以下の機能を持っています。
-
行のフィルタリング
- 完全一致
- 前方一致
- 後方一致
- 前後方一致
- etc
-
ソート
- 昇順
- 降順
-
文字コードの自動判別
ファイルは表示専用で、編集することはできません。
機能デモ
開発理由
主に以下の理由で開発しました。
ちょっと調べたいだけなのに
業務上、CSV ファイルを使うことがよくあります。
アプリケーションのログファイルや、外部システムへの連携ファイルなど、それらの形式は主に CSV です。
Excel で開いたり、VSCode で開いて拡張機能で表組みにして表示してみたり、Windows 標準のメモ帳でカンマ区切りの状態で開いたり、今まで色々な方法で CSV ファイルを開いてきました。
しかし、そのどれを使っても 以下のような事象が起きてしまいます。
- フィルタリングできない
- ソートできない
- 文字化けする
上記を解決するには CSV を XLSX 形式に変換したり、文字コードを変えて再度開いてみたり、少なからず手間がかかっていました。
そのため、CSV データをちょっと調べるだけでストレスを感じるようになっていきました。
そこで、今回開発したアプリにより、上記の問題を解決しようと思いました。
開発してみたかった
以前から Windos の「プログラムから開く」や、Mac の「このアプリケーションで開く」に、自作アプリを表示してみたいと思っていました。
ファイルを右クリックし、エクスプローラや Finder から 無事にアプリを立ち上げることができました。
※electron-builder を使用しており、win > fileAssociations や mac > extendInfo で設定
使用技術
- ビルドツール：electron-vite
- パッケージングツール：electron-builder
- ライブラリ：
-
csv-parse
- CSV 内容のパース
-
Handsontable
- グリッドセルの描画、フィルタリング、ソート
-
jschardet
- 文字コードの自動判別
-
csv-parse
主要な機能はほぼライブラリで賄っています。
参考
前回もそうでしたが、今回も sprout2000 さんのドキュメントが大変参考になりました。ありがとうございます。
課題
サイズの大きな CSV ファイルを読み込むと、フリーズしそうになってしまいます。
Excel ではびくともしなかったので、Excel 内部でどのようなレンダリングプロセスを経て、巨大サイズのファイルデータを表示しているのか気になるところです。
本アプリでは、ファイル選択時にまとめてデータを読み込んでいますが、Excel ではスクロールによって都度データを読み込んでいるのでしょうか？
終わりに
最後まで読んでいただきありがとうございました。
ccsv にインストーラを置いているので、よろしければご利用いただけると嬉しいです。
また次回も自分のために、何かしらアプリを作りたいと思います。
Discussion
こんにちは。エディタでは下記があるようです。