Webサイトが表示される仕組みを3分で理解する

• 「Webサイトってどうやって表示されているの？」と気になったことがある
• AIツールを使ってWebアプリを作りたいが、前提知識に不安がある
• プログラミング未経験で、まずは全体像を知りたい

レストランでの注文を思い浮かべてください。

1. あなたがメニューを見て「カレーライス」を注文する
2. ウェイターが厨房に注文を伝える
3. シェフがカレーを作る
4. ウェイターが完成した料理をあなたのテーブルに運ぶ

Webサイトもまったく同じ流れで動いています。

• ブラウザ（＝あなたが見ている画面を表示するアプリ。Google ChromeやSafariなど）が「このページを見せて」と注文する
• インターネット（＝ウェイター）が注文を届ける
• サーバー（＝厨房。Webページのデータを保管している遠くのコンピューター）がページのデータを作って返す
• ブラウザが受け取ったデータを、あなたが見やすい形で画面に表示する

💡 この「注文→調理→配膳」の流れさえ押さえれば、この先の学習がぐっとスムーズになります。

このAtomで覚えるキーワードはたった3つです。

良い例・悪い例

• ✅ 良い理解：「ブラウザはサーバーに『ページを見せて』と頼むアプリ」
• ❌ よくある誤解：「ブラウザの中にWebページが入っている」→ 実際はブラウザは毎回サーバーからデータを受け取って表示しています

最初は「ブラウザ＝お客さん」「サーバー＝厨房」のイメージで十分です。詳しい仕組みは後のAtomで学びます。

ここからは、AIツール（Claude Code、ChatGPTなど）を使って、今学んだことを実際に確認してみましょう。AIツールは「何でも質問できる先生」のようなものです。

ステップ1：たとえ話を確認する

AIツールに次のように質問してみてください。コピーしてそのまま貼り付けるだけでOKです。

Webサイトが表示されるまでの流れを、レストランのたとえを使って
小学生にもわかるように3ステップで説明してください。

AIからの回答を読んで、先ほどの図と照らし合わせてみてください。同じ流れが説明されていれば、あなたの理解は合っています。

ステップ2：自分の言葉で質問する

次に、少し踏み込んだ質問をしてみましょう。

1つのWebページを表示するとき、ブラウザはサーバーに
何回くらいリクエストを送りますか？
具体的な例を使って教えてください。

この質問をすると、「画像」「スタイル情報（＝ページの見た目を決めるデータ）」「スクリプト（＝ページを動かすプログラム）」など、1ページを表示するのに実は何十回もリクエストが飛んでいることがわかります。

ステップ3：ブラウザで実際に見てみる

もうひとつ、今すぐ自分のブラウザで試せることがあります。

1. Google Chromeを開く
2. どこかのWebサイト（たとえば google.com）を開く
3. AIに次のように聞いてみてください。

Chromeのデベロッパーツールでネットワークタブを開く方法を教えてください。
何が表示されるか、初心者向けに説明してください。

AIが教えてくれた手順に従うと、ブラウザが裏側でやり取りしている「注文（リクエスト）」の一覧を、実際に目で確認できます。

💡 デベロッパーツール（＝開発者向けの調査ツール）は、エンジニアでなくても見るだけなら安全です。何かを壊す心配はありません。

このAtomの成果物はスクリーンショット1枚です。以下のどちらかを撮影してください。

選択肢A：AIツールに「Webの表示の仕組み」を質問して、返ってきた回答の画面

選択肢B：ブラウザのデベロッパーツールでネットワークタブを開いた画面

どちらでもOKです。スクリーンショットの撮り方がわからない場合は、AIに「Macでスクリーンショットを撮る方法」または「Windowsでスクリーンショットを撮る方法」と聞いてみてください。

このAtomで学んだことを、あなた自身の言葉で3行でまとめてみましょう。

1. ブラウザがサーバーに「ページを見せて」とリクエストを送る
2. サーバーがページのデータを作ってブラウザに返す
3. ブラウザが受け取ったデータを画面に表示する

この3つが言えたら、このAtomはクリアです。次のAtomでは、実際に自分のWebページを作ることに挑戦します。