JavaScriptでライブリクエストからCSVを解析する

JavaScriptでCSVを取得して解析するには、await fetch(url)を呼び出し、await response.text()でボディを読み取り、行をオブジェクトに分割します。固定スキーマを持つ信頼できるソースからの小さなCSVファイルにこのパターンを使用してください。ネイティブのブラウザAPIは依存関係なしにリクエストと解析のフローを可視化します。200レスポンスは転送のみを確認します。ボディはHTMLや不正なカンマ区切り値である可能性があります。

JavaScriptでURLからCSVを解析するサンプル

const url = 'https://httpbingo.org/base64/bmFtZSxjaXR5CkFkYSxMb25kb24KTGluLE9zbG8=';
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP ${response.status}`);

const csv = await response.text();
const lines = csv.trim().split('\n').slice(1);
const people = lines.map((line) => {
  const [name, city] = line.split(',');
  return { name, city };
});

console.log(people);

出力:

ここに出力が表示されます...

出力：

[
  {
    "name": "Ada",
    "city": "London"
  },
  {
    "name": "Lin",
    "city": "Oslo"
  }
]

このサンプルの動作説明

await fetch(url)はブラウザのGETを実行します。web.runのJavaScript実行環境はコードをasync関数内で実行するため、トップレベルのawaitはリクエストをラップせずに動作します。
response.okチェックは受け取ったHTTPエラーがCSVパーサーに到達する前に停止します。fetch()は404や500などのステータスでも解決するため、awaitするだけでは成功を証明できません。
response.text()はFetchにCSV専用のレスポンスメソッドがないため、ボディをテキストとして読み取ります。trim()はfixtureの末尾の改行を削除し、slice(1)はname,cityヘッダーをスキップします。
残りの各行はnameとcityに分割されてオブジェクトとして返されます。このコンパクトなパーサーはfixtureのクォートなし2列フォーマットのみを意図的に受け入れます。

Run DetailsでリクエストをF確認する

サンプルを実行し、確認の一部としてRun Detailsを検査します。外部リクエストはGETメソッド、HTTPステータス、所要時間とともに表示されます。数値の2xxステータスはOKとカウントされ、サーバーが応答したことを証明します。出力の期待される名前は、ボディが意図通り解析されたことの別の証拠となります。

数値の4xxまたは5xxはサーバーが拒否で応答したことを意味します。HTTPコードのないERRはレスポンスがJavaScriptに届かなかったことを意味し、不正なCSVではなくCORSまたは他のネットワークレベルの障害を示します。所要時間はfetch()が解決するまでのリクエストを測定します。ボディの読み取りとCSV解析はその測定の後に行われます。awaitが重要です：fire-and-forgetのfetchはリクエストキャプチャが終了する時点でまだ保留中の可能性があります。

JavaScriptでCSVを解析する際の注意点

200でボディを信頼する。 response.okはHTTPエラーをキャッチしますが、ステータス200で返されたHTMLログインページを検出することはできません。固定fixtureにより実行可能なコードが短くなります。変更可能なエンドポイントの場合は、オブジェクトを使用する前に期待されるヘッダーと行の幅も検証してください。

任意のCSVをカンマで分割する。 誤り：信頼できないエクスポートに対してline.split(',')を使用すること。正しい：クォートなしデータの明示的な契約がある場合のみ使用してください。"London, UK"のような値にはデータのカンマが含まれており、クォートされたフィールドには改行が含まれる場合があります。単純な分割は意味を静かに変えてしまいます。

制限付きパーサー vs CSVライブラリ

入力	使用方法
小さなURL、固定列、クォートなしフィールドが保証されている場合	`fetch()`と制限付きパーサー
クォートされたカンマ、エスケープされたクォート、複数行フィールド、または信頼できないCSV	ブラウザのPapa ParseまたはNode.jsの`csv-parse`
ユーザーが選択したファイル	`File.text()`または`FileReader`（`fetch()`は使わない）
大きなエクスポートまたはブラウザCORSアクセスのないオリジン	ストリーミングまたはサーバーサイド処理

response.text()はファイル全体をバッファリングし、行のマッピングはさらに文字列とオブジェクトを割り当てます。大きなエクスポートにはこのネイティブパターンを避けてください。ページにレンダリングする際は、リモートセルにinnerHTMLではなくtextContentを使用してください。また、スプレッドシートソフトウェア向けにデータをエクスポートする前に数式プレフィックスを無効化してください。

FAQ

JavaScriptにはCSVパーサーが組み込まれていますか？

いいえ。ブラウザのJavaScriptは取得のためにfetch()とresponse.text()を提供しますが、CSV文法にはカスタムコードまたはライブラリが必要です。小さなカスタムパーサーは、受け入れるダイアレクトが明示的で制御されている場合にのみ適切です。

CSVリクエストがCORSで失敗するのはなぜですか？

ブラウザはそのサーバーがCORSヘッダーを通じてアクセスを許可する場合にのみ、JavaScriptがクロスオリジンのレスポンスを読み取ることを許可します。Run DetailsがHTTPステータスなしでERRを報告する場合、解析ロジックを変更する前に配信とCORSをデバッグしてください。