🟢【初心者向け】HTTPとHTTPSをわかりやすく解説！基礎まとめ

✨ 1. はじめに

Web 開発を始めるとすぐに登場する HTTP と HTTPS。
なんとなく聞いたことはあるけれど、実際どんな役割をしているのか分からない…という初心者の方は多いと思います。

この記事では、HTTP / HTTPS の違い・仕組み・メソッド・レスポンスコード・ネットワークの基礎 を、絵文字を交えてわかりやすく解説します。

2. HTTPとは？

HTTP（HyperText Transfer Protocol）は、ブラウザとサーバがデータをやり取りするための 通信ルール（プロトコル） です。

🔹HTTPは「ステートレス」

HTTPの特徴のひとつが ステートレス（状態を覚えない） です。

言葉だけではわかりにくいので、イメージしやすい例を出します👇

🧑‍💻【1回目のアクセス】

「はじめまして。Qiitaさん！」

🧑‍💻【2回目のアクセス】

「はじめまして。Qiitaさん！」

同じユーザーが何度アクセスしても、HTTP は 「前に来た人だ」と 覚えていない ため、毎回「はじめまして」から始まるわけです。

➡️ だからログイン状態やカートの中身を保持するために
Cookie / セッション / JWT などの仕組みが必要になります。
詳しくは下記の記事を参照してください。

3. HTTPリクエスト／レスポンスの基本

通信は次の2つで構成されています。

📤 HTTP リクエスト（ブラウザ → サーバ）

• どのページを欲しいか

• どんなデータを送るか

などをサーバーに伝える

📥 HTTP レスポンス（サーバ → ブラウザ）

• HTML（Hyper Text Markup Language）
  → ホームページのトップ画面など、ブラウザに表示するページそのもの

• JSON（JavaScript Object Notation）
  → APIで返すデータ。例：ログイン中のユーザー情報、記事リストなど

• 画像 / CSS / JavaScript
  → Webサイトの表示に必要な素材

API（Application Programming Interface）とは、アプリ同士がやり取りするための窓口のことです。
あるサービスの機能やデータを、別のアプリから利用できる仕組み です。
例えば、天気情報アプリが気象データを取得したり、Webアプリがログイン情報を受け取るときなどに使われます。
APIのおかげで、アプリは内部の仕組みを知らなくても連携できます。

3️⃣4. よく使うHTTPメソッド（初心者向けに4つを解説）

HTTPにはさまざまなメソッドがありますが、まずはこの4つを覚えればOKです。

🔹GET（データの取得）

• サーバから情報を「もらう」ために使う

• 副作用なし（基本的にデータを変更しない）

• URLにパラメータがつく
  例：/users?id=1

📌 例：記事一覧を取得、ユーザー情報の取得など

🔹POST（データの作成・送信）

• サーバに新しいデータを「送る」

• フォームやログインでよく使う

• URLではなく、リクエストボディ にデータが入る

📌 例：新規ユーザー登録、ログイン処理など

🔹PUT（データの更新）

• 既存データを「丸ごと更新」するときに使う

• 同じデータを繰り返し送っても結果が変わらない（冪等）
  → 何度PUTしても「最新状態」にそろうイメージ

📌 例：プロフィールの更新（名前・メール・アイコンをまとめて変更）

冪等とは、同じ操作を何回繰り返しても結果が変わらない性質のこと。

🔹DELETE（データの削除）

• 特定のデータを「削除」するときに使う

• こちらも冪等（同じDELETEを2回しても結果は「削除済み」）

📌 例：ユーザーアカウント削除、記事削除など

📝 4つのメソッドをざっくりまとめると

メソッド	役割	用途例
GET	取得	ページ表示、データ取得
POST	新規作成	会員登録、ログイン、投稿
PUT	更新	プロフィール編集
DELETE	削除	アカウント削除、記事削除

5. レスポンスコード（ステータスコード）

ステータスコードは 3桁の番号で表され、上1桁（100〜500）ごとに大きな意味が決まっています。

✅ 200番台：成功（Success）

リクエストが 正常に処理 されたことを示します。

• 200 OK

• 201 Created（新規作成成功）

など👉「うまくいったよ！」の範囲。

🔁 300番台：リダイレクト（Redirection）

別のURLに移動 する必要がある状態。

• 301 Moved Permanently（恒久的な引っ越し）

• 302 Found（一時的な移動）

👉「別の場所へ案内するよ！」の範囲。

⚠️ 400番台：クライアントエラー（Client Error）

ブラウザ（ ユーザー側 ）の リクエストに問題 がある場合。

• 400 Bad Request（リクエストの形式や構造に不備がある）

• 401 Unauthorized（認証が必要）

• 403 Forbidden（権限なし）

• 404 Not Found（URLがみつからない。たまに見ることがある。）

👉「あなたのリクエストに問題があります」

💥 500番台：サーバーエラー（Server Error）

