Web

【図解付き】実例から学ぶ!Webアプリ・サービスの基本的な仕組み

Webサービスの基本的な仕組み

今回はWebサービスの基本的な仕組みに関して説明していきます。

Webサービスの裏側はもちろん、Web開発で使う基本的な用語の解説も行うので、次のような方にとっては参考になる記事になります。

プログラミング初心者
プログラミング初心者

プログラミングの基礎の学習は終えてこれからWebサービスを作ろうとしているけど、そもそもどうやってWebサービスって作れるの?

非エンジニア
非エンジニア

Webサービスで使われるよく聞く用語も理解したいし、Webサービスの裏側がどうやって動いているのかも知りたい。

今回は大きく3つの内容に分けて解説していきます。

今回学ぶこと
  1. Webで使う基本用語
  2. Webサービスの仕組みを実例から学ぶ
  3. Webサービスの基本は全部同じ

今回の記事を読むことで、次のようなことが理解できてWeb開発の現場で円滑に仕事を進められる様になるでしょう。

記事を読んだ後のあなた
  • 新しくサービスを作る時に何が必要かわかるようになる
  • 用語を知ることでチームメンバーとのコミュニケーションが取りやすくなる
  • サービスに問題があったときに、どこに問題が発生しているか見つけやすくなり対応がスムーズになる

逆に、今回の記事はWebサービスの仕組みの基本的なお話になるので、今回の記事の内容を抑えて置かなかった場合は次のような問題が出てきてしまうでしょう。

記事を読まなかった場合
  • アイデアが思い浮かんでも、どうやって作ればよいかイメージが出来ない
  • 基本的な用語がわからないためコミュニケーションがスムーズにいかない
  • 問題が起きても、どこで問題が起きているか切り分けられず対応に時間がかかる

それでは1つずつ解説していきます。

 

Webで使う基本用語

今回説明する用語は次の4つになります。

説明する用語
  1. リクエスト
  2. レスポンス
  3. クライアント
  4. サーバー

以下の図(画像)を使いながらそれぞれの用語について解説します。

リクエスト

リクエストは何かしらの処理を依頼することです。

Webサービスでよくあるリクエスト例としては次のようなものがあります。

リクエスト例
  • 表示するWebページをください (Webページ取得リクエスト)
  • ユーザー情報を渡すので登録してください (ユーザー新規登録リクエスト)
  • このブログ記事を削除してください (指定したブロク記事の削除リクエスト)

先程の図でいうと「クライアント(Webブラウザ)」と「サーバー(Webサーバー)」とのやり取りの部分で、赤い矢印の部分がリクエストになります。

レスポンス

レスポンスはリクエストの対義語になり、リクエスト内容に応じて必要な処理を実行して、その結果を返すことレスポンスといいます。

先程のリクエスト例に対応するレスポンス例は以下のようになります。

レスポンス例
  • リクエスト内容に対応するWebページを返します (Webページ取得リクエストに対するレスポンス)
  • ユーザー情報の登録に成功しました (ユーザー新規登録リクエストに対するレスポンス)
  • 指定されたブログ記事の削除に成功しました (指定したブロク記事の削除リクエストに対するレスポンス)

先程の図でいうと「クライアント(Webブラウザ)」と「サーバー(Webサーバー)」とのやり取りの部分で、赤い矢印の部分がレスポンスになります。

クライアント

クライアントリクエスト(依頼)を行うものです。実際のビジネスの現場でも依頼主のことをクライアントと言うので、それと同じように考えてもらって良いかと思います。

上の図でいうと、パソコンクライアントになります。

「ユーザーはクライアントではないのか?」という疑問が出てくるかもしれないので説明しますと、ユーザーはあくまでもパソコンの操作をするだけで、実際にデータのやり取りを行うのはパソコンになるからです。

もしこのユーザーがパソコンではなく、スマートフォンを使っていれば、スマートフォンクライアントとなります。

サーバー

サーバーはクライアントの対義語となり、クライアントから受けたリクエストの実行を行いレスポンス(結果)を返すものです。

サーバーは英語で書くと「server」となり、「仕える人、つとめる人」という意味になります。

その意味から考えるわかりやすく、依頼主(クライアント)からの依頼(リクエスト)に対して仕事(リクエストに応じた処理の実行)を行い、その結果を返すのが「サーバー」となります。

カフェでコーヒーを注文するときを例にして、「リクエスト」「レスポンス」「クライアント」「サーバー」のやりとりをまとめると次のようになります。

カフェで考えた場合
  1. がコーヒーを注文する(クライアントリクエストを出す)
  2. 店員注文内容を受け取る(サーバーリクエストを受け取る)
  3. 店員がコーヒーを作る(サーバーがリクエスト内容をもとに処理を実行する)
  4. 店員コーヒーを渡す(サーバークライアントレスポンスを返す)

Webサービスの仕組みを実例から学ぶ

次に、Webサービスが具体的にどのように動いているのか確認しましょう。

今回はTwitterを例に、次の4つのデータのやりとりを図を使いながら解説します。

データのやり取りの例
  1. 新規登録
  2. ログイン
  3. タイムラインページの取得
  4. ツイート

