🕌

【JS】CSVインポートでBOMエラー

2025/01/14に公開

こんにちは!

CSVのインポート機能を開発していた時に、ExcelからCSVを作成して
そのCSVをインポートしたときにエラーが起こることがあり、
ちょっと悩みました。

そのインポートのエラー原因がBOM付きCSVというものだったので、
原因と解決策を書いていきます!

原因

先ほども書きましたが、原因はBOM付きのCSVでした。

BOMとは?

ファイルにおける BOM (Byte Order Mark) は、文字エンコーディングを示すためにテキストファイルの先頭に付加される特別なバイト列です。特にUTFエンコーディング(例:UTF-8、UTF-16、UTF-32)で使用されることがあります。
ChatGPT

つまり、文字エンコードの時に必要になるバイト列らしいです!
Windows環境で起こることがあるらしいです!
今回のようにExcel→CSVに変換した場合など。

今回は、BOM付きCSVによりパースの際にエラーが出ていたようです。

対応

npmのcsvパッケージではパースの際に簡単にBOMへの対応ができるので、
そちらを利用しました!

const records = parse([パスするCSVデータ], {
  bom: true // ←でBOMを解析し、取り除く
});

https://csv.js.org/parse/options/bom/

公式ドキュメントには、このオプションを常に有効することが推奨されています。

また、↓でも一応対策できるようなので、パッケージを入れていない場合でも対応できそうです!

const csv = "JavaScript,PHP,Python"; //BOM付きCSVデータ
const result = csv.replace(/^\uFEFF/, ''); // BOMを取り除く
console.log(result); // "JavaScript,PHP,Python"

まとめ

Windows環境やOffice系のアプリで、CSVにファイルを変換した場合
BOM付きになる。

パッケージを利用している場合は、BOM付きCSVをオプションで解決できる場合がある。
BOMをコードで取り除く方法もある。

以上です!

参考にさせていただいた記事やドキュメント

https://csv.js.org/parse/options/bom/
https://tech.pepabo.com/2021/03/19/remove-the-bom-when-importing-csv/
https://qiita.com/mitsutoyo32104/items/76335bb6e783d55f311c

Discussion