【図解で説明あり】Webアプリ?Webサービス?Webサイト?それぞれの違いは?どのようにWebサイトは動いているのか、説明します。

プログラミング

IT企業に入るとまずWeb〇〇といったWebにまつわるワードをよく見かけると思います
今回の記事ではIT系の仕事に就いている方や、プログラミングについて勉強している方向けの内容になっていおります。

下記の2点について簡単に説明していきます。
・WebアプリとWebサービスとWebサイトの違いについて
・Webサービスがどのように動いているのか

では、最初にWebアプリとWebサービスとWebサイトの違いについて説明していきます。

WebアプリとWebサービスとWebサイトの違いについて

まず前提として、正直、現場では基本的にどれも同じような意味として使われることが多いです。
はっきりとした定義が定まらずにこれらの言葉がよく使われています。

Webサイトは昔から使われているため分かりやすいですね。
WebアプリWebサービスについてはほとんど同じように使われることが多く、ややこしいです。

以下に簡単に違いについてまとめてみました。

Webアプリとは

インターネット上で何かしら通信のやりとりをして、データを登録・更新・削除などの処理のこと。また、それを提供するサービスのこと。Webサービスとほぼ同じ。(Webサービスについては後述)

◆他と違う点
アプリをダウンロードしてそのアプリ上で動画を再生したり、メッセージを送ったりすることができるサービスである点

「インターネット ⇄ アプリ ⇄ 人」というイメージです。

「スマホやPCにダウンロードして使うアプリ」という認識でWebアプリという用語を使う人が多いです。
しかし、人によっては後述するWebサービスと同じ意味で使っていたりします。
 例)LINE、Youtube、Twitterなど

Webサービスとは

インターネット上で何かしら通信のやりとりをして、データを登録・更新・削除などの処理のこと。また、それを提供するサービスのこと。Webアプリとほぼ同じ。(Webアプリについては先述)

◆他と違う点
アプリをダウンロードせずとも、Webサイト上で画面操作して商品を購入したり予約したりできるサービスである点。(Webサイトについては後述)

「インターネット ⇄ Webサイト ⇄ 人」というイメージです。

しかし、人によっては先述したWebアプリと同じ意味で使っていたりします。
例)Amazon、e+(イープラス)、じゃらんなど

Webサイトとは

インターネット上のサイトのページのこと。今開いているこのページもWebサイトです。
つまり、「Webサイト」上で「Webサービス」を使うと言うことができます。

◆他と違う点
Webサイトはインターネット上のどこかしらのサイトのページというイメージで使われることが多い点。

「インターネット ⇄ Webページ」というイメージです。

例)Amazon、e+(イープラス)、じゃらん、ブログ、企業ホームページなど

WebアプリとWebサービスとWebサイトについてまとめ

下記のように図にまとめてみました。

どうでしょうか。

図にしてみると、インターネット上でWebサイトを仲介してWebサービスのデータ通信するか、Webアプリを仲介してWebサービスのデータ通信を行うかの違いがあるだけのように見えます。

つまり、WebアプリとWebサービスとWebサイトが、それぞれ似たような立ち位置にいるので、現場では同じような用語として使われてしまう訳ですね。

Webサービスがどのように動いているのか

次に、そのWebサービスがどのように動いているのか説明していきたいと思います。

先ほど説明した、Webサービスの第一歩として、「WebサイトにアクセスしてHTMLをブラウザ(※1)上で表示させる」という仕組みについて簡単に説明していきます。
※1 ブラウザ:GoogleChromeなどの検索エンジンで検索した結果表示される画面のこと。


下記の図に、WebサイトのHTMLがブラウザ上に出力されるまでの大まかなデータ通信のやりとりをまとめました。

クライアントとは、、
WEBサーバに情報を要求(リクエスト(※2))するシステムのことです。ここではChromeなどのブラウザのことを指します。クライアントはURLを送信することによりWEBサーバに要求を伝えます。
※2 リクエスト:URLなどのデータをWebサーバに送信すること。URLの他にも様々なデータも追加して送ることができる。
例)https://www.amazon.co.jp/(アマゾンのURL)を送信

WEBサーバとは、、
HTMLなどのデータを提供するシステムのことです。
今回はTomcatというソフトを使っていきます。クライアントから要求(リクエスト)があると、WEBサーバはそれに応じてデータを返却(レスポンス(※3))します。ここで大事なのは、WEBサービスが返すのはHTMLやCSSなどのデータだということです。
※3 レスポンス:Webサーバから返ってきたHTMLなどのデータのこと。リクエストの処理によってはHTML以外にも様々なデータが返ってくる。

そして、返ってきたデータをもとにブラウザ上で画面の見た目を格好良く整えたり、動きをつけたりする場合はCSSやJavascriptを使って命令をします。

上記のクライアントWEBサーバは一つのパソコン内に用意することができます。
下記の2つをご用意ください。

①JDK(Java Open JDK 11.0.2など):
WEBサーバを動かす言語であるJavaを実行できるようにする機能を提供する諸々の詰め合わせのこと。
インストール方法は下記を参照。

②STS(Spring Tool Suite)
中身はeclipse(統合開発環境)をSpring(※4)用に改善したソフトです。サーバとなるソフトまで内蔵されており、起動させれば同じパソコン内でWEBサーバが動きます。同じパソコン内にあることをローカルと呼びます。
インストール方法は下記のサイトが参考になりました。
https://zenn.dev/nakohama/articles/7ed3953bae7f33
※4 Springについては下記を参照してください。

まとめ

今回は下記の2点についてまとめました。
・WebアプリとWebサービスとWebサイトの違いについて
・Webサービスがどのように動いているのか

IT業界に入るとアプリやシステムの設計書の中でカタカナ語が大量に使われていたりするので、混乱してしまいますが、一つひとつ理解していくしかありませんね。

用語の理解とそれらの使い方を理解し、自分のものへと昇華していきましょう。

以上




コメント

タイトルとURLをコピーしました