JavaScriptにおけるFetch/XMLHttpRequest

Articles

この記事ではJavaScriptにおけるFetch/XMLHttpRequestについて説明します。

YouTube Video

javascript-html-fetch-xhr.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args.map(String).join(' ');
119                output.appendChild(message);
120            };
121
122            // Override console.error
123            const originalError = console.error;
124            console.error = function (...args) {
125                originalError.apply(console, args);
126                const message = document.createElement('div');
127                message.textContent = args.map(String).join(' ');
128                message.style.color = 'red'; // Color error messages red
129                output.appendChild(message);
130            };
131        })();
132
133        document.getElementById('executeBtn').addEventListener('click', () => {
134            // Prevent multiple loads
135            if (document.getElementById('externalScript')) return;
136
137            const script = document.createElement('script');
138            script.src = 'javascript-html-fetch-xhr.js';
139            script.id = 'externalScript';
140            //script.onload = () => console.log('javascript-html-fetch-xhr.js loaded and executed.');
141            //script.onerror = () => console.log('Failed to load javascript-html-fetch-xhr.js.');
142            document.body.appendChild(script);
143        });
144    </script>
145</body>
146</html>

JavaScriptにおけるFetch/XMLHttpRequest

JavaScriptにおけるFetchとXMLHttpRequest（XHR）は、どちらもHTTPリクエストを送信し、サーバーからデータを取得するために使われます。

`Fetch API`

Fetch APIは、XHRの後継として設計されたモダンなHTTPリクエスト処理の方法です。Promiseをベースにした非同期APIで、よりシンプルで柔軟な方法でリクエストを行うことができます。

使い方

 1fetch('http://127.0.0.1:3000/example.json')
 2    .then((response) => {
 3        if (!response.ok) {
 4            throw new Error('HTTP error: ' + response.status);
 5        }
 6        return response.json();  // Parse the response as JSON
 7    })
 8    .then((data) => {
 9        console.log(data);  // Use the fetched data
10        console.log(JSON.stringify(data));
11    })
12    .catch((error) => {
13        console.error('An error occurred:', error);  // Error handling
14    });

このコードは、Fetch APIによって、指定したURLにGETリクエストを送り、取得したレスポンスをJSONとして処理し、結果を表示またはエラーを出力します。

特徴

Fetch APIには次のような特徴があります。

Promiseベース 非同期操作をPromiseで管理できるため、コードが簡潔で読みやすくなります。
エラーハンドリングが簡単 catchブロックを使って簡単にエラーを処理できます。
response.json()などのメソッドでパース レスポンスデータはJSON形式やテキスト形式で簡単に処理可能です。
CORSに対応 Fetchはクロスオリジンリソースシェアリング（CORS）のルールに基づいて動作します。
柔軟なリクエスト構成 GET/POSTだけでなく、PUTやDELETEなどのHTTPメソッドも簡単に設定できます。

例: POSTリクエスト

 1fetch('http://127.0.0.1:3000/example.json', {
 2        method: 'POST',
 3        headers: {
 4            'Content-Type': 'application/json'
 5        },
 6        body: JSON.stringify({ name: 'Alice', age: 25 })  // Send the request body as JSON
 7    })
 8    .then(response => response.json())
 9    .then(data => console.log(JSON.stringify(data)))
10    .catch(error => console.error('Error:', error));

このコードは、JSON形式のデータを含むPOSTリクエストを送信し、サーバーからのレスポンスをJSONとして取得して表示します。

デメリット

Fetch APIには次のようなデメリットがあります。

ブラウザ互換性 古いブラウザ（特にIE11など）ではFetch APIがサポートされていません。
細かい制御が難しい XHRに比べて、進捗イベントの処理などの低レベルな制御には向いていません。

`XMLHttpRequest`（XHR）

XMLHttpRequestは、古くからあるHTTPリクエストを扱うためのAPIで、AJAX（Asynchronous JavaScript and XML）のベースとして広く使われてきました。非同期通信を可能にし、ページ全体を再読み込みせずにサーバーからデータを取得することができます。

使い方

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'http://127.0.0.1:3000/example.json', true);
 3xhr.onreadystatechange = function() {
 4    if (xhr.readyState === 4 && xhr.status === 200) {
 5        const data = JSON.parse(xhr.responseText);  // Parse the response as JSON
 6        console.log(data);  // Use the data
 7        console.log(JSON.stringify(data));
 8    }
 9};
10xhr.send();  // Send the request

このコードは、XMLHttpRequestを使ってGETリクエストを送り、取得したJSONレスポンスをパースして表示します。

特徴

XMLHttpRequestには次のような特徴があります。

コールバックベース onreadystatechangeなどのコールバック関数を使って、リクエストの完了や進捗を監視します。
ステータスコードと準備状態の監視 xhr.readyStateやxhr.statusを使ってリクエストの状態をチェックします。
幅広い互換性 古いブラウザでも動作します。
リクエストの進捗を監視 xhr.upload.onprogressなどのイベントを使って進捗をモニタリングできます。

例: POSTリクエスト

 1const xhr = new XMLHttpRequest();
 2xhr.open('POST', 'http://127.0.0.1:3000/example.json', true);
 3xhr.setRequestHeader('Content-Type', 'application/json');
 4xhr.onreadystatechange = function() {
 5    if (xhr.readyState === 4 && xhr.status === 200) {
 6        const data = JSON.parse(xhr.responseText);
 7        console.log(data);
 8        console.log(JSON.stringify(data));
 9    }
10};
11xhr.send(JSON.stringify({ name: 'Alice', age: 25 }));  // Send the data

このコードは、XMLHttpRequestを使ってJSON形式のデータをPOSTリクエストで送信し、レスポンスを受け取って表示します。

デメリット

XMLHttpRequestには次のようなデメリットがあります。

コードが複雑 コールバック関数での非同期処理管理は複雑になりがちです。
Promise非対応 標準ではPromiseを使えないため、非同期処理がやや冗長になります。

`Fetch API`と`XMLHttpRequest`の比較

機能	`Fetch API`	`XMLHttpRequest` (XHR)
非同期処理	Promiseベースでシンプル	コールバック関数が必要
エラーハンドリング	`.catch()`で一元管理可能	状態（`readyState`）をチェック
進捗イベント	サポートされていない	`onprogress`で対応
クロスオリジン対応	自動的にCORSをサポート	CORSに対応
ブラウザサポート	IE11以降で未対応	古いブラウザにも対応
操作の細かさ	シンプルで直感的	細かい制御が可能

まとめ

Fetch APIは、Promiseベースでシンプルかつ柔軟なHTTPリクエストを提供し、現代的なブラウザでは推奨されています。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。ぜひYouTubeチャンネルもご覧ください。

YouTube Video

JavaScriptにおけるイベント処理

JavaScriptにおけるFetch/XMLHttpRequest

YouTube Video

JavaScriptにおけるFetch/XMLHttpRequest

Fetch API

使い方

特徴

例: POSTリクエスト

デメリット

XMLHttpRequest（XHR）

使い方

特徴

例: POSTリクエスト

デメリット

Fetch APIとXMLHttpRequestの比較

まとめ

YouTube Video

`Fetch API`

`XMLHttpRequest`（XHR）

`Fetch API`と`XMLHttpRequest`の比較