Webサイトにアクセスした利用者は、実際のアプリサーバーへ直接つながっているように見えます。しかし裏側では、リバースプロキシが入口でリクエストを受け、適切な内部サーバーへ渡していることがあります。

リバースプロキシは、Webサービスの入口に立つ受付です。利用者からは受付だけが見え、奥にある複数のサーバーを直接意識しません。

この記事では、リバースプロキシの意味、フォワードプロキシとの違い、Webサーバーの前に置く理由、502/504エラーを見るときの考え方を初心者向けに整理します。

リバースプロキシはWebサーバー前の受付

MDNでは、プロキシサーバーをネットワークの間に入る中間のプログラムやコンピューターとして説明し、その中でリバースプロキシはインターネットからのリクエストを受け取り、内部ネットワークのサーバーへ転送するものとして整理されています。

つまりリバースプロキシは、利用者と内部サーバーの間に立ちます。利用者は https://example.com へアクセスし、リバースプロキシはその裏側で app:8080 や api:9000 のような内部サーバーへ中継します。

次の図では、リバースプロキシをWebサービスの受付として見てください。ブラウザ、受付、内部サーバーの3者を分けると役割が理解しやすくなります。

フォワードプロキシとの違い

プロキシには、フォワードプロキシとリバースプロキシがあります。違いは、誰の代わりに動くかです。

フォワードプロキシは、利用者側の代理としてインターネットへアクセスします。たとえば社内PCが外部サイトを見るときに、社内プロキシを経由するような構成です。

一方、リバースプロキシはサーバー側の代理です。インターネット上の利用者から見える入口になり、奥にあるWebサーバーやアプリサーバーへリクエストを渡します。

次の図では、プロキシが利用者側にいるのか、Webサイト側にいるのかを見てください。ここを間違えなければ、用語の混乱はかなり減ります。

1つの入口から複数サーバーへ振り分ける

リバースプロキシは、1つのURLを入口にして、裏側の複数サーバーへリクエストを振り分けられます。たとえば /app はWeb画面、/api はAPIサーバー、/static は画像やCSSのサーバーへ送る、といった構成です。

NGINXのリバースプロキシ設定でも、受け取ったリクエストを別のサーバーへ渡すために proxy_pass のような設定を使います。これは、入口で受けて、奥の処理先へ渡す代表的な考え方です。

次の図では、利用者には1つのURLだけが見えていても、裏側ではリクエストの行き先が分かれている様子を見てください。

location /api/ {
    proxy_pass http://api_server:9000;
}

location /app/ {
    proxy_pass http://app_server:8080;
}

リバースプロキシを前に置く理由

リバースプロキシは、単にリクエストを中継するだけではありません。Webサービスの入口に置くことで、HTTPSの処理、セキュリティ対策、キャッシュ、負荷分散、ログ集約などをまとめて扱いやすくなります。

Cloudflareの解説でも、リバースプロキシはWebサーバーの前に置かれ、クライアントからのリクエストを中継する存在として説明されています。CDNやWAFのような仕組みも、利用者とオリジンサーバーの間に立つという意味ではリバースプロキシ的に働きます。

次の図では、リバースプロキシを前に置く理由をアイコンで見てください。受付、警備、案内、記録係のような複数の役割を持つと考えると分かりやすいです。

• HTTPS通信の入口をまとめる
• WAFやアクセス制御で攻撃を手前で止める
• キャッシュで同じ応答を速く返す
• 複数のアプリサーバーへ負荷を分散する
• 内部サーバーの構成を外から見えにくくする
• 入口でアクセスログを集約する

502・504エラーを見るときの考え方

リバースプロキシを使う構成では、502 Bad Gatewayや504 Gateway Timeoutを見ることがあります。これは、利用者のブラウザとリバースプロキシの間だけでなく、リバースプロキシと内部サーバーの間も確認する必要があるという合図です。

502は、入口のプロキシが奥のサーバーから有効な応答を得られなかったときに出ることがあります。504は、奥のサーバーからの応答が遅すぎる、または返ってこないときに見ることがあります。

次の図では、どこで詰まっているかを分けて見てください。リバースプロキシは動いているが、奥のアプリサーバーが止まっている、というケースもあります。

実際の配置イメージ

実際のWebサービスでは、DNS、CDN、WAF、リバースプロキシ、アプリサーバー、DBが段階的につながることがあります。すべてのサービスがこの構成になるわけではありませんが、外部と内部の境界にリバースプロキシが置かれることはよくあります。

次の図では、利用者のリクエストが外側から内側へ進む流れを見てください。リバースプロキシは、アプリの手前で入口を整理する位置にあります。

リバースプロキシでよくある誤解

リバースプロキシは、Webサーバーそのものではありません。Webサーバーとして静的ファイルを返すこともありますが、用語としては、利用者からのリクエストを内部サーバーへ中継する入口の役割を指します。

また、リバースプロキシを置くだけで安全になるわけでもありません。公開範囲、転送先、ヘッダー、TLS証明書、タイムアウト、ログ、WAF設定などを正しく設計する必要があります。

さらに、ロードバランサーやCDNと役割が重なることもあります。実際の製品では、リバースプロキシ、ロードバランシング、キャッシュ、WAFが1つのサービスにまとまっていることもあります。

既存記事とあわせて読む順番

リバースプロキシは、HTTP、URL、DNS、Web API、CORSの理解とつながっています。先に通信の基本用語を押さえると、どこでリクエストが中継されるのかを追いやすくなります。

• HTTPとは？HTTPSとは？
• DNSとは何か？
• APIとは？APIとWeb APIの違い
• CORSとは？Access-Control-Allow-Originの意味
• Webhookとは？APIとの違い

公式情報と確認先

仕様や実装で確認する場合は、MDNのプロキシ解説、NGINXのReverse Proxyドキュメント、Cloudflareのリバースプロキシ解説を確認します。製品ごとに設定名や挙動は異なるため、実装時は使う製品の公式ドキュメントを見てください。

• MDN: Proxy server
• MDN: Proxy servers and tunneling
• NGINX Reverse Proxy
• Cloudflare: What is a reverse proxy?

まとめ

リバースプロキシとは、利用者からのリクエストをWebサーバーの前で受け取り、内部サーバーへ中継する仕組みです。

• リバースプロキシはWebサイト側の入口として動く
• フォワードプロキシは利用者側、リバースプロキシはサーバー側の代理
• 1つのURLから複数の内部サーバーへ振り分けられる
• TLS終端、防御、キャッシュ、負荷分散、ログ集約に使われる
• 502や504では、プロキシと内部サーバーを分けて確認する

リバースプロキシを理解すると、Webサービスの入口、CDN、WAF、ロードバランサー、502/504エラーの見方がつながります。まずは「Webサーバーの前に置く受付」として押さえましょう。

たとえば、GitHubでコードがpushされたらCIを起動する、Stripeで決済が完了したら自社システムの注文状態を更新する、Bitbucketでリポジトリに変更があったら外部サーバーへ知らせる、といった場面で使われます。

Webhookは、こちらから何度も確認しに行く仕組みではありません。相手のサービス側で何かが起きたら、通知がこちらへ届く仕組みです。

この記事では、Webhookの意味、APIとの違い、HTTP POSTで通知が届く流れ、受信側で注意すべきセキュリティと再送対策を、IT用語解説として初心者向けに整理します。

Webhookはイベント通知の仕組み

Webhookは、イベントをきっかけに外部サーバーへデータを届ける仕組みです。ここでいうイベントとは、決済完了、コードのpush、課題の作成、コメント投稿、ファイル更新など、サービス内で起きた出来事のことです。

GitHub Docsでは、Webhookを使うと、ソフトウェアシステムで発生したイベントを購読し、そのイベントが起きたときにサーバーへデータ配信を自動で受け取れると説明されています。つまり、Webhookは「イベントが起きたら通知してもらう」ための入口です。

次の図では、外部サービス、Webhook、自社サーバーの関係を見てください。イベントが配達レーンを通って自社サーバーへ届くイメージで捉えると、APIとの違いが理解しやすくなります。

WebhookとAPIの違い

APIは、こちらから相手のサーバーへリクエストを送り、必要なデータを取りに行く仕組みとして使われることが多いです。一方Webhookは、相手のサービス側でイベントが起きたとき、相手からこちらのURLへ通知が送られます。

この違いは、ニュースを何度も見に行くか、速報通知を受け取るかの違いに近いです。APIポーリングは定期的に見に行く方法、Webhookは変化が起きたときに届く方法です。

次の比較図では、APIポーリングとWebhookの違いを見てください。どちらが優れているかではなく、必要なタイミングと用途が違います。

Webhookを構成する4つの要素

Webhookは、単にURLを登録するだけの仕組みではありません。実務では、イベント、送信先URL、HTTP POST、ペイロードをセットで考えます。さらに、送信元が本物か確認するための署名も重要です。

次の図では、Webhookを構成する要素を分けて見てください。最初は「何が起きたか」「どこへ届くか」「どんなデータが届くか」の3点を押さえれば十分です。

