jsCsvViewer

CSVファイルの編集はExcelやテキストエディタに任せ、jsCsvViewerはその名の通り表示専用ツールとして機能します。
保存機能は後述するように限定的なもので、あくまで補助的な機能とお考えください。

使用ライブラリ

ライブラリ	内容	ライセンス
Jspreadsheet CE v4	JavaScript で Excel 風スプレッドシートを実現するライブラリ	MIT
jsuites	Jspreadsheetに付随するライブラリ	MIT
papaparse	JavaScript用の高速なCSVパーサー	MIT

筆者はHandsontableの記事をよく書いていますが、Handsontableの最新バージョンは14.5でMITライセンス版は6.2.2と差が開いてしまったため、今回は初期ごろのHandsontableをフォークしたJspreadsheet(旧名 jExcel)を数式やツールバーを標準搭載していることやCE版でもメンテナンスを継続していることもあり採用しました。

papaparseライブラリ側で区切り文字の自動検出や改行と引用符を正しく処理してくれます。

使用方法

Webサイト

https://yaju.sakura.ne.jp/tool/jsCsvViewer.html

画面上部

• CSVファイルをドラッグ＆ドロップするか「ファイルを選択」ボタンをクリックするとファイル選択ダイアログが表示される
• 読込み完了時に「ファイルを選択」ボタンの右側にファイル名が表示される
• 文字コードには「shift-jis」と「utf-8」が選択できる。※UTF-8 BOM付きは自動判断される
• 「ヘッダー」チェックボックスはオフなら1行目にヘッダーを表示、オンの場合は列ヘッダーに表示します。※Excel貼り付けた際にヘッダーまでコピーされるように初期値はオフにしています
• 「再読み込み」ボタンは同じファイルを読み込み直します。文字コードや「ヘッダー」チェックボックスの変更後などに使用する
• 「全選択コピー」ボタンは表全体をクリップボードにコピーします。※Excel貼り付けた際にヘッダーまでコピーされるように初期値はオフにしています
• 「遅延読込み」チェックボックスは表示領域分データのみ表示し、スクロールした際に追加のデータを動的に読込んで表示します
• 「ページネーション」チェックボックスは、指定行数(初期は10行)ごとにページを分割し、ページを切り替えながらデータを表示します。行数は10,25,50,75,100が選択できます

※「遅延読込み」と「ページネーション」はどちらかを選択してください。

Warning

Excelへの貼り付けについて 「全選択コピー」ボタンによりクリップボードにコピーされますが、それをそのままExcelへ貼り付けても自動変換されてしまいます。
Excelへ貼り付けする前に、Excelのコーナーヘッドで全選択して書式を「文字列」にした上で貼り付けを行なってください。
その後に指定列を他の書式に変換したい場合、次記事を参考にしてください。
【Excel】文字列で入力された数字を「標準」や「数値」に直したい

アイコン

• 「元に戻す」ボタンは編集した内容を戻します
• 「やり直し」ボタンは元に戻した内容を取り消します
• 「保存」ボタンはカンマ区切りで表示内容を保存します
• 「右寄せ」ボタンは指定セルや選択範囲を右寄せにします
• 「中央寄せ」ボタンは指定セルや選択範囲を中央寄せにします
• 「左寄せ」ボタンは指定セルや選択範囲を左寄せにします
• 「太字」ボタンは指定セルや選択範囲を太文字にします
• 「文字色」ボタンは指定セルや選択範囲の文字をカラーピッカーの選択色にします
• 「背景色」ボタンは指定セルや選択範囲の背景をカラーピッカーの選択色にします
• 「列追加」ボタンは指定セルの右側に列を追加します
• 「列削除」ボタンは指定セルの列を削除します

コンテキストメニュー

セルの右クリックメニューとなります。

• 「上に行を挿入」メニューは指定セルの上側に空行を追加します
• 「下に行を挿入」メニューは指定セルの下側に空行を追加します
• 「選択行の削除」メニューは指定セルの行を削除します
• 「コピー」メニューは指定セルや選択範囲をクリップボードにコピーします
• 「貼り付け」メニューは指定セルにクリップボードから貼り付けします

クリアー処理

ブラウザのChrome「このページを再読み込みします」またはEdge「最新の情報に更新」を使用してください。

検索機能

ブラウザの検索(Ctrl+F)を使用してください。

「ページネーション」チェックボックスをオンにして読込みした場合のみ、Searchテキストボックスが表示され、入力した値が見つかった行を抽出して表示します。

ソート機能

列ヘッダーをダブルクリックすると数値のみでも「文字列」扱いでソートされます。 ソートする場合は、ヘッダーチェックボックスをオンにしておかないとヘッダーもソート対象になってしまいます。

Caution

Excelだと列幅を自動調整する際にダブルクリックしますが、この機能はないためダブルクリックするとソートされてしまいます。

数式機能

Jspreadsheetライブラリには標準で数式機能が備わっています。

金額は単価x数量で=C2*D2や=C3*D3、合計は=SUM(E2:E3)のようにセルに埋め込み計算させることが可能です。
使用可能な関数一覧(formulajs ライブラリに依存)
https://formulajs.info/functions/

保存機能

Jspreadsheetライブラリの保存機能をそのまま使用しています。
読込みのファイル形式を維持できない(例 二重引用符の囲みはなくなる、タブ区切りでもカンマ区切りになるなど)ため、限定的な機能になります。

読込みのファイル名(新規 jsCsv)_年月日時分.csvでダウンロードフォルダに保存されます。
ファイル形式は、UTF-8 BOM付きカンマ区切りの改行CRLFとなります。

読み込みサイズ

通常ではサイズが大きい場合はエラーになり読み込めません。
郵便局のCSVの全県データ「utf_ken_all.csv」18.3MiB(124390行)はメモリ不足エラーになりましたが、北海道データ「01HOKKAI.csv」860KiB(8201行)は問題なく読み込めました。

今回サイズが大きいCSVファイルでも表示されるように「遅延読込み」と「ページネーション」の機能を追加しました。この機能を使うと郵便局のCSVの全県データ「utf_ken_all.csv」18.3MiB(124390行)が表示されます。