Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

SPAの保守開発を効率化――画面遷移理解を支援する

トップエスイーからのアウトカム ~ ソフトウェア工学の現場から 第15回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 社会人エンジニア向けの教育プログラム「トップエスイー」から、エンジニアの皆さんに対して有用な情報をお届けするコーナーです。Webブラウザ上で稼働するアプリケーションでは、一度のダウンロードで複数のページ要素を持つ構成をとることができ、こうした実装手法は「SPA(シングルページアプリケーション)」と呼ばれます。ページ遷移が素早く行え、ユーザーにダウンロード待ちをさせることなく利用できることから、UXの改善にも効力があります。しかしながら、実際のページ遷移はコード内に潜み、どんなページ遷移をするかは簡単には判別できません。結果、継続的な開発が困難になることも予測されます。そこで、ページ遷移を抽出し視覚化するツールがあると便利であると考え、実際にそうしたツールを開発しました。ツールの動作原理を交えて解説しましょう。

目次

近年のWebアプリにおけるトレンド

 近年Webアプリは、コンバージョンに直結するユーザー体験(User Experience、UX)の向上に向けて、シングルページアプリケーション(Single Page Application、SPA)と呼ばれるタイプのものが流行しています。WebアプリにとってUXは極めて重要な要素です。なぜなら、ユーザーが「このWebアプリは使いづらいな」と感じてしまったら、アプリを使い続けてくれない可能性が高いですし、たとえ使い続けてもらえたとしても、例えばECサイトにおける「ユーザーに商品を購入してもらう」というような、アプリの本来の目的を達成する可能性が低くなるからです。

 SPAは、UXを高める仕組みをその特徴として備えており、SPAを実現可能なフレームワークを用いて実装します。SPAフレームワークの候補は複数あり、主なSPAフレームワークのトレンドを図1に示します。AngularやReactの人気が高く、その中でもAngularが目立ちます。2018年に行われた、Stack OverflowによるDeveloper Survey Results 2018でも、同様にAngularの人気が高いという結果になっていました。

図1 SPAフレームワークのトレンド(Googleトレンドより)
図1 SPAフレームワークのトレンド(Googleトレンドより)

UXを高めやすいSPA

 SPA型Webアプリの特徴は、従来型と比べてユーザー体験(UX)が高いことです。具体的には主に以下の違いがあります。

  • クライアント側で画面遷移
  • 画面の一部だけを再描画

 従来型Webアプリの典型的な画面遷移の仕組みは、サーバー側で画面遷移先のページを作成して、クライアント側はそれを表示するだけというものです。この仕組みだと、クライアント側にCPU負荷が掛からないというメリットはありますが、昨今のクライアントは、非力だった一昔前と比べて飛躍的に性能が上がっています。一方でサーバーは、複数のクライアントからのリクエストやレスポンスでCPU負荷が高くなり、ネットワーク負荷も高くなります。結果的に、サーバーで遷移先の画面を作成して画面遷移を行うメリットがあるとは言えません。SPA型Webアプリはクライアント側で画面遷移することで、従来型と比べて高速に画面遷移できます。

 また、従来型Webアプリは画面遷移に際し、画面全体を再描画するという仕組みです。描画は一般的に重い処理のため、遷移先画面では遷移元画面の大部分を再利用して必要な領域だけを再描画するという仕組みにできれば、再描画範囲が限定されることから画面遷移における画面表示が従来と比べて速くなるはずです。SPA型Webアプリは、この仕組みを実現することが可能です。図2には画面遷移時に、画面の一部だけを再描画するSPAの例を示します。

図2 画面遷移で画面の一部だけを再描画する例
図2 画面遷移で画面の一部だけを再描画する例

 このSPAアプリは自作のもので、SPAフレームワークとしてAngularを利用しています。左に示す国内線航空機予約画面の新規予約ボタンを押すと、右に示す国内線航空機新規予約画面に画面遷移します。遷移の際、黄色枠の部分だけが再描画されるというものです。

 こうしたSPAの画面遷移を実現するためには、画面ごとに画面を「画面定義」で構成する必要があります。図3に例を示します。

図3 SPAの画面構成例
図3 SPAの画面構成例

 左図が、国内線航空機予約画面の画面構成を示しています。色の付いた枠一つひとつが画面定義であり、国内線航空機予約画面は、黄色、青色、水色、緑色の4つの画面定義の組で構成されていることが分かります。また、黄色の画面定義は、青色、水色、緑色の3つの画面定義を含んでいますが、これは互いが親子関係であることを表しています。右図に、国内線航空機新規予約画面の画面構成を示しています。国内線航空機新規予約画面は、国内線航空機予約画面の画面定義の組に、赤色の画面定義を加えた画面定義の組で構成されていることが分かります。緑色の画面定義の子として、赤色の画面定義が構成されています。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 是木 玄太(株式会社日立製作所)(コレキ ゲンタ)

     日立製作所 研究開発グループ所属。トップエスイー第12期生(2017年度)。Webアプリやモバイルアプリの開発に特に関心あり。ドメインや端末(PC、iOS、Android)等に応じて、クライアント側だけでなくサーバー側(DB含む)も含めた最適なアーキテクチャや、既存のものに縛られない時に斬新な開発...

バックナンバー

連載:トップエスイーからのアウトカム ~ ソフトウェア工学の現場から

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5