タイトル: 初心者でもわかる！Promise.race で「一番速い」非同期処理の結果を受け取る方法
こんにちは！フロントエンドの世界へようこそ！今日は、JavaScript の非同期処理を扱う上でとっても便利な `Promise.race` について、初心者の方にも分かりやすく解説していきますね。
Promise.race って何？
`Promise.race` は、複数の非同期処理（Promise）を同時に実行し、最初に完了した Promise の結果を返す という機能を持っています。まるで、かけっこで一番早くゴールした子のタイムを記録するようなイメージです。
なぜ Promise.race が便利なの？
非同期処理は、ネットワーク通信やファイルの読み込みなど、完了までに時間がかかる処理をバックグラウンドで行うために使われます。しかし、複数の処理を同時に走らせたい場合、どの処理が一番早く終わるかなんて分かりませんよね。
例えば、
- ユーザーに表示する情報を、複数のAPIから取得しようとしている
- 画像ファイルをいくつか読み込んで、一番早く読み込めたものを使いたい
- タイムアウト処理を実装したい（一定時間内に処理が終わらなかったら、別の処理を行う）
こんな時に `Promise.race` が大活躍します！「一番早く結果が返ってきたら、それを使おう！」とか、「もしタイムアウトしたら、エラーメッセージを表示しよう！」といった、効率的な処理の分岐が可能になります。
具体的な例を見てみよう！
ここでは、2つの非同期処理を `Promise.race` で使ってみましょう。
function delay(ms, message) {
return new Promise((resolve) => {
setTimeout(() => {
console.log(`[${ms}ms] ${message} が完了しました！`);
resolve(message); // 処理が完了したら、そのメッセージを返す
}, ms);
});
}
const promise1 = delay(1000, “Promise 1”); // 1秒後に完了
const promise2 = delay(500, “Promise 2”); // 0.5秒後に完了
Promise.race([promise1, promise2])
.then((result) => {
console.log(“一番早く完了したのは:”, result); // “Promise 2” が表示されるはず
})
.catch((error) => {
console.error(“エラーが発生しました:”, error);
});
このコードでは、`delay` という関数で、指定した時間後にメッセージを返す Promise を作成しています。`promise1` は1秒、`promise2` は0.5秒で完了するように設定しました。
`Promise.race([promise1, promise2])` とすることで、この2つの Promise が同時に実行されます。そして、0.5秒後に完了する `promise2` の結果 (`”Promise 2″`) が、一番早く `then` の部分に渡ってくるのです。
コンソールには、以下のように表示されるはずです。
[500ms] Promise 2 が完了しました！
一番早く完了したのは: Promise 2
`promise1` も最終的には完了しますが、`Promise.race` は最初に完了した結果だけを返すので、`then` の中では `promise2` の結果だけが受け取られます。
タイムアウト処理への応用
`Promise.race` は、タイムアウト処理にもよく使われます。例えば、API からデータを取得する際に、一定時間内にレスポンスがなければ「タイムアウトしました」と表示したい場合などです。
function fetchData() {
return new Promise((resolve, reject) => {
// 実際にはAPIからのデータ取得処理が入ります
setTimeout(() => {
resolve(“データの取得に成功しました！”);
}, 2000); // 2秒かかる処理と仮定
});
}
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error(“タイムアウトしました！”)); // タイムアウトしたらエラーを返す
}, 1000); // 1秒でタイムアウト
});
}
Promise.race([fetchData(), timeout(1000)])
.then((result) => {
console.log(“結果:”, result);
})
.catch((error) => {
console.error(“エラー:”, error.message); // “タイムアウトしました！” が表示される
});
この例では、`fetchData` が2秒、`timeout` が1秒で完了するように設定しています。`Promise.race` を使うと、1秒後に `timeout` の Promise が `reject` されるため、`catch` の部分で「タイムアウトしました！」というエラーメッセージを受け取ることができます。
まとめ
`Promise.race` を使うことで、複数の非同期処理の中で 一番早く完了した処理の結果を効率的に取得 できます。これは、ユーザー体験の向上や、処理のタイムアウトといった、実用的な場面で非常に役立ちます。
ぜひ、あなたのコードでも `Promise.race` を活用して、よりスマートな非同期処理を実装してみてくださいね！