令和6年度春期応用情報技術者試験午後問4 フロントエンドサーバ導入とレスポンス改善

この問題は2024(R6)春応用情報技術者午後に出題されたものです。出題時点の法令・制度に基づく内容のため、現行の内容と一致しない場合があります。

本ページの問題文・選択肢は、原本の体裁を Web 表示用に正規化しています（改行・記号・数式・図表参照の調整）。設問の趣旨および正解に影響する変更は加えていません。

学習ガイド

CRMシステムの改修を題材に、フロントエンド専用サーバの配置がレスポンスへ与える効果を評価する問題です。処理ごとの所要時間の測定表から方式間の差を読み取り、優れている理由を通信回数やデータ量の観点で記述し、数値でも裏付けます。Web APIが返すJSONの構造を説明させる設問もあり、この記事では測定値と構成図を往復しながら、評価の根拠となる数字の拾い方を丁寧に解説します。

この記事で押さえる論点

フロントエンド専用サーバの配置がレスポンスに与える効果を測定結果から評価する
Web API応答のJSONデータ構造を読み取り説明する
所要時間の測定値から改善後のレスポンスを計算する

出題情報

出題: 2024(R6)春応用情報技術者午後問4
配点: 20点満点
模範解答: 公表(設問ごとに掲載)

出題趣旨・採点講評(IPA 公表)

昨今，Webシステムの構築において，PCだけでなくスマートフォンのWebブラウザやアプリケーションプログラムなど，様々なユーザーインタフェースに対応することが定着しつつある。本問では，CRM（Customer Relationship Management）システムの改修を題材として，フロントエンド専用のサーバの配置がレスポンスに与える効果に関する基本的な理解や評価について問う。

問4では，CRM（Customer Relationship Management）システムの改修を題材に，フロントエンド専用のサーバの配置がレスポンスに与える効果について出題した。全体として正答率は平均的であった。

問題本文

CRM (Customer Relationship Management) システムの改修に関する次の記述を読んで，設問に答えよ。

C社は，住宅やビルなどのアルミサッシを製造，販売する中堅企業である。取引先の設計・施工会社のニーズにきめ細かく対応するために，自社で開発したCRMシステム（以下，CRMシステムという）を使用している。CRMシステムは，データベースとWebアプリケーションプログラム（以下，Webアプリという）から成り，C社のLAN上にあるPCから利用される。このたび，営業担当者が外出先からスマートフォンやノートPCを用いてCRMシステムを利用できるようにするために，データベースは変更せずにWebアプリを改修することになった。

〔Webアプリの改修方針〕

Webアプリの改修方針を次に示す。

必要以上の開発コストを掛けない。
営業担当者が外出先で効率的にCRMシステムを利用できるように，スマートフォンに最適化した画面を追加する。
将来的に，CRMシステム以外の社内システムとも連携できるように拡張性をもたせる。

〔Webアプリの実装方式の検討〕

これらの改修方針を受けて，図1のWebアプリを実装するシステムの構成案を検討した。

検討した Webアプリの実装方式を次に示す。

ユーザーインタフェースとデータ処理を分ける。ユーザーインタフェースは，Webサーバに HTML, Cascading Style Sheets (CSS)，画像，スクリプトなどを静的なファイルとして配置する。データ処理は，APがDBから取得したデータを JSON形式のデータで返す Web API として実装する。
ユーザーインタフェースとなる静的ファイルは，PCとスマートフォンそれぞれの Webブラウザ用に個別作成し，データ処理用の Web API は共用する。
ユーザーインタフェースの表示速度を向上させるために，①静的ファイルを最適化する。

〔実現可能性の評価〕

〔Webアプリの実装方式の検討〕で示した方式の実現可能性を評価するために，プロトタイプを用いて多くのデータを扱う機能について検証した。その結果，スマートフォンの特定の画面において次の問題が発生した。

扱うデータ量が増えるにつれて，レスポンスが著しく低下する。
②スマートフォンの CPU負荷が大きく，頻繁に使用するとバッテリの消耗が激しい。

そこで，これらの問題の原因を調べるために，Webアプリの処理を分析した。レスポンスの悪かった日誌一覧の表示画面を図2に，Web APIからの応答データを図3に示す。

スマートフォンのWebブラウザから図2の画面をリクエストしてから描画されるまでの一連の処理について，処理ごとに所要時間を測定した結果を表1に示す。

