WEBシステムとは？

今、あなたが読んでいるこの記事は、どのような仕組みで表示されているのでしょうか？
「WEBシステム」について調べると、ブラウザやサーバー、HTML、プログラミングといった言葉が出てきますが、これらはいったい何なのでしょうか。
この記事では、それらの基本的な用語を含め、WEBシステムの仕組みをわかりやすく解説していきます。

WEBシステムの仕組み

概要

私たちがインターネットで記事を読んだり、YouTubeの動画を見るとき、スマホやパソコンの「ブラウザ」は、「サーバー」というコンピュータに「このページを表示してください」とリクエストを送ります。サーバーは、そのリクエストに応えて記事や動画のデータを送り返し、ブラウザがそれを画面に表示します。こうしたやり取りによって、私たちはインターネットを通じてスムーズに情報を見たり、動画を楽しんだりできます。

ブラウザ

つまり、ブラウザは サーバーから受け取った情報を、私たちが見やすい形にしてくれるソフトウェア なのです。

※ソフトウェアとは、スマホやパソコンが動くようにするためのプログラム。
※プログラムとは、スマホやパソコンに「こう動いてね！」と指示を書いたもの。

代表的なブラウザには、Google Chrome や Safari などがあります。みなさんも普段から使っていますよね！

サーバー

サーバーは、インターネット上でWebページのデータを保管し、必要に応じてユーザーのブラウザに送信するコンピュータです。

サーバーと聞くと、なんだかすごそうなコンピューターを想像してしまいますが、実は皆さんが普段つかっているようなパソコンもサーバーにすることができます。ただ、現実には多くのユーザーが一度にアクセスしても耐えられるようなコンピューターを使うため、スペックの高いコンピューターを使うことが一般的です。

サーバーにはいくつか種類があります。代表的なのは以下のようなものです。

Webサーバー
Webページや画像、動画などのデータを保管し、ユーザーのブラウザからのリクエストに応じてそれらのデータを送信するサーバーです。

データベースサーバー
アプリやWebページが利用するデータを管理するサーバーです。ユーザーの情報や投稿されたデータなどを保存し、必要に応じて提供します。

ファイルサーバー
文書や画像、動画などのファイルを保存し、ネットワークを通じて複数のユーザーがアクセスできるようにするサーバーです。企業の社内で共有ファイルを管理する際によく使われます。

メールサーバー
メールの送受信を管理するサーバーです。Gmail や Outlook などのメールサービスも、メールサーバーを利用してユーザーのメールを送受信しています。

Webページを表示するための技術

先ほど、サーバーは記事や動画のデータを送り返し、ブラウザがそれを画面に表示する と説明しましたが、具体的にはどのようなデータが送られるのでしょうか？

そこで登場するのが、HTML・CSS・JavaScript などの技術です。これらの技術を組み合わせることで、Webページは 「構造」・「デザイン」・「動き」 を持つことができます。

HTML・CSS・JavaScriptに従って書かれたデータがサーバーからブラウザに渡されることで、ブラウザはその内容に従ってWebページを表示します。

HTML：Webページの骨組みを作る

HTML（HyperText Markup Language） は、Webページの「構造」 を決める言語です。
例えば、「この部分はタイトル」「ここは画像」「これは文章」といった役割を指定することが出来ます。

役割はタグを使って指定することができ、見出しはh1タグ、文章はpタグを使います。

📌 例：HTML

<h1>ようこそ！</h1>
<p>これはサンプルのWebページです。</p>

🔽 ブラウザでの表示

CSS：デザインを整える

CSS（Cascading Style Sheets） は、Webページの「見た目」 をデザインするための言語です。
例えば、「文字の色を青くする」「背景をオレンジにする」「ボタンを丸くする」など、見た目を調整できます。

📌 例：CSS

h1 {
  color: blue;  /* 見出しを青色にする */
  font-size: 24px; /* フォントサイズを大きくする */
}

🔽 適用後の表示

JavaScript：Webページに動きをつける

JavaScript は、Webページに 「動き」を追加するための言語です。
例えば、「ボタンをクリックするとメニューが開く」「スクロールするとアニメーションが動く」などの機能を実装できます。

📌 例：JavaScript

document.getElementById("btn").addEventListener("click", function() {
  alert("ボタンがクリックされました！");
});

🔽 動作イメージ
ボタンをクリックすると「ボタンがクリックされました！」とポップアップが出る。

HTML・CSS・JavaScript の関係

これらの技術を組み合わせることで、Webページは 「構造」・「デザイン」・「動き」 を持つことができます。

HTML・CSS・JavaScriptに従って書かれたデータがサーバーからブラウザに渡されることで、ブラウザはその内容に従ってWebページを表示します。

例えば 「レストランのWebページ」 を作る場合：

技術	役割	具体例
HTML	ページの構造を作る	メニューのタイトルや料理の一覧を配置
CSS	デザインを整える	背景をオシャレな色にする、ボタンを丸くする
JavaScript	動きをつける	「注文ボタン」を押すとカートに追加される

このように、Webページは HTML（構造）+ CSS（デザイン）+ JavaScript（動き） の3つが組み合わさって作られています！🚀