本文へスキップ
Web整備室
Webの基礎 基礎 Webの基礎 ブラウザ モック

ブラウザで動く技術とWebサイトのモックを理解しよう

更新日：2026-09-26

ここまで、HTMLとCSSで画面を作り、JavaScriptで利用者の操作に応じて表示を変更する方法を学びました。

Promise以降のJavaScript応用へ進む前に、これまで書いてきたコードがどこで動いているのか、サーバーを使わずに何を作れるのかを整理します。

この記事を終えると、次のことができるようになります。

  • HTML、CSS、JavaScriptの役割を説明できる
  • ブラウザがファイルを読み込んで表示する流れを説明できる
  • フロントエンドとバックエンドを区別できる
  • モックで確認できることと、確認できないことを判断できる
  • 次にサーバーを学ぶ理由を説明できる

今回使用するファイル構成

これまでの学習で作ってきた、一般的なWebページの構成を使います。

web-mock/
├── index.html
├── css/
│   └── style.css
├── images/
│   └── main-visual.jpg
└── js/
    └── script.js

ブラウザの役割を理解する

ブラウザとは

ブラウザは、Webページを取得し、内容を画面へ表示するアプリケーションです。

代表的なブラウザには、Google Chrome、Microsoft Edge、Safari、Firefoxなどがあります。

ブラウザは主に次のファイルを解釈します。

  • HTML
  • CSS
  • JavaScript

画像、動画、フォントなども表示できますが、画面の構造、見た目、動作の基本を担当するのがHTML、CSS、JavaScriptです。

HTMLから必要なファイルを見つける

ブラウザは最初にHTMLを読みます。HTMLの中にCSS、画像、JavaScriptの場所が書かれていると、それらも読み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web制作相談</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <img src="images/main-visual.jpg" alt="パソコンでWebサイトを制作している様子">
  <button id="menu-button" type="button">メニューを開く</button>

  <script src="js/script.js"></script>
</body>
</html>

このHTMLには、三つの外部ファイルに関する情報があります。

  • link要素のhref：CSSファイルの場所
  • img要素のsrc：画像ファイルの場所
  • script要素のsrc：JavaScriptファイルの場所

ブラウザ内では、概念的に次の流れでページが完成します。

HTMLを読み込む
↓
HTMLの要素から必要なファイルを見つける
↓
CSS、画像、JavaScriptを読み込む
↓
HTMLから画面の構造を作る
↓
CSSで見た目を整える
↓
JavaScriptを実行して操作を受け付ける

DevToolsのNetworkタブを開いてページを再読み込みすると、index.htmlだけでなく、CSS、画像、JavaScriptも個別に読み込まれていることを確認できます。

HTML、CSS、JavaScriptの役割を整理する

HTMLは内容と構造を作る

HTMLは、ページに何があり、それぞれがどのような意味を持つかを記述します。

<main>
  <h1>Web制作相談</h1>
  <p>Webサイト制作についてご相談ください。</p>
  <a href="#contact">相談フォームへ進む</a>
</main>

見出し、文章、リンク、フォーム、画像などを適切な要素で表します。HTMLは単なる配置指定ではなく、文書の意味と親子関係を作ります。

CSSは見た目と配置を整える

CSSはHTML要素の色、余白、文字サイズ、並び方などを指定します。

main {
  width: min(100% - 2rem, 60rem);
  margin-inline: auto;
}

a {
  display: inline-block;
  padding: 0.75rem 1rem;
  color: #fff;
  background: #1455a0;
}

画面幅に合わせたレスポンシブ表示もCSSの役割です。情報の意味はHTMLに残し、見た目をCSSへ分けると変更しやすくなります。

JavaScriptは動作と状態変化を担当する

JavaScriptは、クリック、入力、送信などを受け取り、画面の状態を変更します。

const menuButton = document.querySelector('#menu-button');
const menu = document.querySelector('#global-menu');

menuButton.addEventListener('click', () => {
  const isOpen = menuButton.getAttribute('aria-expanded') === 'true';

  menu.hidden = isOpen;
  menuButton.setAttribute('aria-expanded', String(!isOpen));
});

JavaScriptはブラウザの中で、すでに読み込まれたHTML要素を取得して変更できます。

三つの技術は協力して画面を作る

HTML
├── 何を表示するか
└── どのような意味と構造か

CSS
├── どのように見せるか
└── 画面幅にどう対応するか

JavaScript
├── どの操作を受け取るか
└── 操作後に何を変えるか

ライブラリやフレームワークを使う場合も、最終的にブラウザが受け取り、解釈する基本はHTML、CSS、JavaScriptです。

フロントエンドとは

利用者がブラウザ上で見たり操作したりする部分を、一般にフロントエンドと呼びます。

