ウェブアプリケーション

索引トップ用語の索引ランキングカテゴリー

出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2024/03/07 07:17 UTC 版)

概要

代表的なウェブアプリケーションでは、WebブラウザがHTTPを利用してHTMLを取得・表示、それをDOMを介してJavaScriptが操作し、必要に応じてWebサーバと通信をおこなってデータを更新する。このようにウェブ（World Wide Web）を基盤として作られる応用ソフトウェアをウェブアプリケーション（Webアプリ）と総称する。上記の例はあくまでウェブアプリケーションを実現する技術スタックの一例であり、他の様々な技術を用いてWebアプリを作成できる。またウェブアプリケーションの明確な定義は存在しない（動的なウェブページとの差異は不明瞭である）。

ウェブアプリケーションの一例としては、ウィキペディアなどで使われているウィキやブログ、電子掲示板、銀行のインターネットバンキング、証券会社のオンライントレード、電子商店街などネット販売のショッピングカートなどを挙げることができる。

ウェブアプリケーションに対して、ローカルのデスクトップ環境上で動作するアプリケーションは、デスクトップアプリケーションやスタンドアロンアプリケーション、スマートフォンで動作するアプリケーションはネイティブアプリと呼ばれる。

Webアプリはクライアント-サーバモデルを基本としており、WWWを基盤とする分散コンピューティングの一形態ともみれる。2010年代後半には多数のマイクロサービスをAPIを介して連携させ構成されるWebアプリも増えており、分散コンピューティングとしての側面がより強くなっている。

特徴

メリット

更新が容易である: Webサーバ上のファイルを更新するだけで、クライアントはHTTPアクセスするだけで最新のウェブアプリケーションを利用できる。
クライアント側にアプリケーションのインストールが不要: Webサーバで処理を行って出力結果のファイルをクライアント側（ウェブブラウザ）で表示するだけなのでクライアントはウェブアプリケーションをインストールする必要はない。
ウェブブラウザがあれば環境に依存しない: 各クライアント側の環境が違っていてもウェブブラウザがあればクロスプラットフォームに対応できる。

デメリット

Webアプリの発展に伴って、問題点が解決し、また新たな問題が提示されるという流れが続いている。従来指摘されていたデメリットと提案されている解決技術の例は以下である。

標準機能でメディア再生が困難: HTML5 HTMLMediaElementによるメディア再生・制御^[1]
Webサーバ障害時・通信途絶時に利用不可: PWA（install + Service Worker API^[2]）によるオフライン動作
ネイティブアプリに比較して遅い実行速度: WebAssemblyによるネイティブ水準コード実行^[3]

歴史

1990年にWorld Wide Webが登場しその後ウェブアプリケーションが発明されてから、アプリケーションとしての性能・利便性・UXを高めるために長年にわたり技術開発がおこなわれてきた。

ウェブが誕生した時点ではウェブは静的Webサイトがハイパーリンクでつながれたもの、すなわちWebサーバ上に配置したHTMLファイルをウェブブラウザで閲覧しリンクを飛んでネットサーフィンするものであった。その後CGIの登場により、ユーザからの入力に応じたHTML文書などのリソースの動的生成・返却が可能になった。これにより様々なウェブアプリケーション（あるいは動的Webページ）を構築できるようになった。

CGI以後、Java ServletなどのJava EEやApache HTTP Server用のモジュールとしてPHPで記述されたプログラムを実行するmod_php^[4]、マイクロソフトが開発したActive Server Pagesなどが存在した。その後Ajax、Adobe Flash、HTML5などが登場した。

2019年現在では特にスマートフォンアプリの分野において「ネイティブアプリと同等な体験の提供」を目的としたプログレッシブウェブアプリ（英語：Progressive web app、PWA）と呼ばれる標語に基づいた技術群が精力的に開発されている^[5]。またクラウドコンピューティングの発展に伴って、自前のWebサーバではなくフルマネージドクラウドサービスをバックエンドに利用したWebアプリの開発が一部の分野では可能になっている。

脚注

^ HTMLMediaElement インターフェイスは、 HTMLElement に音声や動画で一般的なメディアに関する基本的な能力の対応に必要なプロパティやメソッドを追加します。 HTMLMediaElement. MDN web docs
^ Service Workerは、基本的にウェブアプリケーション、ブラウザー、そして（もし繋がっていれば）ネットワークの間に介在するプロキシサーバのように振る舞います。これは、よりよいオフライン体験を可能にするように意図されており、ネットワークのリクエストに介在してネットワークの使用可否の状況に基づいて適切な対応を取ったり、サーバ上にあるアセットを更新したりします。サービスワーカー API. MDN web docs
^ WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマンス向上を提供する新しい種類のコードです。 WebAssembly の概要 - WebAssembly とは何か. MDN web docs
^ 他にもPerlのためのmod_perlやPythonのためのmod_python、Rubyのためのmod_rubyなどが存在する。
^ これらのアプリはどこでも動作し、ネイティブアプリと同様の使い勝手を提供する様々な機能を提供します。プログレッシブウェブアプリ. MDN web docs
^ assignedElements() は HTMLSlotElement インターフェイスのプロパティで、このスロットに割り当てられた一連の要素を返します。 MDN web docs - Web API
^ 特別な children という props を使い、以下のようにして受け取った子要素を出力することができます。... children の props の代わりに独自の props を作成して渡すことができます。 React Docs - コンポジション vs 継承
^ React.Children はデータ構造が非公開の this.props.children を扱うためのユーティリティを提供します。 React Docs - React の最上位 API
^ ^a ^b Delta Sync 機能を使用すると、同期プロセスで基本クエリと差分クエリという 2 つの別々のクエリを指定できます。これにより、クライアントは大量のレコードを含む可能性のある基本クエリでのローカルキャッシュをハイドレートし、最後のクエリ以降に変更されたデータのみを受信できます (差分更新)。 AWS AppSync - チュートリアル: Delta Sync
^ The Self-contained System (SCS) approach is an architecture that focuses on a separation of the functionality into many independent systems, making the complete logical system a collaboration of many smaller software systems. scs-architecture.org