何かが起きたときに、相手のサービスから自分のサーバーへ自動で知らせが届く仕組み。「決済が完了した」などを、こちらから問い合わせずに受け取れる。
Webhook(ウェブフック)とは、あるサービスで出来事が起きたときに、向こうから自動で知らせてくれる仕組みのことです。「決済が完了しました」「メッセージが届きました」といった通知が、あなたのアプリに自動送信されます。
「宅配の不在通知」ならぬ「在宅通知」です。APIが「こちらから電話をかけて聞く」仕組みだとすると、Webhookは「向こうから電話がかかってくる」仕組み。荷物が届くたびに自分から配送センターに電話して確認する(API)のではなく、届いた瞬間にピンポンと知らせてもらう(Webhook)イメージです。
何度も聞きに行く無駄がなく、出来事をリアルタイムに受け取れるのがWebhookの強みです。
初心者がつまずきやすいポイント
Webhookの受け口は世界中に公開されるため、「本当にStripeからの通知か」を署名検証で確かめる処理が必須です。省略すると、偽の「支払い完了」通知を送りつけられる恐れがあります。決済のWebhookでは特に、検証を絶対に飛ばさないこと。
API(エーピーアイ)
プログラム同士が情報をやり取りするための窓口。中の仕組みを知らなくても、決められた形で頼めば決められた形で返ってくる。
CSS(シーエスエス)
Webページの「見た目」を書くための言語。色・文字の大きさ・余白・配置・アニメーションまで、デザインに関わる部分をすべて担当する。構造のHTMLとセットで使う。
GitHub(ギットハブ)
プログラムのコードを保管・共有するためのWebサービス。変更の履歴がすべて残り、いつでも前の状態に戻せる。Vercelと連携すると、コードを送るだけで自動でサイトが更新される。
HTML(エイチティーエムエル)
Webページの「構造」を書くための言語。見出し・段落・画像・リンクなど、ページに何がどの順で置かれるかを定義する。Webページはすべて最終的にHTMLでできている。
JavaScript(ジャバスクリプト)
Webページに「動き」を付けるためのプログラミング言語。ボタンを押したら開く、入力をチェックする、データを取ってきて表示するなど、ページ上のあらゆる動作を担当する。
Next.js(ネクストジェイエス)
Reactをベースにした、Webアプリ開発の人気フレームワーク。画面・ページ切り替え・サーバー処理までひと揃いで作れる。本サイトもNext.jsで動いている。