【JavaScript】POSTリクエストとは？仕組みと実装方法を初心者向けにわかりやすく解説

フロントエンド開発•
JavaScript

はじめに

JavaScriptを使ってサーバーとデータのやり取りを行うとき、まずはブラウザが持つ仕組みをしっかり理解することが大切です。
そして、その仕組みの中でPOSTリクエストはとても重要な役割を果たします。
多くの場合、フォームから入力されたデータを送信したり、ユーザーが作成したコンテンツをサーバーに保存するときには、POSTリクエストが活用されることが多いでしょう。

なぜPOSTリクエストが注目されるのかというと、主にデータの送信用途に特化している点が挙げられます。
フォームデータ、JSON形式のデータ、ファイルアップロードなど、様々な場面でPOSTリクエストを使うことができます。
もし「どうやってデータをサーバーへ送ればいいのだろう？」という疑問を感じている場合は、POSTリクエストの仕組みを知ることで、一気に問題解決の道が開けるかもしれません。

本記事では、JavaScriptでPOSTリクエストを行う方法として、XMLHttpRequest、fetch()、axiosなどの手段を取り上げます。
さらに、実務でよくあるデータ送信のシーンと紐付けながら、POSTリクエストの使いどころを具体的に示します。
初心者でも理解しやすい言葉を選んでいますので、気軽に読み進めてみてください。

この記事を読むとわかること

  • POSTリクエストの基本的な仕組み
  • JavaScriptでPOSTリクエストを行う手段と具体的なコード例
  • 実際の開発現場で考えられる活用シーン
  • セキュリティやエラー処理などの注意点

ここで紹介する内容を押さえておくと、初心者でもPOSTリクエストの基礎を理解し、実務へスムーズに応用しやすくなります。

なぜPOSTリクエストが重要なのか

POSTリクエストは、ウェブアプリケーションにおけるデータ送信の基本になります。
特にユーザーが入力した情報をサーバー側で保存するときや、非同期通信を使ってデータベースと連携するときによく利用されます。
ユーザーがフォームに記入した住所や名前を登録する、画像やドキュメントをアップロードするなど、多くの操作がPOSTリクエストを介して行われるでしょう。

この重要性は、現代のウェブアプリが持つ「動的なサービス提供」に密接に関係します。
静的なページしか存在しない時代は、単にHTMLとCSSだけで完結していましたが、今ではユーザーごとにデータを管理したり、ユーザーインタラクションに応じてサーバーと情報をやり取りすることが不可欠です。
その結果、「データを正しく送る」ための手段として、POSTリクエストの存在が不可欠になりました。

一方、GETリクエストを使えばパラメータをURLに含めて送ることも可能です。
しかしURLの長さには制限がありますし、機密情報をURLに載せるとセキュリティ面で問題があります。
そこで安全で汎用的な送信手段としてPOSTが選ばれるわけです。

GETメソッドとの比較

POSTリクエストとよく比較されるのがGETメソッドです。
GETは情報を受け取るためのメソッドで、URLにクエリパラメータを付与してサーバー側へリクエストを送ります。
検索エンジンでキーワードを入力すると、URLに「?q=xxx」のようなクエリが出るのはGETメソッドの典型的な例です。

GETメソッドの利点は、ページ遷移が簡単に共有できることやキャッシュが効きやすい点にあります。
一方で、送信できるデータ量に限度があったり、データがURLに露出するため公開されやすいというデメリットもあります。
たとえば、機密情報や重要データの送信には向いていません。

このようにGETメソッドは「データを取得する」目的に向いており、大きなデータを送るには適していません。
サーバー側で処理するための情報や、データベースに保存すべき情報を送る場合には、POSTメソッドがより安心です。

JavaScriptでPOSTリクエストを扱う方法

XMLHttpRequestを使う方法

JavaScriptで非同期通信を行うもっともオーソドックスな手段として知られているのが、XMLHttpRequestというオブジェクトを使う方法です。
古くから存在している仕組みであり、多くのブラウザで対応しているので互換性が高いと言えるでしょう。
流れとしては、XMLHttpRequestのインスタンスを生成し、リクエストの種類（POSTなど）や送信先のURLを指定、最後にsend()メソッドでデータを送る形になります。

XMLHttpRequestの基本コード例

