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

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

更新日：2026-08-02

ここまで、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システムの画面と操作を確認するための試作品です。

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リクエストを学びます。