図の中では「データベース」という用語が出てきます。先程の用語説明では出てきませんでしたが、ここでは「ユーザー情報」や「ツイート」などのデータを保存する場所という認識で問題ありません。

新規登録

新規登録の流れ新規登録の流れ

 

新規登録を行うときはWebページ上の入力フォームにユーザー情報を入力して「登録」ボタンをクリックのが一般的です。

そしてユーザー情報を入力した状態で「登録」ボタンをクリックすると次のような流れになります。

登録時のデータの流れ
  1. 入力したユーザー情報を元にWebサーバーに新規登録のリクエストを送る
  2. Webサーバーはユーザー情報をデータベースに登録する
  3. 入力内容によっては登録が出来ないこともある(ユーザー名の重複、不正なメールアドレスなど)
  4. 新規登録のリクエストの結果を返す

新規登録には「成功」、「失敗」が存在します。

例えば、「既に同じユーザー名が存在する」、「メールアドレスの形式がおかしい」など失敗する原因はいろいろ考えられます。

その時はサーバーはクライアントに対して、どの入力項目がダメだったか結果を返して、ユーザーに修正した内容でもう一度新規登録リクエストを送るように指示します。

これによって、最終的には新規登録が成功できるようになります。

ログイン

ログインの流れログインの流れ

 

ログインの流れも基本的には「新規登録」と同じです。

違う点は、入力内容がデータベースに保存されるのではなく、入力内容に紐づくデータが存在するかのチェックを行う点です。(上の図の②と③の部分)

入力内容に一致するデータが存在しない場合は、基本的に「入力内容が間違っている」、もしくは「そもそも登録が完了していない」のいずれかの2パターンになります。

仮にあなたがWebサービスの運営者だとして、ユーザーからログインが出来ないと連絡が来たときは、メールアドレスやアカウント名を教えてもらい、データベース内に教えてもらったメールアドレス・アカウント名が存在するか確認すると良いでしょう。

タイムラインページの取得

タイムラインページ取得の流れタイムラインページ取得の流れ

 

タイムラインページ取得のときは、ログインしたユーザー情報を元に内容タイムラインを取得します。

しかし、「新規登録」「ログイン」と異なり、タイムラインページ取得時にはユーザーは特にユーザー情報を入力していません

それではどのようにWebサーバーはログインしたユーザーを特定しているのでしょうか?

ログイン成功時に、WebサーバーはWebブラウザに対してユーザーを識別出来る値を保存します。

「タイムラインページ取得時」や「ツイート時」などユーザーを特定する必要がある処理のときには、この「Webブラウザに保存されたユーザー識別の値」を利用することで、ユーザーを特定することが可能となるのです。

上の図でいうと①のリクエストのタイミングで「Webブラウザに保存されたユーザー識別の値」を使っています。

ツイート

ツイートの流れツイートの流れ

 

ツイートの流れも基本的には「新規登録」と同じです。

①で送られてきたツイート内容を、②と③のプロセスでデータベースに登録して、④でツイート完了したことをクライアントにレスポンスを返すだけです。

②と③のプロセスでツイートがうまく登録できなかった場合は、④でクライアントに失敗内容を伝えることになります。

Webサービスの基本はどれも同じ

1つ前の章で話した「Twitter」の4つのデータやり取り例の図を見ると、全てデータの流れが同じであることに気づくかと思います。

今回はTwitterを例にしてデータの流れを説明しましたが、Twitterに限らず、ほぼ全てのWebサービスも同じ仕組みで動いています。

例えばFacebookの場合は以下のようになります。

Facebookの場合
  • ユーザー新規登録
  • ログイン
  • タイムライン取得
  • 近況報告(タイムラインへの投稿)

その他、WordPressやアメブロなどのブログサービスでもやっていることは同じです。

Facebookの場合
  • ユーザー新規登録
  • ダッシュボードページへログイン
  • 記事の一覧取得
  • ブログ記事投稿

上記のことから、今回お話してきた内容は全てのWebサービスで共通している仕組みとなります。

逆に言うと、今回の内容を理解すれば、世の中に存在する全てのWebサービスの裏側がどのように動いているか理解出来たと言っても過言ではありません。

まとめ

今回はWebサービスの基本的な仕組みについて説明してきました。

いままで話してきたことをもう一度まとめると次のとおりです。

今回のまとめ
  • Webサービスの流れを理解するために、最低限覚えておくと良い4つの用語を解説した
  • Twitterを例に、Webサービスの裏側がどのように動いているのか図を使って解説した
  • Twitterに限らず、Facebookやブログサービスなど、世の中のWebサービスの裏側の基本はどれも同じであることを解説した

今回の内容を元に、今後Webサービスを作るときや、実際に利用するときに「裏側はこうなっているんだよなー」と考えてみると新しい気付きがあって、また別の視点Webサービスを楽しめるかと思います。

今回の内容は以下の記事のスライドの一部を図(画像)として利用しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
Webサービスの基本的な仕組み
Webサービスの基本的な仕組みWebサービスでよく聞く言葉「リクエスト」「レスポンス」「クライアント」「サーバー」について実際に図を交えながら説明。また、Twitterを例にWebの裏側でどのようにデータのやりとりが行われているかも図を使って説明します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です