2022/10/05

【僕の学習ノート】HTTPとは？仕組みについて分かりやすく解説

Infotech Networking

こんにちは、なおやです。

今日は、Courseraというプラットフォームで、Metaの社員さんたちから授業を受けました。

そこで得た学びが、下記のツイートです。

【#今日学んだ】HTTPとは何かについて

1. WebブラウザとWebサーバーの通信を行う際に使われるプロトコル
2. HTTPSでは、両者の通信は暗号化されている
3. HTTPリクエストとHTTPレスポンスによって両者間の通信が行われている

— Naoya (@kaigaiblog63) October 5, 2022

今回は、これを掘り下げて解説していきます。

この記事の信憑性

この記事は、Courseの授業を受けて、学び、理解したことを基に、僕なりの言葉と解釈で分かりやすく解説しています。まあ簡単にいうと、僕が学んだことのアウトプットノートです。※ 注意：僕はまだ日々学習している段階です。解説していることに間違いがある可能性も否定できません。何か間違いを見つけて下さった方は、このWebサイトの向上のと僕の学習の為に、教えてください🙏
» Courseraという素晴らしいプラットフォームはこちら (授業は全て英語です)

【僕の学習ノート】HTTPとは？仕組みについて分かりやすく解説

この記事では、HTTPについて詳しく解説しました。

この記事の目次

• 1. HTTP (Hypertext Transfer Protocol) とは？
• 2. HTTPS (Hypertext Transfer Protocol Secure) とは？
• 3. HTTPリクエスト (HTTP Request) とは？
• 4. HTTPレスポンス (HTTP Response) とは？
• 5. ステータスコード (Status Code)

HTTP (Hypertext Transfer Protocol) とは？

• 私たちがWebを閲覧する際に使用する通信プロトコル
• Web (World Wide Web) というシステムの中で中枢を担う
• WebブラウザがWebサーバーと通信する際に不可欠
• Webリソースの転送に使用される

WebブラウザがWebサーバーと通信する際にHTTPが不可欠な理由

1. 私たちは、Webブラウザを使ってWebサイトを閲覧する
2. そのWebサイトのリソース (HTML文書、写真ファイル、スタイルシートなど) を保持しているWebサーバーから、そのリソースを送ってもらう必要がある
3. そのWebサーバーに行うリクエストとWebサーバーから返ってくるリスポンスを行う際に、HTTPという通信方式が必要

HTTPS (Hypertext Transfer Protocol Secure) とは？

実は私たちが今使っているのは、HTTPではありません。私たちは、HTTPの進化版であるHTTPSを使っています。では、この２つは何が違うのでしょうか？

HTTPS は HTTPに ”S” が加わっています。これは、”Secure” が加わった、つまりHTTPに安全性が加わったということを表しています。

HTTPに安全性が加わったとは？

例えば、オンラインで何かを買う際、クレジットカード情報を入力する必要があります。この場合、WebブラウザとWebサーバーの取引を誰かに盗み見られたらどうしますか？あなたのクレジットの情報がバレバレになってしまいます。

そこでこのHTTPSでは、この２つのコンピューター間でのやり取りを暗号化することで、例え情報が漏れても大丈夫なようにしています。

「２つのコンピューター間でのやり取りを暗号化する」とは？

1. コンピューターAからコンピューターBに情報を送る場合
2. コンピューターAから情報を送る前に情報をコンピューターBしか解読することが出来ないランダムなコードに変換する
3. だから、情報のやり取りを第三者が見ても何がなんだかさっぱり
4. 情報がコンピューターBに到着すると、ランダムなコードが解読されて元の情報に戻る

ちなみに、Webブラウザのアドレスバーにあるロックアイコン (🔒) は、HTTPSを使っているという印です。

HTTPリクエスト (HTTP Request) とは？

• リクエストライン (Request Line)
• リクエストヘッダ (Request Header)
• リクエストボディ (Requst Body)

HTTPリクエストとは、WebブラウザやクライアントからWebサーバーに対して行うリクエストのことで、３つの部品から成り立っています。

