Zenn
📝

WEBシステムとは？

に公開
CSS
HTML
JavaScript
webシステム
tech

今、あなたが読んでいるこの記事は、どのような仕組みで表示されているのでしょうか？
「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ページの「構造」 を決める言語です。

例えばブログなどの記事を想像してみます。
記事は「タイトル」や「画像」、そして「記事の文章」などから構成されますよね。

HTMLを使うことで、文章に目印をつけて「この部分はタイトル」「ここは画像」「これは文章」といったように、「構造」を与えることができます。

HTMLでは、目印にタグというものを使います。
以下は実際にタグを使って見出しを作成したものです。

見出しはh1タグというものを使います。
見出しの先頭に<h1>を、見出しの終わりに</h1>をつけてあげることで、見出しを作ることができます。

📌 例

<h1>見出し</h1>

※HTMLやタグについてはHTML 講座１ 基本的な書き方で解説をしていますので、よかったら読んでみてくださいね。

CSS：デザインを整える

CSS（Cascading Style Sheets） は、Webページの「見た目」 をデザインするための言語です。

例えば、「文字の色を青くする」「背景をオレンジにする」「ボタンを丸くする」など、見た目を調整することができます。

📌 例
先ほどの見出しを青色にしてみました。
※HTMLやCSSというボタンをクリックしてみてくださいね。コードを見ることができます。

※CSSやタグについてはCSS 講座1 基本の書き方とセレクタで解説をしていますので、よかったら読んでみてくださいね。

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

JavaScript は、Webページに 「動き」を与えるための言語です。

例えば、「ボタンをクリックするとメニューが開く」「スクロールするとアニメーションが動く」などの動きを実装できます。

📌 例

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

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

HTML・CSS・JavaScript の関係

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

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

「ここは見出しだから大きく表示しよう」「CSSで青色って書いてあるから青色で表示しよう」などをブラウザが調整して見せてくれているのですね。

Discussion