プログラミング言語の進化や新たな技術の台頭により、Webフロントエンド開発が劇的に進化している。処理が遅い、ネットなしでは利用できない、はもう過去の話。現在のWebフロントは、高速にサクサクと動き、オフラインでも動作するのが当たり前になりつつある。Webフロントエンド開発を支える新技術を解説する。

 使いやすいWebフロントを開発するのに欠かせないのが、SPA(Single Page Application)だ。このSPAは、Webページを遷移せずに、必要な部分だけを切り替えて表示する技術や手法を指す。使い勝手の良いアプリを作成できるため、ここ数年でSPA対応のWebアプリが続々と登場している。

 SPA対応のアプリでは、ページ全体を遷移するのではなく、変更が必要な部分のみ描画する。メリットは、応答速度や描画速度の短縮により、ユーザーエクスペリエンス(UX)が向上することにある。これは、サーバーとの通信量が低減し、さらに通信が非同期的に実行されるため、ページの更新にかかる時間が短縮されるためだ。

SPAのイメージ
[画像のクリックで拡大表示]

 具体例を当社が提供しているクラウドIDEである「Monaca」で見てみよう。Monacaのエディター画面で新たにプラグインを追加する様子だ。このように、画面全体が遷移するのではなく、画面の一部が浮き上がるように表示される。最初のエディター画面にグレー色がかかり、プラグインの追加画面がハイライト表示されるようになる。

 追加画面が表示されている間、エディター画面は破棄されない。バックグラウンドで表示されているだけだ。そのため、エディター画面に処理が戻った際には、新たな通信を発生させずに再び表示できる。これがSPAの典型的な活用例だ。

SPAの挙動
[画像のクリックで拡大表示]

 ただし、SPAはメリットばかりではない。初回アクセス時にWebサイトのデータをまとめて読み込むので、初回の表示まで時間がかかるというデメリットがある。さらに、クライアントサイドのJavaScriptの処理が増えるので、CPUやメモリーが少ないスマホなどのデバイスでは、操作性が損なわれる可能性もある。このような点には注意したい。

この先は日経 xTECH Active会員の登録が必要です

日経xTECH Activeは、IT/製造/建設各分野にかかわる企業向け製品・サービスについて、選択や導入を支援する情報サイトです。製品・サービス情報、導入事例などのコンテンツを多数掲載しています。初めてご覧になる際には、会員登録(無料)をお願いいたします。