普段スマートフォンやパソコンで、当たり前のように眺めているWebサイト。画面の向こう側では、いったい何が起きているのでしょうか。
ふと、「これってどうやって動いているんだろう」と考えたことはありませんか？少し想像してみると、そこにはとても論理的で面白い世界が広がっているんです。
今回は、Web制作の世界へ踏み出すための最初の地図を広げてみましょう。
Webサイトが表示される仕組み
では、私たちが普段Webサイトを見るとき、裏側ではどんなやり取りが行われているのでしょうか。
画面の向こう側には、それぞれ明確な役割を担ったシステムが存在しています。
ブラウザ
ChromeやSafariなど、Webサイトを見るためのソフトのことです。
Webサーバー
Webサーバーの主な役割は、クライアント（ブラウザなど）からの要求を受け取って、必要なデータを送り返すことです。私たちが普段見ているWebサイトのデータは、すべてここに置かれています。
ドメイン
「rfs.jp」のような、インターネット上の「住所」です。
URL
「https://rfs.jp/article/1」のような、住所に「部屋番号」まで加えた詳しいアクセス先のことです。
ブラウザにURLを入力すると、ブラウザが「この住所（ドメイン）の、この部屋（URL）にあるデータを見せて」とWebサーバーにお願いを出します。Webサーバーがマッチしたデータを返し、ブラウザがそれを私たちに見やすい形に組み立ててくれる。
これが、Webサイトが表示される基本的な仕組みです。
Webを形作る3つの言語（HTML・CSS・JavaScript）
サーバーから送られてくるデータは、主に3つの言葉（言語）で書かれています。Web制作では、この3つを組み合わせてサイトを作っています。
HTML（エイチティーエムエル）
Webページの骨組みです。見出しや画像といった、情報の内容と構造を定義します。
CSS（シーエスエス）
Webページの装飾です。「文字を赤くする」「画像を右に寄せる」など、デザインを整えます。
JavaScript（ジャバスクリプト）
Webページに振る舞いや機能を与えます。ボタンが押されたときに裏側で計算をしたり、入力された内容が正しいかチェックしたり。
静的ページと動的ページ
Webサイトには、大きく分けて2つの種類があります。
静的ページ
静的ページとは、あらかじめ作っておいたHTMLファイルをそのままブラウザに表示するページのことです。誰が、いつアクセスしても、基本的には同じ内容が表示されます。
動的ページ
動的ページとは、ユーザーがアクセスしたときに、サーバー側でプログラムを実行して、その処理結果を表示するページのことです。X（旧Twitter）のタイムラインや、Amazonのおすすめ商品などが代表的な例です。アクセスするたびに、データベースなどから必要な情報を取得してページを生成しています。
フロントエンドとバックエンド
ユーザーの目に見える部分、つまりブラウザで読み込まれるHTML・CSSや、ブラウザで実行されるJavaScriptを扱う領域を、フロントエンドと呼びます。
一方、ユーザーの目には見えないサーバー側で動くプログラムを扱う領域を、バックエンドと呼びます。データを保存したり、ユーザーからのリクエストに応じて処理をしたりするのが主な役割です。
AIに指示してみよう
ここまで読んでみて、「3つの言語がどうやって組み合わさっているのか、実際に見てみたい」と思いませんでしたか？そんな時は、AIにコードを書いてもらうのが一番の近道です。
これから、ChatGPTなどのAIに、指示を投げてみてみましょう。
AIに聞こう
HTML、CSS、JavaScriptのそれぞれの役割が分かる、最小限のWebページのコードを書いてください。ボタンを押すと文字が変わります。
実際のコード例
ChatGPIが出力したコードは下記です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>最小限デモ</title>
<!-- CSS: 見た目 -->
<style>
p { color: blue; }
</style>
</head>
<body>
<!-- HTML: 構造 -->
<p id="text">こんにちは</p>
<button id="btn">押す</button>
<!-- JavaScript: 動き -->
<script>
document.getElementById("btn").addEventListener("click", () => {
document.getElementById("text").textContent = "変わりました！";
});
</script>
</body>
</html>実際に試してみよう
では、実際に動かしてみましょう。パソコンで「メモ帳」（Windows）や「テキストエディット」（Mac）を開きます。
上のコードをすべてコピーして、ファイルに貼り付けます。
メニューから ［ファイル］ - ［名前を付けて保存］ を選び、ファイル名を index.html として保存します。
保存した index.html をダブルクリックして、ブラウザで開いてみてください。 画面のボタンをクリックすると、文字が変わるはずです。うまく動いたでしょうか？
骨組みのHTML、装飾のCSS、動きのJavaScript。この3つが手を取り合うことで、Webの世界は作られているんですね。まずは最初の実験、大成功です。
まとめ
今回は、Web制作の世界を少しだけ上から覗いてみました。
- ブラウザがサーバーからデータを受け取り、Webページを表示する。
- ページはHTML（骨格）、CSS（装飾）、JavaScript（筋肉・動き）でできている。
- 見える部分を作るのがフロントエンド、見えない裏側を支えるのがバックエンド。
全体像がなんとなく見えてくると、自分が今どこを学ぼうとしているのかが分かりやすくなりますよね。
最初からすべてを完璧に暗記する必要はありません。作りながら「なぜ動くのか」を少しずつ紐解いていくのが、Web制作の一番楽しいところです。
次はぜひ、あなた自身の手で、少しずつコードを書き換えて遊んでみてください。