👨‍🍳

What is HTTP?

2023/06/21に公開

はじめに

昨日の続きです!
下記のロードマップを利用して、知識を増やしていきたいと思います!
Frontendの部分について随時更新していきます💪🏻

What is HTTP?

https://roadmap.sh/frontend

HTTP(Hypertext Transfer Protocol)とは

クライアントとサーバの間で情報をやり取りするためのプロトコル(通信規約)です。
HTTPはインターネット上でのデータ通信のための基盤となる技術であり、ウェブブラウザからウェブサーバへのリクエストや、ウェブサーバからのレスポンスの送受信に使用されます。

プロトコルとは

プロトコルは、コンピューター内またはコンピューター間でデータを交換する方法を定義するルールのシステムです。デバイス間の通信では、交換されるデータの形式についてデバイス間で合意する必要があります。フォーマットを定義する一連のルールはプロトコルと呼ばれます。
https://developer.mozilla.org/en-US/docs/Glossary/Protocol

HTTPについて知っておくべき基本的なポイント

Webページの表示やファイルのダウンロードなど、インターネット上で行われるほとんどの情報のやり取りはHTTPを介して行われます。

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

  • HTTP通信は、クライアント(ブラウザ)からサーバーに向けて送られるリクエストと、サーバーからクライアントに返されるレスポンスのやり取りで成り立っています。
  • リクエストには、要求するアクション(GET、POSTなど)や対象のURL、ヘッダ情報などが含まれます。
  • レスポンスには、ステータスコード(リクエストの成否を示す番号)、レスポンスの内容(HTML、画像、テキストなど)などが含まれます。

HTTPリクエストの基本的な流れ

1. クライアントのリクエストの作成

クライアント(通常はウェブブラウザ)が要求するリソースや操作を指定して、HTTPリクエストを作成します。

  • メソッド(GET、POST、PUT、DELETEなど): リクエストの目的やアクションを示します。
  • URL(Uniform Resource Locator): リソースの場所を示すためのアドレスです。
  • ヘッダ(Headers): リクエストのメタ情報を含んだヘッダ行です。
  • ボディ(Body): 必要に応じて、データをリクエストのボディに含めることがあります。

2. リクエストの送信

クライアントは作成したHTTPリクエストをサーバーに送信します。これは通常、サーバーのIPアドレスとポート番号を使用して行われます。

3. サーバーのリクエストの受信

サーバーはクライアントからのリクエストを受け取ります。受信したリクエストの解析を行い、要求された操作やリソースを特定します。

4. リクエストの処理

サーバーはリクエストに応じて適切な処理を行います。これには、データベースの検索や更新、外部APIとの通信などが含まれます。

5. レスポンスの作成

サーバーはリクエストの処理結果や要求されたデータを含んだHTTPレスポンスを作成します。

  • ステータスコード(200、404、500など): リクエストの成否や処理の状態を示す番号です。
  • ヘッダ(Headers): レスポンスのメタ情報を含んだヘッダ行です。
  • ボディ(Body): レスポンスに含まれるデータやコンテンツが格納されます。

6. レスポンスの送信

サーバーは作成したHTTPレスポンスをクライアントに送信します。

7. クライアントのレスポンスの受信

クライアントはサーバーからのレスポンスを受け取ります。受け取ったレスポンスを解析し、必要な処理を行います。

HTTP リクエストには具体的に何が含まれるか?

1. HTTPメソッド

HTTPリクエストで使用されるメソッドには、主要なものとして以下があります:

メソッド 説明
GET サーバーから情報を取得するために使用されます。URLのパラメータにデータを含めてリクエストします。
POST サーバーにデータを送信して処理を行うために使用されます。データはリクエストのボディに含まれます。
PUT サーバー上のリソースを更新するために使用されます。
DELETE サーバー上のリソースを削除するために使用されます。

他にも、PATCH、HEAD、OPTIONSなどのメソッドが存在します。

2. URL (Uniform Resource Locator)

URLは、Web上のリソースの場所を示すためのアドレスです。以下のような構造を持っています!
protocol://host:port/path?query_string#fragment

  • protocol: 通信に使用するプロトコル(HTTP、HTTPSなど)
  • host: リソースがホストされているサーバーのドメイン名またはIPアドレス
  • port: オプション。通信に使用するポート番号(デフォルトは80)
  • path: リソースの場所やファイルのパス
  • query_string: オプション。GETリクエストのパラメータやクエリを含む
  • fragment: オプション。ページ内の特定の場所を指定するアンカー

3.ヘッダ(Headers)

リクエストのメタ情報を含んだヘッダ行です。主要なヘッダには以下があります。

  • Content-Type: リクエストボディのデータ形式を示します(例: application/json、multipart/form-data)。
  • User-Agent: リクエストを送信するクライアント(ブラウザやアプリ)の情報を示します。
  • Authorization: 認証情報を含む場合に使用されます。

4.ボディ(Body)

リクエストで送信するデータが含まれます。主にPOSTやPUTメソッドで使用され、JSONやXMLなどの形式でデータを表現します。

以上がHTTPリクエストの主要な要素です。これらの要素を組み合わせて、サーバーに対して意図した操作やデータの要求を行います!

ステータスコード

HTTPレスポンスのステータスコードは、リクエストの成否や処理状態を示す番号です。主要なステータスコードの例:

ステータスコード Head 説明
100 Continue リクエスト継続中
200 OK リクエストの受理成功
301 Moved Permanently リクエストコンテンツ移動
302 Found リクエストコンテンツが一時的に移動
304 Not Modified リクエストコンテンツ未更新
400 Bad Request リクエストが不正
401 Unauthorized 認証失敗
403 Forbidden アクセス権がない
404 Not Found リクエストが見つからない
500 Internal Server Error リクエストの処理中にサーバー側でエラー
503 Service Unavailable アクセス集中、メンテナンス

セッションとCookie(クッキー)

HTTPはステートレスなプロトコルであるため、同じクライアントからの複数のリクエストを区別するためにセッションやクッキーが使用されます。

  • セッション: サーバー側で一意のセッションIDを生成し、クライアントと関連付けて情報を保持します。
  • Cookie(クッキー): サーバーから送信される小さなデータの塊であり、クライアント側に保存されます。次回のリクエスト時にクライアントからサーバーに送信され、セッション管理や個人化などに使用されます。

さいごに

簡単にしか触れられていないですが今日はここまで!
積み重ねです!

参考にさせていただいた記事🌱

https://zenn.dev/thao_0108/articles/b75e6c438a86f4

https://zenn.dev/ak/articles/61d25099295372

Discussion