Webアプリケーション概要

Webアプリケーション概要

WEB+DB EXPRESS vol122より。前回はWebブラウザとHTML、CSS、JavaScriptについて述べた。今回はこれまでの話を統合したWebアプリケーションについて述べる。

WebはHTMLのハイパーリンクにより世界中の文書を結びつけることを目的に構築された。それらの利用が増えるにつれて、元来は静的なコンテンツを提供するだけだったWebが、動的なアプリケーションを提供するように進化し、それらがWebアプリケーションと呼ばれるソフトウェアへと進化していった。

しかしながら、それらのソフトウェアは静的な仕組みの上に動的な仕組みを構築したものであったので、一般的なアプリケーションとは異なった様々な工夫が必要となる。

Webで使われているHTTPは状態を持たないステートレスなプロトコルであるため、ユーザーの状態を管理するには、何らかの形でアプリケーションに状態を保持する必要が出てくる。通常のPCやスマートフォンのアプリケーションでは、状態をメモリ上に持つので、状態を保つための特別な工夫は必要ないが、Webアプリケーションは、Webサーバーとスートレスなプロトコルでやりとりすることが前提なので、状態管理に様々な工夫が必要となる。

Webアプリケーションでは、Webサーバーで様々な処理を行なった結果をHTMLに反映してブラウザに返したり、ブラウザでJavaScriptを使って動的な動作を行うことが可能であるため、アプリケーションを実装する時に、その動作がサーバーサイドで行われているか、フロントエンドで行われているかを常に意識する必要がある。

また、フロントエンドはJavaScriptで書かれているが、サーバーサイドは別の言語で書かれていることが多く、一つのアプリケーション内で複数の言語を扱う必要性も出てくる。

Webアプリケーションは複雑な要求を満たす必要があるが、それらを共通化したりテンプレート化することで効率的に開発するアプローチが行われている。それらのフレームワークは大きく分けてサーバーサイドとフロントエンドサイドの2つの領域で準備されている。

サーバーサイドでの動的処理を抽象化するのが、サーバーサイドフレームワークとなる。サーバーサイドでは、PHP/Ruby/Python/Perl/Clojureのようなスクリプト言語で、Webアプリケーションの処理に必要な、HTML生成のためのテンプレート機能、データベースアクセスをする機能、安全性を高めるための入力チェック機能等様々な機能が抽象化されて準備されている。このフレームワークを使うことでユーザーはWebアプリケーションの仕組みを知らなくても、これらの抽象化された機能を使うだけでWebアプリケーションを開発できるようになる。

フレームワークの一つの重要な概念としてMVC(MOdel-View-Controller)とがある。これはほとんどのフレームワークで採用されているものとなり、元々PCで動くアプリケーションを開発するために提唱されたものが、その有用性の高さからWebアプリケーションでも利用されるようになったものとなる。

MVCでは内部構造を以下に示すようにモデル/ビュー/コントローラーの3つに分ける。

モデルは、アプリケーションが扱うデータの処理とインターフェースを提供する。ビューはモデルのデータをユーザーに表示する処理を行い。コントローラーは、ユーザーからの入力を受け取り、モデルやビューを呼び出したり、全体の処理の流れをコントロールする。

もう一つの重要なフレームワークとして、MVC等とWebサーバーの間に入ってインターフェースを提供するフレームワークがある。WSGIはpythonで提案されたインターフェースを抽象化するための規格で、WGSIの登場でPython製のフレームワークはWGSIにさえ対応していれば、どのWebサーバーやシステム構成でも動作させることが可能となり、その有用性が高く認識された。そのため、RubyのRackやPerlのPlack、以前に紹介したClojureのRail等他の言語でも同様の仕組みが導入された。

このミドルウェアの登場により、各言語でWebサーバの開発が容易になり、RubyのunicornやPuma等を用いることで、以前のWebサーバーとの接続はFastCGIを使うのが一般的出会ったのに対して、HTTPでのやりとりが行えるようになってきたので、リバースプロキシによるWebサーバーとの接続する方法が使われるようになった。

