【うぇぶあぷりけーしょん】

Webアプリケーション とは?

💡 ブラウザで動く「インストール不要のアプリ」
📌 このページのポイント
ブラウザ HTML / CSS / JS プレゼンテーション層 Web / App サーバー ビジネスロジック ロジック層 データベース データ永続化 データ層 第1層 第2層 第3層 リクエスト クエリ レスポンス 結果 ユーザー → ブラウザ → サーバー → DB → レスポンス返却 3層アーキテクチャによる責務の分離
Webアプリケーションの構成
ひよこ ひよこ

Webアプリケーションって何?

ペンギン先生 ペンギン先生

ブラウザ上で動くアプリのことだよ。GmailやYouTube、Google マップなんかがそう。スマホにインストールするアプリと違って、ブラウザURLにアクセスするだけで使えるんだ。

ひよこ ひよこ

普通のウェブサイトとどう違うの?

ペンギン先生 ペンギン先生

ウェブサイトは情報を「読む」ものが中心だけど、Webアプリケーションはメールを送ったり、文書を編集したり、動画を見たりと「操作する」機能があるんだ。境目は曖昧だけど、ユーザーが何かアクションを起こして結果が返ってくるならWebアプリだね。

ひよこ ひよこ

スマホアプリとどっちがいいの?

ペンギン先生 ペンギン先生

それぞれメリットがあるよ。Webアプリはインストール不要で更新も即反映される。スマホアプリはオフラインでも使えて、カメラやGPSなどデバイスの機能をフルに活用できる。だから多くのサービスは両方用意しているんだ。

ひよこ ひよこ

SPAって聞いたことあるけど何?

ペンギン先生 ペンギン先生

これはWebアプリの進化を理解する上で重要な概念だね。従来のWebアプリはリンクをクリックするたびにサーバーから新しいページを取得していたけど、SPAは最初に1つのページを読み込んで、その後はJavaScriptでページの中身だけを書き換える。だから画面遷移が速くてネイティブアプリのような操作感になる。ただしSPAは初期読み込みが遅い、SEOに不利、ブラウザの戻るボタンとの相性が悪い、という問題があって、最近はSSRやISR(Incremental Static Regeneration)といった手法でSPAの弱点を補う方向に進化しているんだ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「Webアプリケーション」って出てきたら「ブラウザ上で動くアプリのことだな」と思えればだいたいOK!
📖 おまけ:英語の意味
「Web Application」 = ウェブ上のアプリケーション
💬 Applicationは「適用・応用」で、転じて「応用ソフトウェア」。ウェブ上で動くアプリという意味だよ
← 用語集にもどる