ゆめさくコード

Webhook

luagate/webhook-introWebhook入門20 枚ネットワーク
スライド103触れる図解124レッスンの導入6

上から下へ、全 20 枚そのまま並べています。

発表モードで開く

Webhook入門

Webhook

サービス同士が自動で知らせ合うしくみ

1
1

目次

今日の流れ

1. Webhookって何のためにあるの？

2. ポーリングとの違い

3. しくみ — イベントが起きたら通知が飛ぶ

4. 受け取り側の実装と注意点

5. まとめと振り返り

2
2
Webhook入門 - イントロ

今日のゴール

この時間で身につけてほしいことです。

  • Webhookが「出来事を自動で知らせる仕組み」だと分かる
  • ポーリングとの違いをイメージできる
  • 通知がどこからどこへ飛ぶか説明できる
  • 受け取り側で何を用意すればいいか分かる
  • 実際の利用例を思い浮かべられる
10
3
Webhook入門 - イントロ

Webhook とは

何かが起きたとき、相手のサーバーへ自動で知らせを送る仕組みです。

Webhook（ウェブフック）

あるサービスで出来事（イベント）が発生したとき、あらかじめ登録されたURLへ自動でデータを送りつける通知の仕組み。「逆向きのAPI」とも言われる。

・イベントが起きた瞬間に通知が飛ぶ

・送る相手のURL（受け口）を事前に登録しておく

・通知の中身はJSONで送られることが多い

・こちらから問い合わせなくても向こうから届く

11
4
Webhook入門 - イントロ

Webhook ＝ 宅配の不在通知に似ている

出来事が起きたら自動で知らせが届く、という点で不在通知に似ています。

出来事（イベント）
  • 荷物が届いた
  • 支払いが完了した など
通知（Webhook）
  • 登録した先へ自動で送る
  • 「起きましたよ」と知らせる
受け取り側
  • 通知を受けて次の処理をする
  • 在宅していなくても後で気づける
12
5
Webhook入門 - イントロ

どんなときに使われている？

Webhookは、サービス連携の裏側で広く使われています。

  • 決済が完了したらアプリに通知して注文を確定する
  • GitHubにpushしたら自動でデプロイが走る
  • フォーム送信をチャットツールに自動投稿する
  • 商品が発送されたらユーザーにメールを送る
  • 外部サービスの状態変化を自分のシステムに反映する
13
6

Webhook入門 - ポーリング比較

2

第2部 ポーリングとの違い

聞きに行くか、教えてもらうか

20
7
Webhook入門 - ポーリング比較

ポーリング と Webhook

・「変化がないか何度も確認する」か「変化があったら知らせてもらう」かの違いです。

ポーリング（聞きに行く）

  • 定期的に「まだ？」と確認しに行く
  • 変化がなくても問い合わせが発生する
  • 間隔が長いと気づくのが遅れる
  • 間隔が短いと無駄な通信が増える
  • サーバーにも負荷がかかりやすい

Webhook（教えてもらう）

  • 変化が起きた時だけ通知が来る
  • 無駄な問い合わせが発生しない
  • ほぼリアルタイムで気づける
  • 通信量を抑えられる
  • 受け口を用意しておく必要がある
21
8
Webhook入門 - ポーリング比較

イベント駆動という考え方

Webhookは「出来事をきっかけに動く」という発想に基づいています。

イベント駆動（Event-Driven）

何かの出来事（イベント）が起きたことをきっかけに、自動で次の処理を動かす設計の考え方。Webhookはこれをサービス間で実現する代表例。

・「いつ起きるか分からないこと」に向いている

・起きた時だけ動くので無駄が少ない

・複数のサービスをゆるくつなげられる

・通知の取りこぼし対策は別途必要

22
9

Webhook入門 - しくみ

3

第3部 しくみ

イベントが起きたら通知が飛ぶ

30
10
Webhook入門 - しくみ

通知が届くまでの流れ

