インターネットの基礎知識①(インターネットの仕組み・HTTP・ブラウザの仕組み)

基礎知識
基礎知識

Webエンジニアのためのロードマップに2020版に沿って勉強していきます!

今回は基本的なインターネットの知識。

インターネットはどのように機能するか

インターネットとはコンピューター同士を繋いで作ったネットワークの集合体。

インターネットの普及

インターネットは情報を配信・受信する上で重要存在。そもそもインターネットは米国防総省のARPA(Advance Research Project Agency)に取り組まれていた複数のネットワークを相互接続するネットワークである「ARPANET」が前身であると言われている。

1960年代に構築されたARPANETは1978年に実験を終了し、運用ネットワークとなった。

TCP/IPの登場

TCP/IPとはTCP(Transmission Control Protocol)とIP(Internet Protocol)を組み合わせたもの。初期のARPANETの基本プロトコルはNCP(Network Control Protocol)というプロトコルであった。

1973年に「TCP/IP」の開発が始まり、1974年11月に公開された。また、同じ年に「Ethernet」も登場した。

1981年9月にTCP/IPはRFCとして文書化され、ARPANETの標準プロトコルに採用された。こうして、現在のTCP/IPを中核とするプロトコルのスイート(群)が確立した。

1983年にはTCP/IPを標準実装した初のOSである4.2BSD(UNIX)がリリースした。

日本にインターネットが誕生したのは、1984年

商用インターネット接続が登場

1990年にARPANETは解散し、NSFNETに継承された。

1980年代末から1990年代には営利目的のインターネットサービスプロバイダー(ISP)が出現しはじめ、1995年にNSFNETはバックボーンを民間へ移管し役目を終えるとインターネット接続が完全に民営化された。これで、インターネットの営利目的の利用についての制限が無くなった。

同じ1995年にマイクロソフトのWindows95が世界中でブームになる。これを機にインターネットの個人利用が普及した。

インターネットの仕組み

インターネットは接続するコンピュータの役割をサーバとクライアントに分けて、クライアントかサーバに「要求」を送信し、サーバがそれに「応答」を返すという処理が行われている。一つのパワフルなサーバを複数のクライアントが同時に使っている。

また、コンピュータ同士の通信にはTCP/IPというプロトコルが使われている。プロトコルとは通信手順の約束事。プロトコルのおかげで異なるベンダの、異なるOSを搭載した様々な種類のコンピュータが接続をすることができる。

サーバーとクライアント

サーバとは、ネットワーク上で情報やサービスを他のコンピューターに提供するコンピューターのこと(メールサーバやWebサーバなど)。

クライアントとはサーバから提供された情報やサービスを利用するコンピューターのこと(私たちが使っているPCやスマホ)。

TCP/IP

TCP/IP(ティーシーピー・アイピー)はコンピュータ同士が通信を行うために使われる標準化されたプロトコル群。TCPとIPだけでなくICMPやUDP、HTTPなど色んなプロトコルがあり、「IPを中心とする標準的な通信プロトコルの総称」。

HTTPについて

HTTPとは、HTMLで書かれた文章や画像、音声、動画などのデータをWebサーバとクライアントの間で通信するときのプロトコル。(HyperText Transfer Protocol)

HTTPリクエスト

 HTTPリクエストは「リクエスト行」「メッセージヘッダー行」「メッセージボディ行」の3つの構成にわかれている。

リクエスト行

サーバーに送るリクエストの種類を指定する。リクエストを指定するメソッドは下図のようなものがある。

書式は <HTTPメソッド> <ターゲット> <HTTPバージョン>

メッセージヘッダー行

リクエストに関する補足的な情報を指定する部分。

書式は <フィールド> <値>

よく使われるフィールド名には、受理可能なメディアのフィールド名「Accept」やホスト名のフィールド「Host」、ブラウザーやクライアントプログラム情報のフィールド名「User-Agent」などがある。

メッセージボディ行

「情報を送る」リクエストのときに送りたい情報を格納する部分。「情報を取り出す」リクエストの時は省略される。

HTTPレスポンス

HTTPレスポンスは「ステータス行」「メッセージヘッダー行」「メッセージボディ行」にわかれている。

ステータス行

リクエストに基づいて行った処理についての結果が表示される部分。

書式は <HTTPバージョン> <ステータスコード> <理由フレーズ>

ステータスコードにはNot foundを表す「404」や正常に処理がされたことを表す「200」やサーバ内部エラーを表す「500」などがある。