これまで学んだ内容では、次のような機能を作れます。

  • Webページの文章や画像を表示する
  • スマートフォンに対応したレイアウトを作る
  • メニュー、タブ、モーダルを開閉する
  • フォームの入力値を取得する
  • 入力内容をその場で検証する
  • 配列から一覧を表示する
  • localStorageへ設定を保存する

これらは、基本的に利用者のブラウザ内で動作します。

バックエンドとは

利用者のブラウザではなく、Webサーバー側で動作する部分を、一般にバックエンドと呼びます。

バックエンドは、ブラウザから送られたリクエストを受け取り、必要な処理を行って結果を返します。一般的なWebサイトでは、主に次のような処理を担当します。

  • URLや入力内容を受け取る
  • ログイン状態や権限を確認する
  • データベースから必要な情報を取得する
  • 表示する内容を決定する
  • HTMLを生成してブラウザへ返す
  • データを保存、更新、削除する

バックエンドから返すものはHTMLだけとは限りません。Web APIではJSONなどのデータを返すこともあります。ただし、まずは「ブラウザへ表示するHTMLをサーバー側で作って返すもの」と考えると理解しやすいでしょう。

バックエンドがHTMLを生成する流れ

たとえば、ブラウザで次のURLを開いたとします。

https://example.com/customers

このとき、概念的には次のような流れで画面が表示されます。

ブラウザがURLへリクエストを送る
↓
バックエンドがリクエストを受け取る
↓
必要に応じてログイン状態や権限を確認する
↓
データベースから顧客情報を取得する
↓
取得した情報を使ってHTMLを生成する
↓
生成したHTMLをブラウザへ返す
↓
ブラウザがHTMLを読み取って画面を表示する

ブラウザが最初に受け取るHTMLは、バックエンドでの処理が終わった後のHTMLです。

たとえば、バックエンドで次のような処理を行ったとします。

<?php if ($isLoggedIn): ?>
  <p>ログインしています。</p>
<?php else: ?>
  <a href="/login">ログインする</a>
<?php endif; ?>

ログイン済みの場合、ブラウザへ送られるのは次のHTMLです。

<p>ログインしています。</p>

未ログインの場合は、次のHTMLが送られます。

<a href="/login">ログインする</a>

PHPのコードや、条件に該当しなかった側のHTMLはブラウザへ送られません。ブラウザが受け取る時点では、バックエンドのif文はすでに実行されています。

フロントエンドとバックエンドのプログラム

フロントエンドでもバックエンドでも、if文による条件分岐や、for文による繰り返し処理を使用できます。

違いは、同じ種類の処理を使えるかどうかではなく、どこで、いつ実行されるかです。

項目 フロントエンド バックエンド
実行場所 利用者のブラウザ Webサーバー
実行時期 HTMLなどを受け取った後 ブラウザへ結果を返す前
主な役割 表示済みの画面や状態を変更する 表示内容や返すデータを決定する
コードの確認 利用者が確認・変更できる 通常は利用者から確認できない
秘密情報 扱ってはいけない 必要な安全対策のもとで扱う

バックエンドは、条件分岐や繰り返し処理を実行した結果から、ブラウザが最初に受け取るHTMLを生成します。

一方、フロントエンドのJavaScriptは、ブラウザがすでに受け取ったHTMLを取得し、追加、変更、削除できます。

バックエンド
└── ブラウザへ何を送るか決める
        ↓
ブラウザがHTMLを受け取る
        ↓
フロントエンド
└── 受け取ったHTMLの表示や状態を操作する

「存在するものを消す」と「最初から存在しない」の違い

たとえば、権限のない利用者に秘密の情報を見せない処理を考えます。ここで重要なのは、「ブラウザ上に存在する情報を後から消すこと」と、「その情報をブラウザ上に最初から存在させないこと」は異なる、という点です。

フロントエンドのJavaScriptで要素を削除する方法では、秘密情報を含むHTMLがまずブラウザ上に存在し、その後で画面から消されます。

<p id="secret">秘密の情報</p>

<script>
  const canViewSecret = false;

  if (!canViewSecret) {
    document.querySelector('#secret').remove();
  }
</script>

この場合、画面から文字が消えていても、秘密情報まで存在しなかったことにはなりません。情報はいったんブラウザへ送られているため、利用者はJavaScriptの実行を止めたり、通信内容や元のHTMLを調べたりできます。後から要素を消すだけでは、情報を安全に隠したことにはなりません。

秘密情報を保護するには、バックエンドで権限を確認します。権限がない場合は情報をHTMLへ含めず、ブラウザ上に最初から存在しない状態にします。

<?php if ($canViewSecret): ?>
  <p><?= htmlspecialchars($secretInformation, ENT_QUOTES, 'UTF-8') ?></p>
<?php endif; ?>

