Zenn
🍣

CSV出力の際に値に含まれる\nでハマった話

2024/12/10に公開
JavaScript
JSON
CSV
frontend
改行
tech

めちゃくちゃ単純なのにハマった話です。
修正だったため、既存のコードを参照して作業したことでハマりました。

フロントで受け取ったJSON形式のレスポンスをCSVで出力したい。

生成AIになんでも聞けるこのご時世、誰にでも実装できる機能です。
しかしDB設計によっては同列の情報があり、1つのカラム(key)に対して複数の値(value)を返す仕様にするケースがあります。

その場合バックエンドの処理で "value1\nvalue2" と改行を付け加えてレスポンスを送ってくれる実装となっていました。
これをそのままCSVに出力すると \n で改行されてしまい、 "value2" が新しい行として認識されずれずてのCSVが完成してしまいました😭

当たり前の話ですが、「\n」「,」 などCSVで有効な特殊特殊文字が含まれている場合、その影響を受けてしまいます。
ではどうすれば文字列として扱ってくれるか？
はい、そうです。「"」で囲うだけです。

もう囲われてるじゃん！

浅はかな私はJSON形式のレスポンスの key : "value1\nvalue2" を見て、
もう囲われてるじゃん！ って思っていました。

しかしそれは単なるJSONの構造上の話でした。

CSVの値は、改めて”(ダブルクォート)で囲う！

this.items.forEach(function(element, index) {
    var line = `"${element['key1']}","${element['key2']}","${element['key3']}"\n`;
    headerLine += line;
}

これで1つのセルの中に収まり綺麗に改行されてました。
他の方がしょうもないことでハマってしまわなないように、供養させていただきます🙏

Discussion