ペイロードとは、Webhookで送られてくるデータ本体です。多くの場合、JSON形式でイベントの種類、発生時刻、対象データのID、関連オブジェクトなどが含まれます。

POST /webhook/github HTTP/1.1
Content-Type: application/json
X-GitHub-Event: push
X-Hub-Signature-256: sha256=...

{
  "ref": "refs/heads/main",
  "repository": {
    "name": "sample-app"
  }
}

Webhookの処理フロー

Webhookを使うには、まず通知を受け取るURLを外部サービス側に登録します。その後、購読したイベントが発生すると、外部サービスがそのURLへHTTPリクエストを送ります。受信側のサーバーは署名などを確認し、必要な処理を行い、成功したことをHTTPステータスで返します。

次の図では、登録から2xx応答までの流れを見てください。Webhookは受け取った後の処理だけでなく、すばやく応答する設計も重要です。

Stripeの公式ドキュメントでも、Webhook endpointは複雑な処理でタイムアウトする前に、成功を示す2xxステータスをすばやく返すことが推奨されています。重い処理はキューへ入れ、あとで非同期に実行する設計にすると扱いやすくなります。

Webhookの代表的な使い道

Webhookは、別のサービスで起きた出来事を自社システムに反映したいときに使います。単なる通知だけでなく、CI/CD、決済、チャット通知、監査ログ、外部ツール連携などにも使われます。

• GitHubでpushされたらCI/CDパイプラインを起動する
• 決済サービスで支払いが完了したら注文ステータスを更新する
• 問い合わせフォーム送信後にSlackへ通知する
• JiraやBitbucketの変更を外部システムへ連携する
• 監査ログやセキュリティイベントを別ツールへ送る

GitHub Docsでは、CIパイプラインの起動、コラボレーションツールへの通知、外部課題管理ツールの更新、本番環境へのデプロイ、監査ログ記録などがWebhookの利用例として挙げられています。

失敗時の再送と重複に注意する

Webhookは便利ですが、ネットワーク越しの通知なので失敗することがあります。受信側がタイムアウトした、5xxを返した、ネットワークが一時的に不安定だった、といった理由で、同じイベントが再送されることがあります。

次の図では、失敗、再送、重複対策の流れを見てください。Webhookは「必ず1回だけ届く」と決めつけず、同じイベントが複数回届いても壊れないように作るのが実務では重要です。

重複に強い処理を、冪等性のある処理と呼ぶことがあります。冪等とは、同じ操作を複数回実行しても結果が変わらない性質です。たとえば、同じ決済完了イベントを2回受け取っても、注文を2重に発送しないようにする必要があります。

安全に受け取るためのポイント

Webhook endpointは、外部サービスからHTTPリクエストを受ける入口です。そのため、ただURLを公開するだけでなく、本物のサービスから届いた通知か、改ざんされていないか、失敗したときに追跡できるかを確認します。

次の図では、Webhookを安全に受け取るためのチェックポイントを見てください。特に、署名検証、HTTPS、すばやい2xx応答、ログ、イベント選択、重複対策は最初から設計に入れるべきです。

Stripeの公式ドキュメントでは、Webhookが本当にStripeから送られたものか確認するために署名検証を行うことが推奨されています。GitHubにもWebhook deliveryの検証に関する公式ガイドがあります。どのサービスでも、署名やsecretの扱いは公式ドキュメントに従うのが安全です。

• 署名やsecretを検証し、なりすましを防ぐ
• Webhook endpointはHTTPSで公開する
• 受信後はできるだけ早く2xxを返す
• 重い処理はキューや非同期処理へ回す
• event_idなどで重複処理を防ぐ
• 必要なイベントだけ購読する
• 失敗時に追えるようログと監視を残す

Webhookでよくある誤解

WebhookはAPIの一種として説明されることもありますが、通常のAPI呼び出しとは向きが違います。自社システムが外部APIへ取りに行くのではなく、外部サービスが自社の受信URLへ送ってきます。

また、Webhookを登録したからといって、自動的に何でも安全になるわけではありません。受信URLが公開されるため、署名検証やsecret管理、再送対策、ログ確認が必要です。

さらに、Webhookはリアルタイムに近い通知には向いていますが、最終的な正しさを確認したい場合は、必要に応じてAPIで最新状態を取り直す設計も検討します。決済や権限変更など重要な処理では、Webhookだけを盲信しないことが大切です。

既存記事とあわせて読む順番

Webhookは、API、HTTP、URL、CORS、非同期処理の理解とつながっています。先にHTTPリクエストやWeb APIの基本を押さえると、Webhookの受信処理が読みやすくなります。

• APIとは？APIとWeb APIの違い
• REST APIとは何か？
• HTTPとは？HTTPSとは？
• 【JavaScript】fetch APIとは？GETとPOSTの使い方
• 【JavaScript】CORSとは？Access-Control-Allow-Originの意味

公式情報と確認先

Webhookはサービスごとにイベント名、ペイロード、署名ヘッダー、再送仕様が違います。実装時は、必ず利用するサービスの公式ドキュメントで確認します。

• GitHub Docs: About webhooks
• GitHub Docs: Webhook events and payloads
• Stripe Docs: Webhooks
• Bitbucket Cloud: Manage webhooks

まとめ

Webhookとは、外部サービスでイベントが起きたときに、あらかじめ指定したURLへHTTPリクエストで通知を送る仕組みです。

• Webhookは、イベント発生時に通知が届く仕組み
• APIポーリングは取りに行く、Webhookは届く
• 基本要素はイベント、送信先URL、HTTP POST、ペイロード
• 受信側は署名検証、HTTPS、2xx応答、ログ、重複対策を設計する
• 実装時はサービスごとの公式ドキュメントでイベント名と署名仕様を確認する

Webhookを理解すると、API連携、決済連携、CI/CD、通知システムの仕組みが一段読みやすくなります。まずは「イベントが起きたら指定URLへ届く通知」として押さえましょう。

たとえば、古い記事URLを開いたら新しい記事URLへ移動する、http://で開いたらhttps://へ切り替わる、といった場面で使われます。

リダイレクトは、Webサイト上の「移転しました。新しい住所はこちらです」という案内板のようなものです。

この記事では、リダイレクトの意味、HTTPでURLが切り替わる仕組み、301・302・307・308の違い、よくある用途、ループやチェーンの注意点を初心者向けに整理します。

リダイレクトは新しいURLへの案内

リダイレクトは、旧URLや一時的に使えないURLへアクセスした利用者を、別のURLへ案内するために使います。ブラウザの画面上では、気づかないうちにアドレスバーのURLが変わっていることがあります。

MDNでは、URL redirectionはページやWebアプリなどに複数のURLを与える技術で、HTTPにはこのための特別なレスポンスがあると説明されています。まずは「古い住所に来た人を新しい住所へ案内する仕組み」と考えると理解しやすいです。

次の図では、古いURLに来た利用者が新しいURLへ案内される様子を見てください。今回は、単なる箱ではなく、Webサイトの移転案内としてイメージ化しています。

HTTPリダイレクトの仕組み

HTTPリダイレクトでは、サーバーが3xx系のステータスコードとLocationヘッダーを返します。ブラウザはそのレスポンスを受け取ると、Locationに書かれた新しいURLを開き直します。

次の図では、ブラウザが旧URLを開き、サーバーが移動先を返し、ブラウザが新URLを開く流れを確認してください。リダイレクトの中心は、3xxステータスコードとLocationヘッダーです。

HTTP/1.1 301 Moved Permanently
Location: https://example.com/new-page

HTTPの基本はHTTPとは？HTTPSとは？、URLの基本はURLとは？で確認できます。

301・302・307・308の違い

リダイレクトでよく見るのが、301、302、307、308です。大きく見ると、301と308は恒久的な移動、302と307は一時的な移動です。さらに、307と308はHTTPメソッドやリクエスト本文を変えない、という点が重要です。

次の図では、リダイレクトの種類を道路標識として見てください。「ずっと移転」なのか「一時的な迂回」なのかで、使うコードが変わります。

通常のWebページ閲覧では301と302をまず押さえれば十分です。フォーム送信やAPIのようにGET以外のリクエストが関係する場合は、307や308の意味が重要になります。

リダイレクトが使われる場面

リダイレクトは、URL変更だけでなく、HTTPS化、メンテナンス中の一時案内、フォーム送信後の完了ページ表示など、さまざまな場面で使われます。

次の図では、リダイレクトが使われる代表的な場面を地図のように整理しています。利用者から見ると「勝手にURLが変わった」ように見えますが、裏側では移動先を案内しています。

• 古い記事URLから新しい記事URLへ案内する
• http://からhttps://へ切り替える
• example.comからwww.example.comへ統一する
• メンテナンス中に一時ページへ案内する
• フォーム送信後に完了画面へ移動する

リダイレクトとリンク、DNS、URL書き換えの違い

