JavaScriptのFetchを使って外部ファイルを読み込む方法

2023-03-21
タグ JavaScript

JavaScriptのFetch APIは、外部ファイルを読み込むために非常に便利な機能です。この記事では、Fetchを使って外部ファイルを読み込む3つのサンプルコードを紹介します。

サンプルコード1: テキストファイルを読み込む

このサンプルコードでは、テキストファイルをFetch APIを使って読み込み、コンソールに表示します。

javascript
fetch('sample.txt') .then(response => response.text()) .then(data => { console.log('テキストファイルの内容:'); console.log(data); }) .catch(error => { console.error('エラー:', error); });

サンプルコード2: JSONファイルを読み込む

このサンプルコードでは、JSONファイルをFetch APIを使って読み込み、オブジェクトとして扱います。

javascript
fetch('data.json') .then(response => response.json()) .then(data => { console.log('JSONファイルの内容:'); console.log(data); }) .catch(error => { console.error('エラー:', error); });

サンプルコード3: 画像ファイルを読み込む

このサンプルコードでは、画像ファイルをFetch APIを使って読み込み、HTMLの<img>タグに表示します。

html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Fetchで画像を読み込むサンプル</title> </head> <body> <img id="loaded-image" alt="読み込まれた画像"> <script> fetch('image.jpg') .then(response => response.blob()) .then(data => { const img = document.getElementById('loaded-image'); img.src = URL.createObjectURL(data); }) .catch(error => { console.error('エラー:', error); }); </script> </body> </html>

これらのサンプルコードを参考に、Fetch APIを使って外部ファイルを読み込む方法を試してみてください。Fetch APIは、非同期通信を扱いやすいプロミスベースのAPIであり、さまざまな種類のファイルを簡単に読み込むことができます。

前のページに戻る