Webhook（ウェブフック）とは何か？POSTとGETの違いを具体例で分かりやすく解説

「Webhookって何？POSTとGETの違いがよく分からない…」そんな疑問をお持ちのあなたへ。

この記事では、Web開発でよく耳にする「Webhook（ウェブフック）」について、わかりやすく解説しています。

さらに、Webhookでよく使われるHTTPメソッドのPOSTとGETの違いについても、具体例を紹介しています。

この2つの違いを理解することで、Webアプリケーションの開発において、より柔軟な仕組みを構築することができます。

この記事を読めば、あなたもWebhookの概念を理解し、Web開発の幅を広げられるはずです。

Webhookとは何か？
Webhookのメリット
POSTとGETの違い
1. POST
2. GET
POSTのデータ送受信方法
1. POSTのデータ送信方法（APIからデータを取得するなど）
2. POSTのデータ受信方法
Webhookを提供している主なアプリケーション
Webhookを使ったプログラムの具体例

Webhookとは何か？

Webhook（ウェブフック）とは、あるアプリケーションやサービスから別のアプリケーションやサービスに対して、リアルタイムに情報を自動的に送信するための仕組みです。

通常、特定の「イベント」が発生した際に、そのイベントに関するデータを指定されたURLにPOSTリクエストとして送信する形で利用されます。

Webhookのメリット

Webhookを使うことで必要なときに情報を取得することができます。

情報を取得する方法には、5分おきや10分おきなど、定期的にプログラムを走らせて情報がないかを確認するプログラム（ポーリング）もありますが、この方法では、情報がたまっていないときでも情報を取りに行く必要があるため、無駄な処理が発生しサーバーに負荷がかかります。

この点、Webhookの場合は何かのイベントが発生したときのみ処理を実行するので、効率的です。

POSTとGETの違い

POSTもGETも両方ともURL経由で情報を送信する方法です。

それぞれで、送信の方法や送信できる情報量（文字数）、セキュリティの高さなどに違いがあります。

POST

POSTはGETよりも大量のデータ送信する場合や、機密性の高いデータを送信するときに使用する方法です。フォームの送信やデータのアップロードなどに使用されます。

データはリクエストボディに格納され、URLには表示されません。

後述するGETのようにURLの後ろにつけたパラメータ（?以下）の部分も、渡されたデータの中に入っています。

POSTの特徴

URLにデータが表示されないため、セキュリティが高く、より多くのデータを送信できます。
キャッシュされないため、同じリクエストを再度行うと、毎回サーバー側で新しい処理が実行されます。
ファイルや大量のデータ、重要な情報の送信に適しています。

GET

GETは、URLの後ろパラメータ（?）としてデータを送信する方法です。クエリ文字列として送信されます。

（例：https://example.com/search?q=apple）。

GETの特徴

URLにデータが含まれるため、ブックマークが可能でキャッシュされやすい。
データ量に制限がある（ブラウザにより異なりますが、一般的には2048文字以内）。
セキュリティが低め（URLにデータが表示されるため、個人情報などには不適切）。

POSTのデータ送受信方法

POSTを使ってデータを送受信するときは、JSON形式でデータのやり取りをすることが一般的です。

POSTのデータ送信方法（APIからデータを取得するなど）

POSTのデータ送信は、APIからデータを取得する場合などに使用します。Webhookを使ったときに、データを供給するアプリケーション側で使われます。

例えば、GASを使って特定のURLに対してPOSTでデータを送信するときは以下のようになります。

URLに対して、optionでPOSTであることや、データなどを付与してAPIのURLを叩きます。データはJSON.stringify(data)とすることでオブジェクトをJSONに変換しています。

function sendPostRequest() {
  // 送信するデータ
  const data = {
    name: "John Doe",
    email: "john.doe@example.com"
  };

  // リクエストの設定
  const options = {
    method: "post",                       // メソッドをPOSTに設定
    contentType: "application/json",      // データ形式をJSONに指定
    payload: JSON.stringify(data),        // オブジェクトをJSON文字列に変換して送信
    muteHttpExceptions: true              // エラーレスポンスも取得できるように設定
  };

  // POSTリクエストを送信
  const url = "https://example.com/api/user";
  const response = UrlFetchApp.fetch(url, options);

  // レスポンスの処理
  if (response.getResponseCode() === 200) {
    const responseData = JSON.parse(response.getContentText());
    Logger.log("サーバーからのレスポンス: " + responseData);
  } else {
    Logger.log("エラーが発生しました: " + response.getContentText());
  }
}

method: "post"とすることで、POSTリクエストを送信します。
contentType: application/jsonとすることで、JSON形式のデータを送信することを指定します。
payload: JSON.stringify(data)でデータをJSON文字列に変換し、送信内容として設定します。
muteHttpExceptions: trueにすることで、リクエストがエラーだった場合もレスポンスを受け取れます。
UrlFetchApp.fetchの戻り値であるresponseから、getResponseCode()でHTTPステータスコードを取得し、200の場合は正常なレスポンスとして処理します。

POSTのデータ受信方法

POSTでデータを受信するには、専用のURLを発行します。

アプリケーション側でこのURLを叩くときにPOSTでデータを付与します。POSTで送信されたデータはJSON形式になっているので、パースしてオブジェクト形式のデータに変換する必要があります。

例えば、GASの場合はウェブアプリケーションとしてデプロイすることで、プログラムを実行するURLを発行することができます。

このURLがPOSTで叩かれると、doPostというプログラムが自動で走ります。送信されたデータは引数で受け取ります（下記では「e」に格納）

JSON形式のデータをオブジェクト形式に変換する処理はJSON.parse()で行っています。

// POSTリクエストを受信する関数
function doPost(e) {
  // 受け取ったデータをパース
  const requestData = JSON.parse(e.postData.contents);

  // データをログに表示（確認用）
  Logger.log("受信したデータ:", requestData);

  // 受信データの確認（name と emailを取り出す例）
  const name = requestData.name;
  const email = requestData.email;

  // レスポンス用のオブジェクトを作成
  const response = {
    message: "データを受信しました",
    receivedName: name,
    receivedEmail: email
  };

  // JSON形式でレスポンスを返す
  return ContentService.createTextOutput(JSON.stringify(response))
                       .setMimeType(ContentService.MimeType.JSON);
}

doPost(e)：GASの関数で、POSTリクエストが送信されるとdoPostが自動的に呼ばれます。引数eにはリクエストの内容が含まれます。
e.postData.contents：リクエストで送信されたデータが文字列として格納されています。JSON.parseを使ってJavaScriptオブジェクトに変換します。
レスポンスの作成：ContentService.createTextOutputでJSON形式のレスポンスを作成し、setMimeTypeでレスポンスのContent-TypeをJSONに設定します。