リダイレクトはリンクと似ていますが、利用者がクリックして移動するリンクとは違い、サーバーやページ側が自動で移動先を案内します。DNSとも違います。DNSはドメイン名をIPアドレスへ変換する仕組みで、ページ単位の移動先を案内するものではありません。

DNSの基本はDNSとは何か？、ブラウザの役割はブラウザとは？であわせて確認できます。

リダイレクトで注意したいこと

リダイレクトは便利ですが、設定を間違えると利用者がページにたどり着けなくなります。特に注意したいのが、リダイレクトループ、長いリダイレクトチェーン、内部リンクの放置です。

次の図では、リダイレクトで避けたい迷子パターンを見てください。AからBへ案内したはずがBからAへ戻ると、ブラウザは終わらない移動を繰り返してしまいます。

• AからB、BからAへ戻るリダイレクトループを作らない
• AからB、BからC、CからDのような長いチェーンを避ける
• サイト内リンクはできるだけ新URLへ直接向ける
• リダイレクト後のページが404にならないか確認する
• HTTPからHTTPSへの統一で無限ループしないか確認する

MDNでも、リダイレクトごとに追加のHTTPリクエストが発生するため、使いすぎを避けるべきだと説明されています。内部リンクを直せる場合は、リダイレクトに頼らず新URLへ直接リンクしましょう。

ユーザーとして知っておきたい見方

リダイレクト自体は正常な仕組みです。ただし、ログイン画面や決済画面で知らないドメインへ移動した場合は注意が必要です。アドレスバーのドメインを確認し、怪しい移動先ではパスワードやカード情報を入力しないようにします。

キャッシュやCookieが原因で古いリダイレクトが残ったように見えることもあります。ページ移動がおかしいときは、別ブラウザで確認する、キャッシュを削除する、Cookieの影響を切り分ける、といった確認も役立ちます。

キャッシュはキャッシュとは？、CookieはCookieとは？で詳しく解説しています。

開発者が最初に確認するポイント

開発者がリダイレクトを設定するときは、どのURLからどのURLへ、恒久的なのか一時的なのか、どのHTTPメソッドを扱うのかを確認します。

• 恒久移転なら301または308、一時移動なら302または307を検討する
• フォーム送信やAPIでは307/308のメソッド保持を意識する
• Locationに正しい移動先URLを入れる
• リダイレクト後に200 OKで表示されるか確認する
• ループや長いチェーンがないか確認する
• 内部リンクやサイトマップは新URLへ更新する

既存記事とあわせて読む順番

リダイレクトはURL、HTTP、ブラウザ、DNSと一緒に理解するとつながります。Webページが表示される流れを押さえたうえで、3xxレスポンスとLocationを見ると理解しやすいです。

• URLとは？
• HTTPとは？HTTPSとは？
• ブラウザとは？
• DNSとは何か？
• キャッシュとは？

公式情報と関連リンク

リダイレクトの基本はMDNのRedirections in HTTP、ステータスコードの整理はMDNのHTTP response status codes、移動先を示すLocationヘッダーはMDNのLocation headerが参考になります。

• MDN: Redirections in HTTP
• MDN: HTTP response status codes
• MDN: Location header

まとめ

リダイレクトは、あるURLへ来た人を別のURLへ自動で案内する仕組みです。

• HTTPリダイレクトでは3xxステータスコードとLocationヘッダーを使う
• 301/308は恒久的な移動、302/307は一時的な移動
• 307/308はHTTPメソッドやリクエスト本文を変えない
• URL変更、HTTPS化、メンテナンス、送信後の完了画面などで使われる
• ループや長いチェーン、内部リンク放置に注意する

まずは、リダイレクトを「Webサイトの移転案内」として押さえましょう。そのうえで、301と302の違い、Locationヘッダー、ループの注意点を理解すると、Webのトラブル対応やサイト運用で役立ちます。

Webページの画像、CSS、JavaScriptなどを毎回サーバーから取り直すと時間がかかります。キャッシュを使うと、保存済みのコピーを再利用できるため、表示が速くなったり通信量を減らしたりできます。

キャッシュは「近くに置いたコピー」です。便利ですが、古いコピーが残ると変更が反映されないこともあります。

この記事では、キャッシュの意味、ブラウザで表示が速くなる流れ、Cookieや履歴との違い、古い表示が出るときの対処、Cache-Controlの基本を初心者向けに整理します。

まず結論：キャッシュは近くに置くコピー

キャッシュは、元データを毎回取りに行かなくて済むように、よく使うデータのコピーを手元や近い場所に保存する仕組みです。Webではブラウザ、CDN、サーバー、DNSなど、いろいろな場所でキャッシュが使われます。

MDNでは、HTTPキャッシュは以前のレスポンスを再利用して不要なネットワーク要求を減らす仕組みとして説明されています。まずは「同じものを何度も取り直さないための保存」と覚えると十分です。

次の図では、利用者、キャッシュ、元データの関係を見てください。キャッシュは元データそのものではなく、近くに置かれたコピーです。

キャッシュで表示が速くなる流れ

ブラウザでWebページを開くと、HTML、CSS、JavaScript、画像など複数のファイルを読み込みます。初回はサーバーから取得しますが、保存できるものはブラウザのキャッシュに残ります。

以下の図で、初回アクセスで取得して保存し、2回目以降にキャッシュを使って速く表示する流れを確認してください。毎回サーバーへ取りに行かないことがポイントです。

HTTPの基本はHTTPとは？HTTPSとは？、Webページを開く入口はブラウザとは？で確認できます。

キャッシュがある場所

キャッシュはブラウザだけにあるものではありません。ブラウザの中、CDNなどの中間地点、サーバー内部、DNSの名前解決など、目的に応じていろいろな場所にあります。

キャッシュとCookie、履歴、ブックマークの違い

キャッシュとCookieはどちらもブラウザに残ることがありますが、目的が違います。キャッシュは表示を速くするためのコピー、Cookieはサイトが状態を覚えるための小さな情報です。履歴やブックマークも、さらに役割が違います。

Cookieの詳しい仕組みはCookieとは？で解説しています。キャッシュ削除とCookie削除は影響が違うため、トラブル対応では分けて考えましょう。

キャッシュが原因で起きること

キャッシュは便利ですが、古いコピーが残ると「画像を差し替えたのに前の画像が出る」「CSSを修正したのに画面が変わらない」「ログアウト後も古い画面が見える」のような混乱が起きることがあります。

• ページの見た目が古いまま表示される
• CSSやJavaScriptの修正が反映されない
• 画像を差し替えたのに前の画像が出る
• 開発中に変更したはずの画面が変わらない
• 個人情報を含むページを保存してほしくない場面がある

利用者側では再読み込み、強制再読み込み、キャッシュ削除で改善することがあります。開発者側では、ファイル名にバージョンやハッシュを付ける、適切なCache-Controlを返す、といった設計が必要になります。

Cache-Controlの基本

Webのキャッシュは、HTTPヘッダーで制御できます。代表的なのがCache-Controlです。保存してよいか、どれくらい新鮮とみなすか、使う前にサーバーへ確認するかを指示します。

次の図では、Cache-Controlでよく見る言葉を確認してください。特にno-cacheは「保存しない」ではなく、「使う前にサーバーへ確認する」という意味である点に注意します。

Cache-Control: max-age=3600
Cache-Control: no-cache
Cache-Control: no-store
ETag: "abc123"

MDNのCache-Control解説でも、no-cacheは保存を禁止するものではなく、再利用前の検証を要求するものと説明されています。保存させたくない場合はno-storeを検討します。

利用者ができる対処

ページが古いまま見えるとき、利用者側で試せることがあります。まず通常の再読み込みを行い、それでも変わらない場合は強制再読み込みやキャッシュ削除を試します。

• 通常の再読み込みをする
• 強制再読み込みをする
• ブラウザ設定からキャッシュされた画像やファイルを削除する
• 別のブラウザやシークレットウィンドウで確認する
• ログイン状態が関係する場合はCookie削除の影響も考える

ただし、会社PCや業務システムでは、勝手にCookieやサイトデータまで削除すると再ログインや設定リセットが必要になる場合があります。キャッシュだけを削除するのか、Cookieも含めるのかを確認してから操作しましょう。

開発者が注意するポイント

開発者は、速く表示したいファイルと、古い内容を見せたくないファイルを分けて考える必要があります。画像、CSS、JavaScriptなどの静的ファイルは長くキャッシュしやすい一方、HTMLや個人情報を含む応答は慎重に扱います。

• 変更されにくい静的ファイルは長めにキャッシュする
• 変更時にファイル名やURLを変えるキャッシュバスティングを使う
• HTMLは必要に応じて再検証させる
• 個人情報やログイン後の画面は共有キャッシュに載せない
• no-cacheとno-storeを混同しない

web.devでも、バージョン付きURLには長いmax-ageを使いやすく、バージョンなしURLでは再検証やno-storeなどを使い分ける考え方が紹介されています。

既存記事とあわせて読む順番

