CURRICULUM / LAYER 01 / CHAPTER 01

そもそもウェブサイトとは何か

ブラウザのアドレスバーにURLを打ち込んでEnterを押す。

すると、画面に文字や画像が現れる。

この当たり前の現象の裏側で、何が起きているのか。

そこから始めましょう。

ウェブサイトは「会話」でできている

ウェブサイトを表示するという行為は、本質的には2人の登場人物による会話です。

片方は、あなたの目の前にあるブラウザ。

もう片方は、世界のどこかに置かれているサーバーと呼ばれるコンピュータ。

ブラウザがサーバーに「このページをください」と頼み(リクエスト)、サーバーが「はい、これですよ」と返事をする(レスポンス)。

たったこれだけの会話の積み重ねで、ウェブの世界はできています。

— Key Concept

ブラウザ(クライアント)とサーバーが、リクエストとレスポンスをやり取りする。

この仕組みを HTTP(HyperText Transfer Protocol)と呼びます。

「プロトコル」というのは、要するに「会話のルール」のことです。

サーバーは何を返してくるのか

では、サーバーは「ページをください」と頼まれたとき、具体的に何を返しているのでしょうか。

答えは、ほとんどの場合、テキストファイルです。

それも、ただのテキストではなく、特別な書き方をされた文字列。

ブラウザがそのテキストを受け取って、「ふむふむ、ここは見出しか。ここは段落だな。ここは画像を表示するのか」と解釈し、画面に描き出していく。

これが、あなたが見ているウェブページの正体です。

その「特別な書き方をされたテキスト」の代表が、これから学ぶHTMLです。

試しに、サーバーが返してくる中身を覗いてみましょう。

<!-- サーバーがブラウザに返している中身(ごく一部) -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <title>はじめてのページ</title>
</head>
<body>
  <h1>こんにちは</h1>
  <p>これは段落です。</p>
</body>
</html>

こんなテキストが、ネットワークを通じてあなたのブラウザに届き、ブラウザが「<h1>は大きい見出しだから大きく表示しよう」「<p>は段落だから普通の文字で表示しよう」と解釈して、画面に並べていく。

それだけのことなのです。

「動的」なウェブサイトと「静的」なウェブサイト

ここまでの説明だと、サーバーは「あらかじめ用意されたファイルをそのまま返しているだけ」のように聞こえます。

実際、それで済むサイトもあります。

これを静的サイトと呼びます。

会社案内や、シンプルなブログなどに多いタイプです。

一方で、Amazonの商品ページや、Twitterのタイムラインのように、誰がアクセスするか、いつアクセスするかによって中身が変わるサイトもあります。

これを動的サイトと呼びます。

動的サイトでは、サーバーがリクエストを受けるたびに、その場でHTMLを「組み立てて」返しているのです。

その「組み立てる」役を担うのが、これから学ぶPHPのようなサーバーサイドの言語と、データを保管しておくデータベースです。

— Note

この教材では、最終的に動的サイト(掲示板や予約システム)を自分で作れるようになることを目指します。

ただし、その土台として「HTMLとは何か」「ブラウザとサーバーは何を会話しているのか」をきちんと押さえておく必要があります。

急がずにいきましょう。

図にすると、こうなります

[あなたのブラウザ]
       │
       │  ① 「このページをください」
       │     (HTTPリクエスト)
       ▼
[サーバー(世界のどこか)]
       │
       │  ② HTMLを組み立てる
       │     (静的なら、そのまま読む)
       │     (動的なら、PHPがDBから情報を取って組み立てる)
       │
       │  ③ 「はい、これですよ」
       │     (HTTPレスポンス = HTML)
       ▼
[あなたのブラウザ]
       │
       │  ④ 受け取ったHTMLを解釈して、画面に描く
       ▼
[ あなたが見ているウェブページ ]

解読演習

第1章では「読む」訓練が中心です。

次のコードを見て、何が起きるか自分の言葉で説明してみてください。

答えはすぐに見ず、まず自分で考えるのが大事です。

— EXERCISE 01-01-A

このHTMLは、ブラウザに何を表示させるか

次のHTMLをブラウザが受け取ったとき、画面にはどんな内容が表示されるでしょうか。

タグを一つずつ見て、それぞれが何を意味しているか考えてみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>和泉のページ</title>
</head>
<body>
  <h1>はじめまして</h1>
  <p>今日からウェブを学びます。</p>
  <p>よろしくお願いします。</p>
</body>
</html>

解答例を見る

ブラウザのタブには「和泉のページ」と表示されます(これは<title>の中身)。

ページの本体には、まず大きな見出しとして「はじめまして」、その下に小さく「今日からウェブを学びます。」「よろしくお願いします。」という2つの段落が縦に並んで表示されます。

ポイントは、<head>の中身は画面には出ない情報(タブのタイトルなど)で、<body>の中身が実際に画面に表示される、という区別です。

そして<h1>は「最も大きい見出し」、<p>は「段落」という意味のラベルだ、ということ。

— EXERCISE 01-01-B

なぜHTMLには「閉じタグ」があるのか

HTMLでは、<p>と書いたら、必ず</p>で閉じます。

<h1>なら</h1>で閉じる。

なぜ、わざわざ閉じる必要があるのでしょうか。

「もし閉じなかったらブラウザはどう困るか」を想像して、自分の言葉で説明してみてください。

解答例を見る

ブラウザは、タグを見て「ここから段落が始まる」と理解します。

でも、もし閉じタグがなかったら、「どこで段落が終わるのか」が分かりません。

段落の中にさらに別の要素が入ったり、複数の段落が続いたりするので、「始まり」と「終わり」の両方を明示しないと、ブラウザはどこまでがひとかたまりなのかを判断できないのです。

言ってみれば、閉じタグは「ここで一区切りです」という宣言。

HTMLが入れ子(タグの中にタグ)を許す言語である以上、この宣言がないと正しく構造を読み取れません。

この章のまとめ

ウェブサイトは、ブラウザとサーバーの「会話」でできている
会話のルールは HTTP。ブラウザがリクエストを送り、サーバーがレスポンスを返す
レスポンスの中身は、ほとんどの場合 HTML(特別な書き方をされたテキスト)
あらかじめ用意されたHTMLをそのまま返すのが 静的サイト
サーバーがその場でHTMLを組み立てるのが 動的サイト(PHPやデータベースの出番)

次の章では、いよいよHTMLを「読む」訓練に入ります。

どんなタグがあって、どう組み合わせると何が表示されるのか。

そして、AIが書いてきたHTMLを見て「これは何をしているか」を自分の言葉で説明できるようになることを目指します。