CSV データの読み込みは簡単だが意外と奥が深いです

日本語を含む CSV をデータセットとして読み込むうえで、以下の2点が問題となります。

日本語コードに自動対応したい
カラム名が空白だったり重複していたり

これらを回避する方法について述べます。
私なりにはベストプラクティスと考えています。

ローカルの CSV を danfo.js の Data Frame に読み込む際の問題点

まずは、danfo.js 公式に掲載のコードを実行してみます。

ライブラリ込みの html にしてありますので、
jsfiddle などにコピペして簡単に試せます。

HTML

<script src="https://cdn.jsdelivr.net/npm/danfojs@1.1.2/lib/bundle.min.js"></script>

<body>
    <input type="file" id="file" name="file">
    <script>
     	const inputFile = document.getElementById('file');
        inputFile.addEventListener("change", async () => {
            const csvFile = inputFile.files[0]
            dfd.readCSV(csvFile, { header: true }).then((df) => {
                df.print()
            })
        })
    </script>
</body>

空白カラムや重複カラムのあるデータを読み込んでみる

これで、次の CSV (UTF-8) を読み込んでみましょう。
空白のカラムが2個と、そのほかに重複するカラムが2種類あります。

CSV

"","","あ","あ","あ","い","い","う"
"11","12","あ11","あ12","あ13","い11","い12","う11"
"21","22","あ21","あ22","あ23","い21","い22","う21"

結果 (一番左の列は行番号)

CONSOLE

╔════════════╤═══════════════════╤═══════════════════╤═══════════════════╤═══════════════════╗
║            │                   │ あ                │ い                │ う                ║
╟────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────╢
║ 0          │ 12                │ あ13              │ い12              │ う11              ║
╟────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────╢
║ 1          │ 22                │ あ23              │ い22              │ う21              ║
╚════════════╧═══════════════════╧═══════════════════╧═══════════════════╧═══════════════════╝

空白も含めて、カラム名が重複していると、先のデータが後のデータで上書きされてしまいます。

SHIFT-JIS にして読み込んでみる

次に、先ほどのファイルを SHIFT-JIS で保存してから読み込んでみましょう。

結果

CONSOLE

╔════════════╤═══════════════════╤═══════════════════╗
║            │                   │ ��                ║
╟────────────┼───────────────────┼───────────────────╢
║ 0          │ 12                │ ��11              ║
╟────────────┼───────────────────┼───────────────────╢
║ 1          │ 22                │ ��21              ║
╚════════════╧═══════════════════╧═══════════════════╝

文字化けしています。しかも、"あ", "い", "う" は全て同じカラム名とみなされているようです。

問題点のまとめ

公式のコードだと簡単ですが、以下のような問題が生じています。

日本語が文字化けする
カラム名が重複していると、先のデータが後のデータで上書きされてしまう

エクセルを読む場合はよしなに修正してくれる

danfo.js にはエクセルファイルを読み込む機能がありますが、こちらでは、CSV での問題点は回避されています。

HTML

<script src="https://cdn.jsdelivr.net/npm/danfojs@1.1.2/lib/bundle.min.js"></script>

<body>
    <input type="file" id="file" name="file">
    <script>
     	const inputFile = document.getElementById('file');
        inputFile.addEventListener("change", async () => {
            const excelFile = inputFile.files[0]
            dfd.readExcel(excelFile).then((df) => {
                df.print()
            })
        })
    </script>
</body>

結果

CONSOLE

╔════════════╤═══════════════════╤═══════════════════╤═══════════════════╤═══════════════════╤═══════════════════╤═══════════════════╤═══════════════════╤═══════════════════╗
║            │ __EMPTY           │ __EMPTY_1         │ あ                │ あ_1              │ あ_2              │ い                │ い_1              │ う                ║
╟────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────╢
║ 0          │ 11                │ 12                │ あ11              │ あ12              │ あ13              │ い11              │ い12              │ う11              ║
╟────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────╢
║ 1          │ 21                │ 22                │ あ21              │ あ22              │ あ23              │ い21              │ い22              │ う21              ║
╚════════════╧═══════════════════╧═══════════════════╧═══════════════════╧═══════════════════╧═══════════════════╧═══════════════════╧═══════════════════╧═══════════════════╝

日本語のデータでも問題ない
空白のカラム名があると __EMPTY にしてくれる
カラム名が重複していると、_1, _2, ... の suffix を付けてくれる

なぜか CSV には優しくないんです。
ですので、CSV を読み込む場合にも同じように処理させるようにしてみました。

まずは日本語を自動判定

danfo.js には日本語のコードの変換の機能はありませんので、encoding と PapaParse を使うことにします。

HTML

<script src="https://cdn.jsdelivr.net/npm/danfojs@1.1.2/lib/bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/encoding-japanese/2.0.0/encoding.min.js"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>

