要件定義の不安をなくす。要件定義の不安をなくす。ユニファのバックエンド分割に学ぶイノベーションメタバース開発に必要な技術の基本知識をおさらい。Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。11:00フロントエンドUI/UXツールツイート社会人エンジニア向けの教育プログラム「トップエスイー」から、エンジニアの皆さんに対して有用な情報をお届けするコーナーです。Webブラウザ上で稼働するアプリケーションでは、一度のダウンロードで複数のページ要素を持つ構成をとることができ、こうした実装手法は「SPA(シングルページアプリケーション)」と呼ばれます。ページ遷移が素早く行え、ユーザーにダウンロード待ちをさせることなく利用できることから、UXの改善にも効力があります。実際のページ遷移はコード内に潜み、どんなページ遷移をするかは簡単には判別できません。結果、継続的な開発が困難になることも予測されます。そこで、ページ遷移を抽出し視覚化するツールがあると便利であると考え、実際にそうしたツールを開発しました。ツールの動作原理を交えて解説しましょう。Application、SPA)と呼ばれるタイプのものが流行しています。WebアプリにとってUXは極めて重要な要素です。ユーザーが「このWebアプリは使いづらいな」と感じてしまったら、アプリを使い続けてくれない可能性が高いですし、たとえ使い続けてもらえたとしても、例えばECサイトにおける「ユーザーに商品を購入してもらう」というような、アプリの本来の目的を達成する可能性が低くなるからです。SPAは、UXを高める仕組みをその特徴として備えており、SPAを実現可能なフレームワークを用いて実装します。SPAフレームワークの候補は複数あり、主なSPAフレームワークのトレンドを図1に示します。AngularやReactの人気が高く、その中でもAngularが目立ちます。2018でも、同様にAngularの人気が高いという結果になっていました。SPAフレームワークのトレンド(Googleトレンドより)UXを高めやすいSPASPA型Webアプリの特徴は、従来型と比べてユーザー体験(UX)が高いことです。具体的には主に以下の違いがあります。従来型Webアプリの典型的な画面遷移の仕組みは、サーバー側で画面遷移先のページを作成して、クライアント側はそれを表示するだけというものです。この仕組みだと、クライアント側にCPU負荷が掛からないというメリットはありますが、昨今のクライアントは、非力だった一昔前と比べて飛躍的に性能が上がっています。一方でサーバーは、複数のクライアントからのリクエストやレスポンスでCPU負荷が高くなり、ネットワーク負荷も高くなります。結果的に、サーバーで遷移先の画面を作成して画面遷移を行うメリットがあるとは言えません。SPA型Webアプリはクライアント側で画面遷移することで、従来型と比べて高速に画面遷移できます。従来型Webアプリは画面遷移に際し、画面全体を再描画するという仕組みです。描画は一般的に重い処理のため、遷移先画面では遷移元画面の大部分を再利用して必要な領域だけを再描画するという仕組みにできれば、再描画範囲が限定されることから画面遷移における画面表示が従来と比べて速くなるはずです。SPA型Webアプリは、この仕組みを実現することが可能です。図2には画面遷移時に、画面の一部だけを再描画するSPAの例を示します。画面遷移で画面の一部だけを再描画する例このSPAアプリは自作のもので、SPAフレームワークとしてAngularを利用しています。遷移の際、黄色枠の部分だけが再描画されるというものです。したSPAの画面遷移を実現するためには、画面ごとに画面を「画面定義」で構成する必要があります。画面構成を示しています。4つの画面定義の組で構成されていることが分かります。3つの画面定義を含んでいますが、これは互いが親子関係であることを表しています。画面定義の組に、赤色の画面定義を加えた画面定義の組で構成されていることが分かります。緑色の画面定義の子として、赤色の画面定義が構成されています。研究開発グループ所属。トップエスイー第12期生(2017年度)。Webアプリやモバイルアプリの開発に特に関心あり。3.12」の最初のベータ版がリリース新着記事一覧を見るイベント今後の予定を見るCodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。