Webの仕組み入門【2026】ブラウザ・サーバー・HTTP・DNSをAIエージェントと一緒に理解

IT基礎シリーズの全体像

この記事は、AIエージェント時代のIT基礎ロードマップの第1章です。全7章を順番に読むと、「AIエージェントに指示を出し、結果を判断し、公開まで持っていける」力が身につくように設計しています。

まずは登場人物：クライアントとサーバー

Webの話には、必ず2人の登場人物が出てきます。

• クライアント（お客さん）：お願いをする側。あなたのスマホやPCで動いているブラウザ（Chrome、Safari、Edgeなど）が代表例です。
• サーバー（お店）：お願いに応える側。インターネットの向こう側で24時間動いているコンピューターで、Webページのデータを持っていたり、その場で作ったりします。

レストランでたとえると、クライアントはお客さん、サーバーは厨房です。お客さんは「ハンバーグください」と注文（リクエスト）を出し、厨房は料理（レスポンス）を返します。お客さんは厨房の中がどうなっているかを知らなくても、注文の仕方さえ決まっていれば料理を受け取れます。この「注文の仕方の決まりごと」がHTTPです。

ここで大事なのは、「サーバー」は特別な機械の名前ではなく「役割」の名前だということです。あなたのノートPCでも、プログラムを動かしてお願いに応えるようにすればサーバーになります。逆に、サーバー側のプログラムが別のサービス（たとえばAIのAPI）にお願いを送るときは、そのプログラムがクライアントになります。

助手アイじゃあ、私がChatGPTに質問するときは、私のブラウザがクライアントで、OpenAIのコンピューターがサーバーってことですか？

エージェント博士その通りじゃ！　そしてAIエージェントがWebページを読みに行くときは、今度はAIの側がクライアントになって、よそのサーバーにお願いを送っておる。立場は場面ごとに入れ替わるんじゃぞ

URLを打ってからページが出るまで（4ステップ）

ブラウザのアドレス欄に https://ai-agent-lab.chill-and-peace.com/it-kiso-web と入力してEnterを押したとします。裏側で起きることを、4つのステップに分けて見てみましょう。

URLの読み方

その前に、URL（Webページの住所を書いた文字列）の部品を確認しておきましょう。

① DNS：名前から住所を調べる「電話帳」

インターネット上のコンピューターは、本当はIPアドレスという数字の住所（例：192.0.2.10 のような形）で区別されています。でも数字は覚えにくいので、人間は chill-and-peace.com のようなドメイン名を使います。

この「名前 → 数字の住所」の変換をしてくれるのがDNS（Domain Name System）です。スマホの電話帳で「お母さん」をタップすると電話番号に発信されるのと同じで、ブラウザはまずDNSに「このドメインのIPアドレスは？」と問い合わせます。一度調べた結果はしばらく覚えておく（キャッシュする）ので、2回目以降は速くなります。

② HTTPリクエスト：注文書を送る

住所が分かったら、ブラウザはそのサーバーに接続し、HTTPリクエストを送ります。中身はこんなテキストです（実際は暗号化されていて見えませんが、意味としてはこうなります）。

GET /it-kiso-web.html HTTP/1.1      ← 何を（GET=ください）、どこの
Host: ai-agent-lab.chill-and-peace.com ← どのサイト宛てか
User-Agent: Mozilla/5.0 ...            ← 送り主のブラウザの種類
Accept: text/html                      ← HTMLで返してほしい
Accept-Language: ja                    ← 日本語が希望

1行目が「何をしてほしいか」、2行目以降はヘッダーと呼ばれる付帯情報です。手紙でいえば、1行目が本題、ヘッダーは封筒に書く宛名や差出人のようなものです。

なお、現在のWebではHTTP/2やHTTP/3という新しい版が広く使われていて、通信の効率は大きく改善されています。ただ「メソッド・パス・ヘッダー・ステータスコード」という考え方は同じなので、まずは上の形で理解すれば十分です。

③ サーバー：返事（レスポンス）を作る

