Webってどういう仕組み?
知っている人へ: 「確認しよう」のチェックリストだけやって次に進んでOKです。
このページで学ぶこと
- ブラウザにURLを入力してからページが表示されるまでの仕組みがわかる
- HTTPとは何かがわかる
- フロントエンド・バックエンド・データベースの役割がわかる
なぜ知る必要があるのか
Webの仕組みを知らないままコードを書くのは、全体像を把握しないまま進むようなものです。
エラーが出たとき「どこで何が起きているのか」が推測できるようになります。
難しい話は後回しにして、まずざっくり全体像を掴みましょう。
ブラウザにURLを入力すると何が起きるか
ざっくり言うと:
- ブラウザが「このページをください」とサーバーにお願いする
- サーバーが「はい、どうぞ」とHTMLファイルを送り返す
- ブラウザがそのHTMLを読んで画面に表示する
HTTPとは
HTTP(HyperText Transfer Protocol)は、ブラウザとサーバーが会話するためのルールです。
よく使う2種類のやりとり:
| 種類 | 意味 | 例 |
|---|---|---|
| GET | データをください | ページを開く、検索する |
| POST | データを送ります | ログイン、フォーム送信 |
ブラウザのアドレスバーに URL を入力してページを開くのは GET です。
HTTPS の「S」は Secure(暗号化)の意味。現代のWebサイトはほぼすべて HTTPS です。
フロントエンド・バックエンド・データベース
Webアプリは大きく3つの層に分かれています。
例: SNSアプリで投稿を表示する場合
この3つの層の役割を理解しておくと、エラーが出たときに「どこで何が起きているか」を推測しやすくなります。
具体的にどの技術を使って実装するかは、コース選択後に詳しく学んでいきます。
やってみよう
ブラウザの開発者ツールを開く
ブラウザのネットワーク通信を実際に見てみましょう。
- Chrome または Edge を開く
- 適当なページ(例: google.com)を開く
- 開発者ツールを開く
- Windows:
F12 - Mac:
Cmd + Option + I
- Windows:
- 「Network」タブをクリックする
- ページをリロードする
- Windows:
F5 - Mac:
Cmd + R
- Windows:
HTTP通信の一覧が表示されます。一番上のリクエストをクリックして「Headers」を見ると
GET や Status Code: 200 などが確認できます。
200って何?
HTTPステータスコードといいます。200は「成功」を意味します。
よく見るコード:
200OK(成功)404Not Found(ページが見つからない)500Internal Server Error(サーバーでエラーが起きた)
確認しよう
- ブラウザの開発者ツール(Windows:
F12/ Mac:Cmd + Option + I)を開けた - Networkタブでリクエストの一覧を見た
- ステータスコード 200 を確認した
- フロントエンド・バックエンド・DBの役割を人に説明できる
AIに聞いてみよう
「HTTPのGETとPOSTの違いを、具体的な例を使って初心者向けに説明してください」
次のステップ
Last updated on