【超基礎】インターネットの仕組みとHTTP,ブラウザについて解説してみた

・初めに

この記事は以下の方を対象としています。また記事の修正など、有識者の方からのコメントもお待ちしております。

• 初学者の方
• フロントエンドエンジニア志望の方
• 基本的なことを復習したい方

・導入

閲覧ありがとうございます。よかったらLGTMお願いします‼

最近、自己ブログの構築などで毎日コードを書いているのですが、何かとエラーに躓きがちでプログラミングの基礎の理解がなっていないと感じてきました。そこで、ネット上にはありがたいことにフロントエンドエンジニアになるための7ロードマップが用意されてるわけですから、それにのっとって復習を兼ねて解説及び勉強していこうと決めました。私自身初学者ですので、わかりやすい解説を心がけて記事を執筆していければと思います。

今回、参考にさせていただいたのは有名な以下のロードマップです。
developer-roadmap

・記事一覧

part1 Internet
・随時更新予定

・Part1 Internet【HTTP,Browsers】

さて、導入はこの辺にして早速本題に入っていきます。序盤は概要把握ということで、全体を把握出る程度で行きたいと思います。
Part1は下の画像の「Internet」【HTTP,Browsers】についてです。

developer-roadmap

・How does the internet work?(インターネットはどのように機能するのか？)

そもそもインターネットとは?

インターネットとはWeb を使用可能にする技術基盤やネットワークのことを指します。最も基本的なインターネットは、私たちが使用している世界規模なコンピュータネットワークです。
近年では、様々なネットワーク上のサービス自体をインターネットとも指すことが多くなり、あなたも「インターネットで買い物した」や「インターネットで検索した（ググった）」と言うことがあるのではないでしょうか。

インターネットの仕組み

では、私たちが何げなく使用しているインターネットは、どのように機能しているのでしょうか。順序立てて考えていきましょう。

インターネットのインフラ構成

『いくつかのコンピューター同士をつなげたいとき、有線や無線で接続することで通信が可能になる。』というのを考えていきますが、これは簡単にわかると思います。イメージとしては下の図です。

上図の方法は、接続は可能なものの、多くの有線・無線と電源を要してしまうというデメリットがあります。
そこで、それぞれのコンピューターをルーターと呼ばれる特殊なコンピューターにつなぎ、ルーターを介して接続を行う方法を考えていきます。このルーターはいわば信号機のように、それぞれの通信がどのコンピューターと通信するのかを管理しています。と、ここまで書いたものの、図のほうがわかりやすいので下図を見てください。

上図の方法にすることで、多くの有線・無線を要してしまうという問題点を解決し、一見良いように見えます。しかし、1つのルーター（コンピューター）に接続させるコンピューターを1万、100万、1億というわけにいきません。ではどうするのでしょうか。

ここで、勘のいいひとは気づいたかもしれません。そうです。ルーター同士を接続することで、その問題を解決できます。例えば、5台ずつコンピューターとの接続を持つルーター3台を1台に接続することで、全体として接続数を15台にできます。加えて、そのルーターをまた3台用意して1台につなげると全体として45台になる、というように無限に増やすことができます。と、またここまで書きましたが、以下の図をご覧ください。

納得できそうな理論ですがこのままでは不十分です。なぜなら、上図のようなネットワークでは個人で家のルーターと世界各地のルーターをつなぐことは難しく、ルーター同士を接続するのには限界があるからです。そこで、その間にインターネットサービスプロバイダ (Internet Service Provider:以下 ISP ) という会社が入ることでそれを解決しました。どうゆうことかというと、いくつかのISP同士が接続し、大きなネットワークを構成することで、結果的に世界規模のネットワークのつながりを構築できるようになるということです。これが、インターネットインフラ全体の構成となります。

コンピューターを特定する

インターネットのインフラ構成の全体像はつかめたかと思います。
しかし、もし友人のコンピューターにメールを送りたいとき、素のままでは特定できないためどのコンピューターか特定する必要があります。その時、特定に使用される固有のアドレスのことをIPアドレスと呼びます。IPアドレスは4つの数字からなるアドレス（例：192.168．2.10）で表されます。しかし、Web上では利用者にとってはわかりにくいことから、IPアドレスを置き換えたドメインを使用することが一般的になっています。日々、私たちもドメインにアクセスすることでそのページを閲覧することができているというわけです。詳しくは【What is Domain Name】で解説できるかと思います。

まとめ

ざっくりではありますが、以上がインターネット機能の仕組みです。まとめると、インターネットの機能の仕組みは『いくつものコンピューターが互いに結びついてできるネットワークのこと』ということを理解できたかと思います。

・What is HTTP?(HTTPとはなにか?)

通信の決まり

誰かと通信をするときに、通信に決まりがないと通信の意味がありません。