No.	処理概要	所要時間(ミリ秒)
1	Web ブラウザが画面に必要となる静的なファイルを全て受信する。	300
2	Web ブラウザが Web API にリクエストして，図3の応答データを全て受信する。	800
3	Web ブラウザ内で日誌のデータを日付の降順にソートして，画面に表示する最大件数である4件目までを抽出する。	1,200
4	日誌本文が42文字を超える場合，先頭から41文字に文字“…”を結合した42文字の文字列にする。	300
5	日誌一覧の表示を実行したユーザーが作成した日誌か否かを判断して，本人が作成した日誌には“編集”ボタンを表示する。	200
6	データを Web ブラウザに描画する。	500

表1から，図3の応答データのスマートフォンへの転送処理と，Webブラウザ内でその応答データを加工する処理に多くの時間を要していることが判明した。

〔Webアプリの見直し〕

Webブラウザが画面をリクエストしてから描画されるまでの所要時間の目標値を3秒以内に設定して，それを達成するために，次の三つの方式を検討した。

① スマートフォンのユーザーインタフェースをアプリケーションプログラム（以下，スマホアプリという）として開発して，そのスマホアプリ内でWeb APIからの応答データを加工・描画する方式
② リクエストのあった応答データのうち，Webブラウザに描画するデータだけを返すWeb APIを開発して，スマートフォンのWebブラウザからそのWeb APIを利用する方式
③ ②で開発したWeb APIを①で開発したスマホアプリから利用する方式

各方式について，応答データを加工・描画するソフトウェア又はサーバと，その実現可能性を評価するために，設けた評価項目について整理した結果を表2に示す。各評価項目の評価点に対する重み付けは均一とし，また，将来的な拡張性については各実装方法を設計するタイミングで検討することにした。

なお, 〔実現可能性の評価〕においてプロトタイプを用いて検証した方式を方式Ⓟとする。

方式	ソフトウェア／サーバ : データ描画	ソフトウェア／サーバ : データ加工	評価項目 : レスポンス	評価項目 : 開発コスト	評価項目 : CPU負荷	評価点合計
Ⓟ	Webブラウザ	Webブラウザ	×	◎	×	3点
①	スマホアプリ	スマホアプリ	○	△	△	4点
②	Webブラウザ	AP	○	○	○	6点
③	スマホアプリ	AP	◎	×	○	5点

〔レスポンス時間の試算〕

表2の結果から, 方式②について更に検討を進めることになり, そのレスポンスが実用上問題ないか, 表1を基に所要時間を試算した。

表1中のNo.2の所要時間について考える。方式②のWeb APIからの応答データのサイズは, 図3のデータのサイズの4分の1になり, サーバ側でのデータ転送には時間を要しないものと仮定すると, No.2の所要時間は a ミリ秒となる。

次に, No.3〜No.5の処理時間について考える。No.3の処理はDBで, No.4とNo.5の処理はAPで行われる。処理時間は各機器のCPU処理能力だけに依存すると仮定する。各機器のCPU処理能力は, スマートフォンが10,000MIPS相当, DBが40,000MIPS相当, APが20,000MIPS相当の場合, No.3〜No.5の処理時間の合計は b ミリ秒となる。

以上の試算の結果, 方式②で十分なレスポンスが期待できることから, 方式②を採用することにした。

〔システム構成の検討〕

方式②で開発したWeb APIの配置について検討した。図1のAP上に配置する案も検討したが, ③将来的な拡張性を考慮した結果, 図1のAPとは別に, スマートフォンやノートPCから呼び出されるWeb APIのためのAPを, 新たに追加する構成にした。

このシステム構成を採用した結果，問題を解消し，さらに将来的な拡張性をもたせることができた。

設問と解答・解説

設問1

本文中の下線①に該当するものを解答群の中から全て選び，記号で答えよ。

ア HTML，CSS，スクリプトなどのコードに，パイプライン処理を有効にする設定を行う。
イ HTML，CSS，スクリプトなどのコードに含まれる，余分な改行やコメントを削除する。
ウ画像を，BMPやTIFFなどの画像フォーマットにする。
エ画像を，PNGやSVGなどの画像フォーマットにする。
オ全てのファイルをバイトコードに変換して圧縮する。

模範解答

選択肢イ: HTML，CSS，スクリプトなどのコードに含まれる，余分な改行やコメントを削除する。

選択肢エ: 画像を，PNGやSVGなどの画像フォーマットにする。

配点 2点

解説

Webブラウザでのレスポンスを改善するためのフロントエンドの最適化手法に関する問題です。

正解の根拠

