02. Webサイトが表示されるまで

この章では、Webサイトがブラウザに表示されるまでの流れを学びます。

細かい技術仕様をすべて覚える必要はありません。まずは、ブラウザがサーバーにファイルを取りに行き、返ってきたデータをもとにページを組み立てている、という全体像をつかみましょう。

ブラウザとは

ブラウザは、Webページを見るためのアプリケーションです。

Chrome、Safari、Firefox、Edgeなどがブラウザです。

ブラウザは、単に画面を表示するだけではありません。

  • URLをもとにWebサイトへアクセスする
  • サーバーからHTMLを受け取る
  • HTML内で指定されたCSS、JavaScript、画像を読み込む
  • HTMLとCSSをもとに画面を組み立てる
  • JavaScriptを実行して操作に反応する

Web制作で作ったHTML、CSS、JavaScriptは、最終的にブラウザに読み込まれて表示されます。

つまり、Web制作では「ブラウザがどう読むか」を意識することが大切です。

サーバーとは

サーバーは、Webサイトのファイルやデータを置いておく場所です。

ブラウザからリクエストが来ると、サーバーは必要なファイルやデータを返します。

たとえば、トップページにアクセスした時、サーバーはHTMLを返します。

HTMLの中でCSSや画像が指定されていれば、ブラウザはそれらも追加で取りに行きます。

クライアントとサーバー

Webの説明では、クライアントとサーバーという言葉がよく出てきます。

クライアントは、リクエストを送る側です。

Web制作では、主にブラウザをクライアントと考えます。

サーバーは、リクエストを受け取り、レスポンスを返す側です。

役割例
クライアントブラウザ、スマホアプリ
サーバーWebサーバー、APIサーバー

Webページを見る時は、ブラウザが「このページをください」とサーバーに依頼し、サーバーが「このHTMLです」と返します。

URLを入力した時に起きること

ブラウザにURLを入力すると、ざっくり次の流れでページが表示されます。

  1. ブラウザにURLを入力する
  2. ドメインからアクセス先のサーバーを探す
  3. ブラウザがサーバーへリクエストを送る
  4. サーバーがHTMLを返す
  5. ブラウザがHTMLを読む
  6. HTML内のCSS、JavaScript、画像を追加で読み込む
  7. ブラウザが画面を組み立てる

この流れの途中でどこかが失敗すると、ページが表示されなかったり、見た目が崩れたりします。

リクエストとレスポンス

ブラウザからサーバーへ送る依頼をリクエストと呼びます。

サーバーからブラウザへ返ってくる結果をレスポンスと呼びます。

リクエストとレスポンスのイメージ
ブラウザ: /about/ のページをください
サーバー: 200 OK。HTMLを返します

ブラウザ: /assets/style.css をください
サーバー: 200 OK。CSSを返します

ブラウザ: /images/main.jpg をください
サーバー: 404 Not Found。画像が見つかりません

Web制作でよく見る 404 は、リクエストしたファイルやページが見つからないというレスポンスです。

HTMLだけでは完成しない

ブラウザが最初に受け取るのは、多くの場合HTMLです。

しかし、WebページはHTMLだけで完成しているわけではありません。

HTMLの中には、CSS、JavaScript、画像、フォントなどの読み込み指定が含まれています。

HTMLから別ファイルを読み込む例
<link rel="stylesheet" href="/assets/css/style.css">
<script src="/assets/js/main.js" defer></script>
<img src="/images/main-visual.jpg" alt="">

この指定を見つけると、ブラウザはそれぞれのファイルを追加で取りに行きます。

そのため、CSSのパスが間違っていると見た目が崩れます。画像のパスが間違っていると画像が表示されません。

静的サイトと動的サイト

Webサイトには、大きく分けて静的サイトと動的サイトがあります。

静的サイトは、あらかじめ作られたHTML、CSS、JavaScript、画像などのファイルを配信するサイトです。

動的サイトは、アクセス時にサーバー側で処理を行い、状況に応じてHTMLやデータを返すサイトです。

種類例
静的サイトLP、コーポレートサイト、ポートフォリオ
動的サイトWordPress、ECサイト、会員サイト、管理画面

Web制作では、静的サイトも動的サイトも扱うことがあります。

ただし、どちらの場合でも、最終的にはブラウザがHTML、CSS、JavaScript、画像を読み込んで画面を表示する点は共通しています。

Web制作で意識したいこと

Webサイトが表示される流れを知っておくと、トラブルの原因を分けて考えられます。

  • URLが間違っているのか
  • ドメインやDNSの問題なのか
  • サーバーが返していないのか
  • ファイルのパスが間違っているのか
  • ブラウザに古いキャッシュが残っているのか
  • JavaScriptでエラーが出ているのか

いきなり全部を疑うのではなく、流れに沿って順番に確認します。

この章のまとめ

  • ブラウザはWebページを見に行くアプリケーション
  • サーバーはリクエストに対してファイルやデータを返す場所
  • Webページは、HTML、CSS、JavaScript、画像などを読み込んで表示される
  • リクエストとレスポンスの流れを知ると、表示トラブルを切り分けやすくなる
  • まずは「ブラウザが取りに行き、サーバーが返し、ブラウザが組み立てる」と理解すればよい