HTTPリクエスト・レスポンスについての説明からローカル環境で操作まで[初心者向け]

#はじめに

この記事は未経験者や初心者の方を対象にしています。
ざっくり以下の内容について記載しています

・HTTPリクエスト/HTTPレスポンスって何だろう
・自分の環境でHTTPリクエスト/HTTPレスポンスをしてみたいけど、どうすればいいんだろう

できるだけ画像や例を使って説明していますのでぜひ見ていただけたらと思います。


# HTTPリクエストの概要
ブラウザでwebページを表示する際に、ブラウザとwebサーバがやりとりをしています。
このやり取りをHTTPリクエスト・HTTPレスポンスといいます。

例えばブラウザがサーバに「このページが見たい」と要求するのがHTTPリクエスト
「分かった、このページだね」とサーバがブラウザに返すのがHTTPレスポンス

といった感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1237088/bf356e70-791d-f72f-09c9-a20c51c7605a.png)

まずはHTTPリクエストから見ていきましょう。

#HTTPリクエスト

ブラウザ側からサーバ側に要求（リクエスト）するとき、どんな内容を渡しているのでしょうか

HTTPの構成図は以下です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1237088/bc944b8e-8501-6675-131c-811fc1b04159.png)

留意点ですが、**GETリクエストは「リクエスト行」と「ヘッダ」で構成されており、
POSTリクエストは「空行」と「メッセージボディ」も含まれます。**
そのため、HTTPリクエストはGETリクエストとPOSTリクエストを分けて説明します。

（以下で使用するリクエストの内容は、私がローカル環境で作成したCRUD機能しかない簡単な投稿アプリを使っています）


## GETリクエスト
GETリクエストの全体です

```GETリクエスト.
GET	http://localhost:8080/post HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:86.0) Gecko/20100101 Firefox/86.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Cache-Control: max-age=0
```

### リクエスト行
GETリクエストの1行目がリクエスト行です

```リクエスト行.
GET	http://localhost:8080/post HTTP/1.1
```

リクエスト行の構成は以下です

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1237088/748315cb-12ad-0c89-5f1c-bf2601da520e.png)

### ヘッダ
GETリクエストからリクエスト行を除いたものがヘッダになります。
以下で説明します。

```ヘッダ.
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:86.0) Gecko/20100101 Firefox/86.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Cache-Control: max-age=0
```

User-Agent : 使用しているブラウザの種類やバージョン情報等(上記はFirefox)
[Accept](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Accept) : クライアントが理解できるコンテンツタイプを[MIME](https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types) タイプで伝える
Accept-Language : ブラウザが使用する言語。上記だと、日本語と英語をサーバーに提案し、そこから一つ選択して使用する。
Accept-Encoding : ブラウザがデコードできるエンコーディング形式
Connection : ネットワークの接続を維持したままか、閉じるのか制御する。（HTTP/1.1のデフォルトは「keep-alive」です）

<br>
<br>


HTTPリクエストが「GET」リクエストだと、リクエスト行とヘッダのみの構成となるので説明は以上です。
HTTPリクエストが「POST」リクエストだと、ヘッダの下に空行とメッセージボディが含まれます。
そのためPOSTリクエストでは、GETリクエストで説明できなかったメッセージボディに焦点を当てて説明します

<br>

## POSTリクエスト

POSTリクエストの全体です

```POSTリクエスト.
POST	http://localhost:8080/post
POST /post HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:87.0) Gecko/20100101 Firefox/87.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Content-Type: application/x-www-form-urlencoded
Content-Length: 77
Origin: http://localhost:8080
Connection: keep-alive
Referer: http://localhost:8080/post/new
Upgrade-Insecure-Requests: 1

body=test
```

### メッセージボディ
POSTリクエストの以下の部分がメッセージボディです

```メッセージボディ.
body=test
```

メッセージボディには、フォームからPOSTメソッドでデータを送信するなどした際の情報が含まれます。
以下の画像のようにテキストエリアに「test」と入力し、投稿するボタンを押してPOSTリクエストし、メッセージボディに格納されたのが上記になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1237088/bfde81b9-4f10-8d22-cf1a-e8d5844e1145.png)


HTTPリクエストについては以上になります。次はHTTレスポンスになります。
<br>
<br>


# HTTPレスポンス
HTTPレスポンスは、ブラウザからの要求に対してwebサーバが応答します。
例えば、「このページが見たい」とブラウザからリクエストがきたら、webサーバがページの構成に必要なデータを返してくれます。

HTTPレスポンスの構成図は以下です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1237088/e85da24d-68cc-7feb-028a-bdbe88d57071.png)



