サイトのデータはどこにある？今さら誰にも聞けない「通信の仕組み」- Schoo PENCIL

2022.02.25

サイトのデータはどこにある？今さら誰にも聞けない「通信の仕組み」

わたしたちが毎日利用しているWeb。プライベートはもちろん、今や多くの仕事や副業でも欠かせない存在です。しかし、そんなWebの仕組みを理解しているビジネスパーソンはそう多くはないのでは？

副業でWebエンジニアやWebデザイナーをはじめたり、Web開発者と一緒に仕事をしたりする上でも役に立つWebの基本が、イチから学べるSchooの授業が『今さら聞けない「Web」の仕組み』です。

講師はWebデザインやプログラミング関係の書籍を複数執筆しており、セミナー・研修講師としても活躍中のWeb／アプリケーションUIデザイナー、狩野祐東先生。

誰にでも伝わるよう基礎から組み立てられた授業の前半を、この記事ではご紹介します！

Webサイトを閲覧するとき、行われている「通信の仕組み」

△【画像クリックでSchoo授業動画へ】（会員登録で1時間無料視聴できます）

授業最初のテーマは「通信の仕組み」。「イメージしてみよう」という文言ともに画面に表示されたのが、以下の2つの問いです。

・Webサイトを構成するデータにはどういうものがありますか？
・そうしたデータはどこから来ると思いますか？

一つ目の問いの答えは「HTML」「CSS」「JS」「image」などさまざま。そして、Webサーバーからそれらは呼び出されるというのが、2つ目の問いの答えです。

それでは、データを取得する流れはどのようになっているのでしょうか？

我々が普段使っているPCやタブレット、スマホといった端末（クライアント）は、ユーザーが「URLを入力する」「リンクをクリックする」といった操作を行うことでWebサーバーに「リクエスト」を発信します。すると、Webサーバーがリクエストに応じたデータを返す「レスポンス」を実行します。

△【画像クリックでSchoo授業動画へ】（会員登録で1時間無料視聴できます）

最初のリクエストがHTMLファイルの場合は、ブラウザがその中身を解析してリクエストを実行し、Webサーバーがレスポンスを返す……そうしてページで使われるテキストファイルや画像ファイルがすべて読み込まれれば、目当てのWebページが、我々が普段見慣れた形で表示されるという仕組みです。

インターネットは基本的にこのようなクライアントとサーバーのデータのやり取りで成り立っています。そして、このような通信の仕組みを「クライアント／サーバーモデル」といいます。

さらに深掘りすると、そもそもインターネットとは「小さなネットワークを相互につなげて巨大になったネットワーク」と表現できます。小さなネットワークは例えば個人の自宅内や、企業のオフィス内などで構成されます。そして、それらを繋ぐインターネットには、「通信できること」だけでなく、「同じルールで動くこと」も求められます。

そこで使われているルールが「TCP／IP」。この用語もWebを理解するためにぜひ覚えておきたいところです。

インターネットを成り立たせる「URLとIPアドレス」のヒミツ

さて、無数の小さなネットワークを結んでいるインターネット。なぜ、的確にリクエストを行い、それに対し的確にレスポンスが返せるのか、疑問に感じませんでしたか？

そこで続いて取り扱う「URLとIPアドレス」がカギとなります。ここでも以下の2つの問いが先生から出されました。

・IPアドレスとは何ですか？
・ドメイン名から対応するIPアドレスに変換してくれるシステムを何といいますか？

前者の正解は「ネットワーク上のコンピュータを識別するアドレス」、後者の正解は「DNS」です。

△【画像クリックでSchoo授業動画へ】（会員登録で1時間無料視聴できます）

URLとは、ファイルが格納されている場所を示すデータのこと。たとえば「https://studio947.net/about/」というURLは「https://」（スキーム）、「studio947.net/」（ホスト）、「about/」（パス）という3つの部分に分けられます。

ホストは「ドメイン」ともいい、手続きを行い、お金を支払えばだれでもつくることができます。ただし、同じURLを複数の企業や人が所有することはできません。

また、IPアドレスは「192.0.2.93」といった形式で表され、インターネットの接続されているすべての機器に割り振られています。

さて、コンピュータはリクエストを受けた最初の段階でURLをIPアドレスに変換します。そこで使われるのが「DNS」。DNSが動いているサーバーコンピュータに問い合わせると、適切なIPアドレスの回答もしくは答えを知っているDNSの紹介を行ってくれます。DXSにしてもIPアドレスにしても、すべてを知っているコンピュータは存在しません。「相互に繋がれたネットワークでデータが分散して管理されているというのが、インターネットの特徴のひとつ」だと先生は話します。

最終的にIPアドレスがわかったら、該当する端末にリクエストを行います。そうすると同じ手順でレスポンスが実行され、複数のネットワークを介して我々のPCやスマホは目当てのデータを受け取ることができるというわけです。

URLを構成する要素について詳しく知っておこう

URLについてもう少し詳しく見ていきましょう。「Web制作や開発に携わるうえでURLの意味についてより深く知っておくことが有用」だと狩野先生は語ります。

ここで、三つ目の質問です。

・httpとhttpsの違いは何ですか？

正解は「通信経路を暗号化するか否か」です。

△【画像クリックでSchoo授業動画へ】（会員登録で1時間無料視聴できます）

URLは先ほど挙げた「スキーム」「ホスト」「パス」のほかにも「ポート番号」「クエリパラメータ」「アンカー」といった情報を含めることができます。みなさんも、以下のように長い文字列で構成されたURLを見たことがありますよね。

https://studio947.net:8443/address.php?article=954&login=false#content

先ほど取り上げたスキームは「通信の枠組みや規約（ルール）」を意味し、以下のような種類があります。

https：Web（通信経路を暗号化）
http：Web（通信経路を暗号化しない）
mailto：メールアドレス
ftp：FTP

httpで通信経路を暗号化することで、第三者が通信を傍受して解読しても中身を知ることは難しくなります。そのため、httpよりもhttpsの方が、安全性が高い通信の方法であると考えられるのです。また、mailtoはメールアドレスやり取りすることを宣言するという意味を持ち、FTPはWebサイトで使うデータをWebサーバーにアップロードする際に使われます。

△【画像クリックでSchoo授業動画へ】（会員登録で1時間無料視聴できます）

ホストはリスクエスト先のコンピュータを指し、以下のようにドメインでない場合もあります。

・www.example.co.jp：サブドメイン付き
・127.0.0.1：ローカル
・localhost：ローカル

ホストの続きはポート番号。アプリケーションを識別するために用いられる部分で、「http＝80」「https＝443」のように、数字で対応するアプリケーションを指定しています。

「パス」はその名の通り、ファイルのパスを指定するための部分です。Webサーバーでも通常のPCと同じようにデータはフォルダ分けして格納されています。そこで、パスでフォルダ階層を指定するのです。ただ、「index.html」のように「index」がついていればパスは省略可能ということも覚えておきましょう。