//リクエストライン
POST /home.html HTTP/1.1
//リクエストヘッダ
Host: example.com​
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: */* 
Accept-Language: en​
Content-type: text/json
//リクエストボディ
{
 "key1":"value1",​
 "key2":"value2",​
 "array1":["value3","value4"]
}

HTTPリクエストは、全体でこーゆー感じです。なんとなくのイメージは湧くと思います。それでは、１つずつ解説していきます。

リクエストライン (Request Line) とは？

//リクエストライン
POST /home.html HTTP/1.1

• リクエストメソッド (Request Method)
• パス (Path)
• バージョン (Version)

リクエストラインとは上記の部分のことで、３つの部品から成り立っています。それぞれ、１つずつ解説します。

リクエストメソッド (Request Method) とは？

//リクエストライン
POST /home.html HTTP/1.1

このリクエストラインの中の、「POST」がリクエストメソッドに当たります。

リクエストメソッドでは、クライアントがWebサーバー上にあるリソースに対して行いたいアクションを示しています。

リクエストメソッドの種類は、主に上記している４つです。

パス (Path) とは？

//リクエストライン
POST /home.html HTTP/1.1

このリクエストラインの中の、「/home.html」がパスに当たります。

具体的に、欲しいWebページなどのリソースがWebサーバー上のどこにあるかを表しているのがパスです。

例えば、example.com/images/image.jpg というURLの場合、/images/image.jpgという部分がパスとなります。

バージョン (Version) とは？

//リクエストライン
POST /home.html HTTP/1.1

このリクエストラインの中の、「HTTP/1.1 」がバージョンに当たります。

これは、HTTPプロトコルのバージョンを示しており、よく使われるバージョンには主に２種類あります。それが「version 1.1」と「version 2.0」です。

リクエストヘッダ (Request Header) とは？

//リクエストヘッダ
Host: example.com​
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: */*
Accept-Language: en​
Content-type: text/json

リクエストヘッダでは、リクエストに関する追加情報とリクエストを行なっているクライアントの情報を表しており、上記のように書かれます。

また、それぞれの意味はこんな感じです。

リクエストボディ (Requst Body) とは？

リクエストボディは、書いても書かなくてもどっちでもよく、リクエストメソッドでPOSTやPUTなどを使ってWebサーバーにデータを送る際によく使われます。

HTTPレスポンス (HTTP Response)とは？

• ステータスライン (Status Line)
• レスポンスヘッダ (Response Header)
• レスポンスボディ (Response Body)

HTTPレスポンスとは、WebサーバーからWebブラウザやクライアントに対して、リクエストされたリソースをレスポンスすることを言います。また、3つの部品から構成されています。

//ステータスライン
HTTP/1.1 200 OK​
//レスポンスヘッダ
Date: Fri, 11 Feb 2022 15:00:00 GMT+2​
Server: Apache/2.2.14 (Linux)​
Content-Length: 84​
Content-Type: text/html​
//レスポンスボディ
<html​>
​<head​><title​>Test</title​></head​>
  <body​>Web Page Example</body​>
</html>

HTTPレスポンスは、全体でこーゆー感じです。HTTPリクエストになんとなく似ていますよね。それでは、１つずつ解説していきます。

ステータスライン (Status Line) とは？

//ステータスライン
HTTP/1.1 200 OK​

• バージョン (Version)
• ステータスコード (Status Code)

リクエストラインとは上記の部分のことで、2つの部品から成り立っています。ちなみにバージョンとは、先ほど解説したHTTPプロトコルのバージョンのことです。

ステータスコード (Status Code) とは？

//ステータスライン
HTTP/1.1 200 OK​ 

このステータスラインの中の、「200 OK」がステータスコードに当たります。またステータスコードでは、HTTPリクエストが正常に処理されたかどうかを示しています。

詳しくは、この記事の後半で解説します。

レスポンスヘッダ (Response Header) とは？

//レスポンスヘッダ
Date: Fri, 11 Feb 2022 15:00:00 GMT+2​
Server: Apache/2.2.14 (Linux)​
Content-Length: 84​
Content-Type: text/html​

レスポンスヘッダ では、レスポンスに関する追加情報とレスポンスを行なっているクライアントの情報を表しており、上記のように書かれます。

また、それぞれの意味はこんな感じです。

レスポンスボディ (Response Body) とは？

//レスポンスボディ
<html​>
​<head​><title​>Test</title​></head​>
  <body​>Web Page Example</body​>
</html>

レスポンスボディでは、要求されたWebページのHTML文書、写真、ビデオ、その他のメディアタイプなどが書かれています。

主にWebページのリソースをリクエストされた場合に書かれます。つまり、リクエストボディ同様、書かれない場合もあります。 (Optional)

ステータスコード (Status Code)

Webを閲覧している最中に、「404 error」みたいなのが画面に出たりしたことはないですか？実はそれが、ステータスコードです。

先ほども解説した通り、ステータス番号は「100〜599まで」あり、それぞれの番号には意味があります。そして、「error」などのステータスメッセージととは、その番号の意味を言語化したものです。

情報レスポンス (Informational) とは？

情報レスポンスでは、クライアントからのリクエストが現在「処理中」であることを表しています。

成功レスポンス (Successful) とは？

成功レスポンスでは、クライアントからのリクエストがWebサーバ−によって正常に処理されたことを表しています。

リダイレクション (Redirection) とは？

リダイレクションでは、リダイレクトが発生したことを表しています。

クライアントエラー (Client Error) とは？

クライアントエラーでは、リクエストにWebサーバーが処理できない構文やコンテンツが含まれていることを表しています。

サーバーエラー (Server Error) とは？

サーバーエラーでは、HTTPリクエストを処理している最中にWebサーバー上でエラーが起こったことを表しています。

以上！

Infotech Networking

• Tweet
• LINE
• facebook