投稿一覧画面をリクエストした時の、HTTTPレスポンスの全体です

```HTTPレスポンス.
HTTP/1.1 200
Content-Type: text/html;charset=UTF-8
Content-Language: ja-JP
Transfer-Encoding: chunked
Date: Mon, 19 Apr 2021 13:02:42 GMT

<!DOCTYPE html>
 <html>
  <head>
        --------------------        省略        ----------------------------
<body>
 <h1>testTitle</h1>
  <table>
  <thead>
   <tr>
    <th>body</th>
   </tr>
    <tbody>
     <tr>
      <td>test</td>
     </tr>
    </tbody>
   </table>
  </html>
```

## ステータス行

ステータス行は「HTTPのバージョン」と「HTTPステータスコード」から構成されます。ステータス行は常に1行です。

```ステータス行.
HTTP/1.1 200 
```

HTTPコード200はwebサーバの処理が正常に成功したことを表します。
（ステータスコードについては他に色々あるので別途調べてみてください）

## ヘッダ

```ヘッダ.
Content-Type: text/html;charset=UTF-8
Content-Language: ja
Transfer-Encoding: chunked
Date: Sun, 04 Apr 2021 02:17:23 GMT
Keep-Alive: timeout=60
Connection: keep-alive
```

HTTPリクエストのヘッダと大体同じです。

##レスポンスボディ

```レスポンスボディ.
<!DOCTYPE html>
 <html>
  <head>
        --------------------        省略        ----------------------------
<body>
 <h1>testTitle</h1>
  <table>
  <thead>
   <tr>
    <th>body</th>
   </tr>
    <tbody>
     <tr>
      <td>test</td>
     </tr>
    </tbody>
   </table>
  </html>
```
リクエストした投稿一覧画面のページが返っています。

<br>
<br>

#自分の環境で動かしてみる
ざっと紹介してみましたが、今度はHTTPリクエスト・レスポンスを自分の環境で動かしながら見てみたい、って思ったりしますよね。
準備もほとんどなく、簡単に動かせそうなもので見てみましょう。

・ブラウザの開発ツール（FireFox）
・httpbin×curlコマンド

<br>
##ブラウザの開発ツール（FireFox）

開発ツールはchromeとかでも見れますが、個人的にFireFoxが見やすいかなと思い挙げています。
FireFoxだと、開発ツールは画面上で右クリックして「要素を調査」を選択すればツールが開きます。
それでは、シンプルで初心者に優しい[阿部寛](http://abehiroshi.la.coocan.jp/) さんのHPでHTTPリクエスト・レスポンスを見ていきましょう。

###[手順]

・FireFoxで阿部寛さんのHPを開きます。
・画面上で右クリック→「要素を調査」を選択
・「ネットワーク」タブをクリック
・この状態で一度阿部寛さんのHPをリロード
・ネットワークのやり取りが6行ほど表示されるので、試しに一番上の行をクリックするとHTTPリクエスト・レスポンスが確認できます

色々なサイトで同じように操作すれば見れますので試してみましょう。


##httpbin×curlコマンド
阿部寛さんのHPはGETリクエストはできますが、POSTリクエストでのやりとりなどができません。

[httpbin](http://httpbin.org/) というサイトを使えば、難しい設定もなく様々なリクエストができます。
curlコマンドを使いますが、ここではあまり説明しません、、
HTTPのGET/POSTリクエストなどのプロトコルを用いて、データの転送を行うことができます、というくらいの説明だけに留めておきます。
参考文献: [ウィキペディア](https://ja.wikipedia.org/wiki/CURL)

それではhttpbinを使ってPOSTリクエストをしてみましょう。
###[手順]

・コマンドプロンプトを開きます（macならterminal）。
・[httpbin](http://httpbin.org/)を開いてPOSTリクエストのURLを確認します（が見る時間がない方は以下を叩けばOKです）。
・先ほど確認したPOSTリクエストに、curlの-vオプション（HTTPリクエスト・レスポンスの確認もできる）と-Xオプション（HTTPメソッドを指定）をつけてコマンドをたたく

```httbinでPOSTリクエスト.
curl -v -X POST http://httpbin.org/post
```
・何かしらメッセージボディに詰めたい場合は以下を叩いてみてください（-dオプションでデータをリクエスト）

```httbinでPOSTリクエスト.
curl -v -X POST -d "body=post" http://httpbin.org/post
```

レスポンスが返ってきたでしょうか？ぜひ一度自身の環境で確認してみてください。

<br>
#終わりに

初投稿ではありますが、この記事が一人でも多くの方のお役に立てればと思います。

また、ご指摘などありましたらよろしくお願いします