The following two tabs change content below.
アバター画像

メンバー

福岡市博多区でWebシステム開発の受託・ラボ型SES・web集客サービス、３つのWebサービスを提供中

Webフロントエンドの世界では、「HTMLとCSSの役割」「DOM」「JavaScript」など、よく耳にする言葉がたくさんあります。しかし、実務でコードを書いていても「結局、ブラウザの中で何が起きているのか？」を説明しようとすると、意外と難しかったりしますよね？

今回の記事では、改めてWebページが動く仕組みを振り返りながら、フロントエンドの基礎となる考え方を整理してみます。

普段触れている HTML や JavaScript が、ブラウザの中でどのように解釈され、画面が更新されているのか。
その中心にある「DOM」という概念を軸に、できるだけシンプルにまとめてます。

フロントエンドに詳しくない方も、今後React や Vue といったモダンな言語を学びたい方も、まずは土台としての基礎理解のお供にしていただければ幸いです。

では、そのブラウザの中で起きていることを紐解くために、まずフロントエンド開発がどんな役割を担っているのかを簡単に整理してみましょう。

フロントエンド開発とは何をしているのか？

普段何気なく使っているWebサイトには、見た目や使いやすさをつくるための多くの仕組みが裏側で動いています。
そのユーザーの目に触れる部分全般を担当するのがフロントエンド開発です。

たとえば、ボタンを押すと画面が切り替わったり、入力内容に応じて候補が表示されたりしますよね。
あれはすべてブラウザの中で起きている処理で、サーバーやデータベース側の役割とはまた別です。

フロントエンドが扱うのは、ユーザーが実際に目で見て、触れる部分。
だからこそ、動作の軽さや見やすさ、操作の心地よさがそのままユーザー体験（UI/UX）に直結します。

HTML・CSS・JavaScriptはどう役割分担している？

Webページがどのように構成されているかを理解するうえで、まず押さえておきたいのが「HTML」「CSS」「JavaScript」の3つです。
名前は聞いたことがあっても、それぞれの役割を正しく説明しようとするとなかなか難しいものです。

それぞれの役割を簡単にご紹介します。

・HTMLは骨組み
ページのタイトルや文章、ボタンやリンクといった何が存在するかを定義します。

・CSSは見た目
文字の大きさや色、余白、レイアウトなど、どのように表示されるかを決めます。

・JavaScriptは動き
JavaScriptは唯一、ブラウザ上でロジックを実行できるプログラミング言語です。
クリックしたらメニューが開く、入力に応じてエラー表示が出る、アニメーションが動く…etc、こうしたページの動的な部分はほとんどがJavaScriptによる制御です。

この3つが組み合わさることで、静止画のようなページではなく、私たちが日常的に使っている動くWebアプリが完成します。

骨組みを担当するHTML

HTMLの役割についてもう少し深掘りしてみましょう。

HTMLは「何が画面にあるのか」を決める役割です。
例えば、↓のHTMLの場合、ページにはタイトル・ボタン・説明文が表示されます。

<h1>お問い合わせ</h1>
<button>送信</button>
<p>メールアドレスを入力してください。</p>

図で表すと、いわば骨組みだけの状態です。

[ h1: お問い合わせ ]
[ button: 送信 ]
[ p: メールアドレスを入力してください。 ]

まだ色も形も決まっていませんが、「ページに何が存在するか」を定義しています。

見た目を担当するCSS

次に、CSSの役割について。

CSSを使うとページの印象が大きく変わります。
例えば同じボタンでも、

button {
  background-color: #007bff;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
}

このCSSを適用するだけで、先ほどの「送信」ボタンがそれっぽい見た目（ボタンらしい）に装飾されます。

図で書くとこんなイメージです。

[ button ]
 ├─ 背景：青
 ├─ 文字色：白
 ├─ 角丸：6px
 └─ 余白：12px × 20px

HTMLが骨組み、CSSが服を着せる役割だと思うと分かりやすいのではないでしょうか。

DOM（Document Object Model）という土台

さて、JavaScriptの説明の前にDOMの概念について押さえておく必要があります。

DOM（Document Object Model）とは、、ブラウザがHTMLを読み込んだあとに作り上げる「ページの構造データ」のことです。

