HTTP ざっくり基礎知識

はじめに

おはこんばんちは、やわらかエンジニアのまおです(・∀・)。 今回は HTTP について簡単に説明します(・∀・)。

HTTP とは

HTTP 概要

HTTP は、簡単に言うと「アプリ同士でデータをやり取りするための決まりごと」です(・∀・)。 ITエンジニアの間では、この決まりごとを「プロトコル」と言う、なんかそれっぽい横文字で表現します(・∀・)。

プロトコルと言う単語は割とよく出てくるので暗記しちゃいましょう(・∀・)。

慣れないうちは、プロトコルと言う単語が出てきたら機械的に「決まりごと・ルール」と訳してください(・∀・)。 それでだいたい話しが通じると思います(・∀・)w

HTTP ざっくり起源

HTTP は、Hyper Text Transfer Protocol の頭文字を取って付けらました(・∀・)。 1991年頃にティム・バーナーズ・リーと言うイギリス人の研究者が考案して最初の設計、実装して公開されました(・∀・)。

スイスのジュネーヴ郊外、フランスとの国境地帯にまたがるように位置する研究所である「欧州素粒子原子核研究機構」と言う有名な研究所で生まれました(・∀・)。

世界最大規模の素粒子物理学研究所ですね(・∀・)。

HTTP と同時に生まれた HTML と URL

HTTP は、HTML や URLなど共に ティム・バーナーズ・リー が同時に考案・設計をしたもので、元々は研究資料や論文などの文章をやり取りするだけのシンプルなものだったそうです(・∀・)。

なので、HTMLに

  • アンカーリンク a（Anchor）
  • 本文 body（Body）
  • 改行 br（Break）
  • コード code（Code）
  • 見出し h1 - h6（Heading）
  • 水平罫線 hr（Horizontal Rule）
  • 段落 p（Paragraph）
  • タイトル title（Title）

のような、文章に関連するものが HTML タグで標準的に表現できるようになっています(・∀・)。

文字の色やフォント、位置調整などの「装飾」は HTML より後に考案された CSS に任せる形で進歩してきました(・∀・)。 改行はともかく、見出しや水平罫線などは普通に考えたら「装飾」に相当して CSS に任せるような気がしませんか(・∀・)？ これらがタグとしてHTMLに存在するのは、CSSが生まれる以前から「研究文章や論文などを表現する」のに必要な機能だったため標準的に存在しています(・∀・)。

他にも、例えば URL 末尾を / で終わらせると自動的に index.html を探しに行くのも、対象が研究資料などの文章が前提であれば index、つまり「索引・目次」を見に行くのが合理的だった頃の名残ですね(・∀・)。

その仕様が今でも受け継がれていて、デフォルトで index.html やら index.php やらやらを見に行くようにサーバー側を設定する事が多いです(・∀・)。

なお、HTML は Hyper Text Markup Language の頭文字、URL　は Uniform Resource Locator の頭文字ですね(・∀・)。

URL もティム・バーナーズ・リーの考案・設計なのですが、http: のあとのプロトコル区切り文字 // は

「ぶっちゃけ必要なかった」

らしく、インターネットがこんなに使われるようになった後年、ひどく後悔したらしいです(・∀・)w

出典：https://archive.nytimes.com/bits.blogs.nytimes.com/2009/10/12/the-webs-inventor-regrets-one-small-thing/index.html

HTTP の基本

全体の流れ

HTTP 通信の基本的な流れとしては

  • 既にコンピュータ間のネットワーク接続は確立している（例えば TCP/IP などで接続済み）
  • HTTP通信開始
  • クライアント（例えばブラウザ）からサーバーに対してリクエストを送る
  • サーバーはリクエストに応じてレスポンスを返す
  • クライアントはサーバーからのレスポンスを受け取り、処理（画面表示など）を行う
  • HTTP通信完了 と言う流れを取ります(・∀・)。

Hyper Text Transfer Protocol と言うくらいなので、通信内容は全て文字列で行われます(・∀・)。

HTTP のルールの中では文字列、それも半角英数字記号（ASCIIコード）以外は扱いません(・∀・)。

HTTPリクエストについて

HTTPリクエストの全体像

