ウェブアプリケーション
[Wikipedia|▼Menu]
.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%;font-size:90%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}html.client-js body.skin-minerva .mw-parser-output .mbox-text-span{margin-left:23px!important}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}

この記事は検証可能参考文献や出典が全く示されていないか、不十分です。出典を追加して記事の信頼性向上にご協力ください。(このテンプレートの使い方
出典検索?: "ウェブアプリケーション" ? ニュース ・ 書籍 ・ スカラー ・ CiNii ・ J-STAGE ・ NDL ・ dlib.jp ・ ジャパンサーチ ・ TWL(2021年9月)

ウェブアプリケーション(Web application)は、ウェブ(World Wide Web)技術を基盤としたアプリケーションソフトウェアである。
概要

代表的なウェブアプリケーションでは、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 EEApache HTTP Server用のモジュールとしてPHPで記述されたプログラムを実行するmod_php[4]マイクロソフトが開発したActive Server Pagesなどが存在した。その後AjaxAdobe FlashHTML5などが登場した。

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

サーバクライアントの間の通信手段は伝統的にHTTPが利用される。HTTPはステートレスなプロトコルであるため、HTTPだけでは状態の管理は行えない。しかし、大半のウェブアプリケーションではセッションの管理が必要であるため、Cookieなどを用いてサーバとクライアント間でセッションIDの受け渡しをし、セッションの管理を行っている。
プログラミング言語

原則として、Webアプリは特定の言語に束縛されない。バックエンド(サーバサイド)は開発者が任意にプログラミング言語を選定できる。フロントエンド(クライアントサイド)でもDOMは言語中立な仕様であり、またWebAssemblyを介したC言語Rustを用いた開発も原理上は可能である。ただし実態として、フロントエンドはJavaScriptあるいはTypeScriptをはじめとしたAltJSが主流となっている。
HTML

従来のWebアプリではHTMLは巨大な1つのHTMLファイルであった。Webアプリの規模拡大に伴ってモジュール化の必要性が高まり、HTMLカスタム要素をはじめとするWeb Components技術によってHTMLの分割が可能になった。

またHTMLの更新はDOMを介した手続き型プログラミング(element.setAttribute()など)によっておこなわれてきたが、宣言型プログラミングとtemplatingによるHTMLの記述(例: lit-html、JSX)がおこなわれるようになってきている。

要素のコンポジション(合成)は子要素によって実現される。親要素での子要素へのアクセスは、Web標準ではWeb Componentsの<slot>による自動挿入と.assignedElements()による操作が提供されている[6]。Reactではコンポーネント引数のprops.childrenが用いられ、子要素以外にも任意の属性props.xを用いることもでき、子要素の操作はReact.Childrenのメソッドで提供される[7][8]
DOM

ほとんどのWebアプリはHTMLを基盤技術としており、WebブラウザはDOMを介してドキュメントへのアクセスを可能にしている。


次ページ
記事の検索
おまかせリスト
▼オプションを表示
ブックマーク登録
mixiチェック!
Twitterに投稿
オプション/リンク一覧
話題のニュース
列車運行情報
暇つぶしWikipedia

Size:43 KB
出典: フリー百科事典『ウィキペディア(Wikipedia)
担当:undef