JavaScriptのFetch APIは、Webブラウザー内でHTTPリクエストを送信してレスポンスを取得するためのAPIです。Fetch APIを使用すると、Webアプリケーションはサーバーと通信し、データを受信したり送信したりできます。
Fetch APIは、XMLHttpRequest（XHR）と同様の機能を提供しますが、より簡潔で直感的です。また、Fetch APIはPromiseを使用して非同期処理を扱うため、コールバックベースのXHRよりもコードが読みやすくなります。
fetch()メソッドの使い方
fetch()メソッドは、Fetch APIの主要なメソッドです。fetch()メソッドは、引数にURLを受け取り、HTTPリクエストを送信し、レスポンスを取得するPromiseを返します。HTTPリクエストの詳細をカスタマイズするためのオプション引数も受け取ることができます。
以下は、fetch()メソッドを使用してデータを取得する例です。
fetch('https://engineering.webstudio168.jp/fetch_test.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));この例では、fetch()メソッドを使用して、https://engineering.webstudio168.jp/fetch_test.jsonからJSONデータを取得しています。then()メソッドを使用して、レスポンスのJSONデータを解析し、結果をコンソールに表示しています。catch()メソッドを使用して、エラーが発生した場合にエラーメッセージをコンソールに表示しています。
実際に実装した時の挙動
次のサンプルを実際に実装してみます。
<div id="getJson"></div>
<script>
const _target = document.getElementById('getJson');
fetch('https://engineering.webstudio168.jp/fetch_test.json')
.then(response => {
return response.text();
})
.then(data => {
// テキストデータを処理する
_target.innerText = data;
})
.catch(error => {
// エラーを処理する
});
</script>
<style>
#getJson {
background: #666;
color: #FFF;
padding: 0.5em;
}
</style>以下のブロックが実際にデータを取得してテキスト表示したものです。
上記の例では、text()メソッドを使用して、レスポンスのテキストデータを取得しています。その後、テキストデータをid="getJson"の<div>に表示しています。
ボタンを押した際にJSONデータを取得してテキスト表示する場合は下記のようになります。
<button id="fetch-button">データを取得</button>
<div id="getJsonByButton"></div>
<script>
const fetchButton = document.getElementById('fetch-button');
fetchButton.addEventListener('click', fetchData);
function fetchData() {
fetch('https://engineering.webstudio168.jp/fetch_test.json')
.then(response => {
return response.text();
})
.then(data => {
console.log(data);
// JSONデータを使って何かしらの処理を実行する
document.getElementById('getJsonByButton').innerText = data;
})
.catch(error => console.error(error));
}
</script>fetch()メソッドを利用する際はaddEventListener()と併用するのが良いでしょう。
Fetch APIは、Webアプリケーションの通信を簡単かつ直感的に行うための強力なツールです。しかし、ブラウザー依存の機能を使用しているため、古いブラウザーではサポートされない場合があります。Fetch APIを使用する場合には、ブラウザーの互換性に注意してください。
Fetch APIの対応ブラウザ
Fetch APIは、比較的新しいWeb APIの一つであり、次のような主要なWebブラウザーでサポートされています。
- Google Chrome
- Firefox
- Safari
- Edge
- Opera
Internet Explorer（IE）ではFetch APIがサポートされていません。そのため、IEに対応する場合には、代替としてXMLHttpRequest（XHR）を使用する必要があります。
詳しい対応状況はhttps://caniuse.com/?search=fetch%20APIを参考にしてみてください。
また、Fetch APIがサポートされているWebブラウザーでも、fetch APIの使用には注意が必要です。Fetch APIは、同一オリジンポリシーに従うため、異なるオリジンからのリクエストを送信する場合には、CORS（Cross-Origin Resource Sharing）の設定が必要です。CORSは、WebサイトやWebアプリケーションのセキュリティを強化するための仕組みであり、設定が不十分な場合には、セキュリティ上のリスクが生じる可能性があります。