キャッシュは、ブラウザ、HTTP、Cookie、DNSと一緒に理解するとつながります。まずWebページが表示される流れを押さえ、そのうえで「保存して再利用する場所」を見ると理解しやすいです。

• ブラウザとは？
• HTTPとは？HTTPSとは？
• Cookieとは？
• URLとは？
• DNSとは何か？

公式情報と関連リンク

HTTPキャッシュの基本はMDNのHTTP caching、Cache-Controlの詳しい意味はMDNのCache-Control、実務寄りの考え方はweb.devのHTTP Cache記事が参考になります。

• MDN: HTTP caching
• MDN: Cache-Control header
• web.dev: Prevent unnecessary network requests with the HTTP Cache

まとめ

キャッシュは、一度取得したデータを保存して、次回以降すばやく使うための仕組みです。

• キャッシュは元データの近くに置いたコピー
• ブラウザキャッシュは画像、CSS、JavaScriptなどの再利用に役立つ
• Cookieは状態保存、キャッシュは表示高速化が主な目的
• 古いキャッシュが残ると変更が反映されないことがある
• no-cacheは保存禁止ではなく、使う前の確認を意味する
• 保存させたくない場合はno-storeを検討する

キャッシュを理解すると、Webページが速く表示される理由だけでなく、変更が反映されないときの切り分けもできるようになります。まずは「速くするためのコピー」として押さえ、Cookieや履歴とは分けて考えましょう。

たとえば、ログイン状態、表示言語、カートに入れた商品の情報などを覚えるために使われます。Webサイトを閉じても次に開いたときに状態が残ることがあるのは、Cookieが関係している場合があります。

Cookieは「食べ物のクッキー」ではなく、ブラウザとWebサイトの間で使われる小さなメモのような情報です。

この記事では、Cookieの意味、保存される情報、サーバーとのやり取り、キャッシュやWeb Storageとの違い、安全に使うポイントを初心者向けに整理します。

Cookieはサイト別に残る小さな情報

Cookieは、Webサイトがブラウザに保存し、必要に応じて同じサイトへ送り返される情報です。MDNでも、Cookieはサーバーがユーザーのブラウザへ送る小さなデータで、ブラウザが保存し、後続のリクエストで同じサーバーへ返すものとして説明されています。

最初は「Webサイトが、ブラウザ側に残しておく小さなメモ」と考えると理解しやすいです。ただし、何でも保存してよい場所ではなく、保存内容や送信条件には注意が必要です。

ブラウザ、Cookie、Webサイトの関係を見てください。Cookieはブラウザに保存されますが、Webサイトとのやり取りの中で使われます。

Cookieが使われる代表例

Cookieは、Webサイトが「この利用者は前にも来た」「この設定を選んでいた」と判断するために使われます。代表的な用途は、ログイン状態の維持、表示設定、ショッピングカート、アクセス解析などです。

重要なのは、Cookieにパスワードをそのまま保存するのが一般的な使い方ではない、という点です。多くの場合は、利用者やセッションを識別するID、設定値、状態を示す小さな値を保存します。便利な用途がある一方で、閲覧状況の計測や追跡に使われることもあります。

Cookieが保存されて送られる流れ

Cookieは、ブラウザだけで勝手に作られるものではありません。典型的には、サーバーがHTTPレスポンスでSet-Cookieを返し、ブラウザがそれを保存します。その後、同じサイトへアクセスするときに、ブラウザがCookieヘッダーとして送り返します。

HTTPヘッダーで見ると、イメージは次のようになります。実際には属性が増えることもありますが、まずはSet-CookieとCookieの2つを分けて見れば十分です。

HTTP/1.1 200 OK
Set-Cookie: session_id=abc123; Secure; HttpOnly; SameSite=Lax

GET /mypage HTTP/1.1
Cookie: session_id=abc123

HTTPの基本はHTTPとは？HTTPSとは？、Webページを開く入口はURLとは？で詳しく整理しています。

セッションCookieと永続Cookie

Cookieには、大きく分けてセッションCookieと永続Cookieがあります。セッションCookieは、ブラウザを閉じるまでの一時的な情報として使われます。永続Cookieは、有効期限が設定され、ブラウザを閉じた後も残ることがあります。

ただし、実際の挙動はブラウザ設定やサイト側の作りによって変わります。初心者の段階では、「Cookieには一時的なものと、期限付きで残るものがある」と押さえれば十分です。

Cookieとキャッシュ、Web Storageの違い

Cookieと混同しやすい言葉に、キャッシュ、localStorage、sessionStorageがあります。どれもブラウザに情報が残ることがありますが、目的と送信のされ方が違います。

次の比較図では、Cookie、キャッシュ、localStorage、sessionStorageの違いを整理してください。特にCookieは、条件を満たすとHTTPリクエストに付いてサーバーへ送られる点が大きな特徴です。

Cookieを削除するとどうなるか

Cookieを削除すると、ログイン状態が切れたり、表示設定が初期状態に戻ったり、ショッピングカートの内容が消えたりすることがあります。これは、サイトがCookieを使って状態を覚えていたためです。

一方で、不要なCookieを削除したり、サードパーティCookieを制限したりすることは、プライバシー保護の観点で役立つ場合があります。ブラウザの設定画面では、サイトごとにCookieを確認・削除できることが多いです。

サードパーティCookieとは

Cookieには、今開いているサイトが発行するファーストパーティCookieと、別のドメインが関係するサードパーティCookieがあります。サードパーティCookieは、広告配信や計測などで使われることがあり、プライバシー上の理由から制限される方向にあります。

初心者は、まず「Cookieは便利な状態保存にも使われるが、閲覧状況をまたいで把握する用途にも使われることがある」と理解しておくとよいです。細かいブラウザ別の制限は変わるため、実務では各ブラウザや公式情報を確認します。

安全に使うための確認ポイント

Cookieは便利ですが、ログイン状態や識別情報に関係するため、扱いを間違えるとセキュリティやプライバシーの問題につながります。利用者側と開発者側で見るポイントを分けると整理しやすくなります。

次の図では、Cookieを安全に使うための確認ポイントを見てください。利用者は設定や削除、開発者は属性と保存内容を確認します。

• 利用者は、Cookie削除でログアウトや設定リセットが起きることを理解する
• 共有PCではログイン状態を残したままにしない
• 開発者は、重要なCookieにSecure、HttpOnly、SameSiteなどの属性を検討する
• Cookieにパスワードや秘密情報をそのまま保存しない
• サードパーティCookieや同意管理は、プライバシーの観点も含めて確認する

開発者が最初に見るCookie属性

Web開発でCookieを扱う場合は、値だけでなく属性も重要です。属性は、Cookieをどの範囲で、いつまで、どの通信で送るかを決めます。

OWASPのセッション管理に関する資料でも、セッションIDの保護やCookie属性の設定は重要な対策として扱われています。実務でログインに関係するCookieを扱う場合は、フレームワーク任せにせず、属性と保存内容を確認しましょう。

既存記事とあわせて読む順番

Cookieはブラウザ、URL、HTTP、サーバーとの関係で理解するとつながります。まずブラウザでWebページを開く流れを押さえ、そのうえでHTTPヘッダーとしてCookieを見ると理解しやすいです。

• ブラウザとは？
• URLとは？
• HTTPとは？HTTPSとは？
• クライアントサーバシステムとは？
• APIとは？APIとWeb APIの違い

公式情報と関連リンク

Cookieの基本はMDNのHTTP cookies、Set-Cookieヘッダー、Web Storageとの違いはMDNのWeb Storage APIが参考になります。セッション管理の安全性はOWASPの資料も確認対象になります。

• MDN: HTTP cookies
• MDN: Set-Cookie header
• MDN: Web Storage API
• OWASP Session Management Cheat Sheet

まとめ

Cookieは、Webサイトがブラウザに保存する小さな情報です。

• Cookieはブラウザに保存され、同じサイトへ送り返されることがある
• ログイン状態、表示設定、カート、計測などで使われる
• Set-Cookieは保存の指示、Cookieは送信される情報
• キャッシュやWeb Storageとは目的と送信のされ方が違う
• 安全に扱うには保存内容、Secure、HttpOnly、SameSiteなどを確認する

Cookieを理解すると、ブラウザ、HTTP、ログイン、セッション管理の関係が見えやすくなります。まずは「ブラウザに残るサイト別の小さなメモ」として押さえ、次に送信の流れと安全設定を確認していきましょう。

Google Chrome、Safari、Microsoft Edge、Firefoxなどが代表的なブラウザです。スマートフォンやパソコンでWebサイトを見るとき、多くの場合はブラウザを通してページを開いています。

ブラウザは「インターネットそのもの」ではありません。インターネット上のWebページを見に行くための窓口です。

この記事では、ブラウザの意味、URLを開くと何が起きるのか、HTML・CSS・JavaScriptとの関係、検索エンジンやWebサイトとの違い、安全に使うポイントを初心者向けに整理します。

ブラウザはWebを見るための窓口

