基本情報技術者 2010年 秋期 午前（科目A） 問49

JavaScriptの非同期通信の機能を使うことによって、動的なユーザインタフェースを画面遷移を伴わずに実現する技術はどれか 【午前2 解説】

要点まとめ

• 結論：JavaScriptの非同期通信を利用して画面遷移なしに動的UIを実現する代表的な技術はAjaxで、部分的なデータ取得とDOM更新が可能です。
• 根拠：AjaxはXMLHttpRequestやFetch APIでサーバと非同期に通信し、受け取ったデータで画面の一部を更新してリロードを不要にします。
• 差がつくポイント：CSSは見た目、RSSは配信フォーマット、SNSはサービスであり、非同期通信による部分更新という観点でAjaxと異なります。

正解の理由

よくある誤解

• CSSを見て「CSSで動的に変わる」と考える誤り：CSSはスタイル定義であり、サーバと非同期にデータを取得して画面を部分更新する仕組みではありません。
• RSSやSNSを技術そのものと誤認する：RSSは配信フォーマット、SNSはサービス形態であり、非同期通信でのUI更新を示す技術ではありません。
• Ajax＝XMLと固執する誤解：Ajaxは語源にXMLが含まれますが、現実にはJSONやプレーンテキストが主流であり、通信手段（XHR/Fetch）が核心です。

解法ステップ

1. 問題文のキーワード「非同期通信」「画面遷移を伴わず」「動的なユーザインタフェース」を確認する。
2. 各選択肢がその条件を満たすかを照らし合わせる（通信機能か、見た目管理か、配信フォーマットか、サービスか）。
3. 「非同期にサーバと通信して部分的に更新する」機能を持つものを正解とする。
4. 選択肢の定義（Ajax、CSS、RSS、SNS）を思い出して除外法で絞る。

選択肢別の誤答解説

• ア：Ajax — 正解。JavaScriptで非同期にサーバとデータをやり取りし、画面の一部を更新して画面遷移を伴わずに動的UIを実現する技術群です。
• イ：CSS — 誤り。スタイル（見た目）を定義し、アニメーションやレイアウトは可能でも、サーバとの非同期通信によるデータ取得や部分更新を行う技術ではありません。
• ウ：RSS — 誤り。ウェブコンテンツの配信フォーマット（フィード）であり、UIの動的更新手段ではありません。配信データを受け取る仕組みは別に必要です。
• エ：SNS — 誤り。ソーシャルネットワーキングサービスというサービス形態であり、特定の非同期通信技術を指すものではありません。

補足コラム

// サーバからJSONを取得してDOMを更新する簡単な例
fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    document.getElementById('item').textContent = data.message;
  })
  .catch(err => console.error('通信エラー', err));

FAQ