LoginSignup
1
1

More than 3 years have passed since last update.

@n-yama(n yama)

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

Posted at

はじめに

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

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

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

HTTPリクエストの概要

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

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

といった感じです。

image.png

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

HTTPリクエスト

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

HTTPの構成図は以下です。
image.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

ヘッダ

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 : クライアントが理解できるコンテンツタイプをMIME タイプで伝える
Accept-Language : ブラウザが使用する言語。上記だと、日本語と英語をサーバーに提案し、そこから一つ選択して使用する。
Accept-Encoding : ブラウザがデコードできるエンコーディング形式
Connection : ネットワークの接続を維持したままか、閉じるのか制御する。（HTTP/1.1のデフォルトは「keep-alive」です）




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


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

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



HTTPレスポンス

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

HTTPレスポンスの構成図は以下です。
image.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>

リクエストした投稿一覧画面のページが返っています。




自分の環境で動かしてみる

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

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


ブラウザの開発ツール（FireFox）

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

[手順]

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

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

httpbin×curlコマンド

阿部寛さんのHPはGETリクエストはできますが、POSTリクエストでのやりとりなどができません。

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

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

[手順]

・コマンドプロンプトを開きます（macならterminal）。
・httpbinを開いて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

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


終わりに

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

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

1
1
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
Sign upLogin
1
1