目次
1. はじめに
2. Webアプリケーションとは？
3. Webサイトとの違い
4. Webアプリケーションの全体像
4.1. Webアプリケーションの流れ（ブラウザ、サーバー、データベース）
4.2. Webアプリケーションの流れ（レストランに例えると）
5. まとめ
6. おわりに
1. はじめに
この投稿は、「過去の自分がどう教えてほしかったかを思い出しながら、あの頃の自分に向けて説明する」をテーマにしています。
投稿のコンセプトについては、こちらをご覧ください。
2. Webアプリケーションとは？
Webアプリケーションとは、Webブラウザ（Chrome、Safari）上で動くサービスのこと。
普段、私たちが使っているYouTubeやAmazon、X。
これらは「Webアプリケーション」と呼ばれるものです。
一方、私たちが普段、スマホやPCでインストールするアプリは「ネイティブアプリケーション」と呼びます。
ネイティブアプリケーションはインストールが必要ですが、Webアプリケーションは基本的にはインストール不要で使用することができます。
例えば、YouTubeをChromeで開けばWebアプリケーションとして使用していることになり、スマートフォンのYouTubeアプリを使えばネイティブアプリケーションとして使用していることになります。
両者の違いは、「どこで動くか」。
Webアプリケーションは、ブラウザ上で動き、ネイティブアプリケーションは、端末のOS上で動きます。
このように、同じサービスでも利用方法によってアプリケーションの種類が変わります。
3. Webサイトとの違い
普段、企業のホームページを見ることはありますか？
また、Gmailでメールを送ったり、Amazonで商品を購入したりしたことはあるでしょうか？
どちらもブラウザで開くページですが、実は役割が異なります。
「Webサイト」は、情報を見てもらうことを目的に作られています。
基本的に一方通行のコミュニケーションで、企業のホームページやブログなどが代表例です。
「Webアプリケーション」は、ユーザーが操作することを目的に作られています。
こちらは双方向のコミュニケーションで、メールを送信したり、掲示板に投稿したり、商品を購入したりと、ユーザーの操作に応じて処理が行われます。
簡単に言うと、「見ることが中心のもの」がWebサイト、「操作することが中心のもの」がWebアプリケーションというイメージです。
4. Webアプリケーションの全体像
4.1. Webアプリケーションの流れ（ブラウザ、サーバー、データベース）
では、Webアプリケーションはどうやって動いているのでしょうか？
まずは、Webアプリケーションを動かすための重要な要素、「ブラウザ」、「サーバー」、「データベース」を紹介します。
「ブラウザ」とは、インターネット上で情報を閲覧するためのソフトウェアです。私たちが情報を検索するためによく使う、Chrome、Safariなどが代表例です。
「サーバー」とは、サービスを提供するためのコンピューティングシステムを指します。ブラウザからの要求に応じて、Webページや画像などを返します。
「データベース」とは、データを格納するシステムです。Excelの表形式のように、一定の形式でデータを管理し、複雑で大量のデータを扱いやすくします。
4.2. Webアプリケーションの流れ（レストランに例えると）
レストランで例えてみましょう。
レストランでは、お客様から注文を受け、シェフが倉庫にある食材を使って料理を作り、お客様のもとへ届けます。
この場合、お客様が注文をする場所が「ブラウザ」、料理を作るシェフが「サーバー」、食材が保管されている倉庫が「データベース」にあたります。
ここでは詳しく扱いませんが、お客様から注文を受けてシェフに伝えたり、完成した料理をお客様のもとに届けたりする役割を持つのが「インターネット」です。
Webアプリケーションの流れも、レストランで注文を受けてから、料理が届くまでの流れと似ています。
① ブラウザ（テーブル）
メニューを見て「ハンバーグください！」と注文する。
↓
② サーバー（キッチン）
注文を受けて、「ハンバーグ作るぞ！」と処理を始める。
↓
③ データベース（冷蔵庫）
「ひき肉あるかな？」「ソースあるかな？」と必要な食材を取り出す。
↓
④ サーバー（キッチン）
料理を完成させる。
↓
⑤ ブラウザ（テーブル）
料理がお客さんのテーブルに届く。
4.3. Webアプリケーションの流れ（YouTubeに例えると）
上記を踏まえ、実際の流れに近い形でイメージしてみましょう。
YouTubeで見たい動画を検索してから、動画一覧が表示されるまでの流れを例にします。
① ブラウザ
利用者がYouTubeで「猫 癒し動画」と検索する。
↓
② サーバー
検索内容を受け取り、「猫」「癒し動画」に関連する動画を探すようデータベースへ依頼する。
↓
③ データベース
検索条件に合う動画の情報を探し、サーバーへ返す。
↓
④ サーバー
取得した情報を、利用者が見やすい一覧画面としてまとめる。
↓
⑤ ブラウザ
関連する動画一覧が表示される。
想像できたでしょうか？
実際には、セキュリティやネットワークなどさらに複雑な技術が使われています。
しかし、大まかなイメージとしては、ブラウザが依頼し、サーバーが処理し、必要に応じてデータベースから情報を取り出して、結果をブラウザに返す、という流れになります。
5. まとめ
Webアプリケーションとは、ブラウザを通じて利用できるアプリケーションのことです。
YouTubeやAmazonのように、ユーザーが操作し、その操作に応じて処理が行われるサービスのことです。
Webアプリケーションは、主に「ブラウザ」「サーバー」「データベース」の3つが連携して動いています。
ブラウザからの要求をサーバーが処理し、必要に応じてデータベースから情報を取り出して、結果をブラウザに返します。
「ブラウザが依頼し、サーバーが処理し、データベースが情報を管理する」という流れを押さえておきましょう。
6. おわりに
最初は、
「Webってどう動いているの？」
という、漠然とした疑問で十分です。
そこから全体像が少し見えてくると、
「ブラウザからの依頼はどうサーバーに届くの？」
「サーバーはどう処理を判断するの？」
「データベースからどう必要な情報を取り出すの？」
というように、質問は少しずつ具体的になっていきます。
この記事が、その最初の一歩になれば幸いです。
もし「自分はこう理解した」「こっちの方がわかりやすい」という意見があれば、ぜひコメントで教えてください！