クライアントとサーバー

インターネットに接続されたコンピューターは
クライアント (client) とサーバー (server) と呼ばれ、

何かの情報をリクエストする側と、その情報を伝える側に分かれます。

★クライアントとは

一般的なウェブユーザーが使うインターネットに接続された端末（wifiで接続されたPCやスマホなど）と、
その端末で利用可能なウェブにアクセスするソフトウェア（Firefox や Chrome などのウェブブラウザー）を指します。

★サーバーとは

ウェブページ、ウェブサイト、アプリを格納しているコンピューターのこと。

クライアント端末が、ウェブページにアクセスしたい時、
ウェブページのコピーがサーバーからクライアントにダウンロードされ、ユーザーのウェブブラウザーに表示されます。

その他、ウェブの仕組みに関わっているもの

皆さんがウェブページを閲覧する際、
クライアントとサーバー以外にも、もちろん様々な要素が関わってきます。

ここからは、以下の様な例えでもう少し色々なものを説明していきます。

★インターネット接続

ウェブ上でデータの送受信をできるようにします。
あなたの家とスーパーを繋いでいる「横断歩道」のようなものです。

★TCP/IP

TCP（Transmission Control Protocol ）と、
IP（Internet Protocol）は、
「どのようにウェブ上をデータが動くのか」を定義（ルール化）した通信プロトコルのひとつです。

これは、スーパーに行くための手段や、買い物するための法律みたいなものです。
例えば、どうやってスーパーに行き、どの様に店員とコミュニケーションし、何で商品を買って売買契約を行うか。
みたいなものだと思ってください。

★DNS

DNS（Domain Name System ）は、
ウェブサイトの住所録のようなものです。

ブラウザーはウェブサイトがどのサーバーにいるかを探し出す必要があります。
これはお店の所在地を探してからお店に行くようなものです。

ブラウザーにウェブアドレスを入力すると、
ブラウザーはウェブサイトを取得する前に DNS を見て、ウェブサイトの IP アドレスを探します。

★HTTP

HTTP（Hypertext Transfer Protocol）は、
クライアント（皆さん）と、サーバー（スーパー）が
対話をする方法を定義するアプリケーションプロトコル（ルール）です。

★コンポーネントファイル

ウェブサイトは多くの異なるファイルで構成されます。
これはスーパーで複数の部品を買うようなものです。
これらのファイルは主に 2 種類に当てはまります。

・コードファイル
主に「HTML、CSS、JavaScript」などから構成されるコード郡。
※誤解を恐れずに言うとプログラム部分

・Assets（アセット）
Assets（資産）は、画像、音楽、動画、Word 文書、PDF といったウェブサイトを構成するコード以外のすべての材料の集合的な名前です。

結局、どういうこと？

ブラウザーにウェブアドレスを打ちこみ、ウェブサイトを閲覧する流れを、
先の前提条件で例えると

01. 場所を探す

【例え】________________________________________
まずはスーパーの住所を、住所録から探します。
【実際】________________________________________
ブラウザー（Chromeなど）が、DNS サーバーにアクセスし、ウェブサイトのあるサーバーの実際のアドレスを探します

02. リクエスト

【例え】________________________________________
ルールに乗っ取り、スーパーに行き
ルール通りの言語で、商品を注文（リクエスト）する。
【実際】________________________________________
TCP/IP を使用してインターネット接続し、
ブラウザーが、サーバーに HTTP リクエストメッセージを送信。
ウェブサイトのコピーをクライアントに送るよう求めます。

03. リクエスト承認→送信

【例え】 ________________________________________
皆さんが買いたい商品をスーパーにリクエストすると、
スーパー（の店員）がその商品を、
持ち運びやすいようにコンパクトに梱包し渡してくれます。
【実際】 ________________________________________
クライアントからのリクエストを、 サーバーが承認すると、サーバーはクライアントに "200 OK" というメッセージを送ります。 ※これは「OK」の意。

そしてウェブサイトのファイルを、
データパケットと呼ばれる一連の小さな塊 (chunk) としてブラウザーに送信し始めます。

04. ウェブページの表示

【例え】________________________________________
皆さんは家に商品を持ち帰り、
梱包を解き、顧客体験を得ます。
【実際】________________________________________
ブラウザーは小さな塊(chunk) を、
改めて完全なウェブページに組み立て、表示します。

最後にパケットってなに？

先の説明（03. リクエスト承認→送信）で、
データパケットという言葉が出てきました。

これについて最後に説明します。

パケットとは、小包という意味で
分割されたデータを指します。

ウェブ上でデータが送信されるときは、
何千もの小さな塊で送信されます。
なぜ、データが小さなパケットで送信されるのかには、複数の理由があります。

パケットが消滅したり、
破損したりすることがありますが、そのようなときに小さな塊を置き換え、対応するのは簡単です。

さらに、パケットを様々な経路でルーティングすることで、
交換を高速化し、多くの異なるユーザーが同じウェブサイトを同時にダウンロードできるようになります。

もし各ウェブサイトが単一の大きな塊として送信された場合、
一度にダウンロードできるのは一人のユーザーだけとなり、明らかにウェブはとても効率が悪くなるので、
この様に小さな塊にして送信されています、