サーバー内部のエラー 。ユーザーのせいではないトラブル。開発者が見たくないトラブル。

• 500 Internal Server Error

• 503 Service Unavailable

👉「サーバー側でトラブルが起きたよ」

🔎 ざっくりイメージ（初心者が覚えやすいまとめ）

番号帯	意味	ひとことで言うと
200番台	成功	👍「うまくいった！」
300番台	リダイレクト	🔁「別の場所へ案内するよ」
400番台	クライアントエラー	⚠️「リクエストがおかしいよ」
500番台	サーバーエラー	💥「サーバーのトラブルだよ」

6. URL（URI）の仕組み

URLは以下のように分解できます👇

https://example.com/users/profile?id=10#section1

🟣 プロトコル（https://）

どんな通信方法でアクセスするか を表す部分。

• http://

• https://（暗号化されて安全）

👉「どういう ルール で話すか」を決める場所

🟢 ドメイン（example.com）

どのサーバーにアクセスするか を表す“住所”のようなもの。

例：

• google.com

• qiita.com

• amazon.co.jp

👉「 どの家（サーバー） を訪ねるのか」を示す

🔵 パス（/users/profile）

サーバーの中で どのページ／どの機能にアクセスするか を示す “部屋番号”。

例：

• /users（ユーザー一覧）

• /articles/1（記事1のページ）

👉「家の中のどの部屋に行く？」を示す

🟡 クエリパラメータ（?id=10）

追加の情報を渡すためのデータ。? の後に、キー=値 の形式で書く。

例：

• ?page=2 → 2ページ目

• ?search=apple → apple を検索

• ?id=10 → id が10 のユーザー

👉「部屋に行くときのメモ書き」

🟠 フラグメント（#section1）

ページ内の 特定の位置にジャンプするための目印。ブラウザ内のスクロール位置を示すだけで、サーバーには送られない。

例：

• #top（ページの一番上）

• #section1（見出し1の位置へスクロール）

👉「ページのどの位置を見るか」

7. HTTPとHTTPSの違い

最大の違いは 暗号化の有無 です。

🔓 HTTP

• 暗号化なし

• 盗聴・改ざんされる可能性あり

🔐 HTTPS

• SSL/TLS により暗号化

• 鍵マーク 🔒 が表示

• セキュリティが高い

• Let's Encrypt で無料化が進み普及している

🔐 ちなみに HTTP は現在ではあまり使われていません。
現代の Web サービスは、セキュリティのため 基本的に HTTPS（TLSで暗号化） を使用します。
ブラウザも HTTP 接続に警告を出すようになったため、実質的に HTTPS が標準となっています。

なお、開発環境やローカルネットワーク など、一部では HTTP が使われることもありますが、公開向けサービスではほぼ HTTPS 一択と考えてOKです。

8. ポート番号（80 と 443）

• HTTP → 80番

• HTTPS → 443番

URLには書かれませんが、内部ではこれらのポートが使われています。

9. TCP/IPモデルにおけるHTTP/HTTPSの位置づけ

Web全体の流れを理解するためにとても大切です。

層	役割
アプリケーション層	HTTP / HTTPS
トランスポート層	TCP（確実に届ける）/ UDP
ネットワーク層	IP（宛先へ届ける）
ネットワークインターフェース層	物理的な通信（Wi-Fi / ケーブル）

👉 HTTPは TCPの上の階層で動く ということだけ押さえればOK！

10. ブラウザからページが表示されるまでの流れ

「全体の流れ」を簡単にまとめます👇

1. ブラウザにURLを入力

2. DNS で URL から IP アドレスを調べる

3. サーバと TCP接続（３ウェイハンドシェイク）

4. HTTPリクエスト送信

5. サーバがレスポンス返却

6. HTML → CSS → JS の順でレンダリングされページ表示

この流れを理解すると、Webの仕組みが一気にわかります。

🎯 11. まとめ

この記事では、初心者向けに HTTP/HTTPS の基礎をまとめました。

• HTTPは ステートレス
  → 毎回「はじめまして」なので Cookie / セッション が必要

• 通信は リクエストとレスポンス で行われる

• GET / POST は最重要メソッド

• ステータスコードは通信結果

• URL構造の理解はAPI学習にも役立つ

• HTTPSは通信を 暗号化 し安全

• ポート番号（80 / 443）

• TCP/IPモデルでのHTTPの位置がわかる

• ブラウザから画面が表示される流れを理解できる

基礎を押さえることで、Web開発がぐっと理解しやすくなります。
これからAPI、セキュリティ、フロントエンドを学ぶ方の第一歩にぜひ活用してください！

🏁 12. おわりに

最後までご覧いただきありがとうございました。これからもいろいろな初心者向けの記事を作成していきますでの、よろしくお願いします。
よかったら他の記事もご覧いただけると嬉しいです。今後もよろしくお願いいたします。