Webサイトやサービスを開発する側から見たシステム「UIサイド」「アプリケーションサイド」「サーバーサイド」

Webサイトやサービスを開発する側（制作者側）から見たとき、システムは大きく3つの「サイド（階層）」に分かれています。

「UIサイド」「アプリケーションサイド」「サーバーサイド」を整理し、それぞれの役割をわかりやすく解説します！😊

---

サイトを支える3つの階層

Webサイトを「レストラン」に例えると、どこで何が行われているかがとても分かりやすくなります。

1. UIサイド（ユーザーインターフェース・サイド）

【役割：お客さんが座る「客席」と「メニュー表」】

ユーザーが直接目で見て、手で触れる部分のことです。「フロントエンド」とも呼ばれます。

• 何をする？：文字の大きさ、色、ボタンの配置、アニメーションなど、画面の見た目を作ります。

• 使われる言葉：HTML, CSS, JavaScript など

• 大事なこと：使いやすさ（UI）や、心地よい体験（UX）を提供し、ユーザーが迷わないようにすることです。📝

2. アプリケーションサイド

【役割：注文を受けて料理を作る「キッチン・料理人」】

UIサイドとサーバーサイドの間で、具体的な「処理」を行う部分です。

• 何をする？：例えば「ログインボタンが押されたら、パスワードが合っているか確認する」「計算機で計算する」といった、プログラムの「動き」を担当します。

• 使われる言葉：Python, PHP, Ruby, Java など

• 大事なこと：正しく、速く、安全に処理を動かすことです。⚙️

3. サーバーサイド

【役割：食材が眠る「冷蔵庫」や「倉庫」】

データや情報を保管しておく場所（サーバーやデータベース）のことです。「バックエンド」の一部として語られます。

• 何をする？：ユーザーの名前、過去の注文履歴、商品の在庫数などのデータを大切に保存し、必要に応じてアプリケーションサイドへ渡します。

• 使われる言葉：MySQL, PostgreSQL (データベース) など

• 大事なこと：膨大なデータを整理して保管し、情報が漏れないようにしっかり守ることです。🔐

---

図解で見る役割のつながり

サイトが動くとき、情報は次のように流れています。

1. UIサイドでユーザーが「商品を買う」ボタンを押す。

2. アプリケーションサイドが「在庫はあるかな？」と計算を始める。

3. サーバーサイドに問い合わせて、在庫データを取ってくる。

4. 結果をUIサイドに戻し、画面に「買えました！」と表示する。

---

まとめ

Webサイト制作は、この3つのバランスで成り立っています。🌈

• UIサイドが「美しさ」を

• アプリケーションサイドが「知能」を

• サーバーサイドが「記憶」を

それぞれ担当しているイメージですね。これらを知っておくと、エンジニアさんやデザイナーさんとお話しするときに、どこで何が起きているか理解しやすくなりますよ！✨

---

用語解説

• UI（User Interface）：ユーザーとサイトの接点。見た目。

• フロントエンド：ユーザーから見える側の開発。

• バックエンド：裏側の処理やデータの管理。

• データベース：情報を整理して貯めておくための専用のシステム。