ブラウザは、ユーザーが入力したURLやクリックしたリンクをもとに、Webページを取得しに行くためのアプリ・ツールです。サーバーから受け取ったHTML、CSS、JavaScript、画像などを組み合わせて、読める画面として表示します。

MDNでは、ブラウザはWeb上のページを取得して表示し、リンクを通じて別のページへアクセスできるプログラムとして説明されています。まずは「Webページを取りに行って表示するアプリ」と覚えると十分です。

代表的なブラウザ

ブラウザにはいくつか種類があります。日常的によく使われるのは、Chrome、Safari、Microsoft Edge、Firefoxなどです。どれもWebページを見るためのアプリですが、開発元、標準設定、拡張機能、端末との相性などが異なります。

どのブラウザを使っても、基本的な役割は同じです。URLを開き、Webページを取得し、画面に表示します。

ブラウザ画面でよく見る名前

ブラウザを使うときは、画面上の名前もあわせて覚えると理解しやすくなります。URLを入力する場所はアドレスバー、複数のページを切り替える場所はタブ、よく見るページを保存する機能はブックマークです。

• アドレスバー：URLや検索語を入力する場所
• タブ：複数のWebページを同じブラウザ内で切り替える場所
• 戻る・進む：前後に見たページへ移動するボタン
• 更新ボタン：今見ているページを読み込み直すボタン
• ブックマーク：あとで見たいページを保存する機能
• 履歴：過去に開いたページの記録

問い合わせやトラブル対応で「ブラウザのタブを閉じる」「アドレスバーのURLを確認する」と言われることがあります。用語を知っているだけで、操作説明をかなり読み取りやすくなります。

ブラウザでページが表示される流れ

ブラウザでWebページを見るとき、裏側ではいくつかの処理が順番に進みます。細かい通信の仕組みを全部覚える必要はありませんが、URL、サーバー、HTTPという言葉が関係することは押さえておきましょう。

次の図では、ブラウザがURLを読み、サーバーへページを取りに行き、受け取った材料を画面に組み立てる流れを確認してください。

URLの基本はURLとは？、HTTPの仕組みはHTTPとは？HTTPSとは？で詳しく解説しています。

ブラウザは何を表示しているのか

Webページは、最初から完成した画像として届くわけではありません。多くの場合、ブラウザはHTML、CSS、JavaScript、画像などのファイルを受け取り、それらを解釈して画面を作ります。

HTMLはページの骨組み、CSSは見た目、JavaScriptは動きや操作を担当します。ブラウザはこれらの材料を読み取り、ユーザーが見やすい形に組み立てます。

次の図では、Webページの材料をブラウザが組み立てるイメージを見てください。ブラウザは単に文字を表示しているだけではなく、複数のファイルを解釈しています。

ブラウザ・検索エンジン・Webサイトの違い

初心者が混同しやすいのが、ブラウザ、検索エンジン、Webサイトの違いです。たとえばChromeはブラウザ、Google検索は検索エンジン、検索結果から開くページがWebサイトです。

Googleという名前は検索エンジンとして使われることもあれば、Chromeというブラウザを提供している会社名として出てくることもあります。そのため、最初は役割で分けて考えると混乱しにくくなります。

次の図では、ブラウザ、検索エンジン、Webサイト、アプリの違いを整理してください。

ブラウザでできること

ブラウザはWebページを見るだけでなく、さまざまな操作の入口になります。今のWebサービスでは、メール、地図、動画、買い物、資料作成、学習サイトなど、多くの機能がブラウザ上で使えます。

• URLを入力してWebページを開く
• 検索エンジンで情報を探す
• Webアプリを使う
• ファイルをダウンロードする
• ログインしてサービスを利用する
• タブや履歴、ブックマークでページを管理する

Webアプリとは、ブラウザ上で使えるアプリのようなものです。インストール型アプリと違い、URLを開くだけで使えるものも多くあります。

ブラウザを安全に使うポイント

ブラウザは便利ですが、危険なサイトや偽のログイン画面に出会うこともあります。安全に使うためには、アドレスバー、HTTPS、権限、更新、履歴やCookieを意識します。

次の図では、ブラウザを使うときの最低限の確認ポイントをまとめています。特に、ログイン前にURLとドメインを見る習慣は重要です。

• ログイン前にアドレスバーのドメインを確認する
• https://で通信が保護されているか見る
• 通知、位置情報、カメラなどの権限をむやみに許可しない
• ブラウザを古いまま使い続けない
• 共有PCでは履歴、Cookie、ログイン状態に注意する

ブラウザとサーバーの関係

ブラウザは、利用者側で動くクライアントです。サーバーは、Webページやデータを提供する側です。ブラウザがサーバーへ依頼し、サーバーが結果を返すことでWebページが表示されます。

この関係はクライアントサーバーシステムと呼ばれます。詳しくはクライアントサーバシステムとは？の記事で確認できます。

また、Web APIを呼び出すときも、ブラウザがサーバーへデータを取りに行くことがあります。APIの入口はAPIとは？APIとWeb APIの違いで整理できます。

既存記事とあわせて読む順番

ブラウザを理解したら、URL、HTTP、DNS、クライアントサーバーの順に読むと、Webページが表示される流れがつながります。

• URLとは？
• HTTPとは？HTTPSとは？
• DNSとは何か？
• クライアントサーバシステムとは？
• ゼロから学ぶネットワーク入門

公式情報と関連リンク

ブラウザの基本的な定義はMDNのBrowser用語集、Webページ表示の流れはMDNのHow the Web worksやHow browsers workが参考になります。初心者の段階では、まずブラウザがWebページを取得して表示するアプリだと理解できれば十分です。

• MDN Browser glossary
• MDN How the Web works
• MDN How browsers work

まとめ

ブラウザは、Webページを取得して、画面に表示するためのアプリです。

• Chrome、Safari、Edge、Firefoxなどが代表的なブラウザ
• ブラウザはURLを読み、サーバーからWebページの材料を受け取る
• HTML、CSS、JavaScript、画像などを組み立てて表示する
• ブラウザ、検索エンジン、Webサイトは役割が違う
• 安全に使うにはURL、HTTPS、権限、更新を確認する

ブラウザを理解すると、URL、HTTP、DNS、Web APIといったWebの基礎用語がつながりやすくなります。まずは、ブラウザを「Webページを見に行き、画面に表示するための窓口」として押さえましょう。

ブラウザの上にあるアドレスバーに表示されている、https://it-biz.online/... のような文字列がURLです。Webページを見る、画像を開く、APIへアクセスするなど、多くのWeb操作はこのURLを手がかりに始まります。

URLは「Web上の住所」です。住所を見ると建物の場所が分かるように、URLを見るとWeb上の目的地が分かります。

この記事では、URLの意味、ドメインやパスとの違い、URLを開くと何が起きるのか、安全に見るポイントを初心者向けに整理します。

まず結論：URLはWeb上の住所

URLは、Uniform Resource Locatorの略です。日本語では「統一資源位置指定子」と訳されることがありますが、最初からこの訳語を覚える必要はありません。まずは「Web上の住所」と考えると十分です。

MDNでは、URLはWebページ、画像、動画などのリソースがインターネット上のどこにあるかを示す文字列として説明されています。ここでいうリソースとは、Web上で取得できる情報やファイルのことです。

次の図は、URLを入力したブラウザが、目的のWebページへ向かうイメージです。

URLの基本形

URLは、いくつかの部品に分けて読めます。たとえば、次のURLを見てみます。

https://www.example.com/articles/url?id=10#summary

長く見えますが、最初に見るべきなのは、通信の種類、サイト名、ページの場所です。慣れてきたら、条件やページ内の位置も読めるようになります。次の図では、URLを部品ごとに分けて見てください。全部を暗記する必要はありませんが、ドメインとパスの違いは早めに押さえると役に立ちます。

実例でURLを読んでみる

実際のURLを読むときは、左から順番にすべてを完璧に理解しようとしなくて構いません。まずは、どのサイトの、どのページを開こうとしているのかを見ます。

たとえば、https://it-biz.online/it-skills/http/ というURLなら、https:// は安全なWeb通信、it-biz.online はサイト名、/it-skills/http/ はサイト内の記事の場所だと読めます。

検索結果やECサイトでは、URLの後ろに?keyword=...や?id=...のようなクエリが付くことがあります。これは、検索キーワード、商品ID、並び順、流入元などの追加情報を渡すために使われます。

また、#summaryのようなフラグメントは、同じページ内の特定位置へ移動するために使われます。ページの中にある「まとめ」や「見出し」へ直接飛ぶリンクでよく見かけます。

初心者のうちは、URL全体を暗記するよりも、長いURLを見たときに『ドメインはどこか』『パスはどこからか』『クエリは付いているか』を分ける練習をする方が実務で役立ちます。

URL・ドメイン・IPアドレスの違い

URLを学ぶと、ドメインやIPアドレスという言葉も出てきます。これらは似ていますが、同じものではありません。