ブラウザはHTMLを読み込むとそれを解析し、要素同士の親子関係をツリー状にまとめた「DOMツリー」として扱える状態に変換します。HTMLのタグがそのままツリー状のオブジェクトとして扱われ、ブラウザはこのDOMを元に画面を描画しています。

言い換えると、JavaScriptが実際に触っているのはファイルとしてのHTMLそのものではなく、このDOMという構造体です。

例えば、先ほどのHTMLはブラウザ内部で次のような構造になります。

html
 └─ body
     │
     ├─ h1
     │   └─ "お問い合わせ"
     │
     ├─ button
     │   └─ "送信"
     │
     └─ p
         └─ "メールアドレスを入力してください。"

このように<h1> や <p>、<button> といった要素は、DOM上では「ノード（node）」として構造化され、その情報を元にブラウザは画面を描画します。

そしてJavaScriptはこのDOMを直接操作し、テキストを書き換えたり、要素を追加したり、CSSクラスを変更したりするのです。

JavaScriptはブラウザの中で何をしているのか？

先ほどのDOMの説明で少し触れましたが、JavaScriptはDOMを直接操作してWebページに動きをつけるためのプログラミング言語です。

HTMLがページの構造を作り、CSSがデザインを担当するのに対し、JavaScriptはユーザーの操作に反応してページの内容を変化させます。

例えば↓のようなコード書いてみます。

<h1 id="title">お問い合わせ</h1>
<button id="btn">お問い合わせはこちら</button>

<script>
  const title = document.getElementById("title");
  const btn = document.getElementById("btn");

  btn.addEventListener("click", () => {
    title.innerText = "ありがとうございます！";
  });
</script>

「お問い合わせはこちら」ボタンをクリックすると、「お問い合わせ」という文字が「ありがとうございます！」に変わります。

つまり、画面上で起きている流れはこうです。

[ ユーザー ] ボタンをクリック
        ↓
[ JavaScript ] イベントを検知
        ↓
[ DOM ] h1タグのテキストを書き換える
        ↓
[ ブラウザ ] 画面を再描画する

Webページが「動く」のは、JavaScriptがDOMを更新した結果なのです。

これが1秒間に何度も、必要に応じて起きています。
普段意識しないだけで、Webページは絶え間なくDOMとJavaScriptが連携しながら動いています。

リアルタイム検索の入力欄、画面の切り替え、アニメーション、等々。
どれも特別な仕組みではなく、JavaScriptとDOMの組み合わせで成り立っています。

フロントエンドが複雑化した理由

少し前までは、DOMの操作はすべて手書きで行うのが一般的でした。
「クリックされたらこのDOMを書き換える」「その結果で別のDOMを更新する」…といった具合に、ひとつひとつ処理を書くスタイルです。

しかしページが複雑になるにつれ、DOMの更新が増え、コード全体の見通しが悪くなっていきました。
そして次第に、こんな問題が起きるようになります。

  • コードの変更が別の部分に影響してしまう
  • UIとデータの整合性が取れなくなる
  • DOM操作の量が増えすぎてメンテナンスが困難になる

いわゆる「スパゲッティコード」問題ですね。

この課題を解決するために誕生したのが、React や Vue、Angular といったモダンなフレームワークです。
ただし、こうしたフレームワークの本質を理解するためには、まずDOM操作がいかに複雑になりやすいかを知ることが欠かせません。

React が「状態（State）に応じてUIを自動で再構築する」という仕組みがどれほど画期的なのかは、このDOM操作の大変さを知るとよく分かります。

まとめ：DOMを理解するとフロントエンドの全体像がつながる

Webページは、HTMLという骨組みを元にしてDOMが作られ、JavaScriptがそれを操作することで動きのある画面が実現されています。
この構造が分かると、フロントエンドの仕組みは一気に理解しやすくなります。

  • HTML：何があるか
  • CSS：どう見せるか
  • JavaScript：どう動かすか
  • DOM：それらをつなぐ“内部の構造”

この4つを押さえておくことで、今後Reactなどのモダンフレームワークを学ぶときに「なぜその仕組みが必要なのか？」が自然と腑に落ちるはずです。

フロントエンドの技術は変化が早い分野ですが、根底にある仕組みはシンプルです。

まずはこの基礎構造を押さえておくことで、これから学ぶフレームワークの理解が一段とスムーズになります。

ぜひ、この土台を大切にしてみてください。