イ: HTML、CSS、JavaScriptなどのソースコードから、実行に不要な空白、改行、コメントを削除（ミニファイ化）することでファイルサイズを小さくし、ダウンロード時間を短縮します。
エ: 画像フォーマットを適切に選択・変換すること（PNGやSVGなどへの最適化）も、画像のファイルサイズを削減しレスポンスを向上させる効果的な方法です。

各選択肢の解説

ア: パイプライン処理はHTTPの通信上の仕組みであり、HTMLやCSSのコード内に設定を書き込むものではないため誤りです。
イ: 正解です。ファイルサイズの削減による転送時間の短縮に有効です。
ウ: BMPやTIFFは非圧縮または圧縮効率の低いフォーマットであり、ファイルサイズが大きくなるためWeb向けには適していません。
エ: 正解です。PNGやSVGはWebに適した画像フォーマットであり、レスポンス向上に寄与します。
オ: 全てのファイルを一律に「バイトコード」に変換することはWebフロントエンドの一般的な最適化手法としては不適切です。

設問2

〔実現可能性の評価〕について答えよ。

(1)

本文中の下線②の要因として，最も適切なものを解答群の中から選び，記号で答えよ。

ア JSON形式の応答データを送受信する処理
イ WebブラウザにHTML，CSS，画像ファイルをレンダリングする処理
ウスマートフォンのメモリ上で日誌のデータを加工する処理
エ日誌一覧の各担当がログインユーザーか否かを判別する処理

模範解答

選択肢ウ: スマートフォンのメモリ上で日誌のデータを加工する処理

配点 2点

解説

スマートフォン等のデバイスにおけるWebアプリケーションにおいて、フロントエンド側の処理によるレスポンス遅延の要因を問う問題です。

正解の根拠

JSON形式の応答データを受け取り、それをクライアント（スマートフォン）側で加工・レンダリングするアーキテクチャでは、クライアント側のCPUやメモリの性能がレスポンスに影響を与えます。

各選択肢の解説

ア: データの送受信処理自体はネットワークの転送速度に依存する部分が大きく、端末処理のボトルネックとしての直接的な要因ではありません。
イ: WebブラウザによるHTML等のレンダリングも負荷はかかりますが、通常はブラウザの基本機能として最適化されており、JSONデータの複雑な加工処理ほどのボトルネックにはなりにくいです。
ウ: 正解です。受け取った複雑なJSONデータをスマートフォンの限られたメモリやCPUを使って加工・構築する処理は、レスポンス悪化の主な要因となりやすいです。
エ: ログインユーザーか否かの判別は処理の一部に過ぎず、全体のレスポンス低下の主要因とはいえません。

(2)

図3中の α と β の箇所にある“[”及び“]”で囲まれたデータはどのようなデータを表現するものか。データ形式に着目し，“日誌”という単語を用いて，15字以内で答えよ。

模範解答

日誌の繰返しデータ

採点基準(配点 3点)

知識・理解度（内容）(2点)

2点: JSON形式における配列記号がデータの繰返しを表現していることを正しく理解し記述できている。
1点: 複数のデータがあることは理解できているが、表現に曖昧さがある。
0点: データ構造について正しく理解できていない。

論理性（構造）(1点)

1点: 指定された単語を用いて、自然な日本語で簡潔にまとめられている。
0点: 文意が通らない、または冗長である。

解説

JSON形式において [ と ] で囲まれた部分は 配列（Array） を表します。

配列は、同じ構造の要素が複数連なる 繰返しデータ を表現するために用いられます。本問では、日誌の一覧を表示するためのデータとして、複数の日誌情報が配列として格納されていることを答えます。

高得点のポイント

1. JSON形式における [ と ] が 配列（複数の要素の集合・繰返し） を意味することを理解していること。
1. 問題文の指定通り 「日誌」 という単語を必ず含めていること。
1. 15字以内という制限に収まるよう、簡潔にまとめていること。

設問2(2)は，正答率が低かった。応答データのデータ形式であるJSONは，様々なデータ型やデータ構造を組み合わせて複雑なデータ集合を記述することができる。日誌一覧の表示画面と対比して，Web APIからの応答データが何を表現するものかを正しく理解し，注意深く解答してほしい。

設問3

表2中の方式②のレスポンスが，方式Ⓟに比べて優れていると評価した理由を二つ挙げ，それぞれ30字以内で答えよ。

(1)

一つ目の理由を答えよ。

模範解答

応答データの加工処理をサーバ側で行うから

採点基準(配点 3点)

知識・理解度（内容）(2点)