メッセージヘッダー行

メッセージヘッダー行はリクエストとレスポンスの両方にありますが、フィールド名の中にはリクエストのみに使われるものやレスポンスのみに使われるもの、両方で使われるものがある。

よく使われるフィールド名には、受理可能なメソッドのフィールド名「Allow」や生成した日時のフィールド名「Date」、サーバ情報のフィールド名「Server」などがある。

HTTPのステートレス性

HTTPは過去のデータを処理結果に反映させません。ステートレス性のメリットはサーバへの負担の軽減です。サーバが過去の要求を管理しないのでクライアントのリクエスト数が増えても多くのレスポンス処理を可能にします。しかし、過去の処理結果を保存しないので、同じリクエストを繰り返した場合は通信に無駄が生じるというデメリットがある。

HTTPSとは

HTTPはデータのやりとりをする時に「データが暗号化されていない」状態になっている。そのため、通信を傍受された時に通信内容が漏れてしまう。

HTTPSは通信の安全性を高めるためにSSLと呼ばれるプロトコルでデータを暗号化している。SSLはあらかじめ決められた鍵を使って通信に暗号をかけ、その鍵を使わないと暗号が解除できない仕組みになっている。暗号化するための鍵の情報とサイトの運営者情報を記載したSSLサーバ証明書を見ることでユーザーは運営者が信頼できる相手なのかを見極めることができる。

ブラウザとその仕組み

ブラウザとは、Webサイトを閲覧するために使うソフト(IE・Chrome・Safari・Firefoxなど)

ブラウザの構成要素

ユーザーインターフェイス(UI)

アドレスバー、戻る・進むボタン、ブックマークメニューなどWebページ以外の部分。

ブラウザエンジン

UIとレンダリングの間の情報の受け渡しなどを行う。

レンダリングエンジン

HTMLやCSSを解析し、画面を表示する。

ネットワーキング

HTTPリクエストなどネットワークの呼び出しを担当する。

JavaScriptインタプリタ

JavaScriptのコード解析と実行を担当する。

UIバックエンド

チェックボックスやウインドウなどのウィジェットの描画を担当する。

データパーシステンス

Cookieなどのデータをハードディスクに保存する。

Webサイト閲覧の流れ

(1) WebブラウザがWebサーバにデータを要求

URL(DNSサーバからIPアドレスを取得する)もとにHTTPを使用してデータを要求する。WebサーバがHTTPリクエストの窓口となって受け取り、動的な処理が必要な場合はAppサーバへリクエストを行う。

Webサーバ

動的な処理が必要でない場合(静的なサイト)はHTMLやCSS、JavaScript、画像などのデータを返す。動的な処理が必要な場合は、モジュールを通してプログラム(Javaやphp、Ruby)を実行したり、Appサーバにリクエストを送る。また、処理結果をWebブラウザに返す。

Apache、nginx、IIS(Internet Infomation Services)などがある。

Appサーバ

Webサーバから受けたリクエストをもとにプログラム(Javaやphp、Ruby)を実行する。また、必要に応じて検索サーバやDBサーバにアクセスして処理を行い、結果をWebサーバに返す。

検索サーバ

全文検索エンジン。大量にあるドキュメントデータの中から、目的のワードを含むドキュメントデータを検索するための仕組み。

DBサーバ

データの保存や更新、削除、バックアップなどを行う。Appサーバからのリクエストをもとにデータの記録や書き換え、削除、データの検索などを行う。

(2) レスポンス用のデータをブラウザに返す

Webサーバは必要に応じて様々なサーバと連携して処理を行い、ブラウザにHTTPレスポンスを返す。

(3) 受け取ったデータを解析・表示

ブラウザレンダリング

ネットワーキングから開くページのドキュメントを受け取ったら、レンダリングエンジンの仕事が始まる。

①HTMLドキュメントの解析を行い、HTMLドキュメントをDOMツリーに変換する。DOMツリーには全てのDOMが格納されている。

②CSSも解析を行い、CSSの構造体を生成する。CSSOMと呼ぶ。

③DomツリーとCSSOMから画面表示に必要なRenderツリーを構築する。RenderツリーにはDOMの構造と装飾の情報の両方が含まれ、全てのDOMは格納せず表示するDOM要素のみが格納される。

④Renderツリーが持つ各DOM要素の位置決定をしレイアウトする。

⑤ペイントでは画面の描画処理を行い、その結果、画面が表示される。

タイトルとURLをコピーしました