基本情報技術者 2019年 春期 午前(科目A) 問50
問題文
JavaScriptの非同期通信の機能を使うことによって、動的なユーザインタフェースを画面全体の遷移を伴わずに実現する技術はどれか。
選択肢
ア:Ajax(正解)
イ:CSS
ウ:RSS
エ:SNS
🔒 解説は解答すると表示されます
Ajaxによる非同期通信【午前解説】
正解の理由
正解は ア です。Ajax(Asynchronous JavaScript and XML)は「非同期でサーバと通信し、ページ全体を再読み込みせずに一部を更新する」手法の総称です。具体的にはXMLHttpRequestやFetch APIを使ってバックグラウンドでデータを取得し、そのデータをもとにDOMを書き換えることで、画面遷移なしに動的なユーザインタフェースを実現します。問題文の「非同期通信」「画面全体の遷移を伴わずに」という要件に完全に一致します。
解法ステップ
- 問題文のキーワード(非同期通信、画面全体の遷移を伴わない、動的ユーザインタフェース)を抽出する。
- 各選択肢がそのキーワードに合致するかを検証する(技術的役割を思い出す)。
- 非同期にサーバと通信して部分更新を行う技術を選ぶ → Ajaxを選択する。
選択肢別の誤答解説
- ア: Ajax — 正解。非同期通信でデータを取得してDOMを更新し、画面遷移なしに動的UIを実現する技術の総称です。
- イ: CSS — 誤り。CSSはスタイルシート言語であり、サーバとの非同期通信やデータ取得機能は持ちません。見た目を変更することはできても、それ自体で動的コンテンツを取得する手段ではありません。
- ウ: RSS — 誤り。RSSはウェブフィードの配信フォーマットで、コンテンツ配信の仕組みを指しますが、ブラウザ上で部分更新を行う非同期通信の技術ではありません。
- エ: SNS — 誤り。SNS(ソーシャル・ネットワーキング・サービス)はサービスの分類であり、特定の非同期通信技術を指す語ではありません。
よくある誤解
- 「Ajax = XMLHttpRequestだけ」と考える誤解:XHRは歴史的な手段で、現在はFetch APIやPromiseベースの実装も含めてAjax的な処理とみなされます。
- 「見た目(CSS)が動的になる=Ajax」と混同する誤解:CSSはスタイル指定であり、サーバとの非同期通信やデータ取得は行えません。
- 「RSSやSNSが非同期で画面更新を行う技術だ」とする誤認:RSSは配信フォーマット、SNSはサービスの種類であり、いずれも技術的手法そのものではありません。
補足コラム
Ajaxはもともと「XML」を名前に含んでいますが、現実にはJSONを使うことが主流です。歴史的にはXMLHttpRequestが使われ、さらにPromiseベースのFetch APIが登場して実装が簡潔になりました。サーバとブラウザ間の非同期通信では同一生成元ポリシーやCORSの理解も重要で、これらは実装や問題解釈で差がつくポイントです。
短いコード例(Fetchを使ったAjax的処理の基本)
// Fetch API でサーバからJSONを取得して部分更新する例
fetch('/api/data')
.then(response => response.json())
.then(data => {
document.getElementById('result').textContent = data.message;
})
.catch(err => console.error('通信エラー', err));
FAQ
Q1: AjaxとFetchはどう違いますか?
A1: Ajaxは技術の総称で、Fetchはその実装手段の一つです。従来はXMLHttpRequestを指していましたが、FetchはよりモダンでPromiseベースのAPIです。
A1: Ajaxは技術の総称で、Fetchはその実装手段の一つです。従来はXMLHttpRequestを指していましたが、FetchはよりモダンでPromiseベースのAPIです。
Q2: Ajaxは必ずXMLを使う必要がありますか?
A2: いいえ。現在はJSONを使うことが一般的で、XMLは必須ではありません。Ajaxはデータの形に依存しない非同期通信の概念です。
A2: いいえ。現在はJSONを使うことが一般的で、XMLは必須ではありません。Ajaxはデータの形に依存しない非同期通信の概念です。
Q3: 非同期で更新するには必ずAjaxを使う必要がありますか?
A3: ブラウザで画面遷移なしにサーバとやり取りする場合、技術的にはFetchやWebSocket、Server-Sent Eventsなど複数の方法がありますが、問題文の一般的な意味ではAjaxが該当します。
A3: ブラウザで画面遷移なしにサーバとやり取りする場合、技術的にはFetchやWebSocket、Server-Sent Eventsなど複数の方法がありますが、問題文の一般的な意味ではAjaxが該当します。
関連キーワード: Ajax、非同期通信、XHR、Fetch API、SPA、DOM操作、JSON、CORS、動的UI

\ せっかくなら /
基本情報技術者を
クイズ形式で学習しませんか?
クイズ画面へ遷移する→
すぐに利用可能!