リクエストを受け取ったサーバーは、返事を用意します。用意の仕方には大きく2通りあり、これが後で説明する静的サイト／動的サイトの違いです。返事（HTTPレスポンス）はこんな形をしています。

HTTP/1.1 200 OK                        ← 結果（200=成功）
Content-Type: text/html; charset=utf-8 ← 中身はHTML
Cache-Control: max-age=3600            ← 1時間は使い回してOK

<!DOCTYPE html>                        ← ここから本文（ページの中身）
<html lang="ja">
...

④ ブラウザ：届いた材料を組み立てる

ブラウザは届いたHTMLを上から読み、「このページにはCSS（見た目の指定）と画像とJavaScriptも必要だ」と気づくと、それぞれについてまたHTTPリクエストを送ります。つまり1ページを表示するだけで、実際には数個〜数十個のリクエストが飛んでいるのが普通です。材料が揃ったら、HTMLで骨組みを作り、CSSで見た目を整え、JavaScriptで動きを付けて、画面に描きます（このあたりは第2章 フロントエンド入門で詳しく扱います）。

エージェント博士まとめると「電話帳で住所を調べ、注文書を送り、厨房が料理を作り、テーブルで盛り付ける」じゃ。この4段のどこで止まったかが分かれば、トラブルの原因はほぼ特定できるぞ

HTTPの中身：メソッドとステータスコード

HTTP（HyperText Transfer Protocol）は、クライアントとサーバーがやり取りするための「共通の言葉遣い」です。ここでは、AIを使ううえでも必ず出会うメソッドとステータスコードを押さえましょう。

メソッド：お願いの種類

メソッドは「何をしてほしいか」を表す動詞です。たくさんありますが、まずは2つだけ覚えれば大丈夫です。

GETは条件をURLのクエリ（?q=AI）に載せて送るのに対し、POSTは本文（ボディ）にデータを入れて送ります。長い文章や秘密にしたい内容はPOSTで送るのが基本です。ChatGPTやClaudeに長い質問文を送るときも、POSTでボディに文章を入れて送っています。

ステータスコード：結果の通知表

サーバーは返事の1行目に、3桁の数字（ステータスコード）で結果を書きます。百の位で大まかな意味が決まっています。

特によく見るものを、AIを使う場面とあわせて整理します。

助手アイ4で始まったら「こっちの送り方が悪い」、5で始まったら「向こうが困ってる」って覚えればいいんですね。エラーをAIに相談するときも、まずこの数字を伝えればよさそう！

HTTPS：鍵付きの封筒で送る

HTTPのままだと、リクエストやレスポンスははがきのようなもので、途中の経路（公衆Wi-Fiなど）で誰かに読まれたり書き換えられたりする危険があります。そこで使われるのがHTTPSです。「S」はSecure（安全）のSで、TLSという仕組みで通信を暗号化し、はがきを鍵付きの封筒に入れて送るイメージです。

HTTPSには主に2つの役割があります。

• 暗号化：通信の中身を第三者が読めないようにする（パスワードやAPIキー、AIへの質問内容も守られる）
• なりすまし防止：接続先が本当にそのドメインのサーバーかを、証明書で確認する

現在は、ほぼすべての主要サイトとAIサービスがHTTPSを使っています。Cloudflare Pagesのような配信サービスでは、証明書の発行・更新も自動で行ってくれるのが一般的です。

静的サイトと動的サイトの違い

ステップ③「サーバーが返事を作る」の部分には、大きく2つのやり方があります。

AIチャットは典型的な動的サイトです。あなたの質問に対する回答は、事前に作り置きしておけないからです。ただし実際のサービスでは、画面のHTML・CSS・JavaScriptは静的に配信し、AIへの質問部分だけを動的に処理するという組み合わせがよく使われます。この「動的に処理する部分」を作るのが第3章 バックエンドのテーマです。

開発者ツール（Networkタブ）で裏側をのぞく

ここまでの話は、実はあなたのブラウザで自分の目で確かめられます。使うのは、ChromeやEdgeに最初から入っている開発者ツール（DevTools）です。

