CSVの変更を見る v0.1

昨日と今日の商品一覧など、行の順番が違うCSVを商品番号で照らし合わせて確認できます。追加・削除された行と、変わったセルを表示します。

比較結果をHTMLファイルに保存できます。結果を後で見直すときや、他の人に変更内容を確認してもらうときに使えます。保存したファイルはブラウザで開けます。

ブラウザで試す · Qiitaの説明を読む

「架空の商品一覧で試す」を押すと、ファイルを用意せずに結果を見られます。サンプルではコーヒーの価格が500から550に変わり、商品が1件ずつ追加・削除されています。商品の行順が違っても、商品番号で比べます。

この画像は、公開ページで架空の商品一覧を比較した画面です。実際に保存したHTMLの見本も用意しました。架空データだけを含むファイルで、保存した後にブラウザで開いて読めます。

小さなCSVを2つ比べ、追加・削除された行と変わったセルを読むためのローカルブラウザツールです。表計算の式やコマンド操作を覚えずに、定期的なエクスポートの変化を確認したい人を想定しています。誰でも同じ手順で利用できます。

使い方

1. index.html をローカルのChromeまたはEdgeで開きます。サーバやインストールは不要です。
2. 「変更前のCSV」と「変更後のCSV」を選びます。
3. 両方のファイルで各行を一意に識別できるキー列（例: id）を選び、「変更を表示」を押します。
4. 画面上部のファイル名とキー列を確認し、追加・削除・変更・変更なしの件数と詳細を読みます。
5. 結果を残す場合は「比較結果をHTMLで保存」を押します。ダウンロードしたHTMLをブラウザで開き、内容を確認してから相手に渡します。

試すときは 変更前の架空CSV と 変更後の架空CSV を使えます。キー列は id です。期待結果は追加1行（D）、削除1行（B）、変更1行（Aのstatus）、変更なし1行（C）です。

ファイルはブラウザのこのページ内で読み取ります。このページには外部スクリプト、通信処理、アカウント、分析機能、アップロード先はありません。自動で保存・送信しません。保存ボタンを押したときだけ、結果を端末にダウンロードします。共有端末では画面に表示された内容にご注意ください。

比較結果を保存する

使い方の例は CSVの差分結果をHTMLで保存して共有する（Qiita） で紹介しています。

保存するHTMLには、変更前後のファイル名、キー列、比較日時、各件数、変わったセルの一覧、追加・削除された行の一覧が入ります。画面の100件ごとのページ切り替えとは別に、全件を保存します。変更なしの行は件数だけで、値は入れません。

数値や日付への変換は行いません。例えば 00123 は 00123 と表示します。空のセルは灰色の「（空欄）」で示します。ファイル内にスクリプトや外部の画像・リンクは入れず、セルの文字はHTMLとして実行しません。HTMLは表示用の資料であり、元のCSVのバイト列や引用符を保存する形式ではありません。

保存ファイルの上限は8 MiBです。超えた場合は保存を止め、結果の一部だけを出すことはありません。入力上限内でも、表の行やセルが多いとHTMLが8 MiBを超える場合があります。

共有用のファイルには入力ファイル名と比較した値が含まれます。内容を確認してから、普段の方法で相手に渡してください。自動で相手に送ったり、共有リンクを発行したりする機能はありません。

変更の理由や予定した編集かどうかは判定しません。照合に使うキーが 00123 から 123 に変わった場合は、同じ行の変更ではなく削除と追加として出ます。元のCSVがなければ、失われた値の復元はできません。

対応範囲

• UTF-8のカンマ区切りCSV。先頭BOM、LF/CRLF、引用符付きのカンマ・改行・二重引用符を受け付けます。
• 1行目は列名。両ファイルの列名集合は同じである必要がありますが、列の順序は違っても構いません。
• キー列は1列だけ選びます。各ファイル内で空欄・重複がない必要があります。前後の空白もキーの一部です。
• 各ファイル最大2 MiB、データ行最大10,000行、列最大50、各セル最大1,000 Unicode文字です。
• セルは文字列として完全一致で比べます。空セルは空文字列です。前後の空白を削らず、数値・日付・NULL等を推測しません。
• 変更件数は変更された行数です。1行で複数のセルが変わった場合、件数は1、詳細にはすべての変更セルを表示します。
• 詳細は一度に100件ずつ表示し、「前へ」「次へ」で移動します。件数は全行の比較結果です。

壊れたUTF-8/CSV、空・重複した列名、列数の違う行、列の追加・削除、空・重複したキー、上限超過はエラーとして比較を止めます。途中までの結果は表示しません。タブ区切り、Shift-JIS等の文字コード、複数キー、列名の変更、編集・マージ・CSVやExcel形式への出力、履歴は対象外です。ファイルの内容はHTMLや数式として実行せず、文字として表示します。

開発用チェック

Node.jsがある開発環境では、外部パッケージなしでコアのテストを実行できます。利用者がNode.jsをインストールする必要はありません。

node --test tests/core.test.mjs tests/report.test.mjs tests/ui-state.test.mjs

テストはCSV解析、差分、境界エラー、架空サンプル、HTML保存の全件出力・文字の扱い・容量制限と、ファイルやキー変更時の保存対象の無効化を確認します。画面の状態は小さなDOMの代用品を使うテストも含み、ブラウザの描画や実際のダウンロード操作そのものを自動化するテストではありません。

ライセンス

MIT License の下で公開しています。