// XMLHttpRequestでPOSTリクエストを送る例
function sendDataUsingXHR(data) {
  const xhr = new XMLHttpRequest();
  xhr.open("POST", "https://example.com/api/data");
  xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

  // レスポンスが返ってきたときの処理
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log("サーバーからのレスポンス:", xhr.responseText);
    } else {
      console.error("エラーが発生しました:", xhr.status);
    }
  };

  // データを文字列に変換して送信
  xhr.send(JSON.stringify(data));
}

// 使い方の例
const exampleData = { name: "Taro", age: 25 };
sendDataUsingXHR(exampleData);

このコードでは、xhr.open("POST", "https://example.com/api/data");で送信先とメソッドを指定しています。
次にxhr.setRequestHeaderでContent-Typeを設定し、JSON形式で送る準備を行います。
最後にxhr.send(JSON.stringify(data));を呼ぶことで、サーバーへデータを送信します。

このようにXMLHttpRequestを使えば、細かいカスタマイズや古い環境への対応が可能ですが、やや記述量が多く冗長になる傾向があります。

fetch()を使う方法

よりモダンな手法としては、fetch() 関数を使う方法が一般的です。
fetchはPromiseベースで動作し、コードが読みやすくなるため多くの開発者に好まれています。
XMLHttpRequestと同様に、メソッドをPOSTに設定し、ボディに送信データを設定して呼び出します。

fetch()の基本コード例

async function sendDataUsingFetch(data) {
  try {
    const response = await fetch("https://example.com/api/data", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    });

    if (response.ok) {
      const result = await response.text();
      console.log("サーバーからのレスポンス:", result);
    } else {
      console.error("エラーが発生しました:", response.status);
    }
  } catch (error) {
    console.error("ネットワークエラー:", error);
  }
}

const sampleData = { product: "Notebook", price: 1200 };
sendDataUsingFetch(sampleData);

上記の例ではawaitを活用して、非同期処理の結果を受け取りやすくしています。
エラー処理もtry...catchブロックで管理しやすいのがポイントです。
実装面ではfetch()の第一引数にURLを渡し、オプションとしてmethod、headers、bodyを設定するという流れになります。

axiosを使った方法

axiosは、サードパーティ製のライブラリとしてよく使われています。
fetch()と機能は重なる部分も多いですが、クライアントサイドとサーバーサイド（Node.js）の両方で同じインターフェースを使える点や、エラーハンドリングが簡単な点で支持を集めています。
CDNを使って読み込んだり、Node.jsの環境でnpm install axiosして導入するなど、様々な形で利用可能です。

axiosの基本コード例

// 例として、HTML側で<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>を読み込んでいると仮定
async function sendDataUsingAxios(data) {
  try {
    const response = await axios.post("https://example.com/api/data", data);
    console.log("サーバーからのレスポンス:", response.data);
  } catch (error) {
    if (error.response) {
      console.error("サーバーエラー:", error.response.status);
    } else {
      console.error("ネットワークまたはその他のエラー:", error.message);
    }
  }
}

const postData = { user: "Hanako", role: "Editor" };
sendDataUsingAxios(postData);

axios.post()はURLとデータを引数に取るので、fetch()よりもさらに簡潔に書けるという印象を受けるかもしれません。
また、レスポンスがエラーだった場合の処理も分かりやすいでしょう。
一方で追加のライブラリ導入が必要なので、プロジェクトの規模や要件に応じて採用を検討することになります。

具体的な活用シーンとベストプラクティス

フォームデータの送信

よくあるシーンとしては、ユーザーが入力したフォームの内容をサーバーに送るケースです。
たとえば、会員登録フォームやコメント投稿フォームなどが挙げられます。
フォーム要素から取得した入力値をJavaScriptで取り出し、POSTリクエストで送信することで、サーバー側でデータを受け取って保存や処理が可能になります。

フォーム送信のサンプルコード

document.getElementById("submitBtn").addEventListener("click", async (event) => {
  event.preventDefault();
  const nameInput = document.getElementById("name").value;
  const emailInput = document.getElementById("email").value;

  const formData = { name: nameInput, email: emailInput };

  try {
    const response = await fetch("https://example.com/api/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(formData)
    });

    if (response.ok) {
      console.log("登録に成功しました");
    } else {
      console.log("登録に失敗しました:", response.status);
    }
  } catch (error) {
    console.error("通信エラー:", error);
  }
});

ここのポイントは、ブラウザが持つフォーム送信機能を直接使うのではなく、JavaScript側で制御していることです。
こうすることで、送信前に入力チェックを行ったり、複数フィールドの値をまとめてJSON化できるなど、柔軟な対応が可能になります。

JSONデータの送信

