Day 13: webサイトの仕組み
はじめに
僕たちが日常的にアクセスするウェブサイトは、いくつかの基礎的な技術やプロセスを通じて動いています。ここでは、ウェブサイトの仕組みについて、どのようにページが表示されるのか、前に述べたDNSやHTTPとどのように関わっているのかを解説します。
そもそもウェブサイトって？
ウェブサイトは、インターネット上に公開されたページの集合体です。各ページには画像やテキスト、動画などのコンテンツが含まれており、ブラウザ（ChromeやSafariなど）を使ってアクセスできます。
- ウェブページ：ウェブサイトを構成する一つひとつのページです。
- URL：各ページの住所のようなもので、ブラウザにURLを入力するとそのページにアクセスできます。
ウェブサイトの仕組み
ウェブサイトは、サーバーというコンピュータ上に保存されているHTML、CSS、JavaScriptといったファイルから構成されます。サーバーは、インターネットに常時接続され、ユーザーがページをリクエストすると、そのデータをブラウザに送信します。
1. クライアントとサーバーの関係
- クライアント：僕たちが使うコンピュータやスマホのブラウザのことです。ユーザーがページを見たいとき、クライアントからサーバーにリクエストが送られます。
- サーバー：ウェブサイトのファイルを保管しているコンピュータ。リクエストを受け取ると、対応するウェブページのデータをクライアントに返します。
この関係で、クライアントはページを「欲しい」とリクエストし、サーバーがそれに「応える」というやりとりが行われているのです。
2. HTTPリクエストとレスポンス
クライアントとサーバーは、「HTTPリクエスト」と「HTTPレスポンス」でやりとりをします。
- HTTPリクエスト：ブラウザがサーバーに送る「ページが欲しい」というリクエストです。
- HTTPレスポンス：サーバーがリクエストに応えて「データを返す」ものです。これにより、ブラウザにページが表示されます。
ウェブサイトの構成要素
ウェブサイトを構成する主な要素は以下の3つです：
HTML（HyperText Markup Language）
HTMLは、ウェブページの「構造」を作る言語です。各ページの見出しや段落、画像などの位置を指定します。
- 例：見出し、段落、画像などの配置や構成がHTMLによって設定されます。
CSS（Cascading Style Sheets）
CSSは、ウェブページの「デザイン」や「見た目」を整えるための言語です。背景色、文字サイズ、レイアウトなどのスタイルを指定します。
- 例：ボタンの色や文字の大きさを変えるときにCSSが使われます。
JavaScript
JavaScriptは、ページに「動き」を加えるためのプログラミング言語です。ユーザーの操作に応じて変わる動きやインタラクティブな要素を追加できます。
- 例：クリックでメニューが開く、画像がスライドするなどのアクションを実現するのがJavaScriptです。
ドメインとDNS
ウェブサイトにアクセスする際、URLの「www.example.com」などの部分をドメインと呼びます。ドメイン名は、人間が理解しやすい住所のようなもので、実際のデータはIPアドレスという数値で管理されています。
DNS（Domain Name System）
DNSは、ドメイン名をIPアドレスに変換する仕組みです。たとえば、ブラウザが「www.example.com」にアクセスしようとすると、DNSがそのドメイン名に対応するIPアドレスを探し、サーバーに接続してページを表示します。
ウェブサイトが表示されるまでの流れ
ウェブサイトが表示されるまでのプロセスは次のようになります：
- ユーザーがURLを入力：ブラウザに「www.example.com」と入力する。
- DNSがドメイン名をIPアドレスに変換：DNSサーバーが、ドメイン名をIPアドレスに変換します。
- サーバーへリクエスト：ブラウザがサーバーにページのリクエストを送信します。
- サーバーがレスポンスを返す：サーバーがリクエストに応え、HTML、CSS、JavaScriptなどのデータをブラウザに送信します。
- ブラウザがページを表示：ブラウザがデータをもとにページを表示します。
小テスト
Q1: クライアントとサーバーの関係で正しいものはどれですか？
a) サーバーがブラウザを操作してウェブサイトを表示する
b) クライアントがサーバーにリクエストを送り、サーバーがレスポンスを返す
c) クライアントとサーバーは同じ機能を持つ
d) サーバーがクライアントの役割を兼ねる
Q2: ウェブサイトを構成する主な要素に含まれないものはどれですか？
a) HTML
b) CSS
c) JavaScript
d) HTTP
Q3: DNS（Domain Name System）の役割は何ですか？
a) サーバーにウェブサイトを保存する
b) ドメイン名をIPアドレスに変換する
c) ブラウザにページを表示する
d) インターネットの速度を上げる
Q4: HTTPリクエストとレスポンスのやり取りで正しい説明はどれですか？
a) HTTPレスポンスはブラウザがページをリクエストすること
b) HTTPリクエストはサーバーがブラウザにデータを送ること
c) HTTPリクエストはブラウザがページを要求し、HTTPレスポンスでサーバーがデータを返す
d) HTTPリクエストとレスポンスはサーバー内部の通信に限られる
Q5: ウェブサイトが表示されるまでの流れで最初に行われるプロセスは何ですか？
a) HTML、CSS、JavaScriptの送信
b) DNSがドメイン名をIPアドレスに変換する
c) サーバーがレスポンスを返す
d) ユーザーがURLを入力する
解答
Q1: b) クライアントがサーバーにリクエストを送り、サーバーがレスポンスを返す
Q2: d) HTTP
Q3: b) ドメイン名をIPアドレスに変換する
Q4: c) HTTPリクエストはブラウザがページを要求し、HTTPレスポンスでサーバーがデータを返す
Q5: d) ユーザーがURLを入力する
まとめ
ウェブサイトは、クライアント（ユーザーのデバイス）とサーバーのやり取りを通じて表示されます。ユーザーがブラウザにURLを入力すると、DNSがドメイン名をIPアドレスに変換し、HTTPリクエストとレスポンスを通じて必要なデータがやり取りされます。この仕組みによって、ブラウザがHTML、CSS、JavaScriptを解釈し、ページが表示されます。DNSやHTTPといった基本技術を理解することで、ウェブサイトが動く仕組みをより深く理解できます。
Discussion