Web開発の基礎知識（HTTP・ブラウザ・サーバー）
この章では、Springを学ぶ前に必要な「Webの仕組み」を理解する。 ブラウザとサーバーはどのようにやりとりしているのか、HTTPとは何かを把握することが目的である。
学習のゴール
- HTTPとは何かを説明できる
- リクエストとレスポンスの流れを説明できる
- GETとPOSTの違いを説明できる
- ブラウザがどのようにページを表示するかを説明できる
- Webアプリケーションとは何かを説明できる
1. Webの仕組み：ブラウザとサーバーの対話
Webアプリケーションは、 ブラウザ と サーバー が「HTTP」というルールに従って通信することで動いている。
- ユーザーがブラウザのURL欄にアドレスを入力してEnterキーを押す
- ブラウザが指定されたサーバーに「このページをください」という リクエスト を送る
- サーバーが受け取り、処理を行い、HTMLなどの レスポンス を返す
- ブラウザが受け取ったHTMLを解釈し、画面に表示する
この一連のやりとりを HTTPリクエスト / レスポンス と呼ぶ。
2. HTTPとは？
HTTP（HyperText Transfer Protocol） は、ブラウザとサーバーがデータをやりとりするためのルール（プロトコル）である。
「どのURLに」「何をしたいのか」「どんなデータを送るか」を定めた取り決めが HTTP である。
URLの構造
https://shop.example.com/items?category=books
└─┬─┘ └──────┬─────────┘└──┬┘ └─────┬─────┘
│ │ │ └ クエリパラメータ（条件や追加情報）
│ │ └ パス（どのコンテンツか）
│ └ ホスト名（どのサーバーか）
└ スキーム（通信方式。httpsは暗号化あり）
- スキーム（https）：通信方式を表す。
httpsは暗号化された通信を表す - ホスト名：どのサーバーにリクエストを送るかを表す
- パス：サーバー上の「どのコンテンツか」を表す
- クエリパラメータ：「?」以降。追加の条件や情報を渡すために使う
3. リクエストとレスポンス
リクエスト
ブラウザがサーバーに送る「要求」をリクエストと呼ぶ。 リクエストには主に以下の情報が含まれる。
- HTTPメソッド：何をしたいか（GET：取得、POST：送信）
- URL：どこにアクセスするか
- ヘッダー：ブラウザの種類、受け入れ可能なデータ形式など
- ボディ（POSTの場合）：フォームに入力したデータなど
レスポンス
サーバーがブラウザに返す「応答」をレスポンスと呼ぶ。 レスポンスには主に以下の情報が含まれる。
- ステータスコード：処理の結果（200：成功、404：見つからない、500：サーバーエラー）
- ヘッダー：返すデータの種類（HTML、JSON など）
- ボディ：実際のHTML・画像・JSONデータなど
| コード | 意味 | 例 |
|---|---|---|
| 200 OK | 正常に処理された | ページが正常に表示された |
| 301/302 | リダイレクト | 別のURLに転送された |
| 404 Not Found | リソースが見つからない | 存在しないページにアクセスした |
| 500 Internal Server Error | サーバー側でエラーが発生した | プログラムが例外をスローした |
ブラウザの開発者ツール（F12）の「Network」タブでリクエスト/レスポンスの詳細を確認できる。
4. GETとPOST
HTTPには複数の「メソッド（動詞）」があるが、Webアプリの学習段階では主に GET と POST を使う。
GET
GETはデータを「取得する」ためのメソッド である。
- ブラウザでURLを直接入力してアクセスする
- リンクをクリックする
- 検索フォームで検索する（一般的に）
GETリクエストでは、パラメータはURLのクエリパラメータ（?key=value）として送られる。
URLに情報が含まれるため、 ブックマークや共有が可能 なアクセスに適している。
POST
POSTはデータを「送信する」ためのメソッド である。
- HTMLフォームの送信ボタンを押す
- ファイルをアップロードする
- 新しいデータを登録する
POSTリクエストでは、データはリクエストのボディ（URLには見えない部分）に入れて送られる。 パスワードや個人情報のような URLに見せたくないデータの送信 に向いている。
| 目的 | 使うべきメソッド |
|---|---|
| ページを表示する | GET |
| データを検索する | GET（URLに条件が含まれてよい場合） |
| フォームのデータを送信する | POST |
| ユーザー登録・ログイン | POST |
| パスワードなど秘密情報を送る | POST |
5. ブラウザがページを表示する仕組み
ブラウザはサーバーからHTMLを受け取り、以下の流れで画面を描画する。
- サーバーから HTML を受け取る → ページの「骨格」
- HTMLの中に書かれた CSS ファイルを別途取得 → 見た目（色・フォント・レイアウト）
- HTMLの中に書かれた JavaScript ファイルを別途取得 → 動的な操作（ボタンのイベント等）
- これらを組み合わせて画面に表示する
| 技術 | 役割 | 例 |
|---|---|---|
| HTML | ページの構造・内容 | 見出し、段落、フォームなど |
| CSS | ページの見た目 | 色、フォント、レイアウトなど |
| JavaScript | ページの動作 | ボタンのイベント、非同期処理など |
Springで作るWebアプリでは、サーバー側でHTMLを動的に生成して返す。 この「動的にHTMLを生成する」部分を担うのが Thymeleaf である。
6. Webアプリケーションとは
Webアプリケーション とは、ブラウザ上で動作するアプリケーションのことである。 単純な静的HTMLページと違い、 ユーザーの操作や入力に応じてHTMLを動的に生成・返す のが特徴。
- ECサイト：商品一覧をDBから取得し、HTMLを生成して返す
- SNS：ユーザーの投稿をDBに保存し、タイムラインを動的に表示する
- 予約システム：フォームから予約データを受け取り、DBに登録する
これらはすべて「ブラウザ → サーバー → DB → サーバー → ブラウザ」という流れで動いている。 Springは、このようなWebアプリケーションをJavaで効率よく構築するためのフレームワークである。
ブラウザからサーバーへの通信は、インターネット上の誰でも見られる可能性がある。 そのため、パスワードなどの重要なデータを送信する際は、 HTTPS（暗号化通信） を使うことが必須である。
また、ユーザーからの入力値は 必ず検証（バリデーション）する 必要がある。 「送信されるデータは正常である」と信頼してはいけない。これはセキュリティの基本原則である。
まとめ
- HTTP は、ブラウザとサーバーがデータをやりとりするためのルール（プロトコル）である
- ブラウザはサーバーに リクエスト を送り、サーバーは レスポンス を返す
- GET はデータの取得・ページ表示に使い、 POST はデータの送信・登録に使う
- ブラウザは受け取ったHTML・CSS・JavaScriptを組み合わせて画面を描画する
- Webアプリケーション は、ユーザーの操作に応じてHTMLを動的に生成するアプリケーション
- Spring は、JavaでWebアプリケーションを効率よく構築するためのフレームワーク
- 次章では、Webアプリの構造を理解するための MVCモデル を学ぶ