POSTリクエストを活用すると、JSON形式でまとめたデータを簡単に送れます。
ウェブアプリケーションでデータをやり取りするときは、JSON形式が事実上の標準になっているので、非常に扱いやすい方法です。
複雑なデータでもオブジェクトにしてまとめられるため、開発者にとっては整理しやすい点が大きなメリットです。

JSON送信のサンプルコード

async function sendJsonData() {
  const data = {
    userId: 1001,
    products: [
      { id: "p-001", quantity: 2 },
      { id: "p-002", quantity: 1 }
    ],
    delivery: { address: "Tokyo", date: "2025-02-15" }
  };

  try {
    const response = await fetch("https://example.com/api/order", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data)
    });
    if (response.ok) {
      console.log("注文情報が送信されました");
    } else {
      console.log("注文送信に失敗しました:", response.status);
    }
  } catch (error) {
    console.error("ネットワークエラー:", error);
  }
}

この例のように、ネストされたオブジェクトや配列を含むデータでも、そのままJSON.stringify()で文字列化して送ることが可能です。
一度に大量の情報をサーバーに渡すときでも、JSON形式を統一すればフロントエンドとバックエンドの連携が楽になります。

ファイルのアップロード

画像やPDFなどのファイルをアップロードする場合でも、POSTリクエストを活用できます。
単にテキストデータを送るだけでなく、複数のファイルをまとめてサーバーに送信することもできます。
フォームの<input type="file">で取得したファイルオブジェクトを、そのままFormDataに添付して送るのが基本的な方法です。

ファイルアップロードのサンプルコード

document.getElementById("uploadBtn").addEventListener("click", async () => {
  const fileInput = document.getElementById("file");
  const formData = new FormData();
  formData.append("uploadFile", fileInput.files[0]);

  try {
    const response = await fetch("https://example.com/api/upload", {
      method: "POST",
      body: formData // Content-Typeは自動で設定される
    });

    if (response.ok) {
      console.log("ファイルのアップロードに成功しました");
    } else {
      console.log("アップロードに失敗しました:", response.status);
    }
  } catch (error) {
    console.error("通信エラー:", error);
  }
});

ここではFormDataという特別なオブジェクトを使ってファイルを送っています。
JSON形式ではなくマルチパートフォームデータとして送られますが、サーバー側で分割してデータを受け取る仕組みになっています。
大きなファイルを扱う場合は、サーバー側のアップロード制限やセキュリティを意識しながら実装を進めると良いでしょう。

POSTリクエストを活用する上での注意点

セキュリティ対策

POSTリクエストを扱う際、まず意識したいのはセキュリティです。
たとえば、CSRF（Cross-Site Request Forgery）対策としてトークンを用意するとか、APIキーを含む認証情報は安全に管理するなどの配慮が必要になります。
また、HTTPSを使わずHTTPのままで重要データを送ると、通信経路でデータが盗み見られる可能性もあります。

データをやり取りする際は、必要以上に機密情報を送らないことも大切です。
バックエンド側でも入力チェックや制限をしっかり行い、送信されてきたデータに不正がないかを検証します。
これらは全て、開発者としては絶対に外せないポイントといえるでしょう。

クレジットカード番号やパスワードなどの重要情報を、暗号化せずに送信するのは非常に危険です。
必ずHTTPSなどの安全な通信経路を使い、サーバー側でも入力検証とセキュリティ対策を徹底しましょう。

エラー処理

POSTリクエストはデータを送るという性質上、サーバー側で何らかの処理が行われます。
その処理が失敗した場合に、どのようにユーザーに知らせるかという点が重要です。
たとえばステータスコードが400番台や500番台の場合には、単にコンソールに出力するだけでなく、ユーザー画面にも「保存に失敗しました」などのメッセージを表示することが望ましいでしょう。

JavaScriptのコードでエラーを捕捉しても、サーバーからのレスポンスを見て何が原因なのかを判断する必要があります。
エラー発生時に具体的なメッセージやステータスコードを確認できるように実装しておくと、トラブルシューティングがしやすくなります。
また、通信が失敗するケース（ネットワークエラー）とサーバーがエラーを返すケースの2パターンを分けて処理することも、運用の現場ではよく行われています。

サーバー側の不具合か、ネットワーク障害か、ユーザー入力のミスかといった原因ごとに処理を分岐させておくことで、ユーザーに適切なフィードバックを返しやすくなります。

POSTリクエストをより深く使いこなすためのポイント

CORSの理解