1. このページを開いたまま、Windowsなら F12（または Ctrl + Shift + I）、Macなら Cmd + Option + I を押す
2. 上部のタブから「Network（ネットワーク）」を選ぶ
3. ページを再読み込み（F5 / Cmd + R）する
4. 一覧にずらっと並んだ行が、このページを表示するために飛んだHTTPリクエスト1つ1つ

一覧で見ておきたい列は次のとおりです。

行をクリックすると、Headers（ヘッダー）タブでリクエストとレスポンスの詳細、Responseタブで返ってきた中身を確認できます。ChatGPTやClaudeのチャット画面を開いた状態でNetworkタブを表示し、質問を送ってみると、送信の瞬間に新しいリクエストが追加されるのが見えるはずです（どんなURLや形式でやり取りしているかは各サービスの内部仕様で、予告なく変わります）。

AIエージェントとWebの関係

ここからが本題です。この章で学んだWebの仕組みは、AIエージェントのあらゆる場面で使われています。

1. チャット画面で質問を送る＝HTTPのPOST

ChatGPTやClaudeのチャット画面で質問を入力して送信ボタンを押すと、ブラウザは質問文をボディに入れて、各社のサーバーにHTTPS通信でリクエストを送ります。サーバー側ではAIモデルが回答を生成し、それがレスポンスとしてブラウザに返ってきて、画面に表示されます。回答が1文字ずつ流れるように表示されるのは、レスポンスを少しずつ分けて送る（ストリーミング）仕組みを使っているからです（詳しくは第2章で）。

2. AIエージェントのWeb検索・ページ取得＝AIがクライアントになる

「最新情報を調べて」と頼むと、AIエージェントはWeb検索をしたり、特定のWebページを取得（web fetch）したりします。このとき裏側では、あなたがブラウザでやっているのとまったく同じように、AI側のシステムがクライアントになってHTTPリクエストを送り、HTMLを受け取っています。違うのは、画面に描画する代わりに、本文のテキストを読み取ってAIの判断材料にする点です。

たとえばClaudeのAPIには、執筆時点（2026年9月）で、Anthropic側で実行されるWeb検索ツールやWeb fetchツールが用意されています。開発者はこれらをAIに「道具」として渡すだけで、AIが必要に応じてWebへアクセスしてくれます（詳細な仕様は公式ドキュメントで確認してください）。

だから、AIエージェントが「ページを取得できませんでした」と言うとき、その原因もこの章の知識で説明できます。

• 404：URLが間違っている、ページが消えている
• 401 / 403：ログインが必要なページ、またはアクセスを拒否しているサイト（社内システムや会員限定ページはAIからは読めないことが多い）
• 429：短時間にアクセスしすぎた
• 中身が空っぽ：JavaScriptで後から中身を描くタイプのページだと、HTMLだけ取得しても本文が入っていないことがある

3. AIのAPIを使う＝プログラムからHTTPを送る

自分のプログラムからAIを呼び出すAPIも、正体はHTTPです。プログラムが「APIキー（身分証）」をヘッダーに付けて、質問をPOSTで送り、回答をレスポンスで受け取ります。だからAPIキーが間違っていれば401、使いすぎれば429、AI側のサーバーが混んでいれば5xx系が返ってきます。APIの詳しい使い方は第4章 API・JSON入門で扱います。

エージェント博士AIエージェントは魔法ではない。中身はHTTPで話す、とても働き者のクライアントなんじゃ。だからHTTPが分かれば、AIが何に困っておるのかも読めるようになるぞ

自社事例：このサイトはどう配信されているか

🤖 AIエージェントとやってみよう

ChatGPTやClaudeに、以下のプロンプトをそのまま貼り付けて試してみてください。AIを「家庭教師」として使うと、理解が一気に深まります。

やってみよう1：ステータスコードを体験的に覚える

あなたはWebの仕組みを教える先生です。
私はプログラミング未経験者です。
HTTPのステータスコード 200・301・401・403・404・429・500・503 について、
レストランの注文にたとえて、1つずつ説明してください。
最後に、私が理解できたか確かめるクイズを3問出してください。
答えは私が回答したあとに教えてください。

