情報処理安全確保支援士 2025年 秋期 午前2 問18

要点まとめ

• 結論：ブラウザとサーバ間を非同期にやり取りし部分的に表示を更新する技術は Ajax（アジャックス）で正解です。
• 根拠：XMLHttpRequest や Fetch API を使いページ全体を再読み込みせずにデータ取得と DOM 更新を行う点が一致します。
• 差がつくポイント：Ajax は単一 API ではなく手法であり、Fetch/XHR、JSON、CORS、デバウンス等を理解すると実装力で差が出ます。

正解の理由

よくある誤解（2〜3 行）

• 「Ajax は固有のライブラリや製品」だと誤解されますが、実際は非同期通信を行う実装手法の総称です。
• 「DOM や CSS が Ajax と同義」ではなく、DOM は文書構造、CSS は見た目制御、役割が異なります。

解法ステップ（番号付きリスト）

1. 問題文からキーワードを抽出：「非同期通信」「ブラウザに組み込まれているサーバとの」「逐次表示（部分更新）」を確認する。
2. 選択肢の意味を整理：CSS（見た目）、DOM（文書モデル）、SAX（ストリーミング XML パーサ）を即座に除外する。
3. 非同期通信と部分更新に該当する語を選ぶ：Ajax が該当するため正解と判断する。
4. 実装例をイメージできるか確認：XMLHttpRequest / Fetch / JSON を使った更新が思い浮かべば確信が持てる。
5. 設問の用途（地図スクロール、候補表示）と合致するか最終チェックする。

選択肢別の誤答解説

• ア: Ajax — 正答。JavaScript による非同期サーバ通信で部分的 DOM 更新を行う手法で、問題の用途に合致します。
• イ: CSS — 誤り。スタイル（色・レイアウト・フォント等）を指定する言語で、通信や非同期処理とは無関係です。
• ウ: DOM — 誤り。Document Object Model は HTML/XML 文書の構造と操作インターフェースであり、通信手法ではありません。
• エ: SAX — 誤り。Simple API for XML はストリーミング XML パーサで、サーバサイドやクライアントの XML 解析で使われますが、非同期通信そのものを指しません。

補足コラム（関連知識など）

• 実装に用いる代表的 API：XMLHttpRequest（古典）、Fetch API（最新）と Promise、さらに axios などのライブラリ。
• 注意点：同一オリジンポリシーと CORS 設定、レスポンス形式（JSON の方が扱いやすい）、通信頻度を抑えるデバウンスやキャッシュ戦略が重要です。
• 比較：WebSocket は双方向かつ持続接続でリアルタイム性が高く、Ajax はリクエスト／レスポンス型の都度通信に向きます。
• 実装例（簡易的なオートコンプリート）：

// 簡易例: フェッチ＋デバウンスで候補取得
let timer = null;
const input = document.querySelector('#q');
input.addEventListener('input'、(e) => {
  clearTimeout(timer);
  const q = e.target.value;
  if (!q) return;
  timer = setTimeout(() => {
    fetch(`/suggest?q=${encodeURIComponent(q)}`)
      .then(res => res.json())
      .then(items => {
        // DOM を更新して候補を表示する処理
        console.log(items);
      });
  }、300); // 300ms デバウンス
});

FAQ（Q:/A: を 2〜3 組）