🔖

[webの基礎]Webブラウザ,Webサイトが表示される仕組み

2023/05/22に公開

Web

Webブラウザとは

語源：直訳
browse：　閲覧　拾い読み

Webブラウザは、ウェブページやウェブアプリケーションを閲覧するためのソフトウェア。
テレビ番組を見るためにテレビが必要なのと同じで、
Webサイトを見るためにはブラウザが必要。

一般的には、ユーザーがインターネットを通じてウェブページにアクセスし、
そのコンテンツを表示するために使用される。

■ Webブラウザの主な役割

"ウェブページやウェブアプリケーションを閲覧するためのソフトウェア"と上記で説明を書いたが、
具体的にWebブラウザの主な役割は以下のものだ。

1. ウェブページの表示:
Webブラウザは、ユーザーがウェブページを閲覧するために使用される。
ウェブページに含まれるテキスト、画像、ビデオ、リンクなどの要素を解釈し、表示します。

2. HTTP通信:
Webブラウザは、HTTPプロトコルを使用してウェブサーバーと通信する。
ユーザーが特定のURLにアクセスすると、ブラウザはウェブサーバーに対してリクエストを送信し、
サーバーからのレスポンスを受け取る。

3. HTML解釈:
Webブラウザは、HTML（ハイパーテキストマークアップ言語）を解釈してウェブページを構築する。
HTMLは、テキストや画像、リンクなどの要素を定義し、それらをブラウザ上で表示可能な形式に変換。

4. CSS解釈:
Webブラウザは、CSS（カスケーディングスタイルシート）を解釈してウェブページのスタイルやレイアウトを指定。CSSは、色、フォント、サイズ、配置などの要素を定義し、ウェブページの見た目をカスタマイズする。

5. JavaScript実行:
Webブラウザは、JavaScriptコードを解釈して実行する。
JavaScriptは、ウェブページの動的な機能や相互作用を実現するために使用される。
ブラウザはJavaScriptのコードを実行し、ウェブページに対する動的な変更やイベント処理を実現する。

6. セキュリティ保護:
Webブラウザは、セキュリティ上の脅威からユーザーを保護する役割も果たす。
例えば、マルウェアやフィッシング詐欺などの悪意のあるウェブページやリンクを警告したり、
セキュリティ対策を実施したりします。

■ web ブラウザの種類と特徴

さまざまな種類のWebブラウザが存在し、
主要なものにはGoogle Chrome、Mozilla Firefox、Microsoft Edge、Safariなどがある。
これらのブラウザは、ユーザーインターフェースのデザインや機能の面で
異なる特徴を持っているが、基本的な機能としては、ウェブページの表示、
ブックマークの管理、検索エンジンの利用などが含まれます。

ブラウザ	特徴・機能
Google Chrome	- 高速でパフォーマンスが良い - シンプルなユーザーインターフェース - タブの管理と同期機能 - カスタマイズ可能な拡張機能のサポート - Googleアカウントとの連携による便利な機能の提供 - セキュリティ強化機能（サンドボックス、セーフブラウジングなど）
Mozilla Firefox	- オープンソースでカスタマイズ性が高い - シンプルで使いやすいユーザーインターフェース - プライバシー重視の機能（トラッカー防止、プライベートブラウジングなど） - 拡張機能のサポート - タブの管理と同期機能
Microsoft Edge	- マイクロソフトによる開発 - 高速なブラウジングエンジン（Chromium）を採用 - シンプルでモダンなデザイン - マイクロソフト製品との連携機能（Office 365、Windows 10など） - クロスデバイス同期機能 - プライバシー機能の強化
Safari	- Apple製のブラウザ（MacおよびiOSデバイス専用） Windowsでは使用できない - ユーザーインターフェースの洗練性 - 高速なパフォーマンス - 低電力モードの省電力機能 - Appleデバイス間の連携機能（Handoff、共有タブなど）
Opera	- 多機能なブラウザ - タブのグループ化機能 - 無制限のVPN機能（一部有料） - 広告ブロッカー機能 - スナップショットツールの統合 - カスタマイズ可能なユーザーインターフェース - モバイル版のネイティブ広告ブロッカー機能

Webサイトが表示される仕組み

以下のように動いている。

1. ユーザーがWebブラウザに特定のURL（Uniform Resource Locator）を入力。
Webブラウザは、URLを解析し、そのウェブサイトのホスト名を特定します。

2. ブラウザは、ホスト名をDNSサーバーに送信し、対応するIPアドレスを取得。
(このIPアドレスは、ウェブサイトがホストされているサーバーのアドレス!)

3. ブラウザは、取得したIPアドレスを使用しウェブサーバーに対してHTTPリクエストを送信。

4. ウェブサーバーは、受け取ったリクエストを解析し、要求されたコンテンツを取得。

5. ウェブサーバーは、取得したコンテンツをHTTPレスポンスとしてブラウザに返す。

6. ブラウザは、受け取ったレスポンスを解析し、HTMLをレンダリングしてウェブページを構築。
CSSとJavaScriptも同様に解釈され、スタイルや動的な機能が適用される。

7. ブラウザは、ウェブページのコンテンツを画面に表示。
これには、テキスト、画像、ビデオ、リンクなどが含まれる。

ここで出てきた用語の説明

■ DNS（Domain Name System）サーバー

DNS（Domain Name System）サーバーは、
インターネット上でドメイン名とIPアドレスの対応付けを行うサーバー。

- DNS（Domain Name System）とは：
ドメイン名とIPアドレスを対応づけるしくみのこと。

人間が理解しやすいドメイン名（例: example.com）をコンピュータが理解しやすいIPアドレス
（例: 192.0.2.1）に変換する役割を果たす。

■ ドメインとは

ドメインとは、わかりやすく言うと「インターネット上の住所」のこと。
URL（https://narita-airi.com/posts/）のうち「www.xserver.ne.jp」がドメインにあたる。

電子メールを送ったり、ホームページを見たりする時に相手がインターネット上のどこにいるかを
特定するためのもの。
※上記したDNSという仕組みをつかってドメイン名をIPアドレスに変換して通信が行われている。

補足：ドメインの構造

【ドメインの構造】

■ scheme (スキーム)
リソースにアクセスするためのプロトコルや手段を示すもの(通信方法示すもの)であり、
URLやURIの先頭部分に含まれる。
ex. HTTPやHTTPSなど。

■ ホスト名
「ホスト名」はURLの中でドメイン名の前にドット区切り(.)で表されている部分で、
「物理サーバの別名」として「サーバの役割や用途」を表す名前になっている。
ドメインを建物に例えるならホスト名は「部屋」。

ホスト（Host）とは、
ネットワーク上で他のコンピューターやデバイスに対してサービスを提供するコンピューターや
デバイスのことを指す。
ホストは、ネットワーク上で特定の役割や機能を持ち、他のデバイスやクライアントからの要求に応答する。