【JS応用｜初心者向け】サーバーからのレスポンスを簡単に扱う！Response.prototype.formDataの活用術

導入: なぜformDataを使うのか？

フロントエンド開発でAPIからデータを取得する際、多くの場合JSON形式を利用しますが、実際の業務では「フォーム送信の形式（application/x-www-form-urlencodedやmultipart/form-data）」でデータを受け取る場面も少なくありません。
通常、これらを扱うには手動で文字列をパースする必要がありますが、Response.prototype.formData() を使えば、ブラウザが提供するFormDataオブジェクトとして一瞬で変換できます。これにより、データの抽出や操作が劇的に楽になります。

基礎知識: FormDataとは？

FormDataは、HTMLのフォームデータを効率的に扱うための組み込みオブジェクトです。通常はフォームの値を送信する際に使われますが、APIから受け取ったデータをこの形式に変換することで、キーと値のペアとして簡単に値を読み取ることができるようになります。
Response.prototype.formData() は、Fetch APIのResponseオブジェクトから直接このFormDataを生成できる便利なメソッドです。

実装/解決策: formDataメソッドの使い所

このメソッドはPromiseを返すため、async/await構文と組み合わせて使用するのが一般的です。サーバー側がフォーム形式でデータを返している場合、response.json()ではなく、response.formData()を呼び出すだけで変換が完了します。

サンプルプログラム

以下は、APIからフォーム形式のデータを受け取り、その中の特定の値をコンソールに出力するサンプルコードです。

async function fetchFormData() {
  try {
    // APIへリクエストを送信
    const response = await fetch('https://api.example.com/data');
    
    // レスポンスをFormDataとして解析する
    const formData = await response.formData();
    
    // FormDataから特定のフィールドを取得
    const userName = formData.get('username');
    const userEmail = formData.get('email');
    
    // 取得した値をコンソールで確認
    console.log('ユーザー名:', userName);
    console.log('メールアドレス:', userEmail);
    
    // すべてのキーと値をループで回すことも可能
    for (const [key, value] of formData.entries()) {
      console.log(`${key}: ${value}`);
    }
  } catch (error) {
    console.error('データの取得に失敗しました:', error);
  }
}

fetchFormData();

応用・注意点: 現場で役立つポイント

1. レスポンスヘッダーの確認: このメソッドは、Content-Typeが「multipart/form-data」や「application/x-www-form-urlencoded」である場合に最も威力を発揮します。JSONが返ってくるAPIに対して使用するとエラーになるため、必ずAPIの仕様を確認しましょう。
2. ブラウザの互換性: 主要なモダンブラウザではすべてサポートされていますが、古いブラウザを対象とする場合は注意が必要です。
3. 一回限りの読み込み: Responseオブジェクトのボディは「一度しか読み込めない（ストリーム消費）」という性質があります。一度formData()を呼び出すと、その後にjson()などを呼び出すことはできないため注意してください。

このメソッドを活用して、複雑なデータ処理をシンプルに解決しましょう！