このレッスンでできるようになること: いま見ているページが「どこの・何というファイル」で、どうやって手元に届いたのかを、自分の言葉で説明できる。 所要時間: 35〜45分 このレッスンは、読みながらブラウザで4回だけ手を動かします。インストールはありません。
再開する人へ: このレッスンはブラウザだけで進みます。ターミナルもインストールも使いません。前回の続きの見出しから読み始めてOKです。
これから開発を学ぶ前に、まず「Web ってこういう仕組みなのか」という全体の地図を、頭にざっくり持っておきましょう。完全な未経験でも大丈夫です。「ブラウザって何」「サーバーって何」というところから、手を動かしながら確かめていきます。
このレッスンは長めですが、途中の見出しで区切ってかまいません。疲れたら「今日はここまで」と決めて、次回は続きの見出しから読み始めればOKです。
1. Webページの正体は「ファイル」です
いちばん最初に、いちばん大事なことをお伝えします。**あなたがいま見ているこのページは、誰かのコンピュータのフォルダに置かれた「ファイル」**です。
- Webページは、HTMLファイル1枚（文章と見出しの中身）に、画像やCSSなどの素材ファイルが組み合わさってできています。
- CSS とは、色や配置などの見た目を指定するファイルのことです。
- それらのファイルは、どこかのコンピュータのフォルダの中に、あなたのパソコンにある文書ファイルや画像ファイルと同じように、ただ置かれています。
これは、第3章であなた自身が index.html というファイルを作って公開するときの土台になる考え方です。「ページ＝特別な何か」ではなく「ページ＝ファイル」と分かっていれば、この先がぐっと楽になります。
やってみよう①（3分の成功体験）
本当にファイルなのか、自分の目で確かめてみましょう。いま開いているこのページの上で操作します。
- ページの何もない部分で右クリックします
- 出てきたメニューから「ページのソースを表示」を選びます（ブラウザによっては「ソースを表示」「View Page Source」などの表記です）
達成状態: 英語や記号がびっしり並んだ、文字だけの画面が新しく開けば成功です。読めなくてまったく問題ありません。
いま出てきた文字の集まりが、まさに**このページの正体（HTMLファイルの中身）**です。あなたが見ていた見出しや文章が、この文字の中に含まれているのが分かります。確認したら、そのタブは閉じてかまいません。
2. ブラウザとは
ブラウザは、Webページを見るためのプログラムです。Chrome・Safari・Edge などが、その代表です。あなたが「ネットを見る」とき使っているのが、このブラウザです。
もう少し正確に言うと、ブラウザはサーバーからファイル（HTMLや画像）を受け取り、人が読める形の画面に描き直すプログラムです。さっき見た「文字だけのソース」を、見出しや画像が並んだ読みやすいページに変換してくれているのがブラウザだ、とイメージしてください。
3. ブラウザと検索エンジンは別物です
ここは、最初につまずきやすい大事なポイントです。ブラウザと検索エンジンは、まったく別のものです。
- ブラウザは、あなたのパソコンに入っている**ソフト（道具）**です。Chrome・Safari・Edge など。
- 検索エンジンは、Web上にあるサービスです。Google・Bing など。「言葉を渡すと、関連するページの一覧を返してくれる」係です。
混ざりやすい理由は、ブラウザのアドレス欄が「住所入力」と「検索」の2役を兼ねているからです。同じ欄でも、入れるものによって行き先が変わります。
やってみよう②
アドレス欄に何を入れるかで、行き先がどう変わるかを見てみましょう。
先に予測（2択・紙かメモに書いてから開いてください）: アドレス欄に「example.com」のような住所ではなく、「天気」のようなただの単語を入れて Enter を押すと、どうなると思いますか。
- (A) その単語のページに直接たどり着く
- (B) 検索結果の一覧が表示される
書けたら、実際にやってみます。ブラウザで新しいタブを開き、アドレス欄に 天気 と打って Enter を押してください。
答え合わせ（予測を書いてから開く）
正解は (B) です。ただの単語を入れると、ブラウザはそれを検索エンジンに渡し、検索結果の一覧が返ってきます。一方、https:// から始まる住所を入れると、そのサーバーへ直行してページが開きます。同じアドレス欄でも、「住所」か「単語」かで行き先が変わるのが分かりましたね。
4. サーバーとは
サーバーは、ファイルを預かっておいて、頼まれたら返すコンピュータです。多くは24時間動いていて、世界中からの「このページください」という頼みに応えています。
ここで大事なのは、サーバーは特別な機械ではないということです。中身は、あなたのパソコンと同じ「コンピュータ」です。「ファイルを預かって、頼まれたら返す」という役割を任されているコンピュータを、サーバーと呼んでいるだけです。
実は、あなたのパソコンもサーバーになれます。第4章では、あなたのパソコン自身をサーバーにして、自分で作ったページを動かします。「サーバー＝遠くの特別な何か」という思い込みを、いまのうちに外しておきましょう。
5. インターネットと全体の地図
**インターネットは、あなたのPCやサーバーを含む、世界中のコンピュータをつなぐネットワーク（網）**です。ここまでの登場人物を、1枚の地図にすると次のようになります。
たとえるなら、ブラウザは「あなたの窓口係」、サーバーは「頼まれた品物を出す倉庫」、インターネットは「その2つをつなぐ道路網」のような関係です。
6. URLの読み方
**URL は、Webページの「住所」**です（例: https://example.com）。ブラウザに URL を入れると、ブラウザはその住所のサーバーを探し、ページを受け取って画面に表示します。
この住所は、実は3つの部分に分けて読めます。
https: 通信の「話し方の取り決め」です。末尾のsは、やり取りが暗号化されている（盗み見されにくい）印です。example.com: どのサーバーかを表す名前で、ドメインと呼びます。/menu/lunch.html: そのサーバーの中のどのファイルかを指す部分です。
ドメイン（example.com）から実際のサーバーを探し当てる仕組みは DNS と呼ばれ、これは自分でサイトを公開する第3章でくわしく扱います。ここでは「URLは3つに分けて読める」がつかめれば十分です。
やってみよう③
いま開いているこのページの URL を、上の3つに分けて読んでみましょう。ブラウザのアドレス欄をクリックすると、URL の全体が見えます。
達成状態: 「https の部分」「ドメインの部分」「その後ろのファイルを指す部分」の、どこがどこかを指差しで言えればOKです（ページによっては3つ目が無いこともあります。それでも構いません）。
7. リクエストとレスポンス（往復のイメージ）
URL を開いたとき、ブラウザとサーバーのあいだでは、短い往復が起きています。
- リクエスト: ブラウザが「このページください」と頼みます。
- レスポンス: サーバーが「どうぞ」と、ページやデータを返します。
受け取ったページを、ブラウザが画面に表示します。これが、あなたが毎日見ている「Webページが開く」の正体です。
8. 1ページの表示は、往復1回では終わらない
実は、1枚のページが表示されるまでに、この往復は何度も起きています。
- ブラウザはまず HTML を1回もらいます。
- その HTML を読むと「ここに画像が要る」「見た目の指定（CSS）も要る」と分かります。
- そこでブラウザはもう一度、今度は画像やCSSを頼みます。
- 素材が全部そろって、はじめて完成したページが表示されます。
だから、画像や素材が多いサイトほど往復が増え、読み込みに時間がかかります。「あのサイト、開くのが遅いな」の正体は、この往復の多さだったりします。
9. うまくいかないときも、返事は返ってくる
頼んだページが無かったときでも、サーバーは黙り込むのではなく、ちゃんと返事を返します。この返事は番号で表され、よく見かけるのは次の3つです。
| 番号 | サーバーが言っていること | かんたんに言うと |
|---|---|---|
| 404 | 「そのファイルは無い」 | 住所は届いたが、指すファイルが見つからない |
| 403 | 「見せない設定になっている」 | 存在はするが、見る許可がない |
| 500 | 「こちら側で失敗した」 | サーバーの中で問題が起きた |
大事なのは、404 は故障ではなく、正常な返事だということです。「無いものは無い」とサーバーが正直に教えてくれている状態です。
やってみよう④
わざと「無い住所」を頼んで、サーバーの返事を見てみましょう。
先に予測（2択・紙かメモに書いてから開いてください）: いま開いているページの URL の末尾に、/this-page-does-not-exist を付け足して Enter を押すと、どうなると思いますか。
- (A) ブラウザが壊れて、何も表示されなくなる
- (B) 「見つかりません」といったエラー画面が出る
書けたら、実際にアドレス欄の末尾に /this-page-does-not-exist を足して Enter を押してみてください。
答え合わせ（予測を書いてから開く）
正解は (B) です。「404」や「Not Found」「見つかりません」といったエラー画面が出ます。ブラウザもパソコンも壊れていません。サーバーが「その住所のファイルは無いですよ」と正常に返事をしただけです。エラー画面は故障の証拠ではなく、状況を教えてくれるメッセージなのだと覚えておいてください。この「エラー＝メッセージ」という見方は、第0章の後半（レッスン05 doctor）で、あなたの相棒になります。
10. 用語の整理
ここまでに出てきた言葉を、1行ずつ整理します。混ざったら、この表に戻ってきてください。
| 用語 | 一言でいうと |
|---|---|
| Webページ | HTMLファイル1枚＋素材ファイルでできた、1枚の画面 |
| Webサイト | 複数のWebページが集まったもの（例: 会社の公式サイト全体） |
| ブラウザ | Webページを見るためのソフト（Chrome・Safari・Edge） |
| 検索エンジン | 言葉を渡すと関連ページの一覧を返す、Web上のサービス（Google など） |
| サーバー | ファイルを預かって、頼まれたら返すコンピュータ |
| URL | Webページの住所（https ＋ ドメイン ＋ ファイルの場所） |
仕組みの解剖 — 「ホームページが見られない」を分解する
ここは、この教材が目指す**FDE（お客様の困りごとを技術で解く仕事）**の視点を、少しだけ先取りするコーナーです。
お客様がある日、こう言ったとします。「ホームページが見られないんだけど」。この一言は、実はいくつもの別々の原因が混ざっています。ここまで学んだ地図に置き直すと、たとえば次のように分解できます。
| お客様の言葉 | 地図のどこの話か |
|---|---|
| そもそもネットにつながっていない | 手元の回線（あなたのPCとインターネットの間） |
| URLを打ち間違えている | 住所（URL）そのもの |
| ページが真っ白・崩れる | サーバーは返せているが、素材の往復のどこかで失敗 |
| 「見つかりません」と出る | サーバーが 404 を返している（ファイルが無い） |
「相手のざっくりした言葉を、この地図のどこかに置き直す」。これが、FDEの最初の仕事です。今日はまだ分解できなくて大丈夫です。「困りごとは、地図のどこかに必ず場所がある」という感覚だけ持ち帰ってください。
この先の章とのつながり
- 第3章（自分でサイトを公開する）: ドメインからサーバーを探し当てる仕組み（DNS）と、ページを世界に公開する手順を扱います。
- 第4章（自分のPCをサーバーにする）: あなたのパソコン自身をサーバーにして、作ったページを動かします。
今日つかんだ地図が、これらの章の土台になります。
理解ゲート（セルフチェック）
このレッスンはまだ Claude Code を入れる前なので、自分で答え合わせをします。次の5問に、自分の言葉で答えてから、開いて確認してください。
Q1. ブラウザと検索エンジンは、どう違う？
ブラウザは、パソコンに入っている「Webページを見る道具（ソフト）」。Chrome・Safari・Edge など。検索エンジンは、Web上の「言葉を渡すと関連ページの一覧を返すサービス」。Google など。別物です。
Q2. URL `https://example.com/menu/lunch.html` を3つに分けると？
https（話し方の取り決め）／ example.com（どのサーバーか＝ドメイン）／ /menu/lunch.html（そのサーバーの中のどのファイルか）。
Q3. Webページの中身は、どこに・どんな形で置かれている？
どこかのコンピュータ（サーバー）のフォルダの中に、HTMLファイルや画像ファイルなどの「ファイル」として置かれている。ページは特別な何かではなく、ファイルの集まり。
Q4. 「404」は、誰が、何と言っている状態？
サーバーが「その住所のファイルは無い」と返事をしている状態。故障ではなく、正常なメッセージ。
Q5. 1枚のページが表示されるまで、往復は何回起きる？
1回では終わらない。まずHTMLを1回もらい、そのあと画像やCSSなどの素材を追加でもらうので、何度も往復する。素材が多いほど往復が増えて遅くなる。
このレッスンのまとめ
覚え込む必要はありません。次の地図が、なんとなく頭に浮かべば十分です。
- Webページ＝どこかのサーバーに置かれたファイルの集まり、と言える
- ブラウザ（道具）と検索エンジン（サービス）は別物、と言える
- URL＝住所で、3つの部分（https／ドメイン／ファイルの場所）に分けて読める
- 404 などのエラーは故障ではなく、サーバーからの返事、と分かる
このレッスンでは、まだメモ用のファイル（
setup-notes.md）は作りません。次のレッスン02で、ターミナルを使って作ります。今日の予測メモは、紙やメモアプリに残しておけば十分です。
今日はここで区切ってOKです。 次のレッスンでは、いよいよ「文字でパソコンに指示を出す画面（ターミナル）」に触れます。
次は レッスン02 ターミナルと友達になる へ。
最終確認日: 2026-07-24