HTTPリクエスト には

  • コントロールデータ
    • リクエストメソッド / リクエストターゲット / HTTPバージョン から構成される
    • リクエスト行・ステータス行などとも呼ばれる
  • ヘッダー
    • 空っぽ、または１～複数行に渡ってサーバーに渡したい情報を格納する
  • コンテント
    • 送信したいデータが有る場合にここに入れる
    • 空っぽの場合もある のような要素があります(・∀・)。

コントロールデータ

HTTP リクエストの中で一番重要な情報になります(・∀・)。

GET /index.html HTTP/1.1

のような１行の情報が書かれています(・∀・)。 これは、クライアント（例えばブラウザなど）がサーバーに対して

  • 何をしたいか？（メソッド）
  • どれに対して（index.html ファイルに対して）
  • HTTPのバージョン の３つの要素が半角スペースで区切られた文字列で表現されます(・∀・)。

上記の例だと

HTTP/1.1 のルールで /index.html を GET したい

と言う意味になります(・∀・)。

この GET の部分を HTTPメソッド、HTTPリクエストメソッド あるいは単に メソッド と呼びます(・∀・)。 現在の HTTP では沢山の種類があるのですが、ここでは基本になる GET と POST だけ覚えればよいでしょう(・∀・)。

GET / POST メソッド

  • クライアント（例えばブラウザなど）がサーバーに対して「ファイルが欲しい、ダウンロードしたい！」と要求（リクエスト）するのが GET
  • クライアント（例えばブラウザなど）がサーバーに対して「ファイルを受け取ってくれ、アップロードしたい！」と要求（リクエスト）するのが POST

です(・∀・)。

HTTPリクエストヘッダ

クライアントがサーバー側に送ったときに付加したい追加情報を格納します(・∀・)。 コントロールデータだけでは不十分な場合に付与する情報ですが、現在はいくつかのヘッダが実質必須になっていますね(・∀・)。

ヘッダは「一般的に当たり前に標準的に使われるもの」と「アプリとかウェブサービスとかが自由に設定したりして独自に使うもの」があります(・∀・)。 一般的には前者の「標準的に使われるヘッダ」があると覚えておけばよいでしょう(・∀・)。

例えば

  • Host
    • 対象の index.html が「どのコンピュータにある index.html か」を格納します
    • 通常はドメイン名（google.co.jp とか example.com とか）が入ります
  • User-Agent
    • 接続元のクライアント（例えばブラウザなど）の情報を格納します
    • 「私（クライアントアプリ）は Windows 10 にインストールされた Google Chrome バージョン 106 です」みたいな情報が入ります

コンテント

  • 一般的に「リクエストボディ」とか、単に「ボディ」とか呼ばれます
  • クライアント（例えばブラウザ）からサーバーに対して送信したいデータが格納されます
    • コンテントの部分は HTTP のルールでは「何が入っても良い」事になっているしその中身は確認しないので、文字以外の画像でもZIPファイルでも何でも格納できます
  • GET の場合は送信するデータはなにもないため、必ず空っぽになります

HTTPリクエストの例

  • サーバー www.example.com の /img/example.jpg をダウンロードしたい場合の例
    GET /img/example.jpg HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
  • サーバー www.example.com の /upload.php に ID と パスワード を送信したい場合の例
    POST /upload.php HTTP/1.1
Host: www.example.com
Content-Type: application/json
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

{"id": "mao","password":"himitsunokotoba"}

HTTPレスポンス

HTTPレスポンスの全体像

クライアントからサーバーにHTTPリクエストを送信すると、サーバーからHTTPレスポンスという形式でデータが返ってきます(・∀・)。

HTTPレスポンス には

  • コントロールデータ
    • HTTPバージョン / ステータスコード / ステータスメッセージ から構成される
    • リクエスト行・ステータス行などとも呼ばれる
  • ヘッダー
    • 空っぽ、または１～複数行に渡ってサーバーに渡したい情報を格納されてくる
    • 通常、空っぽなことはなく割とたくさんの情報が詰め込まれて返ってくる
  • コンテント
    • サーバーからの返却データが有る場合にここに入れる
    • 空っぽの場合もある

のような要素があります(・∀・)。

コントロールデータ

HTTP レスポンスの中で一番重要な情報になります(・∀・)。

HTTP/1.1 200 OK

のような１行の情報が書かれています(・∀・)。

