目次

はじめに
　筆者紹介と機械音痴エピソード
　なぜ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とは正確には ブラウザ を指します。

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

リクエストとレスポンス

基本的な流れはこんな感じです：

人間が何か検索する
　👩🏻「Qiita見たいな〜、検索っと」
ブラウザがサーバーにリクエストを送る
　💻「Qiita見たいってさ〜」
サーバーがHTMLなどをレスポンスとして返す
　🖥️「これがQiitaの中身だよ〜」
ブラウザがWebページを表示してくれる
　👩🏻「お、見れた！」

各構成要素を詳しく見てみよう

ブラウザ

Webサイトを閲覧するためのソフトです。
代表例はこちら：

Google Chrome
Safari
Microsoft Edge
Mozilla Firefox
Opera　など

主な役割は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を返す)
データベースサーバー (紹鴎を保存・管理)
メールサーバー (メール送受信)　など

サービスを提供する側（=サーバー）
私たちの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にとって最強ツール
- 人間からしたらただの数字の羅列

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

ここでまたさらに、疑問が一つ浮かびます。

ドメインとIPアドレスについてはわかった。
で、結局どうやって目的のサイトや情報にたどり着くの！？

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

DNSサーバー

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

流れはこんな感じ：

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

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

ここまでの流れを一旦整理

人間が何か検索する
　　👩🏻「Qiita見たいな、https://qiita.com/ っと」
ブラウザがDNSサーバーにリクエストを送る
　　💻「qiita.comってどのIPアドレス？」
DNSサーバーがレスポンスとしてIPアドレスを返す
　　🖥️「ドメインqiita.comのIPアドレスは208.65.153.238です」
ブラウザがIPアドレスを取得し、そのIPアドレスのサーバーにリクエストを送る
　　💻「208.65.153.238」を見せてください！」
サーバーがHTML/CSS等のファイルもしくは情報をレスポンスとして返す
　　🖥️「ほい、これがQiitaの中身じゃ」
ブラウザがファイルを解読し人間に読みやすい形で表示してくれる
　　💻「お待たせ！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つ：

データベースからデータを取得する (SQLを使用)
取得したデータを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の基礎知識

Webサービスって何？事例を交えてわかりやすく解説！【制作会社選びのポイントも紹介】

Webサイトが表示されるまでの仕組みを用語の解説を交えて紹介

【図解】ドメインとは？を初心者向けにわかりやすく解説