ajaxとfetchの違いを中学生にもわかる徹底解説

---

1. ajaxとfetchの基本的な違い

現代のウェブ開発では Ajax という言葉をよく耳にしますが その正体は XMLHttpRequest という古い API を使って非同期でサーバーとやりとりする技術の総称です。多くの人は jQuery の Ajax 機能を使っていました。つまり Ajax は ある時代の標準というよりも 技術の集合体のような言葉です。対して fetch は ブラウザが標準で持つ新しい API であり Promise を使ってネットワーク要求を扱います。Fetch の登場によって コードがシンプルになり 非同期処理の書き方が ぐっと分かりやすくなりました。
特徴の違いを要約すると Ajax は従来のコールバック型の処理が中心であり 既存のライブラリと組み合わせやすい一方、Fetch は Promise ベースで直感的に非同期処理を記述できる点が大きな魅力です。

具体的には
・ajax は XMLHttpRequest やライブラリの Ajax が中心
・fetch は標準 API であり Promise を返す
・エラーハンドリングの考え方が異なる
といった違いがあります。
この違いを知ると いまのプロジェクトでどちらを使うべきか 判断しやすくなります。

重要なポイント：昔のコードを触る場合はまだ Ajax の知識が必要なこともありますが 新しいプロジェクトや新規機能では fetch を選ぶケースが多くなっています。
また fetch はデフォルトでネットワークエラー以外を落とさない点にも注意が必要です。HTTP ステータスが 200 以外でも resolve される場合があり その場合は response.ok を必ずチェックします。

この section だけでも ざっくりとした理解がつかめますが 実際の使い分けは次のセクションで詳しく見ていきます。
読み手が中学生でも 何がどんな場面で起きるのか 想像できるように 具体的な場面を想定して説明します。

ピックアップ解説

小ネタ記事: fetch を使い倒すと世界が変わるのか？

友達の A さんと B さんが ある日の放課後に「ウェブ API って難しいよね」と話していました。A さんは昔からの Ajax 命で XMLHttpRequest や jQuery の Ajax に慣れており その安定感を信じています。B さんは新しいもの好きで fetch の魅力を語ります。
「fetch は約束ごとに返ってくるから 連続処理が書きやすいんだ。たとえば データの取得 → パース → 表示 という流れをチェーンでつなげられる」
A さんは「でも古いブラウザがあると困るんじゃないか」と心配します。B さんは「現代の開発では Polyfill で対応できるし、最初から fetch に慣れておくと将来的に楽になる」と答えます。2人は code を見ながら実際の使い分けを語り合い どちらを選ぶべきかの判断軸を作ります。結局のところ 目的と環境次第ですが 学び始めは fetch を軸に 進めるのが現実的です。
日常生活の例えで言えば 旧式の手紙のやり取りと 今のスマホメッセージの違いのようなもの。時間がかかると思っても すぐ返ってくる感覚が fetch にはあります。

---