COLUMN
2022年2月8日
SPA(Single Page Application)が、業務システムに必要となる条件
Webアプリケーション/Webシステムの開発で、SPA(Single Page Application:シングルページアプリケーション)が注目を集めています。ReactやVue.js / Angluarといったフロントエンド開発フレームワークについて学習しているエンジニアも増えているみたいですね。
これまでSPAは、モバイルやコンシューマ向けWebアプリケーションを中心に使われてきました。リッチなUI/UXを提供できるといったSPAのメリットが、こういった用途で効果を発揮するからです。でも、利用者にとって使いやすい技術であれば、業務システムでも要望として上がってくるでしょう。
そこで、この記事では、SPA(Single Page Application)の特徴を整理しながら、業務システムに必要となる条件を整理していきます。
従来の業務システムの構成
まずは基本的なところのおさらいです。
Webアプリケーション/Webシステムでは、ブラウザ(フロントエンド)からの要求(リクエスト)に応じて、サーバーがWebページを返します(レスポンス)。このとき、Webページは、HTMLやCSS・JavaScriptなどで構成されていて、Webアプリケーションがリクエストに合わせて動的に生成して送り返します。
Webの仕組みを使って業務システムを作ると、動作はこんな感じになります。
Webフォームで送信ボタンを押すと、入力した情報をリクエストとしてWebサーバーに送信します。送信は、Webページ単位でおこないます。そして、送信したデータをもとに処理をおこないます。その処理結果をブラウザ側に送り返します。
その結果、Webフォーム側とWebサーバー側で、何度もリクエストとレスポンスが繰り返すことになります。
※最近では、このようなページ単位で更新するWebアプリケーションを、SPA(Single Page Application)と対比して、MPA(Multi Page Application)と呼ぶことがあります。
業務システム開発の課題
こうした従来のWebアプリケーションには、次のような課題があります。
- 硬直した操作性
- 開発体制が、サーバーと一体化
操作は、入力 > 送信 > 処理 > 結果の表示 の繰り返しになるため、デスクトップアプリケーションやモバイルアプリケーションのような操作性を実現するのは大変です。
開発体制も、サーバー側とフロントエンド側が一体化していることが多いようです。Webフォームも処理結果のデータもサーバー側で生成するので、表示部分もサーバー側と連携して作っていく必要があるからです。
一方で、こうしたWebシステムの開発は、次のようなメリットもあります。
- 実績が多い
- エンジニアも多い
- 単価も安くなる
ある意味、枯れた技術なので、安定して開発できるのです。
SPA:Single Page Applicationとは
では、SPA(Single Page Application)は、どのような技術なのでしょうか。
SPAでは、ブラウザからのリクエストに応じて、1ページだけWebページを返します。そして、そのなかに含まれるJavaScriptのコードが、Web APIを通じて、データだけをサーバー側から受け取って、JavaScriptのコードがWebページを生成します。
フロントエンド側の操作に対する反応やデータの表示は、フロントエンド側のJavaScriptのコードがおこないます。ユーザーが操作するたびにいちいちリクエスト – レスポンスを繰り返して、Webページ単位で更新するのではなく、更新が必要なデータだけをAPIで送受信します。そのため、きめ細かな対応が可能になるのです。
スマートフォンでWebサイトを見ると、きめ細かな指の操作や方向に応じて、画面が次々と切り替わっていきますよね。これが、SPAの効果です。
代表的なSPAフレームワーク
SPAは、フロントエンド側のJavaScriptのコードで実現します。そのため、次のようなフロントエンド開発フレームワーク/ツールがオープンソースで提供されています。
- React
- Vue.js
- Angluar
- Svelte
SPAのメリット・デメリット
SPAのメリット・デメリットを、従来のWebアプリケーション(MPA)と比較すると次のようになります。
従来のWebアプリケーションのデメリットをうまく解消していますね。
ただし、従来のWebアプリケーションの開発と比べると、まだまだ発展途上のところがあるため、学習コストが高くなります。リッチな画面と操作性を実現できるので、コーディング量も大きくなりがちです。エンジニアも決して多くはないので、その分だけ単価も高くなる傾向にあります。
業務システムで、SPAが有効な領域
さて、やっと結論です。SPAを業務システムに採用した場合、どのような領域で効果を発揮するのでしょうか。
これには、次の2つが考えられると思います。
- リアルタイム性の高い業務システム
- 利用者が多く、利用スキルも高くなく、研修コストをかけにくい
- 常に改善を続けるツール
リアルタイム性の高く、情報の更新頻度が高い業務システムです。最新情報を常に更新していくダッシュボード系の業務システムでは、効果を発揮するはずです。
コンタクトセンター/コールセンター向けの業務支援ツールを開発・提供しているある企業では、業務に合わせてリアルタイムで情報を更新するため、Reactを採用してフロントエンドを開発したそうです。
また、利用者が多く、利用スキルも高くなく、研修コストをかけにくいツールでも、使いやすい操作性が求められるでしょう。ツールが使いにくいと、それだけで利用頻度が下がってしまうからです。
さらに、常に改善を続けるツールの開発でも、SPAが役に立つと思います。フロントエンドとサーバー側の開発を分離することで、フロントエンド側の開発スピードを大きく上げることができるからです。
最近のDX(デジタルトランスレーション)のブームでは、フロントエンド側でリーンスタートアップ/アジャイル開発の手法が採用されることが多くなってきました。こういう場合にも、業務システムでありながらモバイルアプリケーションのようなユーザー体験が求められるでしょう。
*
SPAは枯れた技術ではなく、まだまだ発展途上です。今なら、システム開発会社やエンジニアにとっては、新しい技術をアピールするチャンスになるかも知れませんね。