Skip to Content
ドキュメントWeb・プログラミング基礎Webってどういう仕組み?

Webってどういう仕組み?

知っている人へ: 「確認しよう」のチェックリストだけやって次に進んでOKです。

このページで学ぶこと

  • ブラウザにURLを入力してからページが表示されるまでの仕組みがわかる
  • HTTPとは何かがわかる
  • フロントエンド・バックエンド・データベースの役割がわかる

なぜ知る必要があるのか

Webの仕組みを知らないままコードを書くのは、全体像を把握しないまま進むようなものです。
エラーが出たとき「どこで何が起きているのか」が推測できるようになります。
難しい話は後回しにして、まずざっくり全体像を掴みましょう。


ブラウザにURLを入力すると何が起きるか

ざっくり言うと:

  1. ブラウザが「このページをください」とサーバーにお願いする
  2. サーバーが「はい、どうぞ」とHTMLファイルを送り返す
  3. ブラウザがそのHTMLを読んで画面に表示する

HTTPとは

HTTP(HyperText Transfer Protocol)は、ブラウザとサーバーが会話するためのルールです。

よく使う2種類のやりとり:

種類意味
GETデータをくださいページを開く、検索する
POSTデータを送りますログイン、フォーム送信

ブラウザのアドレスバーに URL を入力してページを開くのは GET です。

HTTPS の「S」は Secure(暗号化)の意味。現代のWebサイトはほぼすべて HTTPS です。


フロントエンド・バックエンド・データベース

Webアプリは大きく3つの層に分かれています。

例: SNSアプリで投稿を表示する場合

この3つの層の役割を理解しておくと、エラーが出たときに「どこで何が起きているか」を推測しやすくなります。
具体的にどの技術を使って実装するかは、コース選択後に詳しく学んでいきます。


やってみよう

ブラウザの開発者ツールを開く

ブラウザのネットワーク通信を実際に見てみましょう。

  1. Chrome または Edge を開く
  2. 適当なページ(例: google.com)を開く
  3. 開発者ツールを開く
    • Windows: F12
    • Mac: Cmd + Option + I
  4. 「Network」タブをクリックする
  5. ページをリロードする
    • Windows: F5
    • Mac: Cmd + R

HTTP通信の一覧が表示されます。一番上のリクエストをクリックして「Headers」を見ると
GETStatus Code: 200 などが確認できます。

200って何?
HTTPステータスコードといいます。200 は「成功」を意味します。
よく見るコード:

  • 200 OK(成功)
  • 404 Not Found(ページが見つからない)
  • 500 Internal Server Error(サーバーでエラーが起きた)

確認しよう

  • ブラウザの開発者ツール(Windows: F12 / Mac: Cmd + Option + I)を開けた
  • Networkタブでリクエストの一覧を見た
  • ステータスコード 200 を確認した
  • フロントエンド・バックエンド・DBの役割を人に説明できる

AIに聞いてみよう

「HTTPのGETとPOSTの違いを、具体的な例を使って初心者向けに説明してください」


次のステップ

HTMLを書いてみよう

Last updated on