SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

近年の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つの画面定義を含んでいますが、これは互いが親子関係であることを表しています。右図に、国内線航空機新規予約画面の画面構成を示しています。国内線航空機新規予約画面は、国内線航空機予約画面の画面定義の組に、赤色の画面定義を加えた画面定義の組で構成されていることが分かります。緑色の画面定義の子として、赤色の画面定義が構成されています。

次のページ
SPAにおける課題

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
トップエスイーからのアウトカム ~ ソフトウェア工学の現場から連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/11360 2019/02/12 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング