Webhook

ウェブフック

Webhook を分かりやすく

「Webhook」って聞いたことありますか？初めて聞いた時は「Webフック、なんだそれ？釣りでもするの？」って思ったんじゃないですか？でも、大丈夫、ここでしっかりとWebhookの役割を分かりやすく説明しますからね。

まず、Webhookとは、一言で言うと「特定のイベントが起きたときに自動的に通知を送るシステム」のことです。これはね、例えばGitHubやSlackなどのサービスでよく使われるんです。例えば、GitHubで誰かが新しいコードをプッシュしたとき、Webhookを使ってその情報を他のサービスに自動的に通知することができるんですよ。めっちゃ便利なんですよ！

さて、ここで例え話を使って、もう少し分かりやすく説明してみましょう。

あなたが郵便局の郵便配達人だと想像してみてください。通常、郵便を配達する時は、人々が郵便を送りたいと思ったときに郵便局に来て、郵便を手渡しますよね。それから、その郵便があなたの手元に渡され、受取人の元へ配達されます。この時、郵便の送り主から受取人への情報の流れは「プル」方式と言えます。

でも、Webhookの場合は「プッシュ」方式です。つまり、郵便の送り主が郵便を送りたいと思った瞬間に、すぐにあなたのもとへ郵便が送られてくるというイメージです。そして、その郵便（情報）を受け取ったあなた（サーバー）が、すぐに受取人（他のサービス）へ配達します。

このように、Webhookは情報をリアルタイムで伝えるためのシステムなんです。だから、「そもそもこれいつ使うん？」って思いますよね。それは、「特定のイベントが発生した時に、それをすぐに知りたい」という場合に使います。例えば、GitHubでコードが更新された時や、サーバーにエラーが発生した時などですね。

そんなわけで、Webhookはイベント駆動型のアプリケーションを作るときには、めちゃくちゃ便利なツールなんです。だいぶヤバいやつですよね〜。ここまで大丈夫ですか？

結論

Webhookは、特定のイベントが発生した際に HTTP POST リクエストとして送信される、アプリケーション間での非同期通信を実現する手段です。このイベントは一般的にはデータの更新や新しいユーザーの登録など、アプリケーションの状態に変化があったときに発生します。

Webhookを利用することで、一つのアプリケーションの変化をリアルタイムに別のアプリケーションに伝えることが可能になります。これにより、異なるアプリケーション間でのデータの同期や、特定のイベントに基づく自動化されたタスクのトリガーなど、多岐にわたるシナリオを効率的に実現することができます。

Webhook を使うメリット

リアルタイム性

Webhookはイベントが発生した瞬間に情報を送信するため、データの同期や通知のタイミングなどをリアルタイムに保つことができます。これは、定期的にポーリングを行うよりも効率的であり、リソースの節約にもつながります。

柔軟性

Webhookは送信されるイベントの種類や送信先、送信データの形式などをカスタマイズすることが可能で、これにより様々な用途に合わせて利用することができます。

自動化の促進

Webhookは特定のイベントをトリガーとして自動的に動作するため、手動での操作を必要とせず、作業の自動化を促進します。

Webhook を実装

Next.js と TypeScript を用いた Webhook の受け取りサンプルを以下に示します。このコードでは、API ルート /api/webhook に POST リクエストが来た時に、その内容をコンソールに表示します。

import { NextApiRequest, NextApiResponse } from 'next'

type WebhookEvent = {
  event: string
  data: any
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method === 'POST') {
    const webhookEvent: WebhookEvent = req.body
    console.log('Received webhook event:', webhookEvent)

    res.status(200).json({ message: 'Webhook event received.' })
  } else {
    res.setHeader('Allow', ['POST'])
    res.status(405).json({ message: `Method ${req.method} is not allowed.` })
  }
}

このコードは、Next.jsのAPI Routes機能を利用しています。API Routesはサーバーサイドのルーティングを提供し、APIエンドポイントの作成を容易にします。特に、Next.jsとJamstackアーキテクチャを組み合わせることで、サーバーレス関数としてこのWebhookハンドラをデプロイすることができます。

ここでは、handler関数がエクスポートされ、この関数がNext.jsによってHTTPリクエストのハンドラとして使用されます。関数はNextApiRequestとNextApiResponseの2つの引数を取り、それぞれHTTPリクエストとレスポンスを表します。

ifブロック内では、リクエストメソッドがPOSTであることを確認し、その後リクエストボディをWebhookEvent型として扱います。リクエストボディの内容はコンソールに表示され、レスポンスとしてステータスコード200とメッセージをクライアントに送り返します。

elseブロック内では、リクエストメソッドがPOSTでない場合に対応します。この場合、ヘッダーAllowにPOSTを設定し、クライアントにPOSTメソッドのみ許可されていることを伝え、ステータスコード405とエラーメッセージを送り返します。

これにより、WebhookのPOSTリクエストを受け取り、その内容を処理する基本的なサーバーサイドのエンドポイントが完成します。このサンプルをベースに、受け取ったWebhookイベントに基づいて独自のロジックを追加することが可能です。

Next.js を学ぶ一覧へ