今回はSPA（Single Page Application）と、SPAを開発するのに最適な3大JavaScriptフレームワークについてお届けします。
新しいWebアプリケーションの形式として、SPA（Single Page Application）が注目され始めてしばらく経ちますが、今もフレームワークの開発が積極的に行われるなど、未だ勢いは衰えていません。
この記事では、SPAの基本的な考え方と、開発に便利なフレームワーク（Angular、React、Vue.js）の2020年の最新動向を紹介します。
SPAの概要
SPAは近年注目を集めているWebアプリケーションの形式の1つで、「1つのWebページによって、1つのアプリを構築する」というものです。
従来型のアプリケーションでは、ユーザのアクションに応じてサーバーからHTMLを受け取りそのたびにヘッダやフッダを含めて全て更新する方式をとっていました。一方で、SPAでは、最初にHTMLやCSS、JavaScriptを受け取った後は必要なデータだけをサーバに要求し差分を表示する方式で構築されます。
上図のように、ページをHTTPで最初にロードしたら、あとは手元のデータを処理するだけでインターフェースが構成されます。必要なデータはサーバーから非同期的にJSONデータとして受け取ることで、通信量を最小限に抑えることも可能です。
SPAのメリット
SPAはユーザーのアクションに応じて必要な差分のデータだけを取得して表示するものでした。そのため、ユーザーの操作の度にデータを丸ごと更新する必要がありません。それにより以下のようなメリットが生まれます。
アプリケーションのUIをリッチにできる
必要なデータだけの更新で良いため、画面遷移のグラフィックなどリッチな表現が可能になります。
高速な更新が可能になる
更新が早くなるため、ユーザーが画面が変わるまで待ち続ける必要がなくなります。
ネイティブアプリのようなアプリを作れる
ダウンロードして利用するタイプのネイティブアプリと同じような挙動を作ることも可能なため、ウェブアプリとネイティブアプリ両方の良さを兼ね備えたアプリも開発できます。
SPAのデメリット
一方、デメリットとして以下のようなものがあります。
最初のローディングに時間がかかる
最初のローディングの際にHTMLやJavaScriptなど全てのデータを取得する必要があるため、比較的初期ローディングに時間がかかります。
実装にコストがかかる
実装する際には、履歴の管理やルーティングなどSPAならではのポイントがあるため、これらを意識した開発が必要になり、また学習コストもかかります。
SPAを作成するためのJavaScriptフレームワーク
SPAを開発するにはコストがかかる、というのをデメリットとして挙げましたが、フレームワークを利用すれば比較的効率的かつ安全に開発を行うことが可能です。ここではAngular、React、Vue.jsの3つの主要なフレームワークを紹介します。
Angular（アンギュラー）
AngularはGoogleが中心となったコミュニティによって開発されているフレームワークです。機能が豊富で、企業向け大規模開発向きといわれることが多いです。
非常に開発スピートが早く年2回のアップグレードが行われることがGoogleからアナウンスされており、2020年6月25日に最新バージョンの「Angular 10」がリリースされたばかりで、2020年秋には次のバージョンの「Angular 11」のリリースが予定されています。
バージョン10では、TypeScript 3.9への対応など依存ライブラリのバージョンアップ、Angular Materialの新しい日付範囲ピッカー、プロジェクト生成時のstrictオプションといった新機能が追加されました。また、ESモジュールが推奨されるようになり、CommonJSやAMDのようなその他のモジュールをバンドルすると、ビルド／実行時に警告が表示されるように変更されています。
React（リアクト）
ReactはFacebookが中心となったコミュニティによって開発されているフレームワークです。
JavaScript の中で HTML/XML を記述する「JSX」という技術が利用可能で、Babel というトランスパイラでES5 のJavaScriptに変換できます。
2020年3月に16.13.1がリリースされています。このリリースでは、React DOMと呼ばれる仮想DOMのバグが修正されています。2020年中にバージョン17がリリースされる予定で、このバージョンではSuspenseと呼ばれる非同期処理をより簡単に行える機能が追加されるなどとして注目を集めています。
Vue.js（ビュージェーエス）
Vue.jsはオープンソースで開発が進められているフレームワークです。
AngularJSの開発に携わっていたEvan You氏により2014年にリリースされたフレームワークで、今回ご紹介する3つのなかでは最も後発です。比較的シンプルであり、既存アプリケーションの一部のみをVue.jsを使ったものに置き換えられる、日本語のドキュメントも充実している、といった点で学習コストが低いと言われています。
Vue.jsは2020年中にv3がリリースされる予定です。メジャーアップデートとなるため、Vueインスタンスの作り方がnew vueからcreateAppを利用するように変更されたり、Teleportと呼ばれるコンテンツを別のエリアへ転送することができる機能が追加されたりと、大幅な更新が行われる予定です。
3大JavaScriptフレームワークにも対応した高機能UIライブラリ
グレープシティでは、今回紹介した3大JavaScriptフレームワークでも使える高機能なJavaScriptライブラリを提供しています。
製品Webサイトではブラウザ上で気軽に試せるデモアプリケーションなどを公開しておりますので、ぜひ一度ご覧ください。
また、昨年弊社で開催したセミナーでは、「SPA」をテーマに、実際に弊社製品とAngularやReactを一緒に使用して開発した事例をご紹介しました。弊社ではこのようなトレンドの技術をテーマとしたセミナーを定期的に開催しております。
