Webアプリケーション／Webシステムの開発で、ReactやVue.js といったSPA(Single Page Application：シングルページアプリケーション)が注目を集めています。フロントエンド開発フレームワークについて学習しているエンジニアも増えているみたいですね。

これまでSPAは、モバイルやコンシューマ向けWebアプリケーションを中心に使われてきました。リッチなUI/UXを提供できるといったSPAのメリットが、こういった用途で効果を発揮するからです。でも、利用者にとって使いやすい技術であれば、業務システムでも要望として上がってくるでしょう。

そこで、この記事では、SPA(Single Page Application)の特徴を整理しながら、業務システムに必要となる条件を整理していきます。

関連するコラム

【2022年版】 フロントエンドフレームワーク×9選

バックエンドのローコード開発は何が違うのか

業務のデジタル化・業務DXでローコード開発が効果的な3つの理由

React・Vueのフロントエンドで利用できるバックエンドサービスを整理する

ざっくり、業務システムを開発できるローコード開発プラットフォームを整理する

従来の業務システムの構成

まずは基本的なところのおさらいです。

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を通じて、データだけをサーバー側から受け取ってWebページを生成します。

フロントエンド側の操作に対する反応やデータの表示は、フロントエンド側のJavaScriptのコードがおこないます。ユーザーが操作するたびにいちいちリクエスト – レスポンスを繰り返して、Webページ単位で更新するのではなく、更新が必要なデータだけをAPIで送受信します。そのため、きめ細かな対応が可能になるのです。

スマートフォンでWebサイトを見ると、きめ細かな指の操作や方向に応じて、画面が次々と切り替わっていきますよね。これが、SPAの効果です。

代表的なSPAフレームワーク

SPAは、フロントエンド側のJavaScriptのコードで実現します。そのため、次のようなフロントエンド開発フレームワーク／ツールがオープンソースで提供されています。

• React
• Vue.js
• Angluar
• Svelte

SPAのメリット・デメリット

SPAのメリット・デメリットを、従来のWebアプリケーション(MPA)と比較すると次のようになります。

従来のWebアプリケーションのデメリットをうまく解消していますね。

ただし、従来のWebアプリケーションの開発と比べると、まだまだ発展途上のところがあるため、学習コストが高くなります。リッチな画面と操作性を実現できるので、コーディング量も大きくなりがちです。エンジニアも決して多くはないので、その分だけ単価も高くなる傾向にあります。

業務システムで、SPAが有効な領域

さて、やっと結論です。SPAを業務システムに採用した場合、どのような領域で効果を発揮するのでしょうか。

これには、次の３つが考えられると思います。

• リアルタイム性の高い業務システム
• 利用者が多く、利用スキルも高くなく、研修コストをかけにくい
• 常に改善を続けるツール

—

まずはリアルタイム性の高く、情報の更新頻度が高い業務システムです。最新情報を常に更新していくダッシュボード系の業務システムでは、効果を発揮するはずです。

コンタクトセンター／コールセンター向けの業務支援ツールを開発・提供しているある企業では、業務に合わせてリアルタイムで情報を更新するため、Reactを採用してフロントエンドを開発したそうです。

また、利用者が多いが、利用スキルも高くなく、研修コストをかけにくいツールでも、使いやすい操作性が求められるでしょう。ツールが使いにくいと、それだけで利用頻度が下がってしまうからです。

さらに、常に改善を続けるツールの開発でも、SPAが役に立つと思います。フロントエンドとサーバー側の開発を分離することで、フロントエンド側の開発スピードを大きく上げることができるからです。

最近のDX(デジタルトランスレーション)のブームでは、フロントエンド側でリーンスタートアップ／アジャイル開発の手法が採用されることが多くなってきました。こういう場合にも、業務システムでありながらモバイルアプリケーションのようなユーザー体験が求められるでしょう。

＊

SPAは枯れた技術ではなく、まだまだ発展途上です。今なら、システム開発会社やエンジニアにとっては、新しい技術をアピールするチャンスになるかも知れませんね。

Hexabaseは、サーバーなどのインフラ構築・DB設計・API開発など手間のかかるバックエンドをクラウドサービスとして提供しています。エンジニアは、ユーザーニーズにフィットしたUIの開発に集中できます。

Hexabaseの6つの特徴