SPAアプリケーション

SPAとは「Single Page Application」の略で、単一のページでコンテンツの切り替えを行うWeb アプリケーションのアーキテクチャの名称です。
SPAは、ユーザがWebアプリケーションを使っている間、Webページ全体をロードしない特徴があり、結果としてレスポンスが高速でUI/UXに優れているというメリットがあります。 近年では、AngularJS、ReactJSやVue.jsなどと言ったモダンJavaScriptライブラリが提供される事で開発者が記述するJavaScriptコード量を削減でき、効率的なWebサービス開発も実現できることから人気を博しています。

Angularの機能と特徴

AngularはモダンなWebアプリのための機能を多く標準で備えています。いくつか紹介します。

・依存性の注入
・拡張版HTMLによるテンプレート
・@angular/routerによるルーティング
・@angular/httpによるAjaxリクエスト
・@angular/formsによるフォーム作成
・コンポーネントのCSSのカプセル化
・XSS（cross-site scripting）に対する防御
・単体テストユーティリティ

ライブラリー選びに時間を費やしたくないときには「機能の全部入り」がとても助かります。ただし、不要な機能を排除できないデメリットがあります。代替品を使うと余計な手間がかかります。小規模なプロジェクトならインポートする方が効率的なのに、依存性の注入（DI）をすることで、得られる利点以上に負荷がかかってしまいます。

Reactの機能と特徴

Reactは最小限の状態から開始します。React単体の機能は以下の通りです。

・依存性の注入は無し
・典型的なテンプレートではなく、JSXというXML風の拡張版JavaScriptが用意されている
・XSS（cross-site scripting）に対する防御
・単体テストユーティリティ

それほど多くはないですが、必要なものだけを選んでライブラリーを追加できるため、メリットになることもあります。一方で、自分で選ばなければいけないことが欠点にもなります。そのため、Reactともに使われる定番のライブラリーがいくつか存在します。

・ルーティングにはReact-router
・HTTPリクエストにはFetch（あるいはaxios）
・CSSのカプセル化にはいくつものテクニックがある
・単体テストユーティリティの強化にはEnzyme

使いたいライブラリーを選ぶ自由は良いです。プロジェクトに応じて構成できますし、新しいライブラリーの学習コストもそれほど高いです。

Vue.jsの機能と特徴

Vue.jsはシンプルな双方向データバインディングに特化しているといっても、機能が足りないといったことはありません。アニメーションを追加することもできますし、ディレクティブによる細かい動作の指定も行えます。

・ディレクティブ
Vue.jsにはディレクティブ（directive）と呼ばれる組み込みの機能があります。これはHTMLに独自の属性を付与することで、DOM操作を行う機能です。
・コンポーネント指向
UIコンポーネント（部品）を組み合わせてアプリケーションを作るというのが、Vue.jsの方向性です。Vue.jsにはコンポーネント化するための機能が多く備わっています。

SPAサービス

当社では、SPAアプリケーションの運用を含めた要件に合わせてサーバレスアーキテクチャ設計を提案し、 運用自動化、ゼロダウンタイムデプロイ、マイクロサービス化も含めたWebスタートアップの継続的デリバリ支援を行っています。