Webサービスの仕組みを図解。Webサービスの裏側はこうなっている！

Webサービスとは？

そもそもWebサービスとは何のことなのでしょうか？
まずはじめに、Webサービスとは何なのか、どういった仕組みで動いているのかを紹介します。

インターネット上で提供されるサービス

そもそもWebサービスとは、インターネット上で提供されていて、Google ChromeやSafariなどのブラウザで見ることのできるサービスのことです。
多くの方が目にしたことがあるであろう、YouTubeやメルカリもWebサービスの一種です。
そんなWebサービスは、さまざまな技術が背後で作用した結果うまく機能しています。ここでは、その背後の仕組みをわかりやすく解説してみたい思います。

Webサービスの仕組みを担う3つの要素

Webサービスの仕組みを理解するうえで、まずはじめにWebサービスを構成する3つの要素について紹介します。
この3つの要素がうまく働き、やりとりしあうことでWebサービスは機能しています。

①ネットワーク

ネットワークとは、コンピュータやスマートフォンなどを接続させる技術のこといいます。
複数のコンピュータやスマートフォンはネットワーク上で接続されます。

Webサービスが動く上でさまざまなデータのやりとりがなされますが、このデータのやりとりがうまくなされないと、Webサービスとしてきちんと機能しません。

Webサービスがきちんと機能するために、ネットワーク上ではさまざまなルールが定められています。
（ネットワークについてはこちら）

②サーバー

サーバーは普段私たちがWebサービスを利用するうえで目にすることはありませんが、Webサービスがうまく機能するうえで重要な役割を果たしています。
私たちがデバイス上でリンクをクリックしたらその該当するページを表示する指令を出したり、画像を表示させたりなど、Webサービスの裏側を支えているのがサーバーです。
（サーバーについてはこちら）

③クライアント

私たちがWebサービスを利用する際は、パソコンやスマートフォンの画面を見るでしょう。
Webサービスを利用するうえで、普段私たちは何かしらの機器を通じてそのサービスを利用します。
こういった、私たちが普段手にする機器やWebサイトのことをクライアントといいます。
（クライアントについてはこちら）

Webサービスの仕組み概要

1. クライアントがサーバーに特定のアクションを要求する。（リクエスト）
2. サーバーが要求されたアクションに対する応答をクライアントに対して返す。（レスポンス）

リクエスト

私たちがWebサイトを見ているときを例にとって見ましょう。
Webサイトを見ていて、ほかのページに飛ぶ際にはリンクをクリックします。
その際、「次のページを表示してください」という要求がクライアントからサーバーへと送信されます。
この要求のことをリクエストといいます。

画像をダウンロードするときや、メールを送信するときなど、何かしらのアクションをとるときはその都度リクエストがサーバーに送信されます。

レスポンス

クライアントからリクエストが送信されると、サーバーはそのリクエストに対する応答をクライアントに対しておこないます。
この応答のことをレスポンスといいます。
先ほどの例で例えると、まず私たちがあるリンクをクリックしてリクエストを送信します。その後、サーバーはそのページを表示させるためのレスポンスをクライアントに対して返します。

Webサービスの仕組みまとめ

もう一度Webサービスの仕組みを整理するために、ここではTorteoを例にとって説明します。
Torteoのトップページ（左の図）にいるときに、「社会人なら知っておくべき4つの国際問題をわかりやすく解説してみた」という記事が読みたくなったとします。

そこで、私たちはデバイス上でこの記事のリンクをクリックします。
そうするとこの記事（https://torteo.jp/media/atcl-2410/）を表示してほしいというリクエストがサーバーに送られます。
サーバーはこのリクエストを処理して、このページを表示させるためのレスポンスをクライアントに送ります。

そしてはれて私たちのデバイス上で「社会人なら知っておくべき4つの国際問題をわかりやすく解説してみた」という記事が読めるようになります。
こうした一連の流れがあることで、Webサービスはうまく機能しています。

Webサービスの仕組み①：ネットワーク

