Web開発の基礎知識

# Webサーバー

ウェブサーバーは、**ハードウェア**または**ソフトウェア**、あるいはその両方を指します。

## ハードウェアの観点

ウェブサーバーとは、ウェブサーバーソフトウェアとウェブサイトのコンポーネントファイル（HTML文書、画像、CSSスタイルシート、JavaScriptファイルなど）を格納しているコンピューターのことです。インターネットに接続され、他の端末と物理的なデータ交換が可能です。

### コンポーネントファイルとは？

- **HTMLファイル**: ウェブページの構造や内容を記述するファイル
- **CSSファイル**: ページのデザインやレイアウト、色などの見た目を指定するスタイルシート
- **JavaScriptファイル**: ページに動的な動作やインタラクションを追加するスクリプト
- **画像ファイル**: JPEG、PNG、GIFなどの画像データ
- **フォントファイル**: Webフォントとして利用されるフォントデータ
- **動画・音声ファイル**: ページ内で再生されるメディアデータ
- **その他**: PDFやSVGなど、ウェブページで利用されるその他のファイル

これらのファイルが組み合わさることで、ユーザーがブラウザで閲覧できるウェブサイトが構成されます。

## ソフトウェアの観点

ウェブサーバーとは、ホストにあるファイルに対するウェブユーザーのアクセスを制御するいくつかの部品の集まりです。最小限の部品はHTTPサーバーであり、URL（ウェブアドレス）およびHTTP（ブラウザーがウェブページを閲覧するためのプロトコル）を理解し、リクエストに応じてファイルを配信します。

最も基本的な仕組みとして、ブラウザーがウェブサーバーにHTTPでファイルをリクエストし、リクエストが正しいウェブサーバー（ハードウェア）に届くと、HTTPサーバー（ソフトウェア）がリクエストを受け付け、リクエストされた文書を探し（ない場合は404レスポンスが返される）、ブラウザーにHTTPを通して送り返します。

ウェブサーバーには「静的ウェブサーバー」と「動的ウェブサーバー」があります。  
- **静的ウェブサーバー**: サーバーが保持しているファイルをそのまま送信します。  
- **動的ウェブサーバー**: アプリケーションサーバーやデータベースなどの追加ソフトウェアを持ち、ファイルを動的に生成・変更してから送信します。

> **引用**  
> 「ウェブサーバーはハードウェアまたはソフトウェア、あるいは両方が動作しているものを指します。ハードウェアの観点では、ウェブサーバーとは、ウェブサーバーソフトウェアとウェブサイトのコンポーネントファイル (例えば、 HTML 文書、画像、 CSS スタイルシート、 JavaScript ファイル) を格納しているコンピューターのことです。インターネットに接続され、ウェブに接続された他の端末と物理的なデータ交換に対応しています。ソフトウェアの観点では、ウェブサーバーとは、ホストにあるファイルに対する、ウェブユーザーのアクセスを制御する、いくつかの部品の集まりです。最小限の部品は HTTP サーバーです。HTTP サーバーは URL （ウェブアドレス）および HTTP （ブラウザーがウェブページを閲覧するためのプロトコル）を理解するソフトウェアのことです。格納しているウェブサイトのドメイン名（mozilla.org など）を通してアクセスすることができ、コンテンツをエンドユーザーの端末に配信します。」

---

# サーバーサイド、サーバーサイド言語

サーバーサイドは、ウェブサーバー上で動作し、ユーザーからのリクエストに応じて処理を行う部分です。  
サーバーサイド言語（PHP、Python、Ruby、Java、Node.jsなど）を使い、データベースとの連携やユーザー認証、動的なページ生成などを行います。

- **サーバー側とは？**  
  「サーバー側」とは、クライアントではなくサーバーで発生するすべての処理を指します。  
  例として、動的Webページのレンダリング、データベースとの対話、ID認証、プッシュ通知などが挙げられます。  
  サーバー側スクリプトは、ユーザーのアクションに応じて動的コンテンツをWebページに配信するために、サーバーで実行されます。  
  サーバー側のスクリプトはJavaScript以外にも多様な言語で記述可能です。

---

# クライアントサイド、クライアントサイドスクリプト

クライアントサイドは、**ユーザーのブラウザ上で動作する処理**です。主にJavaScriptが使われ、ページの動的な表示やユーザーインターフェースの操作、入力チェックなどを行います。サーバーに負荷をかけず、即座に反応できるのが特徴です。

- **クライアント側とは？**  
  「クライアント側」とは、クライアント（エンドユーザーデバイス）で表示または実行されるWebアプリケーションのすべてを指します。  
  HTMLやCSSなどのマークアップ言語は、クライアント側のブラウザによって解釈されます。  
  クライアント側スクリプトは、通常JavaScriptで記述され、ユーザーの操作（例：マウスホバーで画像が拡大する等）に即座に反応します。  
  クライアント側は「フロントエンド」とも呼ばれますが、厳密には同義ではありません。

---

クライアントサイドスクリプトは、**ユーザーのコンピュータやデバイス上で実行されるプログラム**です。主にWebブラウザ内で動作し、ユーザーの操作にリアルタイムで応答します。

- **主な特徴**
  - HTMLやCSSと連携して動作し、ユーザーの操作に素早く反応できる
  - ページの表示が動的になり、インタラクティブな体験を提供する
  - 代表的な言語は**JavaScript**（ボタンをクリックしたときにメッセージを表示、フォームの入力内容を確認など）
  - サーバーへのリクエストを減らし、Webページの読み込み速度向上にも寄与
  - ユーザーはスムーズな操作を体験でき、UX（ユーザーエクスペリエンス）が向上する

- **注意点**
  - クライアントサイドで実行されるため、安全性やプライバシーに注意が必要
  - 適切な対策がない場合、悪意のあるスクリプトに影響を受ける可能性がある

- **役割**
  - ユーザーの操作に応じて動的なコンテンツを作成・表示を変更
  - ページのリロードなしでコンテンツを変更したり、アニメーションを追加できる
  - 例：ボタンをクリックしたときにメッセージを表示、フォームの入力内容をリアルタイムで検証
  - 主に**JavaScript**で記述される（HTMLやCSSとも密接に連携）

:::note info
クライアントサイドスクリプトは、現代のウェブアプリケーションにとって欠かせない要素です。
:::

---

# Web開発用プログラミング言語

Web開発では、**HTML**（構造）、**CSS**（見た目）、**JavaScript**（動作）などの言語が使われます。  
サーバーサイドでは**PHP**、**Python**、**Ruby**、**Java**、**Node.js**などが利用され、データベース操作には**SQL**が使われます。  
これらを組み合わせて、動的でインタラクティブなウェブサイトを構築します。

---

## 参考文献

1. [MDN Web Docs: ウェブサーバーとは](https://developer.mozilla.org/ja/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_web_server)
2. [Cloudflare: クライアント側／サーバー側とは？](https://www.cloudflare.com/ja-jp/learning/serverless/glossary/client-side-vs-server-side/)
3. [クライアントサイドスクリプト徹底ガイド 役割・仕組み・実用例を解明！](https://it-notes.stylemap.co.jp/webservice/%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%83%89%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E5%BE%B9%E5%BA%95%E3%82%AC%E3%82%A4%E3%83%89%E3%80%80%E5%BD%B9%E5%89%B2/#toc2)