Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【ITニュース解説】Building a Webhook Listener with Node.js (Step-by-Step Guide)

2025年09月29日に「Dev.to」が公開したITニュース「Building a Webhook Listener with Node.js (Step-by-Step Guide)」について初心者にもわかりやすく解説しています。

作成日: 更新日:

ITニュース概要

Webhookは、外部サービスからリアルタイムでイベント通知を受け取る仕組みだ。この記事では、Node.jsとExpressを使ってWebhookリスナーを構築する手順を紹介。ローカルテスト(Ngrok)やイベント処理、セキュリティの基本を解説し、様々なサービス連携に役立つ方法を伝える。

ITニュース解説

システムエンジニアを目指す上で、現代のアプリケーション開発においてリアルタイムな情報連携は非常に重要だ。その中心的な役割を担う技術の一つがWebhookである。Webhookを理解し、実際にシンプルなシステムを構築することは、多くのサービス連携の基盤を学ぶ上で非常に役立つだろう。

Webhookとは何か、という点から解説しよう。Webhookは簡単に言えば「HTTPコールバック」と呼ばれるもので、あるサービスで特定のイベント(出来事)が発生した際に、そのイベント情報を自動的に別のアプリケーションにHTTPリクエストとして送信する仕組みを指す。従来のシステム連携では、自分のアプリケーションが定期的に外部サービスに「何か新しい情報はないか?」と問い合わせる「ポーリング」という方法が一般的だった。しかし、ポーリングは常に問い合わせるため無駄な通信が発生しやすく、リアルタイム性に欠ける場合もある。それに対しWebhookは、イベントが発生した時にだけ情報が「プッシュ」されるため、効率的でリアルタイムな連携が可能になるのだ。例えば、オンライン決済サービスStripeから支払い完了通知を受け取ったり、GitHubから新しいコードがプッシュされたアラートを受け取ったり、Slackからメッセージを受信したりといった場面でWebhookが活用されている。

ここでは、Node.jsとExpressというツールを使って、このWebhookからの情報を受け取る「リスナー」を構築する具体的な手順を見ていこう。リスナーとは、簡単に言えば特定のURLで外部からのリクエストを待ち受け、それを受け取ったときに何らかの処理を行うプログラムのことだ。

まず、プロジェクトの準備から始める。Node.jsがインストールされている環境で、新しいプロジェクトフォルダを作成し、その中でNode.jsプロジェクトを初期化する。npm init -yコマンドを実行すると、プロジェクトの基本情報が記述されたpackage.jsonファイルが自動生成される。次に、Webhookリスナーの構築に必要なライブラリをインストールする。具体的には、WebアプリケーションフレームワークのExpressと、HTTPリリクエストのボディ(本文)を解析するためのbody-parserだ。npm install express body-parserコマンドでこれらを導入する。ExpressはWebサーバーを構築するための便利な機能を提供し、body-parserは送られてくるJSON形式などのデータをJavaScriptで扱いやすい形に変換してくれる。

次に、Expressサーバーを構築する。index.jsというファイルを作成し、以下の内容を記述していく。最初に、先ほどインストールしたExpressとbody-parserをプログラム内で使えるように読み込む。次に、Expressアプリケーションのインスタンスを作成し、サーバーが待ち受けるポート番号(通常は3000番や8080番などが使われるが、環境変数で指定することもできる)を設定する。ここで重要なのがapp.use(bodyParser.json());という行だ。これは「ミドルウェア」と呼ばれるもので、サーバーが受け取る全てのリクエストに対し、JSON形式のボディを解析する処理を挟み込む役割を果たす。これにより、Webhookで送られてくるJSONデータをJavaScriptのオブジェクトとして簡単に扱えるようになるのだ。

そして、Webhookからのリクエストを受け取るためのエンドポイントを作成する。app.post('/webhook', ...)という部分がそれにあたる。/webhookというパスに対して、POSTメソッドでリクエストが送られてきた場合に実行される処理を定義している。POSTメソッドは、データをサーバーに送信する際によく使われるHTTPメソッドの一つだ。この処理の中では、受け取ったリクエストのボディ内容をreq.bodyとしてコンソールに出力している。これにより、Webhookがどんな情報を送ってきたのかを確認できる。また、リクエストを受け取ったサービス側は、自分の送った情報が正しく受信されたかどうかを知る必要があるため、処理の最後にはres.status(200).send('Webhook received');という形で、HTTPステータスコード200(OK)とともに簡単なメッセージを返している。これは「正常に受け取りました」という意思表示であり、Webhookを送信したサービスはこれを確認することで安心できる。最後に、app.listen(PORT, ...)で指定したポートでサーバーを起動し、リクエストの待ち受けを開始する。これを実行するには、ターミナルでnode index.jsコマンドを打ち込むだけだ。

サーバーはhttp://localhost:3000で起動するが、このlocalhostは自分のコンピューター内でのみアクセス可能なアドレスだ。外部のサービス(StripeやGitHubなど)は直接localhostにアクセスできない。そこで登場するのがNgrokというツールである。Ngrokは、localhostで動作しているアプリケーションを一時的にインターネット上に公開するためのサービスだ。npx ngrok http 3000というコマンドを実行すると、Ngrokはhttp://localhost:3000に転送される公開URL(例: https://abc123.ngrok.io)を発行してくれる。これで、外部のサービスもその公開URLを通じて、自分のローカルで動いているWebhookリスナーにアクセスできるようになる。

Ngrokで公開URLを取得したら、実際にWebhookをシミュレートしてテストしてみよう。curlというコマンドラインツールを使って、先ほどNgrokが発行した公開URLの/webhookパスへPOSTリクエストを送信する。例えば、curl -X POST https://abc123.ngrok.io/webhook -H "Content-Type: application/json" -d '{"event":"order.created","data":{"id":123,"amount":500}}'のようなコマンドだ。ここで-X POSTPOSTメソッドを使うことを示し、-H "Content-Type: application/json"は送るデータの形式がJSONであることを示している。-dオプションの後ろに続く文字列が、実際に送信するJSONデータだ。このコマンドを実行すると、Ngrok経由でローカルサーバーの/webhookエンドポイントにデータが送信され、サーバーのコンソールには「Webhook received: { event: 'order.created', data: { id: 123, amount: 500 } }」といったログが表示されるはずだ。これで、外部からのWebhookを正常に受信し、内容をログに記録できることが確認できる。

構築したWebhookリスナーを本番環境で使う際には、セキュリティに関する考慮も非常に重要になる。多くのサービスは、送られてくるWebhookのペイロード(データ本体)に「署名」と呼ばれる認証情報を付与している。これは、リクエストが本当にそのサービスから送られたものか、途中で改ざんされていないかを確認するためのものだ。この署名を検証することで、不正なリクエストをブロックし、信頼できるソースからのイベントのみを受け入れるようにできる。また、ログに記録するデータに機密情報を含めない、アクセス制限をかけるといった対策も必要となる。

ここまでで、Node.jsとExpressを使って基本的なWebhookリスナーを構築し、Ngrokを使ってローカル環境でテストする方法を習得した。これにより、StripeやGitHub、SlackなどのAPIと連携するための土台が完成したことになる。今後は、署名検証の実装を強化したり、受け取ったイベント情報に基づいてアプリケーションのビジネスロジックを動かしたり、最終的にはクラウドサービスにデプロイしたりといったステップに進むことで、さらに実用的なシステムを構築できるようになるだろう。

関連コンテンツ

関連IT用語

関連ITニュース