異なるドメイン間でリソースを共有する際に重要になるのが CORS (Cross-Origin Resource Sharing)という仕組みです。
もしフロントエンドとバックエンドが異なるドメインを使っている場合、POSTリクエストがブロックされることがあります。
これはセキュリティ上の理由によるもので、サーバー側で適切なCORSヘッダを設定し、ブラウザがそれを許可して初めて通信が可能になります。

開発環境ではlocalhost:3000などのポートを使い、APIはlocalhost:8080など別のポートで起動しているケースがあるでしょう。
その場合にもCORSを意識しないと、ブラウザがエラーを起こす可能性があります。
フロントエンドからPOSTリクエストを送るときには、サーバー側がAccess-Control-Allow-Originなどを正しく設定しているかチェックしておきましょう。

JSON以外のデータ形式

POSTリクエストを送るとき、JSONだけが唯一の方法というわけではありません。
XMLやURLエンコード形式（application/x-www-form-urlencoded）など、様々な形式があります。
ただし、近年のウェブ開発においてはJSONが最も広く用いられており、サーバーサイドのフレームワークもJSONとの相性が良いものが多いです。

もし外部サービスのAPIを利用するときには、サービス側が求めるデータ形式を確認する必要があります。
XMLを使う古いAPIや、専用のフォーマットを持つAPIなどが存在する場合、JavaScriptでの送信方法を少しカスタマイズする必要があるかもしれません。

ステートレス通信への理解

HTTP通信はステートレスであるとよく言われます。
これはリクエストごとに接続が完了し、サーバー側が「誰から来たリクエストか」を常に覚えているわけではないという意味です。
POSTリクエストでログイン情報を送ったとしても、次のリクエストでその情報が保持されているとは限りません。
セッションやトークンなどの仕組みで、ユーザーの継続的な認証状態を管理する必要があります。

大きなアプリケーションでは、このステートレスという特性を踏まえて、クライアント側にトークンを保存したり、クッキーを使った認証を行うことで利便性を高めています。
POSTリクエスト自体はあくまで「データを送る」手段なので、アプリケーションとしての流れを考えたときに、どうやってユーザーの状態を追跡するかは別途考慮が必要です。

実務におけるPOSTリクエストの運用例

API設計との連携

実務では、フロントエンドとバックエンドが分離しているケースが増えています。
バックエンド側ではルーティングやコントローラを設定し、POST /api/usersのようなエンドポイントを定義してリクエストを受け付ける形がよく取られます。
フロントエンドのJavaScriptコードは、そのエンドポイントに対してデータを送信するという関係です。

API設計をする際は、どのデータをどのような形式で送るか、どのステータスコードを返すかなど、細かい部分まで決めておくとスムーズに開発が進みます。
また、認証が必要なエンドポイントであれば、POSTリクエストに認証トークンを付与する設計にするなど、セキュリティ面も含めて調整を進めます。
こうした取り決めをAPIドキュメントとしてまとめることが、後々のトラブルを減らす鍵となります。

SPAとの相性

Vue.jsやReactなどのSPA（Single Page Application）フレームワークを使うと、画面遷移なしでデータ通信ができるので、より一層POSTリクエストが活躍します。
ユーザーがボタンを押すたびにデータを送信し、受け取った結果を画面に即時反映するようなインタラクティブな機能が実装できるでしょう。
これにより、ページリロードを必要としない、スムーズなユーザー体験を提供できます。

SPAではルーティングもフロントエンド側で行うため、サーバーとの通信はすべてAPIコールに集約されやすいです。
そのため、POSTリクエストが画面の各所で発生し、送信データの種類も多岐にわたるかもしれません。
設計段階からPOSTリクエストを含めたAPIの呼び出し方をしっかり整理しておくと、メンテナンスしやすい構造を保てます。

バッチ処理やキューイング

さらに大規模な実装例として、ユーザーが投稿したデータをキューに保存し、その後バックエンドでバッチ処理を行うというパターンもあります。
たとえば、画像のアップロードを受け取ったら即座にレスポンスを返し、実際の重い画像処理はバックエンドで並列実行するという流れです。
このようにPOSTリクエストはとりあえずデータを受け取る入り口として活用し、実際の業務ロジックを切り離すことで、ユーザーの待ち時間を短縮できることもあります。

大人数のチーム開発であれば、POSTリクエストの処理を担当するAPI部門と、そのデータを扱うワーカー部門に分かれることもあるでしょう。
連携が増える分だけ、エラーハンドリングやログ取得の仕組みをしっかり整備しておくことが重要になります。

