【JavaScript】fetch API & DOMparser

JavaScriptの「fetch API」を使うことで、Webサイトやアプリからデータを取得したり、サーバーにデータを送信したりすることができます。
本記事では、「fetch API」の簡単な例を挙げつつ、基本的な使い方について記述します。

目次

例)同じドメインの別ページのデータを取得して表示させる

こちら(https://noveblo.com/javascript-fetch-data/)にデータ取得先ページを作成しました。
「fetch API」を使って、上記ページに表示されているテキストを取得して表示させてみます。

HTML / JavaScript コード
<div id="display"></div>
// 取得したいページのURL
const url = 'https://noveblo.com/javascript-fetch-data/';

// 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 の基本的な使い方

STEP

fetch関数の呼び出し

fetch('https://xxx.com')

fetch関数は、データ取得先のURLを引数に取って呼び出します。

STEP

レスポンスオブジェクトを処理

fetch関数はPromiseを返すので、.then()メソッドを使ってその後の処理を行います。

Promiseは非同期処理を扱うためのオブジェクトで、処理が成功すれば.then()メソッドが呼ばれ、成功した結果を使って処理を行います。また処理が失敗した場合には.catch()メソッドが呼ばれ、エラーハンドリングを行います。
Promiseについては別の機会に詳しく勉強します。

.then(response => {
  // レスポンスのステータスが成功しているかチェック(任意)
  if (!response.ok) {
    // ステータスコードが200番台でない場合はエラーとして扱う
    throw new Error('Network response was not ok');
  }
  // レスポンスボディをテキスト形式で返す
  return response.text();
})

サーバーからのレスポンスが返されると、response オブジェクト(HTTPレスポンス全体を表す)を受け取ります。レスポンスのステータスが成功していた場合、レスポンスボディをテキスト形式で取得します。

テキストデータを取得する場合はresponse.text()、JSONデータを取得する場合はresponse.json()など、レスポンスの内容に応じて適切なメソッドを選びます。

STEP

レスポンスボディのテキストデータを処理

.then(data => {
  // ここで必要な処理を行う
})

response.text() が成功すると、その結果が次の then ブロックに渡され、data として利用可能になります。

STEP

エラーハンドリング

.catch(error => {
  console.error('Fetch error:', error);
});

リクエストやレスポンスの処理中にエラーが発生した場合、そのエラーをキャッチしてコンソールにエラーメッセージを出力します。

DOMParser を使うと、HTMLのテキストデータをDOM形式に変換できる

DOMParser を使用することで、response.text();で取得したHTMLテキストデータをDOMとして操作できるようにします。以下にその基本的な使用方法を示します。

STEP

DOMParser オブジェクトの作成

const parser = new DOMParser();
STEP

HTMLテキストデータの解析

const htmlString = '<div class="customize"><p id="sample">Hello World</p></div>';
const doc = parser.parseFromString(htmlString, 'text/html');
STEP

パースされた DOM の操作

const paragraph = doc.getElementById('sample');
console.log(paragraph.textContent); // "Hello World"
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次