<body>
    <input type="file" id="file" name="file">
    <script>
        const inputFile = document.getElementById('file');
        inputFile.addEventListener("change", async () => {
            const csvFile = inputFile.files[0];
            
            var reader = new FileReader();
            reader.onload = (e) => {
                const codes = new Uint8Array(e.target.result);
                const unicodeString = Encoding.convert(codes, {
                    to: 'unicode',
                    from: Encoding.detect(codes),
                    type: 'string'
                }).trim();
                            
                Papa.parse(unicodeString, {
                    header: true,
                    complete: function(results) {
                    	const df = new dfd.DataFrame(results.data);
                        df.print();
                    }
                });
            };
            reader.readAsArrayBuffer(csvFile);
        });
    </script>
</body>

結果

これで文字化けは解消しましたが、PapaParse でもカラム名の重複については同じです。
danfo.js のときと同じなので、もしかして内部コードは同じなのかしら？

CONSOLE

╔════════════╤═══════════════════╤═══════════════════╤═══════════════════╤═══════════════════╗
║            │                   │ あ                │ い                │ う                ║
╟────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────╢
║ 0          │ 12                │ あ13              │ い12              │ う11              ║
╟────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────╢
║ 1          │ 22                │ あ23              │ い22              │ う21              ║
╚════════════╧═══════════════════╧═══════════════════╧═══════════════════╧═══════════════════╝

カラム名をエクセルの場合に準じて変換

カラム名の変換を実装します。

header: false にしてデータをパース
ヘッダー (1行目) を修正
修正したヘッダーと元のデータを結合
CSV文字列に戻して再度パース

HTML

<script src="https://cdn.jsdelivr.net/npm/danfojs@1.1.2/lib/bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/encoding-japanese/2.0.0/encoding.min.js"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>

<body>
    <input type="file" id="file" name="file">
    <script>
        const modifyHeaders = (headers) => {
          const seen = {};
          return headers.map((header) => {
            if (header === "") {
              seen[header] = (seen[header] || 0) + 1;
              return seen[header] === 1 ? "__EMPTY" : `__EMPTY_${seen[header] - 1}`;
            }
            if (header in seen) {
              seen[header]++;
              return `${header}_${seen[header] - 1}`;
            }
            seen[header] = 1;
            return header;
          });
        };
                
        const inputFile = document.getElementById('file');
        inputFile.addEventListener("change", async () => {
            const csvFile = inputFile.files[0];
            
            var reader = new FileReader();
            
            reader.onload = (e) => {
                const codes = new Uint8Array(e.target.result);
                const unicodeString = Encoding.convert(codes, {
                    to: 'unicode',
                    from: Encoding.detect(codes),
                    type: 'string'
                }).trim();
                
                // Step 1: データをパース
                const parsedData = Papa.parse(unicodeString, {
                    header: false // まずは全てを data として扱う
                });

                // Step 2: ヘッダー (1行目) を修正
                const modifiedHeaders = modifyHeaders(parsedData.data[0]);

                // Step 3: 修正したヘッダーと元のデータを結合
                const newData = [modifiedHeaders, ...parsedData.data.slice(1)];

                // Step 4: CSV文字列に戻す
                const newUnicodeString = Papa.unparse(newData);

                // 変換結果を確認
                Papa.parse(newUnicodeString, {
	                header: true,
                    complete: function(results) {
                    	const df = new dfd.DataFrame(results.data);
                        df.print();
                    }
                });
            };
            reader.readAsArrayBuffer(csvFile);
        });
    </script>
</body>

結果

これで文字化けとカラム名の重複の問題が解消しました。

CONSOLE

╔════════════╤═══════════════════╤═══════════════════╤═══════════════════╤═══════════════════╤═══════════════════╤═══════════════════╤═══════════════════╤═══════════════════╗
║            │ __EMPTY           │ __EMPTY_1         │ あ                │ あ_1              │ あ_2              │ い                │ い_1              │ う                ║
╟────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────╢
║ 0          │ 11                │ 12                │ あ11              │ あ12              │ あ13              │ い11              │ い12              │ う11              ║
╟────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────┼───────────────────╢
║ 1          │ 21                │ 22                │ あ21              │ あ22              │ あ23              │ い21              │ い22              │ う21              ║
╚════════════╧═══════════════════╧═══════════════════╧═══════════════════╧═══════════════════╧═══════════════════╧═══════════════════╧═══════════════════╧═══════════════════╝

改行コード

上記コードでは、改行が CR+LF, CR, LF のいずれの場合でも問題なく読み込めます。

Reactive stat では、できるだけユーザーがエラーで困ることがないようにしています

Reactive stat は、ブラウザだけで使える無料統計ソフトです。信頼性の高い R で統計解析を行い、その結果を AI が解説します。PC にソフトウェアをインストールする必要がなく、インターネット接続があればどこでも利用できます。

ぜひご利用ください。