Webサービスの仕組みってどうなってるの？機械音痴だったあの頃の自分に分かるように説明してみた

# 目次
>**[はじめに](#はじめに)**
　[筆者紹介と機械音痴エピソード](#筆者紹介と機械音痴エピソード)
　[なぜWebサービスの仕組みから学ぶのか](#なぜwebサービスの仕組みから学ぶのか)
　[身近なWebサービスの例](#身近なwebサービスの例)
**[Webサービスが表示される仕組みは？](#webサービスが表示される仕組みは)**
　[リクエストとレスポンス](#リクエストとレスポンス)
　[各構成要素を詳しく見てみよう](#各構成要素を詳しく見てみよう)
**[Webサイトを構成するもの](#webサイトを構成するもの)**
**[まとめ](#まとめ)**
　　[参考文献](#参考文献)

# はじめに
>*タイトルは簡単そうなのに、目次はなんだか難しそう... (；；)*

そう思った方、ちょっと待ってください！


この記事は、IT学習を始めてまだ1ヶ月の私が書いた**2本目**の記事。
気合が入りすぎて、目次が少しかたくなってしまいました。


**でも、せめて私の[機械音痴エピソード](#筆者紹介と機械音痴エピソード)だけでも読んでいってください！笑**

できれば最後まで読んで、コメントなどいただけますと、とても励みになります。
よろしくお願いいたします！

### 筆者紹介と機械音痴エピソード
ちょうど1ヶ月前、私は突如としてITの世界に足を踏み入れました。
でも当時の私は**筋金入りの機械音痴**(しかも情報弱者)でした。

たとえば：

- 引越しのとき、Wi-Fiを自力で接続できなかった
- 携帯の契約内容をほぼ理解せずにサイン(多分今も怪s...)
- 子どもの頃、本気で「CDに歌ってる人が入ってる」と思ってた

>え？って思いましたよね。私もです。笑

そんな私でも、学び始めてみたら少しずつ理解が深まりました。
今回は**1ヶ月前の私にもわかるレベル**で、**Webサービスの仕組み**について解説してみます！

### なぜWebサービスの仕組みから学ぶのか？
一言で言えば、**基本情報技術者試験の理解を深めるため**です。

きっかけは、プログラマーの知人の一言。
>*「いけざわん、SEめっちゃ向いてると思うよ」*

もはや機械音痴の自負すらあった私は「全く何を言っているんだか」と聞き流していました。
でも、なんとなくHTMLやPythonを触ってみたら……  

>**あれ、これ意外とできるじゃん、面白いかも？** 

と思えたんです。
「そもそもSEって何？プログラミングとは？」というレベルだった私にとって、IT業界の全体像をつかむには**Webサービスの仕組み**がちょうどいい入り口になりました。

### 身近なWebサービスの例
実は、Webサービスって本当に身近で日常的に使っているものばかりです。

- SNS：X（旧Twitter）、Instagram、Facebook
- ブラウザ：Google Chrome、Safari
- ECサイト：Amazon、楽天市場
- 決済系：カード決済、電子マネー、QRコード決済
- マッチング：転職エージェント、マッチングアプリ など

こうした「いつも使っているのに、仕組みはよく知らない」ものの裏側を知ることで、**ITの世界への第一歩**を踏み出せたらと思います。

# Webサービスが表示される仕組みは？
私たちは普段、PCやスマートフォンでさまざまなWebサービスを利用しています。
でも、**それってどういう仕組みで利用できているの？** って聞かれると意外とわからないものです。

実は、Webサービスは「PC・サーバー間で行われるやりとり」によって利用することができています。ただし、ここでいうPCとは正確には **ブラウザ** を指します。

ここでは、そのやりとりについて詳しく見ていきましょう。

### リクエストとレスポンス
基本的な流れはこんな感じです：
1. 人間が何か検索する
　👩🏻「Qiita見たいな〜、検索っと」
2. ブラウザがサーバーに**リクエスト**を送る
　💻「Qiita見たいってさ〜」
3. サーバーがHTMLなどを**レスポンス**として返す
　🖥️「これがQiitaの中身だよ〜」
4. ブラウザがWebページを表示してくれる
　👩🏻「お、見れた！」

## 各構成要素を詳しく見てみよう
### ブラウザ
Webサイトを閲覧するためのソフトです。
代表例はこちら：
- Google Chrome
- Safari
- Microsoft Edge
- Mozilla Firefox
- Opera　など

**主な役割は2つ：**

1. サーバーに**リクエスト**を送る  
2. サーバーからのレスポンス（HTML/CSSなど）を**表示**する

例えば、HTMLファイルは中身だけ見るとこんな感じです：
(YouTube風の検索ページを模倣してChatGPT に書いてもらいました)
```
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>YouTube search_results</title>
</head>
<body>
  <h1>YouTube search_results</h1>
  <div class="video-list">
    <div class="video-item">
      <img src="..." alt="thumbnail">
      <h3>video_title 1</h3>
      <p>explanation</p>
    </div>
    ...
  </div>
</body>
</html>
```

> え、ただ動画見たいだけなのに！

そんな“人間には読みにくいファイル”を、解読して綺麗に表示してくれるのが**ブラウザ**なのです。

### サーバー
**情報を保管したり、プログラムを実行したりする大きなコンピューター**です。

種類は：
- Webサーバー (HTMLを返す)
- データベースサーバー (紹鴎を保存・管理)
- メールサーバー (メール送受信)　など

:::note
サービスを**提供する側**（=サーバー）
私たちのPCやスマホなどの**受け取る側**（=クライアント）
:::

でも、ここで疑問が一つ浮かびますね。
> サーバーって世界中にあるのに、**どうやって目的のサイトや情報に辿り着くんだ？**

ここで**ドメイン名とIPアドレスの仕組み**について見ていきましょう。

### ドメインとIPアドレス
**ドメイン**  
（例）https://qiita.com/ → `qiita.com` の部分がドメインで、サイトの**名前**みたいなものです。  
（ちなみに、`.com` は「トップレベルドメイン（TLD）」という）

でも、実はPCは「ドメイン」を理解できません。
PCは2進数、すなわち 0 or 1 だけで処理を行っているため、数字の羅列である**IPアドレス**を使います。

**IPアドレス**
（例）：208.65.153.238
ネット上でPCやスマホなどの機器を識別するための"**数字の住所**"です。

**ドメインとIPアドレスの違い**
表現の仕方が違うだけで双方は同じものを指しています。
- ドメイン
  - 表現形式は文字列、アクセス先の名前を指す
  - 人間は直感的にどんなサイトか理解できる
  - しかし数字で処理するPCには理解不能
- IPアドレス
  - 表現形式は数字、アクセス先の住所を指す
  - 数字で処理するPCにとって最強ツール
  - 人間からしたらただの数字の羅列

:::note
**人とPC、それぞれのための住所**
人にわかりやすいのは**ドメイン**
PCにわかりやすいのは**IPアドレス**
どちらも**同じ場所を指すための手段**である
:::

ここでまたさらに、疑問が一つ浮かびます。
> ドメインとIPアドレスについてはわかった。
で、結局どうやって目的のサイトや情報にたどり着くの！？

今学んだドメインとIPアドレスの架け橋となる、**DNSサーバー**というものがあるのです！

### DNSサーバー
DNS ＝ Domain Name System
ドメインとIPアドレスを紐付けてくれる辞書のような存在

流れはこんな感じ：

1. 私たちがブラウザで`https://qiita.com/`を入力
2.  PCがDNSに「qiita.comのIPアドレスって何？」と問い合わせる
3. DNSが「208.65.153.238だよ」と教えてくれる

こうして、無事に目的のサイトへたどり着けるというわけです！


### ここまでの流れを一旦整理
1. 人間が何か検索する
　　👩🏻「Qiita見たいな、https://qiita.com/ っと」
2. ブラウザがDNSサーバーに**リクエスト**を送る
　　💻「qiita.comってどのIPアドレス？」
3. DNSサーバーが**レスポンス**としてIPアドレスを返す
　　🖥️「ドメインqiita.comのIPアドレスは208.65.153.238です」
4. ブラウザがIPアドレスを取得し、そのIPアドレスのサーバーにリクエストを送る
　　💻「208.65.153.238」を見せてください！」
5. サーバーがHTML/CSS等のファイルもしくは情報をレスポンスとして返す 
　　🖥️「ほい、これがQiitaの中身じゃ」
6. ブラウザがファイルを解読し人間に読みやすい形で表示してくれる
　　💻「お待たせ！Qiitaだよ！」

> こんなに大変なことが裏で起きていたとは！

ここまでWebサイトが表示される仕組みを説明しました。
最後に、**そもそもWebサイトって何なのか**を説明します！

# Webサイトを構成するもの
Webサイトの見た目は、HTML, CSS, JavaScriptといった言語で作られています。

- **HTML**
見出しやタイトルなど、Webサイトの構造を作るマークアップ言語

- **CSS**
色・余白・配置など、デザインや表示形式を整えるスタイルシート言語

- **JavaScript**
質問をクリックすると答えが表示されるなど、ページに動きをつけるプログラミング言語

これらのファイルがサーバー上に保存され、ブラウザのリクエストに応じてレスポンスとして返されます。
ただし、これだけではWebサイトとしては不十分です。
なぜならHTML, CSSだけでは**データの更新**ができないからです。

**静的 vs 動的なWebサイト**
- 例えば、自己紹介サイトのように頻繁な更新がないものなら、年に数回のサイトメンテナンスだけすればよく、HTMLとCSSだけでも十分
- しかし、X (旧：Twitter) やYouTubeのように毎日大量のデータが投稿・更新されるサイトでは、データの更新ができないHTML, CSSでは対応不可能

そこで、**データベース**と**サーバーサイドスクリプト**が登場します。

**データベース**
データの保管庫のようなものです。
この中のデータがHTML, CSSに反映されたのち、私たちのPCに表示されます。

ただ、HTML, CSSは直接データベースとやり取りすることができないため、
データをやり取りする言語としてPHP, Python, Ruby などの**サーバーサイドスクリプト**を使います。

**サーバーサイドスクリプト**
主な役割は2つ：

1. データベースからデータを取得する (SQLを使用)
2. 取得したデータをHTML, CSSに当てはめる

>**SQL**：データベースを操作する言語。データの取得/追加/更新/削除ができる。

- このようにWebサイトの裏側で動き、私たちの目には見えないのが**サーバーサイド**
- 対して、私たちが画面で見る側が**フロントエンド**

# まとめ
ここまで、Webサービスの仕組みについて、機械音痴だった1ヶ月前の自分にもわかるように解説してきました。

### この記事で分かったこと
- Webサービスは、ユーザー側の**クライアント**（主にブラウザ）と、情報を届ける**サーバー**のやりとりで成り立っている
- ブラウザは、URLをもとに、サーバーへ**リクエスト**を送る
- サーバーは **HTMLなどのデータ（レスポンス）** を返して、ブラウザがWebページを表示する
- サーバーは**IPアドレス**で識別され、人間が使いやすいように**ドメイン名**がある
- 人間にわかりやすくするために、 **ドメイン名（例：qiita.com）** が使われている
- **DNSサーバー**は、ドメイン名とIPアドレスをつなげてくれる"架け橋"のような存在
- サーバーは、**データベース**にアクセスして、情報の保存や取得ができる
- 裏側では、ユーザーに見える**フロントエンド**と、見えない**サーバーサイドスクリプト**が連携している
- Webサイトは**HTML/CSS/JavaScript**などの言語で構成され、役割がそれぞれ違う



---

つまり、
**「ブラウザ → DNS → IPアドレス → サーバー → Webページ」**
という一連の流れによって、私たちはSNSを見たり、調べ物をしたりできているんですね。

最初は「サーバー？ドメイン？DNS？なにそれ？」と思っていた方も、この記事を読んで「ちょっとだけわかったかも！」と感じてもらえたら嬉しいです。

---

まだまだ勉強中ですが、初めて自力でQiitaに記事を書ききれたことがとても嬉しい！！

最後まで読んでいただき、本当にありがとうございました！


## 参考文献
>[【全体像】基本情報技術者試験受験者が知っておくべきITの基礎知識](https://www.youtube.com/watch?v=q7J1D2HIUec&list=PLEuyFWEF8u0P_DDo0WpW0uKVQPFgxUv5W&index=3)

>[Webサービスって何？事例を交えてわかりやすく解説！【制作会社選びのポイントも紹介】](https://coosy.co.jp/blog/webservice-basic/)

>[Webサイトが表示されるまでの仕組みを用語の解説を交えて紹介](https://www.rworks.jp/system/system-column/sys-entry/21249/)

>[【図解】ドメインとは？を初心者向けにわかりやすく解説](#https://www.kagoya.jp/howto/it-glossary/domain/web-01/)