jQuery Academy · レッスン

AJAXのエラーと成功の処理

.fail()と.always()のコールバックで堅牢なエラー処理機構を実装し、.done()で正常に取得したデータを処理して、回復力の高いアプリケーションを構築します。

「AJAXのエラーと成功の処理」はCoddyKit上の無料jQuery Academyレッスンです。これはレッスン2/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全3レッスンが含まれています。

非同期処理の結果を扱う

AJAXリクエストを送信すると、それは非同期処理になります。つまり、コードはサーバーからの応答を待たずに、ほかの処理を続行します。

サーバーからの応答（または応答がない場合）を処理するために、jQueryにはコールバックと呼ばれる専用のメソッドが用意されています。これらの関数は、成功や失敗など、特定のイベントが発生した場合にのみ実行されます。

すべてがうまくいった場合

.done()コールバックは、AJAXリクエストが成功したときの処理に使う基本的なメソッドです。サーバーが成功を示すステータスコード（通常は200～299）を返したときに実行されます。

サーバーから返されたデータを受け取ります。
取得した最新情報でUIを更新するのに最適です。

成功したデータを表示する

データを取得し、リクエストが成功したときに表示してみましょう。.done()が$.ajax()の呼び出しにチェーンされている点に注目してください。

$(document).ready(function() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1",
    method: "GET"
  })
  .done(function(data) {
    console.log("Success! Data received:");
    console.log(data.title); // Access a property
    $('body').append('<p>Post Title: ' + data.title + '</p>');
  });
});

問題が発生した場合

では、サーバーがリクエストに応えられない場合はどうでしょうか。そのときに使うのが.fail()コールバックです。404（Not Found）や500（Server Error）など、AJAXリクエストでエラーが発生したときに実行されます。

ユーザーへの通知や問題のログ記録に役立ちます。
エラーの詳細を受け取ります。

失敗に対応する

存在しないURLからデータを取得してみましょう。.fail()コールバックがエラーを受け取り、その詳細をログに記録します。

$(document).ready(function() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/nonexistent", // This URL will fail
    method: "GET"
  })
  .done(function(data) {
    console.log("This won't run on error.");
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.log("Error! Status: " + textStatus);
    console.log("HTTP Error: " + errorThrown);
    $('body').append('<p>Error fetching data!</p>');
    $('body').append('<p>Status: ' + textStatus + '</p>');
  });
});

エラーパラメーターを読み解く

.fail()コールバックは、何が問題だったのかを理解するために役立つ3つのパラメーターを提供します。

jqXHR：低レベルの詳細情報を提供するjQuery XMLHttpRequestオブジェクトです。
textStatus：エラーの種類を示す文字列です（例："timeout"、"error"、"abort"）。
errorThrown：HTTPステータスのテキストです（例：404の場合は"Not Found"）。

これらを使って、ユーザーに具体的なフィードバックを提供しましょう。

何が起きても必ず実行する

AJAXリクエストが成功したか失敗したかにかかわらず、処理を実行したい場合があります。その役割を担うのが.always()コールバックです。

どちらか一方の.done()または.fail()の後に必ず実行されます。
読み込み中のスピナーを隠したり、ボタンを再び有効にしたりするなど、後処理に適しています。

後処理を実行する

先ほどの例に.always()を追加してみましょう。読み込み中の状態を再現し、リクエストが成功しても失敗しても、その状態を解除できるようにします。

$(document).ready(function() {
  $('body').append('<p id="status">Loading data...</p>'); // Simulate loading
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1", // Try changing to 'nonexistent' to see fail+always
    method: "GET"
  })
  .done(function(data) {
    console.log("Success! Data: " + data.title);
    $('#status').text('Data loaded successfully!');
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.log("Failed! " + textStatus);
    $('#status').text('Failed to load data!');
  })
  .always(function() {
    console.log("Request finished (success or failure).");
    // This could be where you hide a spinner or re-enable a button
    $('#status').append(' (Finished)');
  });
});

コールバックを整理する

jQueryのAJAXメソッドはPromise風のオブジェクトを返すため、.done()、.fail()、.always()の各メソッドを直接チェーンできます。

このチェーンによってコードがすっきりして読みやすくなり、成功時、エラー時、最後に行う処理のブロックを明確に分けられます。

理解度を確認する

次のjQuery AJAXリクエストについて考えてみましょう。


$.ajax({
  url: "/api/data",
  method: "GET"
})
.done(function() {
  console.log("A");
})
.fail(function() {
  console.log("B");
})
.always(function() {
  console.log("C");
});

サーバーが404 Not Foundエラーを返した場合、コンソールには何が出力されますか？

AJAX処理のまとめ

堅牢なAJAX処理に欠かせないコールバックを習得しました。

.done()：成功した応答を処理します。
.fail()：エラーを処理します。
.always()：結果にかかわらず実行する処理に使います。

これらを使うことで、想定どおりに進まない場合でもネットワーク通信を適切に処理し、ユーザーによりよい体験を提供できます。

よくある質問

「AJAXのエラーと成功の処理」レッスンは無料ですか？

はい。「AJAXのエラーと成功の処理」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。

「AJAXのエラーと成功の処理」で何を学びますか？

.fail()と.always()のコールバックで堅牢なエラー処理機構を実装し、.done()で正常に取得したデータを処理して、回復力の高いアプリケーションを構築します。ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/3です。

「AJAXのエラーと成功の処理」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← jQuery Academyに戻る