第1回
Webってなに？ホームページが見えるしくみ
ウェブサイトが画面に表示されるしくみを小学生向けに解説。ブラウザ・サーバー・URLの役割を、宅配便のたとえを使ってやさしく説明します。Web入門の第一歩。
·7分で読める
たける
YouTubeとかゲームのサイトって、どうやってぼくの画面に出てくるんですか？
りこ
いいしつもん。じつは「宅配便（たくはいびん）」とそっくりなしくみなの。順番に見ていこう。
Reactを学ぶ前に、まずは土台のお話です。みんなが毎日見ているホームページ（ウェブサイト）。あれは、どうやって画面に出てくるのでしょう？
Webは「宅配便」とそっくり
ホームページが表示されるしくみは、ほしいものを家まで届けてもらう宅配便にそっくりです。登場するのは3人（3つ）です。
| Webの言葉 | 宅配便でいうと | 役わり |
|---|---|---|
| ブラウザ | 注文する人・受け取る人 | ページを見せてくれる画面（Chrome や Safari） |
| サーバー | 商品をしまっている倉庫 | ホームページのデータを持っている強いコンピュータ |
| URL | とどけ先の住所 | 「このページがほしい」と伝えるための住所 |
ブラウザというのは、いまみんながこのページを見るのに使っている画面のアプリのこと。GoogleのChrome（クローム）や、iPhoneのSafari（サファリ）などです。
ページが届くまでの流れ
たとえばあなたが、あるホームページを見たいとします。すると、こんなことが一瞬で起きています。
あなた
（ブラウザ）
（ブラウザ）
──「ページください」（URL）──▶
倉庫
（サーバー）
（サーバー）
あなた
（ブラウザ）
（ブラウザ）
◀──ページのデータが届く──
倉庫
（サーバー）
（サーバー）
- あなたがブラウザで**URL（住所）**を入力する、またはリンクをおす
- ブラウザが**サーバー（倉庫）**に「このページください」とお願いする
- サーバーがページのデータを送り返す
- ブラウザがそのデータを組み立てて、画面に表示する
この「お願いして、届けてもらう」を、ものすごく速く（だいたい1秒もかからずに）やっているのです。
たける
届くのは「ページのデータ」なんですね。そのデータって、なんなんですか？
りこ
正体はね、ただの「文字」なの。その文字を、ブラウザが読んでページに組み立てる。次回からその文字の書き方を学ぶよ。
URLをちょっとだけ読んでみよう
URLは「ページの住所」でしたね。たとえば https://example.com/games というURLは、3つの部分に分かれています。
| URLの部分 | 意味 |
|---|---|
https:// |
「安全にやりとりするよ」という、はじめのきまり |
example.com |
サイトの名前（倉庫の名前） |
/games |
その倉庫の中の、どのページか |
くわしく覚えなくてだいじょうぶ。「URL＝ページの住所」とだけわかっていればOKです。
ページは「3つのことば」でできている
サーバーから届く「ページのデータ」は、おもに**3つのことば（言語）**で書かれています。
| ことば | 役わり |
|---|---|
| HTML | ページの「ほね組み」（なにがあるか） |
| CSS | ページの「見た目」（どう見えるか） |
| JavaScript | ページの「動き」（おしたらどうなるか） |
この3つを、このあとの第2回・第3回・第4回で1つずつ見ていきます。そして、その先にあるのが React です。
まとめ
- ホームページは「宅配便」とそっくりなしくみで届く
- ブラウザ＝受け取る人（Chromeなど）／サーバー＝倉庫／URL＝住所
- ブラウザがサーバーに「ページください」とお願いし、届いたデータを画面に組み立てる
- ページのデータは、おもに HTML・CSS・JavaScript の3つのことばでできている
次の第2回では、ページの「ほね組み」を作る HTML を、実さいに数行書いて画面に出してみましょう。