ドメインは、it-biz.online のようなサイトの名前です。IPアドレスは、ネットワーク上の機器を識別する番号です。URLは、それらに加えて、ページの場所や条件まで含められます。

次の図では、URL、ドメイン、IPアドレス、ページタイトルを分けて見てください。混同しやすい言葉を先に整理しておくと、HTTPやDNSの記事が読みやすくなります。

URLを開くと何が起きるか

ブラウザでURLを開くと、ただ文字列を表示しているだけではありません。ブラウザはURLからドメインを読み取り、そのドメインがどのサーバーを指すのかを調べ、目的のページを取りに行きます。

この流れでは、DNSやHTTPが関係します。DNSはドメインからIPアドレスを調べる仕組みで、HTTPはブラウザとサーバーがWebページをやり取りするための通信の基本です。

次の図では、URLを開いてからページが表示されるまでの流れを確認してください。細かい通信手順をすべて覚えるより、URLがDNSやHTTPにつながっていることを押さえるのが先です。

httpとhttpsの違い

URLの先頭にあるhttp://やhttps://は、スキームと呼ばれます。Webページを見るときによく使われるのはHTTPとHTTPSです。

初心者の段階では、https://は通信が暗号化されるWeb通信、http://は暗号化されないWeb通信、と押さえれば十分です。ログイン、決済、個人情報入力では、基本的にhttps://になっているかを確認しましょう。

HTTPとHTTPSの詳しい仕組みは、HTTPとは？HTTPSとは？の記事で解説しています。

URLを見るときの安全チェック

URLは便利ですが、フィッシングサイトや怪しいリンクを見分けるときにも重要です。リンクの文字だけで判断せず、実際に開こうとしているURL、とくにドメインを確認します。

次の図では、URLを見るときの最低限のチェックポイントを整理しています。特に、https://かどうか、本当のドメインが何か、長いクエリに不要な情報が含まれていないかを見ます。

• ログイン前にhttps://か確認する
• 見た目のリンク文字ではなく、実際のドメインを見る
• 似た文字を使った偽ドメインに注意する
• 長いURLをそのまま共有すると、検索条件やIDが含まれることがある
• 不審な短縮URLは、信頼できる相手からのものか確認する

URLとURIの違いは最初から必要？

URLを調べると、URIという言葉も出てきます。URIは、より広くリソースを識別するための名前です。URLは、そのリソースの場所を示すものとして説明されます。

ただし、IT初心者が最初にWebページを見る範囲では、URLを理解できれば十分なことが多いです。URIとの細かい違いは、API設計や仕様書を読む段階で必要になったら深掘りすれば問題ありません。

既存記事とあわせて読む順番

URLを理解したら、ドメイン、DNS、HTTP、クライアントサーバーの順に読むと、Webページが表示される流れがつながりやすくなります。

• DNSとは何か？
• HTTPとは？HTTPSとは？
• クライアントサーバシステムとは？
• APIとは？APIとWeb APIの違い
• ゼロから学ぶネットワーク入門

公式情報と関連リンク

仕様として確認する場合は、WHATWG URL StandardとMDNのURL用語集を参照します。WHATWG URL Standardは、ブラウザなどがURLをどのように扱うかを定義する標準です。

• WHATWG URL Standard
• MDN URL 用語集
• MDN URL API

まとめ

URLは、Webページや画像などがインターネット上のどこにあるかを示す文字列です。

• URLはWeb上の住所として理解できる
• ドメインはサイト名、パスはサイト内の場所を表す
• URLを開くとDNSやHTTPの仕組みにつながる
• https://かどうか、本当のドメインは何かを確認する
• URIとの細かい違いは、最初は深追いしなくてよい

URLを読めるようになると、Webページの仕組み、HTTP、DNS、APIの理解が一気につながりやすくなります。まずは、URLを「通信の種類」「ドメイン」「ページの場所」に分けて見るところから始めましょう。

チャットのように双方が頻繁に送信するならWebSocketが候補になります。一方で、ニュース、通知、処理状況、ログのように「サーバー側で起きた変化を画面へ届けたい」だけなら、SSEの方がシンプルに書けることがあります。

SSEは「ブラウザからも自由に送る通信」ではありません。サーバーからブラウザへ流れる通知レーンとして見ると理解しやすくなります。

この記事では、SSEの意味、EventSourceの使い方、WebSocketやポーリングとの違い、再接続、運用上の注意点を初心者向けに整理します。

まず結論：SSEはサーバーからブラウザへの一方向通知

SSEの中心は、サーバーからクライアントへイベントを送ることです。クライアントとは、ここでは主にブラウザを指します。

ブラウザは最初にSSE用のURLへ接続します。その後、サーバーは接続を閉じずに、新しい通知があるたびにデータを少しずつ送ります。ブラウザ側では、そのデータをイベントとして受け取って画面へ反映します。

次の図では、SSEを「サーバーからブラウザへ流れる通知レーン」として見てください。WebSocketのような双方向の会話ではなく、サーバー発の更新を受け取る流れです。

SSEが必要になる場面

SSEが役立つのは、ユーザーが何度も更新ボタンを押さなくても、サーバー側の新しい情報を画面へ届けたい場面です。

• 処理の進捗を画面に表示したい
• 管理画面に新着通知を出したい
• サーバーログや監視結果を流したい
• ニュースフィードやタイムラインを更新したい
• 在庫、注文、ジョブ状態などの変化を反映したい

反対に、ユーザーがメッセージを頻繁に送り、相手からも返ってくるような双方向のやり取りでは、WebSocketの方が自然なことがあります。

REST API・ポーリング・WebSocketとの違い

SSEを理解するときに一番つまずきやすいのは、似た通信方式との違いです。ここでは、REST API、ポーリング、SSE、WebSocketを「何をしたいか」で分けます。

次の図では、実装名ではなく、読者が実現したい動きから選ぶように見てください。サーバーから一方的に知らせたいならSSE、双方が送るならWebSocketが候補です。

参考　REST APIとは何か？ / HTTPとは？HTTPSとは？

EventSourceで受け取る最小コード

ブラウザ側では、EventSourceを使ってSSEの接続を開きます。MDNでも、SSEを扱うAPIはEventSourceインターフェースに含まれると説明されています。

const source = new EventSource("/events");

source.onopen = () => {
  console.log("SSEに接続しました");
};

source.onmessage = (event) => {
  console.log("受信:", event.data);
};

source.onerror = () => {
  console.log("接続エラーまたは再接続中です");
};

// 画面を閉じる、購読をやめるなどのタイミングで呼ぶ
// source.close();

このコードでは、new EventSource("/events")でサーバーのイベント配信URLへ接続します。onmessageは、サーバーから通常のメッセージが届いたときに実行されます。

ただし、このコードだけをブラウザに貼っても動きません。サーバー側がSSE用のレスポンスを返す必要があります。SSEは、ブラウザ側のEventSourceと、サーバー側のtext/event-stream形式のレスポンスがセットです。

次の図では、コードの左側とサーバーから流れてくる文字列の右側を対応させて見てください。EventSourceは受け口、text/event-streamは流れてくる形式です。

サーバーが返すtext/event-streamの形

SSEでは、サーバーがContent-Type: text/event-streamのレスポンスを返します。MDNの例でも、サーバー側はtext/event-streamで応答し、各通知をテキストのブロックとして送ると説明されています。

event: progress
data: {"percent": 80}
id: 42

この例では、eventがイベント名、dataが実際に渡したいデータ、idがイベントの識別子です。最後の空行で、1件のイベントが終わります。

イベント名を付けない場合は、ブラウザ側では通常のmessageイベントとして受け取れます。イベント名を付けた場合は、addEventListener("progress", ...)のように名前で分けて処理できます。

再接続とLast-Event-IDの考え方

SSEの便利な点の1つは、接続が切れたときにブラウザが再接続を試みることです。MDNでも、クライアントとサーバーの接続が閉じた場合、デフォルトでは接続が再開されると説明されています。

ただし、自動再接続があるから何も考えなくてよい、という意味ではありません。途中で切れた場合に、同じ通知を二重に処理しないか、逆に通知が抜けないかを考える必要があります。

次の図では、idを手がかりに、どこまで読んだかを復旧するイメージを見てください。実務では、イベントIDや状態管理を使って、再接続後の抜けや重複を減らします。

SSEを使うときの注意点

SSEはWebSocketよりシンプルに見えますが、運用では長く開いたHTTP接続として扱う必要があります。特に、接続数、中継サーバー、切断復旧は先に見ておきたいポイントです。

次の図では、実装後に詰まりやすい場所を3つに分けています。SSEは一方向の通信としては分かりやすい一方で、開いた接続を維持するための設計が必要です。

• HTTP/1.1では同一ブラウザ・同一ドメインの接続数制限に注意する
• HTTP/2を使える環境では、同時ストリーム数の扱いも確認する
• プロキシやロードバランサーがレスポンスをバッファしないか確認する
• 切断時に再接続できるだけでなく、抜けや重複も考える
• 長時間接続を前提に、認証切れや権限変更時の扱いを決める

