最終更新日:
公開日:
レシピ
Ajax
Fetch APIが使えるか確認する
JavaScriptを実行した環境(ブラウザ)でFetch APIが使用できるか確認する方法について解説します。
この記事のポイント
- Fetch APIが使えるか判断するときはwindowオブジェクトのfetchプロパティを確認する
JavaScriptを実行したブラウザでFetch APIが使えるか確認する
JavaScriptはクライアントサイド(ブラウザ)で使うことが多いですが、ユーザーのブラウザが必ずしも最新版であるとは限りません。
そのため、Fetch APIのような比較的新しい機能はブラウザが対応しているかどうか確認することがあります。
JavaScriptを実行した環境(ブラウザ)でFetch APIが使えるかどうかは、windowオブジェクトにfetchプロパティが宣言されているかで判断することができます。
そのため、以下のようなif文で判定することが可能です。
JS コード例
if( window.fetch ) {
console.log("OK, available.");
// ここにFetch APIの処理を書く
} else {
console.log("Sorry, unavailable.");
// Fetch APIが使えない場合の処理を書く
}
Fetch APIが使える環境ではif文の上側が実行されるため、ここにFetch APIを使ったAjaxの処理などを書きます。
もしIE11のようなFetch APIが使えない環境の場合はfetchプロパティは宣言されていないため「undefined」になります。
そのときは上記の場合else文が実行されるため、ここにFetch APIが使えないときのコードを書きます。
代替え案として、jQueryのajaxメソッドやXMLHttpRequestを使うことでAjaxを実装することも可能です。
なお、XMLHttpRequestオブジェクトを使ったAjaxの実装については別記事「XMLHttpRequestオブジェクトを使ってAjaxを実装する」をご覧ください。
こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。