Webってなに？ホームページが見えるしくみ

たける YouTubeとかゲームのサイトって、どうやってぼくの画面に出てくるんですか？

りこ いいしつもん。じつは「宅配便（たくはいびん）」とそっくりなしくみなの。順番に見ていこう。

Reactを学ぶ前に、まずは土台のお話です。みんなが毎日見ているホームページ（ウェブサイト）。あれは、どうやって画面に出てくるのでしょう？

Webは「宅配便」とそっくり

ホームページが表示されるしくみは、ほしいものを家まで届けてもらう宅配便にそっくりです。登場するのは3人（3つ）です。

ブラウザというのは、いまみんながこのページを見るのに使っている画面のアプリのこと。GoogleのChrome（クローム）や、iPhoneのSafari（サファリ）などです。

ページが届くまでの流れ

たとえばあなたが、あるホームページを見たいとします。すると、こんなことが一瞬で起きています。

1. あなたがブラウザで**URL（住所）**を入力する、またはリンクをおす
2. ブラウザが**サーバー（倉庫）**に「このページください」とお願いする
3. サーバーがページのデータを送り返す
4. ブラウザがそのデータを組み立てて、画面に表示する

この「お願いして、届けてもらう」を、通信速度やデータの大きさに応じた時間でやっているのです。

たける 届くのは「ページのデータ」なんですね。そのデータって、なんなんですか？

りこ HTMLなどは文字で書かれている。画像や動画などのデータも届くよ。その文字を、ブラウザが読んでページに組み立てる。次回からその文字の書き方を学ぶよ。

URLをちょっとだけ読んでみよう

URLは「ページの住所」でしたね。たとえば https://example.com/games というURLは、3つの部分に分かれています。

くわしく覚えなくてだいじょうぶ。「URL＝ページの住所」とだけわかっていればOKです。

ページは「3つのことば」でできている

サーバーから届く「ページのデータ」は、おもに**3つのことば（言語）**で書かれています。

この3つを、このあとの第2回・第3回・第4回で1つずつ見ていきます。そして、その先にあるのが React です。

まとめ

• ホームページは「宅配便」とそっくりなしくみで届く
  • ブラウザ＝受け取る人（Chromeなど）／サーバー＝倉庫／URL＝住所
• ブラウザがサーバーに「ページください」とお願いし、届いたデータを画面に組み立てる
• ページのデータは、おもに HTML・CSS・JavaScript の3つのことばでできている

次の第2回では、ページの「ほね組み」を作る HTML を、実さいに数行書いて画面に出してみましょう。

確認してみる

このページのURLを見て、サイト名とページの場所を分けてみる。画像もページとは別のURLで取得することがある。

仕様・手順の参照先