JavaScriptの「fetch API」を使うことで、Webサイトやアプリからデータを取得したり、サーバーにデータを送信したりすることができます。
本記事では、「fetch API」の簡単な例を挙げつつ、基本的な使い方について記述します。
例）同じドメインの別ページのデータを取得して表示させる
こちら（https://noveblo.com/reference-page/）にデータ取得先ページを作成しました。
「fetch API」を使って、上記ページに表示されているテキストを取得して表示させてみます。
HTML / JavaScript コード
<div id="display"></div>// 取得したいページのURL
const url = 'https://noveblo.com/reference-page/';
// fetchを使ってページの内容を取得
fetch(url)
.then(response => response.text()) // ページの内容をテキストとして取得
.then(data => {
// DOMParserを使ってHTMLをパース
const parser = new DOMParser();
const doc = parser.parseFromString(data, 'text/html');
// 特定のIDを持つ要素のテキストを取得
const targetText = doc.querySelector('#sample').innerText;
// 取得したテキストを表示
console.log(targetText); // コンソールに表示
document.getElementById('display').innerText = targetText; // ページ上の要素に表示
})
.catch(error => console.error('Error:', error)); // エラーハンドリング
本実装例のように他ページからテキストを取得する場合、取得先ページが同じドメイン内であれば問題ありません。が、異なるドメインの場合はクロスオリジンリソース共有（CORS）ポリシーによってブロックされ、たいていの場合取得できません。
CORSは、ウェブページが異なるオリジンからリソースを安全にリクエストできるようにするためのメカニズムです。
異なるドメインからのリクエストが許可されるためには、サーバー側で適切なCORSヘッダーを設定する必要があります。
fetch API の基本的な使い方
fetch関数の呼び出し
fetch('https://xxx.com')fetch関数は、データ取得先のURLを引数に取って呼び出します。
レスポンスオブジェクトを処理
fetch関数はPromiseを返すので、.then()メソッドを使ってその後の処理を行います。
.then(response => {
// レスポンスのステータスが成功しているかチェック（任意）
if (!response.ok) {
// ステータスコードが200番台でない場合はエラーとして扱う
throw new Error('Network response was not ok');
}
// レスポンスボディをテキスト形式で返す
return response.text();
})サーバーからのレスポンスが返されると、response オブジェクト（HTTPレスポンス全体を表す）を受け取ります。レスポンスのステータスが成功していた場合、レスポンスボディをテキスト形式で取得します。
レスポンスボディのテキストデータを処理
.then(data => {
// ここで必要な処理を行う
})response.text() が成功すると、その結果が次の then ブロックに渡され、data として利用可能になります。
エラーハンドリング
.catch(error => {
console.error('Fetch error:', error);
});
リクエストやレスポンスの処理中にエラーが発生した場合、そのエラーをキャッチしてコンソールにエラーメッセージを出力します。
DOMParser を使うと、HTMLのテキストデータをDOM形式に変換できる
DOMParser を使用することで、response.text();で取得したHTMLテキストデータをDOMとして操作できるようにします。以下にその基本的な使用方法を示します。
DOMParser オブジェクトの作成
const parser = new DOMParser();HTMLテキストデータの解析
const htmlString = '<div class="customize"><p id="sample">Hello World</p></div>';
const doc = parser.parseFromString(htmlString, 'text/html');パースされた DOM の操作
const paragraph = doc.getElementById('sample');
console.log(paragraph.textContent); // "Hello World"