補助動画 · Webの基礎

Webの仕組みを、動画で見る

ページを開いてから画面が表示されるまでを、5本の図解動画でたどります。

ブラウザーはWebページを見るアプリ、サーバーは要求を受け取ってデータを返す仕組みです。最初の3本で通信と表示の流れを学び、4・5本目で立体図や重なりから見直せます。

すべて音声なしです。各動画の「動画を再生」を押してください。再生速度の変更、シークバーでの移動、全画面表示ができます。

ブラウザーとサーバーの往復

ページを開くと、ブラウザーはサーバーへ「このページがほしい」という要求（リクエスト）を送り、サーバーは応答（レスポンス）を返します。この往復を、まず一つの流れとして見てみましょう。

図で見る · ブラウザーとサーバーの往復30秒

要求を送るところから、応答を受け取ってページを表示するまでを追います。

通信先を識別する番号がIPアドレスです。Webサイトの名前（ドメイン名）からIPアドレスを調べるのがDNSです。通信の準備ができると、HTTPというやり取りのルールでページを要求します。HTMLを受け取った後にも、CSSや画像などのために追加の通信が起きます。

図で見る · ページを開くまでの通信の順番36秒

DNS、接続、HTMLの取得、追加ファイルの取得を順番に見ます。

HTMLは見出しや文章などの構造、CSSは色や余白などの見た目、JavaScriptは操作に応じた処理などを担います。ブラウザーは受け取ったデータを解析し、位置や大きさを決めて画面へ描きます。データを画面にする処理をレンダリングと呼びます。

図で見る · HTML・CSS・JavaScriptから画面へ34秒

データの受信、解析、配置と描画、操作による更新を見ます。

1本目と同じ要求・応答を、ブラウザーとサーバーの距離や向きが分かる立体図で見直します。画面を表示する側と、データを返す側を分けて眺めるのがポイントです。

図で見る · 通信の往復を立体で見る32秒

ブラウザーからサーバーへ、サーバーからブラウザーへと流れを追います。

HTMLを読み取った構造はDOMと呼ばれます。ブラウザーはDOMとCSSの指定、画像などの素材を使い、それぞれの配置を決めて描画します。ここでは役割の違うデータが一つの画面にまとまる様子を見ます。

図で見る · 構造・見た目・画像を重ねて見る34秒

HTMLの構造、CSSのスタイル、画像が、一つの画面になる過程を見ます。

Webの画面と生成モデルは、それぞれ別の役割を持ちます。ブラウザーからの質問をサーバーが受け取り、その内部でLangChainが生成モデルや検索処理を組み合わせる、と考えると全体像をつかみやすくなります。APIの要求と応答も、相手へ入力を渡して結果を受け取るやり取りです。