MDNでは、HTTP/2ではない場合、SSEのオープン接続数に制限があり、複数タブで痛みやすい点も注意されています。小さなデモでは問題にならなくても、実務ではユーザー数、タブ数、接続先ドメインを含めて考えましょう。

SSEを選ぶ判断基準

SSEを選ぶかどうかは、通信の派手さではなく、必要な方向で決めます。サーバーからブラウザへ知らせるだけならSSEは有力です。ブラウザからも細かく送るならWebSocket、単発の取得や登録ならREST APIが自然です。

初心者の段階では、SSEを「WebSocketの簡易版」と覚えるより、「サーバーから一方向に流す標準機能」と覚える方が正確です。役割が違うため、どちらが上位という関係ではありません。

既存記事とあわせて読む順番

SSEを理解するには、HTTP、クライアントサーバー、API、REST APIの順で土台を確認すると読みやすくなります。

• クライアントサーバシステムとは？
• HTTPとは？HTTPSとは？
• APIとは？APIとWeb APIの違い
• REST APIとは何か？
• ゼロから学ぶネットワーク入門

公式情報と関連リンク

仕様やAPIを確認する場合は、WHATWG HTML StandardのServer-sent events、MDNのServer-sent events、EventSourceのページを参照します。

• WHATWG HTML Standard: Server-sent events
• MDN Server-sent events
• MDN Using server-sent events
• MDN EventSource

まとめ

Server-Sent Events（SSE）は、サーバーからブラウザへ更新情報を一方向に流すためのWeb標準の仕組みです。

• SSEはサーバーからブラウザへの一方向通知に向いている
• ブラウザ側ではEventSourceを使って受け取る
• サーバー側はtext/event-stream形式でイベントを流す
• WebSocketは双方向、SSEは一方向と分けて考える
• 実務では接続数、再接続、バッファリング、認証を確認する

SSEを理解すると、リアルタイム更新をすべてWebSocketで考えずに済みます。サーバーから知らせるだけでよい場面では、SSEという選択肢を持っておくと設計がシンプルになります。

通常のHTTP通信では、ブラウザがリクエストを送り、サーバーがレスポンスを返す、という往復が基本です。一方でWebSocketでは、接続を開いた後、ブラウザからサーバーへも、サーバーからブラウザへも、必要なタイミングでデータを送ることが可能。

WebSocketは「ページを表示するための仕組み」ではなく、「開いた接続で会話を続ける仕組み」と考えると理解しやすくなります。

この記事では、WebSocketの意味、HTTPやREST APIとの違い、接続開始の流れ、JavaScriptでの最小コード、使いどころと注意点を初心者向けに整理します。

まず結論：WebSocketは双方向のリアルタイム通信

WebSocketの一番大事な特徴は、双方向通信です。双方向通信とは、クライアント側から送るだけでなく、サーバー側からもクライアントへデータを送れる通信のことです。

ここでいうリアルタイム通信は、厳密に遅延がゼロという意味ではありません。ユーザーが待って更新ボタンを押さなくても、サーバー側の変化を短い遅延で画面へ届けられる、という意味で使われます。

チャットで相手の発言がすぐ表示される、管理画面に新しい通知がすぐ出る、共同編集で他の人の変更が反映される。こうした「サーバー側で起きた変化を画面へすぐ届けたい」場面でWebSocketが候補になります。

次の図で、WebSocketを「ブラウザとサーバーが1本の接続で会話を続ける仕組み」として見てください。

HTTPとの違い

HTTPは、Webページの表示やAPI呼び出しで広く使われる通信の基本です。ブラウザが「このページをください」「このデータをください」と依頼し、サーバーが返事をする形で進みます。

HTTPの基本はHTTPとは？HTTPSとは？の記事で要チェック！

WebSocketも最初の接続開始ではHTTPの仕組みを利用します。しかし、接続が確立した後は、毎回HTTPリクエストを作るのではなく、開いた接続の上で小さなメッセージをやり取りします。

次の比較図では、HTTPは「依頼して返事をもらう」、WebSocketは「開いた接続で会話を続ける」と読み分けてください。

WebSocketの接続はどう始まるか

WebSocketは、いきなり独自の通信だけで始まるわけではありません。一般的なWebの文脈では、最初にHTTPのリクエストとして接続を始め、サーバーがWebSocketへ切り替える流れを受け入れると、その後WebSocketの通信へ進みます。

RFC 6455では、WebSocketプロトコルは接続開始のハンドシェイクと、その後のメッセージフレーミングから成り、TCP上で動くものとして説明されています。初心者の段階では、まず「最初に握手して、接続ができたらメッセージを送り合う」と押さえれば十分です。

次の図では、WebSocket接続が始まる順番を確認してください。HTTPのUpgrade、切り替え成功、その後のメッセージ交換という3段階で見ます。

JavaScriptで見るWebSocketの最小コード

ブラウザのJavaScriptでは、WebSocketオブジェクトを作ってサーバーへ接続します。URLは、暗号化なしならws://、TLSで保護するならwss://を使います。実務のWebサイトでは、基本的にwss://を選ぶと考えてください。

const socket = new WebSocket("wss://example.com/chat");

socket.addEventListener("open", () => {
  socket.send("こんにちは");
});

socket.addEventListener("message", (event) => {
  console.log("受信:", event.data);
});

socket.addEventListener("close", () => {
  console.log("接続が閉じました");
});

socket.addEventListener("error", (event) => {
  console.error("通信エラー", event);
});

このコードでは、openで接続開始、sendで送信、messageで受信、closeで切断、errorでエラーを扱っています。

ただし、このコードだけをブラウザに貼っても、接続先のWebSocketサーバーがなければ動きません。WebSocketは、ブラウザ側のコードとサーバー側の受け口がセットで必要になる通信です。

ここで重要なのは、messageイベントです。WebSocketでは、サーバー側からメッセージが届いたタイミングで処理を実行できます。通常のREST APIのように、毎回こちらから取得しに行く発想とは少し違います。

WebSocketを使う場面

WebSocketは、どんなWeb開発でも必ず使うものではありません。強みが出るのは、サーバー側で起きた変化を、クライアント側へすぐ届けたい場面です。

次の図では、WebSocketが向いている代表的な場面を確認してください。見るポイントは「サーバー側の変化を待たずに画面へ届けたいか」です。

• チャットや問い合わせ画面で、新しいメッセージをすぐ表示したい
• 注文、障害、監視、株価などのライブ通知を表示したい
• 共同編集ツールで、他の人の変更をリアルタイムに反映したい
• ゲームやダッシュボードで、状態変化を継続的に受け取りたい

反対に、普通の記事ページを表示する、検索結果を返す、フォームの登録結果を返す、といった処理ではHTTPやREST APIで十分なことが多いです。

REST APIやポーリングとの使い分け

REST APIは、クライアントが必要なタイミングでサーバーへ問い合わせ、結果を受け取る設計でよく使われます

参考　REST APIとは何か？

ポーリングは、一定間隔でサーバーへ問い合わせる方法です。たとえば5秒ごとに「新着はありますか？」と聞き続けます。実装は分かりやすい一方で、何も変化がないときも通信が発生します。

判断に迷ったら、まず「サーバー側の変化をすぐ画面に届ける必要があるか」を見ます。必要がなければREST APIで十分なことが多く、必要があるならWebSocketを検討します。

参考　APIとは？APIとWeb APIの違い

Socket.IOとは何が違う？

WebSocketを調べていると、Socket.IOという名前もよく出てきます。ここで混同しやすいのは、WebSocketが通信プロトコルであるのに対し、Socket.IOはリアルタイム通信を扱いやすくするためのライブラリだという点です。

Socket.IOは、再接続、イベント名付きの送受信、環境に応じた通信方式の切り替えなどを助けます。一方で、ブラウザ標準のWebSocket APIとはそのまま互換ではありません。Socket.IOを使う場合は、サーバー側もSocket.IOに対応している必要があります。

初心者の段階では、まずWebSocketを通信の考え方として理解し、その後で「実装を楽にする選択肢としてSocket.IOがある」と分けておくと混乱しにくくなります。

初心者が誤解しやすいポイント

WebSocketは便利ですが、アプリケーション設計のすべてを置き換えるものではありません。画面表示、通常のデータ取得、ログイン、履歴取得などはHTTPやREST APIで行い、リアルタイム更新部分だけWebSocketにする構成もよくあります。

セキュリティと運用で見るポイント

WebSocketを実務で使うときは、接続できることだけでなく、誰が接続しているのか、どのメッセージを許可するのか、切断時にどう復旧するのかを考える必要があります。

• wss://を使い、通信をTLSで保護する
• 接続時やメッセージ処理時に認証・認可を確認する
• 予期しない切断に備えて再接続の設計をする
• サーバー側で接続数、送信頻度、メッセージサイズを制御する
• ブラウザやネットワーク環境による切断を前提にログを残す