2点: データの加工処理をクライアント側からサーバ側に移行することで負荷が軽減される点を正しく理解し記述できている。
1点: 処理をサーバ側で行うことには触れられているが、データの加工処理であることが明確でない。
0点: 処理の移行によるレスポンス向上について正しく理解できていない。

論理性（構造）(1点)

1点: 理由として妥当な文脈で簡潔に記述されている。
0点: 文脈が不自然、または論理的に破綻している。

解説

フロントエンド専用サーバを配置する方式の利点の一つ目は、クライアント側の処理負荷の軽減です。

これまでクライアントのメモリ上で行っていた データの加工・集計処理 を、より処理能力の高いサーバ側で実行することで、クライアント端末の負荷が減少しレスポンスが向上します。

高得点のポイント

1. 従来クライアント側で行っていた データの加工処理 を挙げていること。
1. その処理を サーバ側で行う ことで負荷が減る旨を含めること。

(2)

二つ目の理由を答えよ。

模範解答

応答データの転送量が削減されるから

採点基準(配点 3点)

知識・理解度（内容）(2点)

2点: 必要なデータのみを抽出して返すことで、ネットワーク上のデータ転送量が削減される点を正しく理解し記述できている。
1点: 通信や転送に関する記述はあるが、転送量が削減される旨が明確でない。
0点: データ転送量の削減による効果について正しく理解できていない。

論理性（構造）(1点)

1点: 理由として妥当な文脈で簡潔に記述されている。
0点: 文脈が不自然、または論理的に破綻している。

解説

方式におけるレスポンス向上の二つ目の理由は、ネットワーク通信量の削減 です。

サーバ側で画面表示に必要なデータのみを抽出・整形してからクライアントへ送信することで、ネットワーク上の データ転送量 が減少し、通信にかかる時間が短縮されます。

高得点のポイント

1. クライアントとサーバ間の 応答データ に着目していること。
1. その 転送量（通信量）が削減される 旨を明記していること。

設問3は，正答率がやや低かった。Webアプリケーションプラグラムにおいて，レスポンス時間に影響を及ぼす要因として，ネットワーク上のデータ転送処理やWebブラウザ内でのCPU処理などがある。それらの処理に要する時間が改善した理由について，もう一歩踏み込んで考えてほしい。

設問4

本文中の a , b に入れる適切な数値を答えよ。

(1)

a に入れる数値を答えよ。

模範解答

200

配点 2点

解説

各処理の所要時間を合算してレスポンス時間を算出する問題です。

算出の根拠

フロントエンド専用サーバからバックエンドのWeb APIを呼び出し、必要なデータを取得するまでにかかる時間などを表の条件に基づき計算します。

サーバの処理時間と通信時間を合計した結果、この区間のレスポンス時間は $200$ ミリ秒となります。

(2)

b に入れる数値を答えよ。

模範解答

550

配点 2点

解説

全体のレスポンスタイムを計算する問題です。

算出の根拠

クライアントからのリクエスト通信、サーバやバックエンドでの処理（上記の $200$ ミリ秒を含む）、レスポンス送信、そしてクライアント側でのレンダリング時間などをすべて合計します。

各ステップの所要時間を足し合わせることで、最終的な全体のレスポンス時間は $550$ ミリ秒となります。

設問5

本文中の下線③の拡張性とは何か。40字以内で答えよ。

模範解答

Web APIを介してCRMシステム以外の社内システムとも連携する拡張性

採点基準(配点 3点)

知識・理解度（内容）(2点)

2点: Web APIを介することで、CRMシステム以外の社内システムからも容易に連携可能になるという拡張性を正しく理解し記述できている。
1点: 他システムとの連携について触れているが、社内システムであることやWeb APIを介することの記述が欠けている。
0点: 拡張性の意味を正しく理解できていない。

論理性（構造）(1点)

1点: 拡張性の内容として、自然な文脈で過不足なくまとめられている。
0点: 文意が通らない、または論理的なつながりが不明確である。

解説

システムをマイクロサービス化・Web API化することでもたらされる拡張性について答える問題です。

フロントエンド専用サーバとバックエンドを分離し、バックエンド機能を Web API として提供することで、スマートフォンやPCのブラウザだけでなく、他の社内システムや外部サービス からも同じAPIを呼び出してデータ連携を行うことが容易になります。

高得点のポイント

1. Web APIを介して（またはAPIを利用して）通信が行われる仕組みに触れていること。
1. 連携先として CRMシステム以外の社内システム を明示していること。
1. それらと容易に 連携できる ことを40字以内でまとめていること。