この場合、権限のない利用者へ返すHTMLには、秘密情報そのものが最初から存在しません。

安全ではない方法
秘密情報がブラウザ上に存在する
↓
JavaScriptで後から消す

基本となる安全な方法
バックエンドで権限を確認する
↓
権限がなければ最初からHTMLに含めない

パスワードについては、さらに厳重な扱いが必要です。通常、サーバーでも元のパスワードをそのまま保存したり、HTMLへ埋め込んだりしません。パスワードは適切な方法でハッシュ化して保存し、入力されたパスワードが正しいかどうかだけをバックエンドで確認します。

このように、存在するものを後から消せばよい処理なのか、情報を最初から存在させてはいけない処理なのかによって、フロントエンドとバックエンドのどちらで処理するべきかを判断します。

モックを作る

モックとは

モックは、完成するWebサイトやWebシステムの画面と操作を確認するための試作品です。

HTML、CSS、JavaScriptの基礎を組み合わせると、サーバーやデータベースが完成していなくても、実際にブラウザで操作できるモックを作れます。

たとえば顧客管理画面のモックなら、次の部分を作れます。

  • 一覧画面のレイアウト
  • 検索フォームの見た目
  • 詳細画面へ進むリンク
  • モーダルの開閉
  • 入力エラーの表示
  • ダミーデータによる一覧表示

ダミーデータから一覧を表示する

const customers = [
  { id: 1, name: '山田太郎', status: '対応中' },
  { id: 2, name: '鈴木花子', status: '完了' },
];

customers.forEach((customer) => {
  const item = document.createElement('li');
  item.textContent = `${customer.name}：${customer.status}`;
  customerList.append(item);
});

配列へ直接書いたダミーデータでも、一覧の見た目や件数による変化を確認できます。

モックで確認できること

  • 必要な画面と入力項目が揃っているか
  • 情報の並び順が理解しやすいか
  • ボタンやリンクの位置が分かりやすいか
  • スマートフォンでも操作できるか
  • 入力エラーをどこへ表示するか
  • 画面間をどのように移動するか

実際に操作できるため、文章だけの仕様書より早く認識の違いを見つけられる場合があります。

モックだけでは実現できないことを知る

ブラウザ内のコードだけでは、安全かつ継続的に扱えない処理があります。

複数利用者でデータを共有する

JavaScriptの変数は再読み込みすると失われます。localStorageは同じブラウザへ保存できますが、別の端末や別の利用者とは共有されません。

本物のログインと権限を管理する

JavaScriptでログイン済みの見た目を作ることはできます。しかし、ブラウザ上のJavaScriptやHTMLは利用者が変更できます。表示を隠すだけでは、重要なデータを保護できません。

信頼できるデータを保存する

価格、注文、顧客情報などをブラウザだけに保存すると、利用者による変更や削除が可能です。業務データはサーバー側で検証し、データベースなどへ保存します。

メール送信などの秘密情報を扱う

メールサーバーのパスワードや外部サービスの秘密鍵をJavaScriptへ書くと、ブラウザから見えてしまいます。秘密情報を必要とする処理はサーバー側で行います。

モックからWebシステムへ進む

モック
├── HTMLで画面構造を作る
├── CSSで見た目を整える
├── JavaScriptで画面操作を作る
└── ダミーデータで動きを確認する
        ↓
Webシステム
├── ブラウザがサーバーへ要求を送る
├── サーバーが入力と権限を確認する
├── データベースへ保存する
└── 処理結果をブラウザへ返す

モックは使い捨てとは限りません。HTML、CSS、JavaScriptを整理して作っておけば、サーバー側の処理と接続するときにも画面設計やコードを活用できます。

DevToolsで確認する

これまでの知識がブラウザ内でどのように動いているか確認します。

  1. ElementsタブでHTMLと適用中のCSSを確認する
  2. ConsoleでJavaScriptの値やエラーを確認する
  3. Networkタブを開いてページを再読み込みする
  4. HTML、CSS、画像、JavaScriptが別々に取得されることを確認する
  5. ApplicationタブでlocalStorageの保存場所を確認する

Networkタブに表示される一件ずつの通信が、次の記事で学ぶリクエストとレスポンスです。

まとめ

  • ブラウザはHTML、CSS、JavaScriptを解釈して画面を表示・実行する
  • HTMLは内容と構造、CSSは見た目、JavaScriptは操作と状態変化を担当する
  • 三つの技術を組み合わせると、操作可能なモックを作れる
  • モックは画面、操作、入力項目、導線の確認に役立つ
  • 複数利用者のデータ共有、権限管理、信頼できる保存にはサーバーが必要になる

次の記事では、ブラウザの外側にあるサーバーの役割と、ブラウザからサーバーへ送るHTTPリクエストを学びます。

この記事をシェア

X Facebook