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

Ajaxを用いた動的UI【午前解説】

正解の理由

• Same‑Origin Policy（同一生成元ポリシー）はブラウザが持つセキュリティ制約（スキーム、ホスト、ポートが一致することを要求）です。
• CORS（Cross‑Origin Resource Sharing）は、サーバ側がHTTPヘッダ（例：Access‑Control‑Allow‑Origin）を使ってその制約を緩和する仕組みで、SOPそのものではなくSOPを調整するための仕組みです。

解法ステップ

1. 問題文からキーワードを抽出：「非同期通信」「画面遷移を伴わず」「動的なユーザインタフェース」。
2. 各選択肢の機能を照合：
   • Ajax：非同期通信でデータ取得→DOM更新（該当）
   • CSS：見た目（スタイル）を指定する言語（非該当）
   • RSS：配信フォーマット（非該当）
   • SNS：サービスの種類（非該当）
3. 最も一致する技術を選ぶ → ア（Ajax）。

選択肢別の誤答解説

• ア Ajax
  Ajaxは非同期にサーバとやり取りし、受け取ったデータでページの一部を更新する手法全般を指します。XMLという名前が付いていますが、実際はJSONを使うことが多く、fetchやXMLHttpRequestが利用されます。よって設問の要件に合致します。
• イ CSS
  CSSは文書の見た目（レイアウト・色・フォントなど）を定義するスタイル言語で、通信やデータ取得機能は持ちません。非同期通信で画面遷移を伴わない更新を実現する技術ではありません。
• ウ RSS
  RSSは主にコンテンツ配信（ニュースフィード等）のためのXMLベースのフォーマットです。クライアント側のUI更新メカニズムではなく、配信データの形式に過ぎません。
• エ SNS
  SNS（ソーシャル・ネットワーキング・サービス）はサービスの種類であり、UI更新のための技術そのものではありません。SNS上のインターフェースでAjaxが使われることは多いですが、SNS自体は解答になりません。

よくある誤解

1. Ajax＝XMLだと思い込む
   「Ajax」は歴史的名称（Asynchronous JavaScript And XML）ですが、現実的にはJSONを使うことが圧倒的に多いです。XMLに限定されません。
2. 同一生成元ポリシー（SOP）とCORSを同一視する
   SOPはブラウザのセキュリティ制約、CORSはその制約を緩和するためのサーバ側の仕組みです。両者は役割が異なります。
3. Ajaxは単一のAPIだと考える
   Ajaxは概念／手法であり、実装にはXMLHttpRequestやfetch、さらにライブラリ（axios等）やフレームワーク（React/VueのHTTP層）を使います。

補足コラム

• 短いコード例（fetchで非同期取得しDOMを更新する例）:

// 非同期にJSONを取得して画面の一部を更新する例
fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error('HTTP error ' + response.status);
    return response.json();
  })
  .then(data => {
    document.getElementById('result').textContent = data.message;
  })
  .catch(err => console.error('通信エラー:', err));

• Same‑Origin Policyの判定基準：スキーム（http/https）、ホスト（ドメイン）、ポートの3要素が全て一致する必要があります。CORSを利用する場合、サーバはレスポンスヘッダで許可を明示します（例：Access‑Control‑Allow‑Origin: https://example.com）。
• 歴史的背景：Ajaxという用語が注目されたのは2000年代初頭で、これにより「ページ全体を再読み込みしないインタラクティブなWeb」が標準化され、後のSPA（Single Page Application）やリアクティブフレームワークの基盤となりました。

FAQ