JavaScriptのFetchを使って外部ファイルを読み込む方法
2023-03-21
タグ
JavaScript
JavaScriptのFetch APIは、外部ファイルを読み込むために非常に便利な機能です。この記事では、Fetchを使って外部ファイルを読み込む3つのサンプルコードを紹介します。
サンプルコード1: テキストファイルを読み込む
このサンプルコードでは、テキストファイルをFetch APIを使って読み込み、コンソールに表示します。
javascriptfetch('sample.txt')
.then(response => response.text())
.then(data => {
console.log('テキストファイルの内容:');
console.log(data);
})
.catch(error => {
console.error('エラー:', error);
});
サンプルコード2: JSONファイルを読み込む
このサンプルコードでは、JSONファイルをFetch APIを使って読み込み、オブジェクトとして扱います。
javascriptfetch('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であり、さまざまな種類のファイルを簡単に読み込むことができます。