Technology

webサービス・webアプリケーションの仕組みの大まかな流れ

2020-12-19

ウェブサービス、ウェブアプリケーションを作ることになり、全体像を整理したかったので、ここにまとめる。

ここではウェブサイトではなく、Webサービスとしての仕組みのやり取りについて整理。

Webサイト(静的ページ) とウェブサービス・アプリケーション (動的ページ) の違いはここで整理した。


基本的なステップとしては下記のようになる。このステップに沿って見ていきたい。



Webサービスの仕組み


基本的に、Webサービス、ウェブアプリケーションでは二つのステップを繰り返している。

  1. クライアントがネットワークを使って、サーバーに「リクエスト」を送る
  2. サーバーが「リクエスト」に対して、同じくネットワークを使って「レスポンス」を返す。



リクエスト・レスポンスは何ぞやってなったら、こちら。


「リクエスト」を送るために必要な名前解決


クライアントがサーバーにリクエストを送るときに必要なことがある。それが「名前解決」だ。

名前解決とは、DNSが「https://snownotes.org/」のようなドメインを元に、IPアドレスを見つけ出すことをいう。



何で名前解決が必要なの?

ユーザーが使っているPCがサーバーと通信を行うためには「IPアドレス」が必要となる。IPアドレスはPCによって見やすい情報なのだが、人間にとってはとても見にくい。

IPアドレスの例
amazon.co.jp → 126.243.150.151
facebook.com → 126.163.134.11


ユーザーにとっては、「126.243.150.151」のような数字より、「amazon.co.jp」と出てくれていた方がわかりやすくて嬉しいはず。

とにかくPCが通信するには、ドメインではなく、IPアドレスで通信する必要があるため、一度通信の前に、人間が分かりやすい言葉から、機械が分かりやすい言葉に翻訳する必要があるということだ。


ネットワークはどんな役割を果たしてる?



ネットワークでは、ネットワーク上で通信のルールを定めることで、異なるPC間でWebサービスの通信をスムーズに行えるように整備されている。

ネットワーク上で通信する際のルールを通信プロトコルという。今回の、ウェブのやり取りの例でみると、HTTP 「Hyper Text Transfer Protocol」がやり取りのルールとして用いられる。

このHTTPはHTMLで書かれたファイルをやり取りするために使われるルールだ。

もちろんインターネットのルール(TCP / IP)だけではなく、ファイルを転送するときのルール (FTP)、メールを送るときのルール(SMTP)など、様々なルールがネットワーク上で定められている。

通信プロトコルがない状態、ルールが定められていない状態ではPCとPC間で通信することはできない。


サーバー内ではリクエストをどう処理しているのか



Webサービスを作るには、上記で挙げた通り、個人個人に合わせたデータの表示をする必要があるのだが、そのためにはふたつやることがある。

  1. データベースからそれぞれのユーザーの情報をとってくること
  2. とってきた情報を、Webページに載せること

サーバー内ではこの二つのステップを処理して、最後に「レスポンス」として返すことになる。

例えば、SNSの紹介ページや会員登録をしたときのページを考えてみる。



図の青い部分は、ユーザーによって、異なる情報が出てくるべきなのだが、異なる情報を取得して、表示するまでのリクエストをサーバーは処理している。

まとめるとこんなイメージになる。



ここでは、サーバーとは何かについては下記でまとめた。


サーバーサイドスクリプトでデータベースから、情報を取得する



サーバーサイドスクリプトとは、サーバー上で動くプログラミング言語のことで、JavaやPHPなどがあるが、こうした言語には、データベースのデータを取得するように記述することができる。

例えば今回のページの例で言うと、データベースに、ID、名前、メールアドレス保存のためのスペースを作るように指示し、実際にユーザーが新規登録画面などで情報を登録すると、図のようなイメージで情報が保存される。



このデータベースに入っている情報を操作するためのプログラミング言語に、データベース言語があるが(代表的な言語としてはSQL)、このデータベース言語と連携して情報のやり取りをできるのがサーバーサイドスクリプトとなる。

取得した情報をHTML・CSSに当てはめる




また同じ図に戻ると、取得した情報を、HTML / CSSに当てはめることができるのもサーバーサイドスクリプトの役割となる。

名前や、誰が開いても変わらない部分の文章、文章の位置、ウェブサイトのデザインなどはHTML、CSSが担当するが、実際の名前やメールアドレスなどは、サーバーサイドスクリプトが担当する。


最後にサーバーがレスポンスを返す



サーバーサイドスクリプトからデータをデータベースから取得し、HTML・CSSに当てはめた後に、サーバーがクライアントにレスポンスを送り返すことで、各ユーザーはそれぞれの人に合わせたページをみることができるようになる。

-Technology