0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Web初心者でもしっかり押さえておきたい「HTTPの基礎」

Posted at

Frame 401.png

HTTPをざっくり理解しよう

ITの現場では、Webの通信を扱ううえで避けて通れないのが HTTP です。

🐬「HTTPってよく聞くけど、実のところどういうものなんですかぁ?」

🐚「ボクもなんとなく知ってはいますけど、しっかり説明するとなるとちょっと不安かもしれないです」

HTTPとは?

HTTPHypertext Transfer Protocol)とは、以下の用語を含むWeb通信の取り決めです。

  • HyperText(ハイパーテキスト):文章中にリンクを埋め込むことで、他の情報に素早くアクセスできるテキスト形式のこと。
  • Transfer(転送):データを送ったり受け取ったりする動作のこと。
  • Protocol(プロトコル):通信を行う際のルールやお約束事を意味します。

つまり、HTTPとはWebブラウザとWebサーバーがこれらのルールに基づいてデータをやり取りするための規約です。

HTTPリクエストとレスポンス

たとえば、あなたがブラウザでWebサイトを開こうとすると、まずブラウザ(クライアント)がサーバーに「ページをちょうだい!」とサーバーにHTTPリクエストを送ります。
サーバーはそのリクエストを受け取って中身を確認し、対応するWebページなどをHTTPレスポンスとして返します。

用語解説

+------------+          Request         +------------+
| Client     | -----------------------> |  Server    |
+------------+ <----------------------- +------------+
                       Response
  • クライアント(Client): ブラウザなどのリクエストを送る側
  • サーバー(Server): リクエストを受け取り、レスポンスを返す側
  • リクエスト(Request): ブラウザなどのクライアントからサーバーに送られる情報
  • レスポンス(Response): サーバーからクライアントに返ってくる情報

リクエストの流れ

  1. ブラウザ(クライアント) からサーバーへアクセスする。
  2. GET /index.html HTTP/1.1 のように、メソッドパスHTTPバージョンなどを指定してデータを取りに行く。これがHTTPリクエストです。
  3. サーバーがリクエストを処理し、レスポンスを返す。

レスポンスの流れ

  1. サーバーは「OK、これがindex.htmlだよ」といった形でステータスコード(例:200 OK)を含んだレスポンスを返す。
  2. レスポンスにはHTMLなどの 本文(ボディ) も入っていて、ブラウザはそれを受け取って画面に表示する。

🐬「例えば出前アプリを利用する時に、アプリで料理の注文を送信するのがリクエスト!」

🐚「そしてそのリクエストに対して店舗が料理を準備して配達されるというレスポンスが返ってくる流れですね!」

HTTPメソッド

HTTPで使われる代表的なメソッド(クライアントがサーバーに行いたい動作を示す命令)には以下のようなものがあります。

メソッド 主な用途
GET データ(主にページ)を取得する
POST データをサーバーに送信して処理を依頼する
PUT サーバー上にあるデータを更新または新規作成する
DELETE サーバー上のデータを削除する

リクエストの先頭に「GET /example.html HTTP/1.1」のように書いて、 「どのデータをどうしてほしいか?」 をサーバーに伝えます。

🐬「POSTが手紙を投函するイメージだとすると、GETは逆に郵便ポストから手紙を受け取るイメージですかねぇ?」

🐚「そんな感じだと思います!行き先と、何をしたいかを指定するわけですね」

ステータスコード

サーバーが返してくるレスポンスには、ステータスコードという数字が含まれます。これによって、リクエストが成功したかどうかがわかります。

  • 200 OK : リクエストが成功
  • 404 Not Found : リクエストされたページが見つからない
  • 500 Internal Server Error : サーバー側で何らかのエラーが起きた

🐚「404は見たことある人も多そうです! 『ページが見つかりません』ってやつですね」

🐬「検索結果のページが消えてたときに見た記憶がありますぅ」

HTTPヘッダーとボディ

ヘッダー(Header)

HTTPリクエストやレスポンスには、追加情報を持たせるためにヘッダーと呼ばれる部分が含まれます。
具体的には、相手に伝えておきたい設定や条件などを記載します。

たとえば、

  • Host: アクセス先のホスト名(例:example.com)
  • User-Agent: ブラウザやOSなどの情報
  • Content-Type: 本文の形式(HTMLやJSON、画像など)

がヘッダーとして含まれます。

ボディ(Body)

実際のページデータなどはボディと呼ばれる部分に入ります。

[リクエスト例]
POST /api/users HTTP/1.1
Host: www.example.com
Content-Type: application/json
User-Agent: Mozilla/5.0

(ここは空行)
{
  "name": "Dolphin",
  "age": 24
}

🐬 「ヘッダーは、送り状のようなもので宛先や品目などの情報が記載されていて、ボディは実際に運ばれる荷物の中身って感じですかぁ?」

🐚 「そうみたいですね!ヘッダーの情報をもとに、配送業者であるサーバーが荷物をどう扱うか判断するようですっ。」
名称未設定のアートワーク 146.png

まとめ

HTTPの基本的な流れは「リクエストを送り、レスポンスを受け取る」シンプルな仕組みです。
しかし、その中にはリクエストメソッドヘッダーボディといった複数の要素が含まれており、何をどのように送るかを明確に伝えるためのルールが存在します。

  • HTTPはWebブラウザとサーバーがやり取りするための通信ルール
  • リクエストとレスポンスで情報をやり取りする。
  • メソッド(GET、POSTなど)で「何をどうしたいか」を伝える。
  • ステータスコード(200、404など)で「成功したかどうか」を確認する。

🐬「なんとなくHTTPの仕組みがわかってたぁ!」

🐚「ネット上でデータをやり取りするときの基本中の基本みたいだから、まずはこれをしっかり押さえておくと良さそうですね!」

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?