HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜

HTTP/1.0 から HTTP/3 までの進化を「なぜそう変わってきたのか」という視点で解説するスライドです。

HTTP/1.1 の改善点と限界、HTTP/2 による多重化、不安定なネットワーク環境に強い HTTP/3（QUIC）までを図と猫を使って簡単に説明しています。

「HTTP/2 は速い」「HTTP/3 は新しい」で終わらせず、仕組みと背景を理解したい人向けの内容です。

Progate コミュニティ カンファレンス 2025 発表資料

Transcript

1. HTTPプロトコル正しく理解していますか？ かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ~ 広瀬 エイトル LinuxClub PROGATE コミュニティ カンファレンス 2025.12.27 12:00〜
2. 広瀬 エイトル Hirose Heitor 東京工科大学 コンピュータサイエンス学部 コンピュータサイエンス学科 学部2年 趣味 : ダーツ、カンファレンス参加
3. 注意事項 わかりやすくするために、一部誇張表現や、説明の省略しています。 HTTPバージョンの背景情報が一部を省略しています。 猫がたくさん出てきます。 間違いがあれば @Heitor_Hiroseまで送っていただけるうれしいです
4. HTTPプロトコル正しく理解していますか？ 今日はHTTPのバージョン遍歴と動向について話します。 猫カフェ MOCHA 名古屋栄店 ちゃいちゃん
5. みなさんに質問です！ HTTP/1.1 と HTTP/2 の違いを簡単に説明できますか？
6. 今、こうなっていませんか？ https://http.cat/status/102
7. クライアント （ブラウザ） HTTP（Hypertext Transfer Protocol）は、Webにおいてブラウザとサーバ ーがデータの取得や送信のやり取りするためのもの。 ウェブサーバー リクエスト: GET https://hekuta.net/ レスポンス: HTML、CSS、JS、画像など HTTPプロトコルとは？ https://http.cat/status/200
8. HTTPは自力でサーバーまでたどり着けない。 HTTPは「データの表現」を決めるルールで、 それを相手に届ける機能は持 っていない。実際にデータを運んでいるのは、下のレイヤーにある TCP と いう通信プロトコルを利用している。 HTTP/1.0 : リクエストごとに通信を行う基本的なHTTP（TCP） HTTP/1.1 : 実用性が向上（TCP） HTTP/2 : 複数の通信を同時に扱えるように設計を刷新（TCP） HTTP/3 : 不安定な環境でも強くなった（UDP・QUIC） また、バージョンによってそれ以外のプロトコルが使われることも、 、
9. TCPハンドシェイクについて TCPでは、実際にデータを送受信する前に、通信を開始してよいかを確認す るためのやり取りが行われます。これを TCPハンドシェイク と呼びます。 通信を始める際には、お互いに「接続できるかにゃ？」と確認する。 クライアント ウェブサーバー SYN 「お前、つながるよな？？？」 SYN +ACK「はい、 、 、 、そちらも聞こえますか、 、？」 ACK 「^•ω•^ これで会話できるな！！！」 ※ TCPハンドシェイクのイメージ図
10. HTTPのバージョン遍歴 HTTP/1.0 : リクエストごとに通信を行う基本的なHTTP（TCP） HTTP/1.1 : 実用性が向上（TCP） HTTP/2 : 複数の通信を同時に扱えるように設計を刷新（TCP） HTTP/3 : 不安定な環境でも強くなった（UDP・QUIC）
11. HTTP/1.0では何が問題だったのか HTTP/1.0では、リクエストごとに新しく通信を開始し、レスポンスが終わ ると通信を終了していた。サーバーから1つのデータを通信するたびに、 TCPハンドシェイクをしなければならなかった、 、 、 、 クライアント ウェブサーバー SYN 「お前、つながるよな？？？」 SYN 「お前、つながるよな？？？」 SYN 「お前、つながるよな？？？」 SYN 「お前、つながるよな？？？」 SYN 「お前、つながるよな？？？」 ※ TCPハンドシェイクのイメージ図
12. クライアント ウェブサーバー SYN 「お前、つながるよな？？？」 SYN 「お前、つながるよな？？？」 SYN 「お前、つながるよな？？？」 SYN 「お前、つながるよな？？？」 SYN 「お前、つながるよな？？？」 うるさいって、 、 、 ※ TCPハンドシェイクのイメージ図
13. HTTP/1.1 で猫が助かる。 HTTP/1.1では、TCP接続を切らずに使い回す仕組みが導入された。 これにより、Webページを構成する複数のデータを、同じ通信の上で連続し て取得できるようになった。 （やったね！！） 他にも Hostヘッダが必須 分割送信（Chunked Transfer Encoding） キャッシュ制御の整理 などなど、 、 、
14. HTTP/1.1 の問題点 HTTP/1.1 では、TCP接続を再利用することで通信開始時の無駄な待ち時間 削減されて効率化された。しかし、1つのTCP接続の中では、リクエストと レスポンスは基本的に順番に処理されるという構造は変わっていなかった。 問題点 複数のTCPの接続を確立しない限り、平行にデータを送信できなかった 1つのレスポンスが遅れると、後続のリクエストも待たされてしまう。 ↓ たくさんの通信を行うモダンなウェブサイトとは相性が悪い。
15. GET /index.html GET /assets/css/main.css GET /assets/css/main.css GET /assets/js/main.js GET /images/main/top-page.webp HTTP/1.1 における順番待ち問題 1つの処理の遅れが後続すべてに影響してしまう問題を一般的に、 HOL（Head-of-Line Blocking ）と呼ばれています。 クライアント ウェブサーバー 何かしらの要因で失敗 再送 タイムロスに、 、 あぁ、 、 、 なんでこのサイト表示遅いん？？？ あぁぁぁぁ詰まったぁあああ ※ 1つのTCPセッションで行われるHTTP通信のイメージ図
16. HTTP/2.0 で再度、猫が助かる。 HTTP/2 では、1つのTCP接続の中で、複数のHTTP通信を並行して扱う仕組 みが導入された。1つのレスポンスが遅れても、他の通信を止めずに進めら れるようになった。 （えらい！！） GET /index.html GET /assets/css/main.css GET /assets/css/main.css GET /assets/js/main.js GET /images/main/top-page.webp クライアント ウェブサーバー 何かしらの要因で失敗 再送 なんでこのサイト表示遅いん？？？ あぁぁぁぁ詰まったぁあああ ※ 1つのTCPセッションで行われるHTTP通信のイメージ図 並行で送るので大丈夫！ 並行で送るので大丈夫！
17. もう十分に便利だ！
18. HTTP/2.0 が場合によっては不利に、 、 、 これまでのTCPを利用しているからパケットロスが起きやすい環境や、移動 中など通信が不安定な状況では、一部の通信の遅れが、すべての通信に影響 することがある。 言い換えると、HTTP で起きていたHOLが TCP でも起きる場合がある。
19. HTTP/3.0 で猫がさらに進化する！ HTTP/3 では、TCP を使わず、UDP上に新しく設計されたQUICプロトコル が使われるようになった。 通信開始時の処理も短縮されたり、電車での移動中や地下に入った直後な ど、通信が不安定になりやすい場面でも通信が途切れにくくなった。
20. 最後に
21. 猫が可愛いいいいいいいい https://http.cat/
22. ありがとうございました。 https://http.cat/status/418