パフォーマンスとスケーラビリティの視点

ウェブアプリが成長してユーザー数が増えてくると、POSTリクエストの数も比例して増えていきます。
サーバー側で一度に大量のリクエストを処理しなければならないケースでは、負荷が集中する可能性があります。
そのため、サーバーサイドのアーキテクチャを検討し、ロードバランサーや分散処理を導入することが必要となる場合があります。

また、フロントエンド側でも、不要なタイミングでPOSTリクエストを何度も送らないように工夫が求められます。
たとえばユーザーが連続で送信ボタンを押してしまうことを防ぐために、送信ボタンを二重クリックできないようにする工夫や、入力内容に変更がなければリクエストを送らないようにするなどの対応も考えられます。

大量のデータをPOSTリクエストで送る場合は、データのバッチ分割を検討すると良いでしょう。
一度に巨大なデータを送ると、サーバーのメモリを圧迫したり、ネットワーク帯域を占有してしまいます。
ファイルアップロードなどでも、チャンク単位で分割してアップロードし、サーバーで結合する方式が用いられる場合があります。

エンタープライズシステムでの事例

大企業のシステムや金融業界など、高いセキュリティと信頼性が求められる現場でも、POSTリクエストは定番の方法です。
顧客情報や取引データなど、機密性の高い情報をやり取りするため、HTTPSの利用や堅牢な認証手順が標準となっています。
さらに、監査ログを残すために、誰がいつどの内容をPOSTしたのかを詳細に記録する仕組みが導入されることも多いでしょう。

そういったシステムでは、フロントエンドでデータを送信する際に、必ず認証トークンを付けてアクセス制限を行います。
トークンの有効期限や署名を細かくチェックし、期限が切れたら再ログインを促すなど、セキュリティ面が厳密に管理されています。
そのため、実装の手間は増えますが、POSTリクエストの基本的な流れ自体は変わりません。
セキュアであるかどうかは、結局のところ暗号化と認証・認可の仕組みが鍵を握るのです。

トラブルシューティングのヒント

POSTリクエストで困りがちなトラブルには、主に以下のようなものがあります。

  • CORSエラーが発生してリクエストがブロックされる
  • サーバー側がPOSTデータを正常に受け取れていない（Content-Typeの不一致など）
  • ネットワーク障害やタイムアウトでリクエストが中断される
  • サーバーログを見ても原因がわからない

こうしたトラブルを対処する際は、まずブラウザのデベロッパーツールで送信したヘッダやレスポンスを確認してみるのが早いです。
Content-Typeがあっているか、必要な認証トークンをヘッダに載せているかなどを細かくチェックします。
サーバー側でもログやリクエストボディの内容を確認できる仕組みを用意しておけば、どの段階で問題が起きているのかを素早く突き止められます。

今後の展開とまとめた視点

Web技術は日進月歩ですが、POSTリクエストという仕組み自体は長年の標準として使われてきました。
これは将来的にも大きく変わることがないと考えられます。
ただし、GraphQLやその他のAPIスタイルでは、POSTに一括してクエリを含めたりするケースも増えてきました。
いずれにしても、データを送信するメカニズムを理解しておくことは、Webエンジニアにとって欠かせない技術基盤だといえます。

まとめ

ここまで、JavaScriptでのPOSTリクエストを中心に解説してきました。
POSTリクエストはデータをサーバーへ送る最も基本的な方法であり、実務でもフォーム送信やファイルアップロード、JSONデータのやり取りなど、多くのシーンで使われています。
初心者の方が覚えておくべきポイントを整理すると、以下のようになります。

  • 用途の違い: データの取得にはGET、送信にはPOSTを使い分ける
  • メソッドの書き方: XMLHttpRequest、fetch()、axiosそれぞれの書き方を理解する
  • セキュリティ: HTTPSを使い、CSRFトークンや認証トークンなどを適切に扱う
  • エラー対応: ステータスコードとレスポンス内容をチェックし、エラー時のメッセージ表示を考慮する
  • 実務連携: API設計やCORS、セッション管理など、周辺の仕組みも合わせて理解する

POSTリクエストはウェブアプリケーションの基本です。
丁寧に仕組みを理解した上で実装すれば、様々な機能を安心して組み込めるようになるでしょう。
実際にコードを書いてみて、自分のアプリケーションが正しくサーバーとやり取りできるかどうかを確かめながら、ぜひ学習を深めてみてください。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説