Promiseとその活用法 – JavaScriptで始めるプログラミング

Promiseとその活用法 – JavaScriptで始めるプログラミング

JavaScriptにおける非同期処理の一つであるPromiseについて、その概念や基本的な使い方を紹介します。さらに、Promiseの応用例やメリットについても解説します。

Promiseの基本概念

まず、Promiseとは何かについて説明します。Promiseは、将来の完了または失敗を表すオブジェクトで、非同期処理をよりシンプルに扱うために使われます。

<aside rel="nofollow" target="_blank" title="

MDN Web Docsによると、「プロミス（Promise）は、非同期計算の最終的な成功または失敗、およびその結果値を表すオブジェクト」です。

Promiseの基本的な使い方

Promiseの基本的な使い方を以下の例で示します:

const myPromise = new Promise((resolve, reject) => { const success = true; if (success) { resolve('成功しました'); } else { reject('失敗しました'); } }); myPromise.then((message) => { console.log(message); }).catch((error) => { console.error(error); });

このコードは、成功した場合に「成功しました」と表示し、失敗した場合に「失敗しました」と表示するPromiseの基本形です。

Promiseのメリット

• コードの可読性が向上します。
• 複数の非同期操作を簡単に連携できます。
• エラーハンドリングが強化されます。

Promiseの応用例

さらに、Promiseを使った実際の例をいくつか見てみましょう。

API呼び出しの処理

APIからデータを取得する際、Promiseを使用することで非同期のデータ処理がシンプルになります。

fetch('https://api.example.com/data').then(response => response.json()).then(data => { console.log(data); }).catch(error => { console.error('エラーが発生しました:', error); });

チェイニングによる非同期処理の連結

Promiseを使うと、非同期処理をチェイニングして効率的に連結できます。

function firstAsyncFunction() { return new Promise((resolve) => { setTimeout(() => { resolve('最初の関数完了'); }, 1000); }); } function secondAsyncFunction(message) { return new Promise((resolve) => { setTimeout(() => { resolve(`${message} そして次の関数完了`); }, 1000); }); } firstAsyncFunction().then((result) => { return secondAsyncFunction(result); }).then((finalResult) => { console.log(finalResult); }).catch((error) => { console.error(error); });

複数のPromiseを同時に処理する

Promise.all()を使うと、複数のPromiseを並行して処理できます。

const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'Promise 1完了')); const promise2 = new Promise((resolve) => setTimeout(resolve, 200, 'Promise 2完了')); Promise.all([promise1, promise2]).then((values) => { console.log(values); // ['Promise 1完了', 'Promise 2完了'] }).catch((error) => { console.error(error); });

まとめ

以上、Promiseの基本概念から応用例までを紹介しました。Promiseを活用することで、JavaScriptでの非同期処理がより効率的かつ読みやすくなります。これを機に、より高度な非同期処理に挑戦してみましょう。

Promiseの詳細についてはこちら” aria-label=”

const myPromise = new Promise((resolve, reject) => { const success = true; if (success) { resolve('成功しました'); } else { reject('失敗しました'); } }); myPromise.then((message) => { console.log(message); }).catch((error) => { console.error(error); });

fetch('https://api.example.com/data').then(response => response.json()).then(data => { console.log(data); }).catch(error => { console.error('エラーが発生しました:', error); });

function firstAsyncFunction() { return new Promise((resolve) => { setTimeout(() => { resolve('最初の関数完了'); }, 1000); }); } function secondAsyncFunction(message) { return new Promise((resolve) => { setTimeout(() => { resolve(`${message} そして次の関数完了`); }, 1000); }); } firstAsyncFunction().then((result) => { return secondAsyncFunction(result); }).then((finalResult) => { console.log(finalResult); }).catch((error) => { console.error(error); });

const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'Promise 1完了')); const promise2 = new Promise((resolve) => setTimeout(resolve, 200, 'Promise 2完了')); Promise.all([promise1, promise2]).then((values) => { console.log(values); // ['Promise 1完了', 'Promise 2完了'] }).catch((error) => { console.error(error); });

Promiseの詳細についてはこちら”>

const myPromise = new Promise((resolve, reject) => { const success = true; if (success) { resolve('成功しました'); } else { reject('失敗しました'); } }); myPromise.then((message) => { console.log(message); }).catch((error) => { console.error(error); });

fetch('https://api.example.com/data').then(response => response.json()).then(data => { console.log(data); }).catch(error => { console.error('エラーが発生しました:', error); });

function firstAsyncFunction() { return new Promise((resolve) => { setTimeout(() => { resolve('最初の関数完了'); }, 1000); }); } function secondAsyncFunction(message) { return new Promise((resolve) => { setTimeout(() => { resolve(`${message} そして次の関数完了`); }, 1000); }); } firstAsyncFunction().then((result) => { return secondAsyncFunction(result); }).then((finalResult) => { console.log(finalResult); }).catch((error) => { console.error(error); });

const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'Promise 1完了')); const promise2 = new Promise((resolve) => setTimeout(resolve, 200, 'Promise 2完了')); Promise.all([promise1, promise2]).then((values) => { console.log(values); // ['Promise 1完了', 'Promise 2完了'] }).catch((error) => { console.error(error); });

Promiseの詳細についてはこちら(外部リンク)。