以上のサーバーサイドのフレームワークに対して、フロントサイドのフレームワークもJavaScriptをベースに発展してきた。Ajax(Asynchronous JavaScript and XML)はそれらの中の重要なものの一つで、XMLHttpRequestというJavaScriptがサーバーと通信してデータを取得する機能を用いて、サーバーと通信する技術となる。このAjaxを活用することで例えば地図サービスのような高速で図形の拡大/移動が必要なアプリケーションにおいて活用され、動的なwebアプリケーションの発展に寄与した。

サーバーとの通信はXMLHttpRequestで実現できるが、ブラウザで高い表現力や操作性を実現しようとすると、高度なDOM操作が必要になる。そこでXMLHttpRequestによる通信とDOM操作を抽象化したライブラリが活用されるようになった。

そのライブラリの一つがPrototype.jsで、それを更に拡張させたものがJQueryとなる。これはJQueryと呼ばれるオブジェクトを使ってすべての機能へのインターフェースを提供することにより、既存のJavaScriptと競合することなくDOMを操作するもので、このJQueryの登場で、より安全で簡単にJavaScriptの処理が描かれるようになった。

JavaScripはHTMLを操作する時にDOMを直接操作するという仕組みで、通常はこれで何も問題はないが、スケールアップした複雑なアプリケーションでJavaScriptでの処理が増えるに従って、DOM処理は重いため処理速度が問題になってきた。

そこでDOM処理を毎回行わず、どこかに溜めておいて一気に反映させるというVirtual DOMという仕組みが考案された。このVirtual DOMは、メモリ上にDOMと同じような木構造のデータを持ち、Virtual DOMの生成や変更はただのメモリ上の操作で高速に処理し、そのバックでVirtual DOMの木構造と実際のDOMを比較し差分を抽出して、差分の内容だけをDOMに反映させる。このvirtual DOMを採用したフレームワークにReactやVue.jsがある。このVirtual DOMのデメリットとして、既存のJQuery等のDOMを直接操作するフレームワークと共存できないという課題がある。

Sass(Syntactically Awesome Style Sheets)は、AltCSSの実装の一つで、宣言文であるCSSにプログラミング言語で使われている変数や継承のような便利な機能を追加したものとなる。Sassには書き方としてSASS記法とSCSS記法の2つがある。どちらも実現できるものは同じだが、SASS記法の方が簡易でSCSSはCSSの文法に近い。SASSとSCSSの例を以下に示す。

body
background-color:#FFFFFF
text-align:center

body {
  background-color:#FFFFFF
  text-align:center;
}

また、CSSをゼロから書くのではなく、よく使われるスタイルをあらかじめ定義しておいて、それを利用するCSSフレームワークとしてBootstrapがある。

Webアプリケーションで状態を維持するためには、Webサーバー側でユーザーと紐づいたデータを保持する必要がある。そのために用いられるものがデータベースとなる。データベースには様々なものがあ。その中の一つが関係データベースであるRDBMS(Relational Database Management System)となる。そのRDBMSにクエリ(問い合わせ)を発行するための言語がSQL(Structured Query Language)となり、SQLを十分に理解しなくともDBにアクセス可能とする問い合わせライブラリとしてO/Rマッパ(Object-relational mapping)がある。DBに対する詳細は別途記述の記事を参照のこと。

Webアプリケーションを構成するフレームワークとしてもう一つ重要なものにWeb APIがある。Web APIはブラウザからではなくプログラムからWebサーバーにアクセスするためのしくみとなる。ここで、Web APIで受け取るデータは、ブラウザでのHTMLと異なり、プログラムが扱いやすいようにJSONやXMLのようなデータフォーマットとなる。Web APIの実装には様々なものが考えられるが、効率よく実装するためによく使われる手法としてRESTやGraphQL等がある

REST(Representational State Transfer)はAPIを定義する時に使われる設計思想で、RESTに従ったAPIのことをRESTful APIと呼ぶ。RESTはステートフルなプロトコル(HTTP)に従って、一意に指定可能なリソース(URL)に対して操作するという方法になる。

RESTでは複数リソースのデータを取得証とした時、APIに複数回アクセスする必要がある。これに対してデータ取得の効率を考えてAPIにアクセスする回数を減らして一度に取得するデータを増やす方式にしたものがGraphQLとして提案された。