送る側で出来事が起きてから、受け取り側が処理するまでの流れです。

1. 受け口を登録

通知を受け取るURLを送る側のサービスに登録する

2. イベント発生

決済完了などの出来事が送る側で起きる

3. 通知を送信

送る側が登録URLへデータ（JSON）を送る

4. 受けて処理

受け取り側が中身を読んで次の処理を実行する

31
11
Webhook入門 - しくみ

届く通知の中身（例）

・通知はこんなJSONで届きます。何のイベントか、関連するデータは何かが入っています。

json
{
  "event": "payment.succeeded",
  "created_at": "2026-06-22T10:00:00Z",
  "data": {
    "order_id": "ord_12345",
    "amount": 4980,
    "currency": "JPY",
    "customer": "taro@example.com"
  }
}
32
12
Webhook入門 - しくみ

受け取り側の実装（例）

・受け口は「POSTを受けて中身を読む」シンプルなエンドポイントです。受けたらすぐ200を返すのがコツです。

javascript
// 通知を受け取るエンドポイント
app.post("/webhook", (req, res) => {
  const event = req.body;

  if (event.event === "payment.succeeded") {
    // 注文を確定するなどの処理
    confirmOrder(event.data.order_id);
  }

  // 受け取れたことをすぐ伝える
  res.status(200).send("ok");
});
33
13

Webhook入門 - 注意点

4

第4部 受け取り側の注意点

安全に・取りこぼさず受ける

40
14
Webhook入門 - 注意点

気をつけたい3つのポイント

Webhookを受け取るときは、なりすましと取りこぼし対策が重要です。

本物か確認する
  • 署名（シークレット）で送信元を検証
  • 誰でも叩けるURLなので偽通知に注意
  • 検証に失敗したら拒否する
重複に備える
  • 同じ通知が2回届くことがある
  • イベントIDで処理済みかを判定
  • 二重処理を防ぐ
すぐ応答する
  • 重い処理は後回しにする
  • まず200を返す
  • 遅いと再送されることがある
41
15
Webhook入門 - 注意点

Webhook と API のちがい

どちらもデータをやり取りしますが、きっかけと向きが逆です。

API（リクエスト型）
Webhook（通知型）

きっかけ

こちらが必要な時に呼ぶ

向こうで出来事が起きた時

通信の向き

自分 → 相手へ問い合わせ

相手 → 自分へ通知

得意なこと

欲しいデータを今すぐ取る

変化をすぐ知る

42
16
Webhook入門 - まとめ
クイズ

振り返りクイズ

今日の内容を確認しましょう。

Webhookがポーリングより優れている主な点はどれ？

A
必ず通信速度が速くなる
B
変化が起きた時だけ通知が来るので無駄が少ない
C
データが暗号化される
D
プログラムが不要になる
50
17
Webhook入門 - まとめ
答え

振り返りクイズ 解答

Webhookがポーリングより優れている主な点はどれ？

A
必ず通信速度が速くなる
B
変化が起きた時だけ通知が来るので無駄が少ない
C
データが暗号化される
D
プログラムが不要になる

Webhookは出来事が起きた瞬間だけ通知が飛ぶので、何度も問い合わせるポーリングに比べて無駄な通信が少なく、気づくのも早いのが利点です。暗号化や速度の保証とは別の話です。

51
18
Webhook入門 - まとめ

質疑・次回予告

今日のまとめと、次に学ぶテーマです。質問があればここで受け付けます。

今日のおさらい
  • Webhookは出来事を自動で知らせる仕組み
  • ポーリングと違い変化時だけ届く
  • 署名検証と重複対策が大事
次回予告
  • GraphQL 〜欲しいデータだけ取る〜
  • RESTとは違うAPIの形を学ぶ
52
19
"

Webhookは「出来事が起きたら、向こうから自動で知らせてくれる仕組み」。聞きに行くのではなく教えてもらう。この発想が分かると、サービス連携の設計がぐっと軽くなります。

— Webhook入門

53
20