やってみよう2：開発者ツールの結果を読み解いてもらう

好きなWebサイトで開発者ツールのNetworkタブを開き、再読み込みして、一覧の上から10行ほどの「Name・Status・Type」を書き写して貼り付けます（Cookieやトークンなどの値は貼らないこと）。

ブラウザの開発者ツール（Networkタブ）で、あるWebページを読み込んだ結果です。
それぞれのリクエストが何のために送られているのか、
初心者にも分かるように1行ずつ説明してください。
エラーや遅いものがあれば、考えられる原因も教えてください。

（ここに Name / Status / Type を貼り付ける）

やってみよう3：エラーメッセージの読み方を練習する

AIのAPIを使ったプログラムで、次のようなエラーが出たと仮定します。
「Error code: 429 - rate limit exceeded」
1. このエラーは何を意味していますか？
2. 原因として考えられることを3つ挙げてください。
3. プログラミング未経験者でもできる対処と、
   開発者がプログラムで行う対処を分けて教えてください。

よくあるつまずき

「サイトが表示されない」の原因が分からない

4ステップのどこで止まっているかを切り分けましょう。「このサイトにアクセスできません」「サーバーのIPアドレスが見つかりませんでした」系のメッセージならDNS（ステップ①）の問題、ステータスコードが返ってきているならHTTP・サーバー（②③）の問題、200なのに表示が崩れているならCSSやJavaScriptの読み込み（④）の問題、という具合です。

URLの小さな違いを見落とす

http と https、末尾の / の有無、www の有無、大文字・小文字の違いで、別のURLとして扱われることがあります。AIに「このURLのページが開けない」と相談するときは、URLを正確にコピペして伝えましょう。

「更新したのに反映されない」

多くの場合、キャッシュが原因です。ブラウザや配信サービスが古いファイルを覚えていて、それを表示しています。まずは強制再読み込み（Windowsは Ctrl + Shift + R、Macは Cmd + Shift + R）を試してみましょう。

4xxと5xxを取り違える

4xxは「こちらの送り方」、5xxは「相手のサーバー」の問題です。401なのにサーバーの障害を疑ったり、503なのに自分のコードを延々と直したりしないように、まず百の位を見る習慣をつけましょう。

この章の用語まとめ

まとめ｜Webの仕組みは、AIエージェントの「共通言語」

Webページが表示されるまでには、DNSで住所を調べ、HTTPでリクエストを送り、サーバーがレスポンスを作り、ブラウザが描画するという4ステップがあります。そして、ChatGPTやClaudeへの質問送信も、AIエージェントのWeb検索・ページ取得も、AIのAPI呼び出しも、すべてこの同じHTTPの上で動いています。

ステータスコードが読めれば、AIが返すエラーの意味が分かり、AIへの指示も的確になります。まずは開発者ツールのNetworkタブを開いて、いつも見ているサイトの裏側をのぞいてみてください。次の第2章 フロントエンド入門では、ステップ④でブラウザが組み立てているHTML・CSS・JavaScriptの中身と、AIチャット画面の作り方を学びます。

基礎を身につけたら、次は「仕事」につなげる

独学で進めるのも十分可能ですが、「最短で実務レベルにしたい」「転職・副業につなげたい」なら、次の記事も参考にしてください。

• AIが快適に動くノートパソコンの選び方＆おすすめ3選【2026】：開発・AIエージェントを動かすならメモリ16GB以上が目安
• AI・IT業界への転職ガイド【2026】：作ったものをポートフォリオに。未経験からの進め方と転職エージェントの選び方

関連記事

• AIエージェント時代のIT基礎ロードマップ【2026】
• フロントエンド入門【2026】HTML・CSS・JavaScript・ReactとAIチャット画面の作り方
• AIエージェントとは？歴史と仕組みをやさしく解説【2026】
• 生成AIとは？仕組みと使い方をやさしく解説
• ChatGPTの使い方ガイド