これは、サーバーがクライアントに対して

  • HTTPのバージョン
  • 結果の概要
  • 結果の詳細 の３つの要素が半角スペースで区切られた文字列で表現されます(・∀・)。

上記の例だと

HTTP/1.1 のルールで 結果は 200 で詳細は OK だった

と言う意味になります(・∀・)。

さて、この 200 ですが、これは HTTPステータスコード と呼ばれるものになります(・∀・)。 単純に「成功」とか「失敗」とかなら良いのですが、HTTPはもうちょい複雑で、例えば

  • 問題なく成功
  • 失敗じゃないんだけど、このファイルは他に移動したよ
  • 失敗したよ、理由はアクセス権限がないから
  • 失敗したよ、理由はリクエストされたファイルが無いから
  • 失敗したよ、理由は送ってきたデータがおかしいから
  • 失敗したよ、サーバーで予期しないエラーが発生なったから など、色々な「状態」があります(・∀・)。

これらを ステータスコード と呼ばれる ３桁の数字 で表現します(・∀・)。 これもかなり種類があるのですが、とりあえず

  • 200
    • 問題なく成功
  • 301
    • 失敗じゃないんだけど、このファイルは他に移動したよ
  • 400
    • 失敗したよ、理由は送ってきたデータがおかしいから
  • 403
    • 失敗したよ、理由はアクセス権限がないから
  • 404
    • 失敗したよ、理由はリクエストされたファイルが無いから
  • 500
    • 失敗したよ、サーバーで予期しないエラーが発生なったから あたりを覚えておけばよいでしょう(・∀・)。

必ずしも暗記する必要はないですが、割と暗記してるITエンジニアは多いかもですね(・∀・)。

HTTPレスポンスヘッダ

サーバーがクライアントにデータをお繰り返したときに付加したい追加情報を格納します(・∀・)。 リクエストヘッダと同じく、こちらもいくつかのヘッダが実質必須になっていますね(・∀・)。

コンテント

  • 一般的に「レスポンスボディボディ」とか、単に「ボディ」とか呼ばれます
    • こちらも、コンテントの部分は HTTP のルールでは「何が入っても良い」事になっているしその中身は確認しません
    • 文字でも画像でもZIPファイルでも何でも入って返ってきます

HTTPレスポンスの例

  • サーバー www.example.com の /img/example.jpg に GET を送ったけど /img/example.jpg がファイルが見つからなかった場合
    HTTP/1.1 404 Not Found
Content-Type: text/html; charset=UTF-8
Date: Sun, 28 May 2023 08:07:22 GMT
Expires: Sun, 04 Jun 2023 08:07:22 GMT
Content-Length: Accept-Encoding

<!doctype html>
    <html>
    <head>
        <title>Example</title>
...
  • サーバー www.example.com の /upload.php にファイルを送って成功した
    HTTP/1.1 200 OK
Content-Type: application/json; charset=UTF-8
Date: Sun, 28 May 2023 08:07:22 GMT
Expires: Sun, 04 Jun 2023 08:07:22 GMT
Content-Length: Accept-Encoding

{}

ざっくり全体像

全体の流れは以下の感じになります(・∀・)。

  1. クライアント（例えばブラウザ）が、対象のサーバーに HTTP に則った文字列を送信する
  2. 文字列は GET /index.html HTTP/1.1 のように HTTPリクエスト のルールに沿って送られる
  3. HTTPリクエスト のルールは、大雑把に GET や POST などがあり、ヘッダなどの追加情報もある
  4. サーバーは送られてきた HTTPリクエスト に対して HTTPレスポンス を返す
  5. クライアント（例えばブラウザ）は、返されてきた HTTPレスポンス の ステータスコード や レスポンスヘッダ を見て、返ってきたデータを解釈して処理する

ざっくりこの流れを理解できていれば良いでしょう(・∀・)。

まとめ

  • HTTP は中身は 単なる文字列 でしかない
  • HTTP は単純に リクエスト（要求） と送ると レスポンス（結果） が返ってくるだけ
  • リクエストの種類を メソッド と呼び、それは GET と POST だけ覚えておけばたいてい事足りる
  • レスポンスの ステータスコード で成功か、失敗ならその理由を判断
  • ほか、細かいことは気にするな

最後に

  • 簡単に HTTP を覚えたら、次は ウェブサーバー でも作ってみましょうかね(・∀・)。