#035 フロントサイド（2）：非同期通信
JavaScriptの非同期通信について
非同期通信とは、ページを再読み込みせずにサーバーからデータを取得したり、サーバーにデータを送信したりする技術のことです。これにより、ユーザーがウェブページを使いやすくすることができます。
JavaScriptで非同期通信を行うには、主に以下の方法があります：
XMLHttpRequest: 古くから使われている方法。
Fetch API: より新しく、使いやすい方法。
Async/Await: 非同期処理をわかりやすく書ける方法。
今回は、Fetch APIとAsync/Awaitを使って説明します。
Fetch APIとは？
Fetch APIは、ウェブブラウザがサーバーと非同期通信するための新しい方法です。簡単に言うと、ウェブページがサーバーからデータを取りに行くための手段です。これを使うと、ページを再読み込みせずにサーバーからデータを取得できます。
使い方の基本例
fetch('https://api.example.com/data') // サーバーからデータを取得
.then(response => response.json()) // レスポンスをJSONに変換
.then(data => console.log(data)) // データを表示
.catch(error => console.error('Error:', error)); // エラー処理
Async/Awaitとは？
Async/Awaitは、非同期処理をわかりやすく書くための方法です。通常、非同期処理はthenやcatchを使いますが、これだとコードが読みづらくなることがあります。Async/Awaitを使うと、まるで同期処理（順番に処理すること）のように書けるので、コードがシンプルになります。
Asyncは、コードを待たずにすぐ次の処理を始める方法です。
Awaitは、非同期処理が終わるのを待つための方法です。
使い方の基本例
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data'); // データを取得
const data = await response.json(); // JSONに変換
console.log(data); // データを表示
} catch (error) {
console.error('Error:', error); // エラー処理
}
};
fetchData(); // 関数を呼び出して実行
まとめ
Fetch API: 非同期通信を簡単にするための新しい方法。
Async/Await: 非同期処理を同期処理のようにわかりやすく書くための方法。
これらを使うことで、コードが読みやすくなり、非同期通信を簡単に実装できます。
以下にサンプルコードを記述します。
サンプルコードの説明
このコードは、ボタンをクリックするとランダムな犬の画像を表示するウェブページです。以下のステップで動作します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ランダムな犬の画像</title>
<style>
/* 画像コンテナのスタイル */
#imageContainer {
width: 400px;
height: 400px;
border: 1px solid #ccc;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* 画像のスタイル */
#dogImage {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<h1>ランダムな犬の画像を表示します</h1>
<!-- ボタンをクリックすると getDogImage 関数が呼び出されます -->
<button onclick="getDogImage()">新しい犬の画像を取得</button>
<!-- 画像を表示するためのコンテナ -->
<div id="imageContainer">
<img id="dogImage" src="" alt="犬の画像">
</div>
<script>
// 犬の画像を取得して表示する関数
const getDogImage = async () => {
// Dog API の URL
const url = 'https://dog.ceo/api/breeds/image/random'
try {
// fetch を使って API からデータを取得します
const response = await fetch(url)
// レスポンスが正常でない場合はエラーを投げます
if (!response.ok) {
throw new Error('ネットワークエラーが発生しました')
}
// レスポンスを JSON 形式に変換します
const data = await response.json()
// 画像の URL を取得します
const imageUrl = data.message
// img 要素を取得し、src 属性に画像の URL をセットします
const imgElement = document.getElementById('dogImage')
imgElement.src = imageUrl
console.log('新しい犬の画像を表示しました')
} catch (error) {
// エラーが発生した場合はコンソールに表示します
console.error('エラーが発生しました:', error.message)
}
}
// ページ読み込み時に最初の画像を表示します
getDogImage()
</script>
</body>
</html>
重要なポイント
HTML構造: ボタンと画像を表示するための基本的なHTML構造です。
<button>: ボタンをクリックするとgetDogImage関数が呼び出されます。
<div id="imageContainer">: 画像を表示するためのコンテナです。
<img id="dogImage">: 犬の画像を表示する要素です。
CSSスタイル: 画像の表示スタイルを設定しています。
#imageContainer: 画像コンテナのスタイル（サイズ、枠、配置など）。
#dogImage: 画像のスタイル（最大幅・高さ、配置方法）。
JavaScript:
非同期関数getDogImage:
asyncとawaitを使用して非同期通信を行います。
fetch関数を使ってDog APIからデータを取得します。
データが正常に取得できた場合、画像のURLを抽出し、img要素のsrc属性にセットします。
エラーハンドリングを行い、エラーが発生した場合はコンソールにメッセージを表示します。
初期表示:
ページが読み込まれたときに最初の犬の画像を表示するため、getDogImage関数を呼び出します。
まとめ
このコードは、JavaScriptの非同期通信の基本的な使い方を示すシンプルな例です。Fetch APIとAsync/Awaitを使うことで、コードをわかりやすく書くことができ、エラーハンドリングも容易になります。ボタンをクリックすると新しい犬の画像が表示される仕組みを理解することで、非同期通信の基本を学ぶことができます。
終わりに
少し長くなったので、ここで一旦お話をクローズさせて頂きます。
自分自身の学習記録帳のため、乱雑な文章になっている可能性があります。
申し訳ございません。
最後までお読みいただき、ありがとうございます。
私も皆さんのnoteを拝見させて頂いて、多くの気づきを得ています。
本当に感謝🙏です。
今後ともよろしくお願いします。