近年のWebアプリにおけるトレンド
近年Webアプリは、コンバージョンに直結するユーザー体験（User Experience、UX）の向上に向けて、シングルページアプリケーション（Single Page Application、SPA）と呼ばれるタイプのものが流行しています。WebアプリにとってUXは極めて重要な要素です。なぜなら、ユーザーが「このWebアプリは使いづらいな」と感じてしまったら、アプリを使い続けてくれない可能性が高いですし、たとえ使い続けてもらえたとしても、例えばECサイトにおける「ユーザーに商品を購入してもらう」というような、アプリの本来の目的を達成する可能性が低くなるからです。
SPAは、UXを高める仕組みをその特徴として備えており、SPAを実現可能なフレームワークを用いて実装します。SPAフレームワークの候補は複数あり、主なSPAフレームワークのトレンドを図1に示します。AngularやReactの人気が高く、その中でもAngularが目立ちます。2018年に行われた、Stack OverflowによるDeveloper Survey Results 2018でも、同様にAngularの人気が高いという結果になっていました。
UXを高めやすいSPA
SPA型Webアプリの特徴は、従来型と比べてユーザー体験（UX）が高いことです。具体的には主に以下の違いがあります。
- クライアント側で画面遷移
- 画面の一部だけを再描画
従来型Webアプリの典型的な画面遷移の仕組みは、サーバー側で画面遷移先のページを作成して、クライアント側はそれを表示するだけというものです。この仕組みだと、クライアント側にCPU負荷が掛からないというメリットはありますが、昨今のクライアントは、非力だった一昔前と比べて飛躍的に性能が上がっています。一方でサーバーは、複数のクライアントからのリクエストやレスポンスでCPU負荷が高くなり、ネットワーク負荷も高くなります。結果的に、サーバーで遷移先の画面を作成して画面遷移を行うメリットがあるとは言えません。SPA型Webアプリはクライアント側で画面遷移することで、従来型と比べて高速に画面遷移できます。
また、従来型Webアプリは画面遷移に際し、画面全体を再描画するという仕組みです。描画は一般的に重い処理のため、遷移先画面では遷移元画面の大部分を再利用して必要な領域だけを再描画するという仕組みにできれば、再描画範囲が限定されることから画面遷移における画面表示が従来と比べて速くなるはずです。SPA型Webアプリは、この仕組みを実現することが可能です。図2には画面遷移時に、画面の一部だけを再描画するSPAの例を示します。
このSPAアプリは自作のもので、SPAフレームワークとしてAngularを利用しています。左に示す国内線航空機予約画面の新規予約ボタンを押すと、右に示す国内線航空機新規予約画面に画面遷移します。遷移の際、黄色枠の部分だけが再描画されるというものです。
こうしたSPAの画面遷移を実現するためには、画面ごとに画面を「画面定義」で構成する必要があります。図3に例を示します。
左図が、国内線航空機予約画面の画面構成を示しています。色の付いた枠一つひとつが画面定義であり、国内線航空機予約画面は、黄色、青色、水色、緑色の4つの画面定義の組で構成されていることが分かります。また、黄色の画面定義は、青色、水色、緑色の3つの画面定義を含んでいますが、これは互いが親子関係であることを表しています。右図に、国内線航空機新規予約画面の画面構成を示しています。国内線航空機新規予約画面は、国内線航空機予約画面の画面定義の組に、赤色の画面定義を加えた画面定義の組で構成されていることが分かります。緑色の画面定義の子として、赤色の画面定義が構成されています。
