| title | emoji | type | topics | published | |||||
|---|---|---|---|---|---|---|---|---|---|
ドメインを入力してからページが表示されるまでの仕組み |
🍣 |
tech |
|
true |
この記事では、ドメインを入力してから画面にページが表示されるまでの仕組みを出来るだけわかりやすく解説していきます。 今回解説する一連のプロセスは以下の通りです。
- DNSサーバーに接続しドメインに対応するIPアドレスを取得する。
- ブラウザがHTTPまたはHTTPSリクエストをサーバーに送信する。
- ウェブサーバーがリクエストを受け取りレスポンスを返す。
- 受け取ったファイルから画面を構築する。（ブラウザレンダリング）
まずユーザーが入力したドメインはブラウザからDNSサーバーに送られ、DNSサーバーはドメインに対応したIPアドレスを返します。
DNS（Domain Name System）は、インターネット上のコンピューターシステムやネットワークデバイスに割り当てられたIPアドレスを、人間が理解しやすいドメイン名（例えば、"example.com"）に変換するシステムです。
これを使いドメインに対応するIPアドレスを検索することができます。
IPアドレスでないと、コンピューターはウェブサイトに接続できません。
先ほど取得したIPアドレスにHTTPまたはHTTPSリクエストを送り、ウェブサーバーに接続します。
ウェブサーバーはそのリクエストを受け取り、要求されたページのファイル（HTML、CSS、JavaScriptなど）を探します。それらのファイルが見つかると、ウェブサーバーはそれらをまとめてレスポンスとしてブラウザに返します。
ブラウザレンダリングとは、ブラウザが受け取ったHTML、CSS、JavaScriptなどのコードを解釈し、ウェブページをユーザーの画面に表示するプロセスのことです。 このプロセスでは、ブラウザがHTMLをDOM（Document Object Model）として構築し、CSSを使ってスタイルを適用し、JavaScriptを実行してページを動的に変更します。
DOM（Document Object Model）は、ウェブページの構造や内容をコンピューターが理解しやすい形で表現する方法です。イメージすると、ウェブページが木のような構造を持っていると考えることができます。この木構造では、ページ全体が1つの根（ルート）ノードから始まり、その下にさまざまな要素が枝分かれしています。
<!DOCTYPE html>
<head>
<title>test</title>
</head>
<body>
<h1>hello</h1>
</body>
</html>
h1 {
color: red;
}
