Ajax / Fetch
あじゃっくす・ふぇっち
Ajax / Fetch
一言でいうと
ページを再読み込みせずにJavaScriptで非同期にサーバー通信する技術のこと。
詳しい意味
Ajax（Asynchronous JavaScript and XML）は、Webページを再読み込みせずに、JavaScript から非同期でサーバーに通信する技術の総称です。Gmail（2004年）が衝撃的な体験をもたらし、SPA時代の幕開けとなりました。古くは XMLHttpRequest（XHR）API で実装していましたが、現代は Fetch API がスタンダード。`fetch('/api/users').then(r => r.json())` のようにシンプルに書けます。さらに上位に axios / SWR / TanStack Query などのライブラリ・フックが乗り、キャッシュ・再試行・状態管理を抽象化。Ajax 時代を経て、もはや「ページ再読み込みのない Web アプリ」は当たり前の体験になりました。
何に使うか
フォーム送信時にページ全体を再読み込みしない実装。検索の入力候補表示。インクリメンタルなコンテンツ取得。
どんな時に出るか
「Ajax で取りに行く」「fetch で API 叩く」「axios と SWR」といった場面で登場します。
具体例
- 検索フォームの入力候補は fetch で API を叩いて非同期表示している。
- Ajax 時代の XMLHttpRequest を使い続けるレガシーコードを Fetch API にリファクタリングした。
別名・略称
Ajax(あじゃっくす)fetch(ふぇっち)XMLHttpRequest(えっくすえむえるえいちてぃーてぃーぴーりくえすと)axios(あくしおす)ajax(あじゃっくす)Fetch API(ふぇっちえーぴーあい)
初心者向けメモ
宅配の「再配達依頼」のような感覚です。お店全体を訪問せず、必要な品物（データ）だけ宅配で取り寄せる。Webページも同じで、ページ全体を再読み込みせず、必要なデータだけ JavaScript で取りに行くのが Ajax / Fetch です。