jQueryのAjax（非同期通信）とJSでの書き換え（Fetch API）について解説！

お気に入り登録する

  • マンツーマンの個別講義開催中！

    勉強に行き詰まっていませんか？
    エラーの解消から、実装方法まで丁寧に教えます！
    講師が答えられるなら、基本的にどんな内容でもOK！

    詳細はこちら！

  • スクール形式の講義も！

    プロを目指す方・講義を何回も受けられる方はこちら
    個別のカリキュラムを作成し、長期的にサポート！

    詳細はこちら！
JSのfecth APIについてはこちら
https://www.youtube.com/watch?v=pzIxzegWVu8&t=537s

JSONの解説についてはこちら
https://factory-programming-mv.com/video/
/

今回は、jQueryのAjaxの基本的な使い方と、それを純粋なJavaScriptでの実装方法について解説します。
Ajax（エイジャックス、Asynchronous JavaScript and XML）は、Webページの一部のみを更新するための技術です。

・jQuery Ajaxの基本
jQueryを使って、HTML、JavaScript、JSONファイルなどの外部ファイルを読み込む際にAjaxを使用する。
書き方：$.ajax(パラメータ)
読み込み先のURL(URLやファイル名)を指定します。
読み込み成功時の処理(例: コンソールにデータを出力)や、読み込み失敗時の処理を指定できます。
使用する際は、Webサーバーを立ち上げて確認する必要があります。ライブサーバーのようなツールを使用すると便利です。

・純粋なJavaScriptでのAjax
通常のJavaScriptで外部ファイルを読み込む場合、Fetch API(フェッチAPI)を使用します。
書き方：fetch(読み込み先のURL).then(処理).catch(エラー処理)
先に読み込みたいファイルやURLを指定します。
読み込みが成功した場合の処理(例: JSONデータをコンソールに出力)や、エラーが発生した場合の処理を指定できます。

この二つの方法には微妙な違いがありますが、目的に応じて選択することができます。両方ともに、ファイル名やURLが正しくない場合、エラー(404エラー)が発生することも確認できます。

初心者の方々にもわかりやすいように、具体的なコードの書き方やポイントを解説しました。これを基に、Ajaxの利用をマスターしていただければと思います。

関連する動画リスト

もっとみる