特に重要なのは、WebSocket接続が長く続くことです。通常のHTTPリクエストよりも、接続数や切断時の処理が運用に影響しやすくなります。

既存記事とあわせて読む順番

WebSocketを理解するには、HTTP、クライアントサーバー、APIの順に土台を確認してから読むとつながりやすくなります。

• クライアントサーバシステムとは？
• HTTPとは？HTTPSとは？
• APIとは？APIとWeb APIの違い
• REST APIとは何か？
• ゼロから学ぶネットワーク入門

公式情報と関連リンク

仕様を深く確認する場合は、IETFのRFC 6455とMDNのWebSocket APIリファレンスを参照します。初心者の段階では、RFCを最初からすべて読む必要はありません。この記事で全体像を押さえた後、実装時に必要なイベント、メソッド、接続開始の仕様を確認すると効率的です。

• RFC 6455: The WebSocket Protocol
• MDN WebSocket API
• MDN WebSocket API overview

まとめ

WebSocketは、ブラウザとサーバーが1本の接続を開いたまま、双方向にメッセージを送り合うための通信技術です。

• WebSocketはリアルタイムな双方向通信に向いている
• HTTPは用事ごとのリクエストとレスポンス、WebSocketは接続を保った会話として見る
• チャット、ライブ通知、共同編集などで使われる
• REST APIを置き換えるものではなく、用途で使い分ける
• 実務では認証、切断、再接続、接続数の管理も重要

最初は「WebSocketは、サーバーからもブラウザへすぐ送れる通信」と覚えるだけで十分です。そのうえで、HTTPやREST APIと役割を分けて考えると、どの場面で使うべきか判断しやすくなります。

コンパイラ言語とインタプリタ言語の違いは実は1つだけ。それは、プログラムの実行方式です。

このページでは、そもそも機械語って何？コンパイラ・インタプリタって何？という前提から、コンパイラ言語とインタプリタ言語の違い・両者の使い分け、メリット/デメリットまで網羅的に解説していきます。

プログラマーを目指す方であれば基本として知っておきたい内容ばかりです。（そして、最後まで読んでいただければ、コンパイラ言語・インタプリタ言語という分類が誤解であるということを理解することができます。）

是非最後までご覧ください。

前提：機械語とは？

コンパイラ言語とインタプリタ言語の違いを解説する前に、まずは前提となる「機械語」について。

我々が普段書いているソースコードは、実は書いている人間しか理解することができません。言い換えると、コンピューターはソースコードの命令の意味や文字の内容を直接認識しているわけではないのです。

def add_func(a, b):
    return a + b
answer = add_func(b=9, a=2,)
print(answer)

参考　print関数

このソースコードはPythonで書かれていますが、コンピューターはそのままの形では何も理解することができないのです。では、どのようにしてコンピューターはプログラムを実行しているか？

その答えが機械語です。

そもそもプログラムを実行するCPU（コンピューターの頭脳）自体は単なる計算機でしかありません。また「計算」とは言っても、電流のON/OFFを数値化した「０」か「１」の計算しかできない代物です。つまり、コンピュータでプログラムを実行するためには、全ての命令は「０」と「１」だけで構成する必要があるのです。

コンピュータが実際に命令を理解できるように、様々な言語で書かれたソースコードを「０」と「１」だけで構成されるように翻訳したものが機械語です。

最終的にプログラムを実行する際には、どのような言語であってもコンピュータが最終的に読んでいるのは機械語に翻訳されたコードなのです。

コンパイラ・インタプリタとは？

結論から言うと、コンパイラとインタプリタはソースコードを機械語に翻訳するためのツール（仕組み）です。

先ほど説明した通り、コンピュータは「０」か「１」しか理解できないので、プログラムを実行する際にはソースコードを機械語に翻訳する必要があります。この際に利用するのがコンパイラorインタプリタです。

機械語への翻訳をコンパイラで行う言語を「コンパイラ言語」、インタプリタで行う言語を「インタプリタ言語」と呼びます。

コンパイラとインタプリタの違い

さて、この２つの翻訳ツール「コンパイラ」と「インタプリタ」は何が違うのか？

それをまとめたのが以下の表です。

コンパイラとインタプリタの違いを一つずつ詳しく解説します。

コンパイラの仕組み

コンパイラは、ソースコードを一括で機械語に変換する仕組みのこと。プログラムは、この一括変換後に生成されたexeファイルを読み込んで実行されます。

ポイントはプログラム実行前に一括変換するということ。つまり、プログラムを実行する前にすべてのソースコードが機械語に翻訳されている状態のため、プログラムの実行速度がその分早くなります。

一方で、プログラムを編集するたびに、毎回コンパイルをし都度実行ファイルの生成が必要となるため改修のしやすさという面ではマイナスです。

コンパイラはあくまでも機械語への翻訳のみを行う

もう少し詳細に説明すると、コンパイラはあくまでもソースコードを機械語に翻訳する役割のみを担います。

つまり、一度コンパイルしてしまえば、プログラムを実行する際にコンパイラは不要であるばかりでなく、おおもとのソースコードがなくても動くということです。

コンパイラはあくまでもソースコード⇒機械語への変換機能のみを担うという理解が重要です。

インタプリタの仕組み

それでは、インタプリタはどのような仕組みでしょう。

インタプリタはコンパイラと異なり、プログラム実行時にソースコードを１行ずつ翻訳しながらコンピュータへ命令を渡していく仕組みです。

大事なポイントは、機械語への翻訳とプログラムの実行が同時に行われるということ。

コンパイラがプログラム実行前にすべてのソースコードを一括で機械語に変換するのに対して、インタプリタは「機械語への変換」と「プログラムの実行・制御」を同時に行います。（同時通訳をしているようなイメージを持てればOK。）

コンパイラの場合、一度ソースコードを機械語に翻訳してしまえばあとはプログラムの実行に関しては全く関係のない存在となります。しかし、インタプリタは機械語への翻訳をしつつ、プログラムの制御も同時に行っているため、インタプリタがなければインタプリタ言語は実行することができません。

「コンパイラ言語」「インタプリタ言語」という誤解

ここまで読んでいただいた方の中にはお気づきになった方も多いかもしれませんが、インタプリタによってプログラムの実行が行われる言語を「インタプリタ言語」、事前にソースコードが一括でコンパイルされる言語を「コンパイラ言語」と分類してしまうのは実はナンセンスです。

一般的にPythonやRubyはインタプリタ言語である！と説明されますが、実は、インタプリタ言語のソースコードもコンパイルすることは可能です。つまり、いつもはインタプリタを通してプログラムを同時翻訳的に実行するような言語でも、事前に一括翻訳（コンパイル）し、CPUが直接実行することも技術的に可能なのです。

「Pythonは勉強しやすいけど実行速度が遅いからなあ」というのは半分正解で半分間違い。実際に、Pythonで書かれたプログラムの高速化するために、インタプリタによって実行するのではなく、事前にコンパイルしておく例も豊富に存在しているということに注意しましょう。

プログラミングを１から学んでみたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

おすすめプログラミングスクールTOP５【現役エンジニア推薦】

プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。

it-biz.online

2023.05.30

関連して読みたい記事

コンパイラとインタプリタの違いをさらに具体化するには、変換後の形式や実行中の最適化も合わせて確認すると理解しやすくなります。

どの順番で読むと理解しやすいか

まずはコンパイルとは？初心者向けに1から解説で現在の記事と近い工程を確認し、その後にエラー、変換結果、実行時の仕組みなど、自分がつまずいている箇所に近い記事へ進むのがおすすめです。

コンパイル周辺の用語は、単独で覚えるよりも「コードを書く」「変換する」「部品を結びつける」「実行する」「エラーを読む」という流れで見ると整理しやすくなります。ログを見ている場合は、どの段階で止まっているのかを先に切り分けると、読むべき記事も選びやすくなります。

• コンパイルとは？初心者向けに1から解説：コンパイル全体の親記事です。
• バイトコードとは？機械語との違い：Javaの.classファイルとJVMの関係を理解できます。
• トランスパイルとは？コンパイルとの違い：TypeScriptからJavaScriptへの変換を整理できます。
• JITコンパイルとは？実行時に速くする仕組み：実行中に最適化する仕組みを確認できます。

まずはコンパイルとは？初心者向けに1から解説から確認し、必要に応じてエラー、バイトコード、トランスパイル、JITなどの周辺用語へ広げると、コンパイル周辺の流れをつなげて理解できます。

たとえば、コマンド実行で止まっているならエラーメッセージ、Javaの実行結果が分からないならバイトコード、Web開発の変換で迷っているならトランスパイルというように、いま困っている場面から読む記事を選ぶと理解しやすくなります。

読み進めるときは、用語を暗記するよりも「どの工程で、何が入力され、何が出力されるのか」を確認してみてください。ビルドログやエラー文を読むときにも、同じ見方で原因を切り分けやすくなります。

関連する用語を一つずつつなげておくと、別の記事で同じ言葉が出てきたときにも、前後の工程を思い出しながら読み進められます。復習にも使えます。