例えば、アニメ進撃の巨人で信号弾を揚げて指示を伝達するシーンが何度かありますが、(わからない人はごめんなさい)これは信号弾自体が意味を持っているのではなく、打ち上げた色やタイミング、事前に決められた約束によって伝達が可能なのであって、揚げるだけでは意味がないという話です。

そこで、あらかじめ通信にプロトコル(決まり)を設けました。プロトコルには多くの種類がありますが、その中の1つにHTTP(Hypertext Transfer Protocol：プロトコル)があります。
また、インターネットを含む多くのコンピュータネットワークにおいて、TCP/IPという世界標準的に利用されている通信プロトコルがあり、4層に分けた通信方法を定義しています。下の表からもわかるように、1層はネットワークインターフェイス層として主にLANなどで用いられる通信方法で、2層のインターネット層はIPアドレスを用いた通信方法です。加えて、3層のトランスポート層はTCPとUDPで通信の品質が変わり、4層のアプリケーション層ではメールやWebページ閲覧など利用するアプリケーションによって通信方法は変わり多数存在します。ここではHTTPについて述べていきますので、その他は一旦は割愛させていただきます。

HTTPとはなにか

HTTPとは、webブラウザを使用してサイトを閲覧するときに使用される拡張可能なネットワークプロトコルのことです。もう少し砕いて考えてみると、ハイパーテキストは複数の文書を相互に関連付け結び付ける仕組みのことで、プロトコルとは、ルールのことを指すため、HTTPとは、ハイパーテキストを転送するための一連のルールのようなものということができます。

私たちがWebサイトを閲覧するとき、Webサイトはアクセス先のサーバーからWebブラウザーが見たいサイトを勝手に再構築して私たちに見せています。また、サイト全体は、テキスト、レイアウトの定義、画像、動画、スクリプトなど、取り込まれたさまざまなサブ文書から再構成されています。要するに、私たちが普段見ているWebページというのは、絵のようにページそのものがブラウザー上に表示されているわけでなく、何個にも分かれた部品が集まった集合の結果を見ているということです。

システム構成要素

この際に、クライアント（主にWebブラウザー）からサーバーへはリクエストと呼ばれる通信が行われ、サーバーからはレスポンスと呼ばれる通信が行われます。その間には、ゲートウェイやキャッシュといったさまざまな操作（プロキシ）を行う、プロキシサーバーと呼ばれるコンピューターをはじめとした、ルーターなどを含めたいくつかのコンピューターを介して接続が行われています。

HTTPに基づくAPI

HTTPに基づくAPIで最もよく使用されているのは、XMLHHttpRequestAPIで、ユーザーエージェントとサーバー間のデータ交換のためのAPIです。また、FetchAPIもよく使用されています。

Browsers and how they work?(ブラウザとその仕組み)

しばしば登場していたブラウザという言葉は、知っていてもどのように動いているのかまで知っている初学者は少ないと思います。そこでここでは、ブラウザの仕組みについて書いていきます。

ブラウザはどのように機能するか

Webブラウザーを使用することで、インターネット上に公開されているコンピューター（サーバー）に接続することが可能になり、それによってデスクトップ、モバイルデバイスに情報を表示しています。情報は前述の通り、HTTPを使用して転送されます。

Webブラウザーは、インターネットに接続されたサーバーからデータをフェッチ（データ要求：リクエスト）し、レスポンスを受けたときに、レンダリングエンジンと呼ばれるソフトウェアを使用して、そのデータをテキストや画像に変換します。このデータはハイパーテキストマークアップ言語（以降：HTML）で記述されており、Webブラウザーはこのコードを読み取って、インターネット上で見たり、聞いたり、体験したりするものを作成します。
また、ハイパーリンクを使用すると、ユーザーはWeb上の他のページやサイトへのパスをたどることができます。すべてのWebページ、画像、およびビデオには、Webアドレスとも呼ばれる独自のUniform Resource Locator（以降：URL）があります。ブラウザがデータを求めてサーバーにアクセス（リクエスト）すると、URLは、HTMLに記述されている各アイテムを探す場所をブラウザに通知し、Webページのどこにアクセスするかをブラウザに通知を返します。そして、レスポンス結果を画面に表示することで、私たちが見ることができるという仕組みになっています。

URLの例　(プロトコルの指定)//(サーバー名)/(ディレクトリ名)/(ファイル名)
　　　　　　　　　　　https://www.google.com/?hl=ja

次回予告

ここまで、インターネットの仕組み、HTTP,Browserについて述べさせていただきましたが、長くなりそうなので残りの3つは次回パートに持ち越しさせていただきたいと思います。

参考文献

・MDN Web Docs(https://developer.mozilla.org/ja/docs/Web/HTTP/Overview)
・TCP/IPを理解する！(https://attadesign.co.jp/blog/590/)