Webサービスがうまく機能するために、ネットワークにはさまざまなルールが定められています。そんなネットワークについてここで紹介します。

通信プロトコルとは？

通信プロトコルとは、ネットワーク上で通信する際の決まりやルールのことです。
もしコンピュータ会社ごとに通信方式が異なっていたとすると、データを送信できなかったり欲しいデータを受け取れなかったりと、私たち側にいろいろ不便が生じます。
したがって、すべてのコンピュータが従うべき共通の通信方式のルールとして、通信プロトコルが定められています。

HTTP

この通信プロトコルのうち、Webコンテンツを送受信するための通信プロトコルのことをHTTPと呼びます。
今見ているこのページも、HTTPというプロトコルにしたがってやりとりされています。
ほかにも、ファイルを送受信する際に用いられるFTPというプロトコルや、メールを送信するときに用いるSMTPというプロトコルもあり、さまざまなプロトコルが用途別に定められています。

Webサービスの仕組み②：サーバー

最後に、私たちが普段目にすることは少ないサーバーの仕組みを紹介します。

サーバーとは？

そもそもサーバーとは、情報やデータを提供する機器のことです。
私たちがある画像をダウンロードしたり、新しいページに遷移したりする際、そのデータをある場所から引き出す必要があります。この「ある場所」のことをサーバーと呼びます。

サーバーの種類

サーバーはさまざまな種類があり、その種類ごとに担当している役割が異なります。
例えば、Webサーバーはクライアントからのリクエストを受けて、そのリクエストに応じてWebページや画像をレスポンスとして返答する役割を持っています。
また、データベースサーバーはあるデータを保存したり引き出したり、また更新したりする役割を持っています。
ほかにもさまざまなサーバーがあるので、気になった方は調べてみてください。

サーバーの仕組み

1. クライアントからリクエストが送信される
2. サーバーはリクエストの内容を解析する
3. サーバーがクライアントにレスポンスを返す

サーバーは基本的に情報の受け渡し役です。
クライアントがさまざまなプロトコルに基づいてリクエストを送ってくるため、そのリクエスト内容を解析してレスポンスを返します。
クライアントから受け取ったリクエストに対応するレスポンスのデータを得るために、新たに別のサーバーにリクエストを送ってやりとりする場合もあります。

Webサービスの仕組み③：クライアント

普段私たちがWebサービスをWebページとして目にするクライアントの仕組みを紹介します。
どのような仕組みでWebサービスが画面上で表示されているのでしょうか。

ブラウザ

普段、私たちはInternet ExplolerやInternet Edge、Google Chromeといったソフトを通してWebサービスを目にします。このソフトのことをブラウザといいます。
私たちはこのブラウザを通してさまざまなWebサービスやWebページを見ています。
このブラウザ上ではサーバからのレスポンスを解析し、整理したり、私たちがわかるように描画（レンダリング）したりしています。

Webサービスがブラウザ上に表示される仕組み

1. 私たちがブラウザ上でクリック、ダウンロードなどの何かしらのアクションをとる
2. アクションにもとづいたリクエストがサーバーへ送信される
3. リクエストにもとづいたレスポンスがクライアント（ここではブラウザ）へ送信される
4. ブラウザは、レスポンスの内容を解析し、私たちがわかるように描画（レンダリング）して表示する

サーバーからのレスポンスデータはHTML、CSSといった言語で書かれています。このHTML、CSSという言語は私たち側が一目見てわかる内容ではなく、この言語にしたがってWebサービスやWebページを組み立てる必要があります。
ブラウザはこういったレスポンスのデータを解析し、私たちがわかるように画面上にレスポンスの内容を描画（レンダリング）します。

Webサービスの仕組みは奥が深い

普段私たちが使うWebサービスの裏側はこういった仕組みで成り立っています。
「クライアント」「サーバー」といった聞きなれない言葉がたくさん登場しましたが、これらはWebサービスの裏側を支えるうえで非常に重要な役割を担っています。
よくわからないWebサービスの裏側の仕組みを少しは理解できたでしょうか？