Web Design Leaves

function oneSecMsg(msg) { //1秒経過したらメッセージを表示する関数
  // 開始時刻
  const start = Date.now();
  // 1秒経過するまでループ
  while (true) {
    //現在の時刻と開始時刻の差
    const diff = Date.now() - start;
    if (diff >= 1000) {
      // 1秒経過したらメッセージを表示して終了
      console.log(msg);
      return;
    }
  }
}

console.log('Start');
oneSecMsg('一秒経過');
console.log('End');

//出力結果
Start
一秒経過
End

function loadimage(src) {
  //img 要素を生成
  const img = document.createElement('img');
  //img 要素の src 属性に引数で指定されたパスを設定（非同期的に行われる）
  img.src = src;
  //画像の高さと幅を取得して出力
  console.log(`height:${img.height} / width:${img.width}`);
}

//上記関数を実行
loadimage('images/01.jpg');

//出力結果（高さと幅を取得できていない）
//height:0 / width:0

function loadimage(src) {
  const img = document.createElement('img');
  img.src = src;
  //onload イベントで画像がロードされたらコールバック関数を実行
  img.onload = () => console.log(`height:${img.height} / width:${img.width}`);
}

//上記関数を実行
loadimage('images/01.jpg');

//出力結果（高さと幅を取得できている）
height:1200 / width:1800

function loadimage(src, callback) {
  const img = document.createElement('img');
  img.src = src;
  img.onload = () => callback(img);
}

//第2引数にコールバック関数を指定して関数を実行
loadimage('images/01.jpg', function(img) {
  console.log(`height:${img.height} / width:${img.width}`);
});

//コールバック関数をアロー関数で記述した場合の実行例
loadimage('images/01.jpg', (img) => {
  console.log(`height:${img.height} / width:${img.width}`);
});

// この場合は引数の括弧やブロックは省略できるので以下のようにも記述できます
loadimage('images/01.jpg', img => console.log(`height:${img.height} / width:${img.width}`));

function loadimage(src, callback) {
  const img = document.createElement('img');
  img.src = src;
  img.onload = () => callback(img);
}

//コールバック関数を別途定義
function logSizes(img) {
  console.log(`height:${img.height} / width:${img.width}`);
}

//第2引数にコールバック関数を指定して関数を実行
loadimage('images/01.jpg',logSizes);

(resolve, reject) => { /* 何らかの非同期処理 */ }
// または
function (resolve, reject) { /* 何らかの非同期処理 */ }

function loadimage(src) {
  //Promise オブジェクトを生成し返す
  return new Promise((resolve, reject) => {
    const img = document.createElement('img');
    img.src = src;
    // 成功した場合：resolve を呼び出して結果（img）を引数に渡す
    img.onload = () => resolve(img);
    // 失敗した場合：reject を呼び出してエラーオブジェクトを引数に渡す
    img.onerror = () => reject(new Error(`Error: Image Not Found "${src}".`));
  });
}

//promise オブジェクトを生成
const promise = loadimage('images/01.jpg');

//then メソッドを使用
promise.then(
  // 非同期処理が成功したときの処理（コールバック）を登録
  (img) => console.log(`height:${img.height} / width:${img.width}`),
  // 非同期処理が失敗したときの処理（コールバック）を登録
  (error) => console.log(error.message)
);

/*** catch メソッドを使う場合 ***/
promise.then(
  // 非同期処理が成功したときの処理（コールバック）を登録
  (img) => console.log(`height:${img.height} / width:${img.width}`)
).catch(
  // 非同期処理が失敗したときの処理（コールバック）を登録
  (error) => console.log(error.message)
); 

function loadimage(src) {
  return new Promise((resolve, reject) => {
    const img = document.createElement('img');
    img.src = src;
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`Error: Image Not Found "${src}".`));
  });
}

//promise オブジェクトを生成して続けて then メソッドを使用
loadimage('images/01.jpg').then(
  (img) => console.log(`height:${img.height} / width:${img.width}`),
  (error) => console.log(error.message)
);

function loadimage(src) {
  return new Promise((resolve, reject) => {
    const img = document.createElement('img');
    img.src = src;
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`Error: Image Not Found "${src}".`));
  });
}

// 失敗した場合のコールバックは catch() に登録する例
loadimage('images/01.jpg').then(
  (img) => console.log(`height:${img.height} / width:${img.width}`)
).catch(
  (error) => console.log(error.message)
);

function loadimage(src) {
  return new Promise(function(resolve, reject) {
    const img = document.createElement('img');
    img.src = src;
    // 成功した場合（画像が正しくロードされた場合）
    img.onload = function() {
      //resolve を呼び出して結果（img）を引数に渡す
      resolve(img);
    };
    // 失敗した場合（画像がロードできなかった場合）
    img.onerror = function() {
      //reject を呼び出してエラーオブジェクトを引数に渡す
      reject( new Error(`Error: Image Not Found "${src}".`) );
    };
  });
}

loadimage('images/01.jpg').then(
  function(img) {
    console.log(`height:${img.height} / width:${img.width}`);
  },
  function(error) {
    console.log(error.message);
  }
);

loadimage('images/01.jpg').then(
  function(img) {
    console.log(`height:${img.height} / width:${img.width}`);
  }
).catch(
  function(error) {
    console.log(error.message);
  }
);

var promise = new Promise(executor)

var promise = new Promise( function( resolve, reject ) {
  // 非同期処理（executor の処理）を記述
});;

//アロー関数での記述（上記と同じこと）
var promise = new Promise( (resolve, reject) => {
  // 非同期処理（executor の内容）を記述
});

var promise = new Promise( (resolve, reject) => {
  // 何らかの非同期処理
  // 処理による結果の値（コールバック関数に渡したい値）：value

  /* 成功した場合 */
  //結果の値を引数に指定して第1引数の resolve を呼び出す
  resolve(value);

  /* 失敗した場合 */
  //エラーオブジェクトを引数に指定して第2引数の reject を呼び出す
  reject(Error オブジェクト);

});

var promise = new Promise((resolve) => {
  // 何らかの非同期処理

  /* 成功した場合のみを扱う */
  //結果の値を引数に指定して第1引数の resolve を呼び出す
  resolve(value);

});

var promise = new Promise((resolve, reject) => {
  // 何らかの非同期処理

  /* 失敗した場合のみを扱う */
  //エラーオブジェクトを引数に指定して第2引数の reject を呼び出す
  reject(Error オブジェクト);

});

const pendingPromise = new Promise((resolve, reject) => {
  // resolve() も reject() を呼び出していないので pending 状態
});
console.log(pendingPromise); // Promise {<pending>}

const fulfilledPromise = new Promise((resolve, reject) => {
  resolve('結果の値'); // resolve() を呼び出しているので fullfilled 状態
});
console.log(fulfilledPromise); // Promise {<fulfilled>: '結果の値'}

const rejectedPromise = new Promise((resolve, reject) => {
  reject(new Error('エラー')); // reject() を呼び出しているので rejected 状態
});
console.log(rejectedPromise); // Promise {<rejected>: Error: エラー}

promise.then(
  function(value) { /* 成功した場合の処理 */ }, //onFulfilled（第1引数）
  function(error) { /* 失敗した場合の処理 */ } //onRejected（第2引数）
);

//アロー関数を使って記述する場合
promise.then(
  (value) => { /* 成功した場合の処理 */ }, //onFulfilled（第1引数）
  (error) => { /* 失敗した場合の処理 */ } //onRejected（第2引数）
);

function random_results(num) {
  //Promise のインスタンスを作成して返す
  return new Promise((resolve, reject) => {
    const rand = Math.floor( Math.random() * 10 );
    setTimeout(() => {
      //成功した場合（乱数と一致した）
      if (rand === num) {
        //resolve() の引数に指定した値は、成功したときのコールバック（24行目）に渡される
        resolve(rand);
      } else { //失敗した場合（乱数と一致しない）
        // エラーオブジェクトを引数に指定
        reject(new Error(`残念でした。値：${rand}`));
      }
    }, 1000 );
  });
}

//random_results() を呼び出して promise オブジェクトを生成
const promise = random_results(4);

//then() メソッドで処理結果（成功・失敗）により実行する処理（コールバック）を登録
promise.then(
  // 非同期処理が成功したときのコールバック onFulfilled（第1引数）
  (result) => console.log(`大当たり！：${result}`),
  // 非同期処理が失敗したときのコールバック onRejected（第2引数）
  (error) => console.log(error.message)
);

/*
実行例
大当たり！：4     //成功時
残念でした。値：8  //失敗時
*/

function random_results(num) {
  return new Promise((resolve, reject) => {
    const rand = Math.floor( Math.random() * 10 );
    setTimeout(() => {
      if (rand === num) {
        resolve(rand);
      } else {
        reject(new Error(`残念でした。値：${rand}`));
      }
    }, 1000 );
  });
}

//random_results() を呼び出して promise オブジェクトを生成して then() を実行
random_results(4).then(
  (result) => console.log(`大当たり！：${result}`),
  (error) => console.log(error.message)
);

function random_results(num) {
  //Promise のインスタンスを作成して返す（処理が成功した場合だけを扱う例）
  return new Promise((resolve) => {
    const rand = Math.floor( Math.random() * 10 );
    setTimeout(() => {
      //成功した場合（乱数と一致した）
      if (rand === num) {
        //以下の引数に指定した値は、成功したときのコールバック（20行目）の引数として渡される
        resolve(rand);
      }
    }, 100 );
  });
}

//random_results() を呼び出して promise オブジェクトを生成
const promise = random_results(4);

//then() メソッドで成功の場合に実行する処理を登録
promise.then(
  // 非同期処理が成功したときのコールバック（第1引数）
  (result) => console.log(`大当たり！：${result}`),
);
  

function random_results(num) {
  //Promise のインスタンスを作成して返す
  return new Promise((resolve, reject) => {
    const rand = Math.floor( Math.random() * 10 );
    setTimeout(() => {
      //失敗した場合（乱数と一致しない）
      if (rand !== num) {
        //引数にはエラーオブジェクトを渡し、失敗したときのコールバック（21行目）に渡される
        reject(new Error(`残念でした。値：${rand}`));
      }
    }, 1000 );
  });
}

//promise オブジェクトを生成
const promise = random_results(4);

//第1引数には undefined を渡すことにより失敗した時のコールバックが呼び出される
promise.then( undefined, //第1引数
  //非同期処理が失敗したときのコールバック（第2引数）
  (error) => console.log(error.message)
);


//以下のように catch メソッドを使っても上記の then(undefined, onRejected) と同じこと
promise.catch(
  //非同期処理が失敗したときのコールバック
  (error) => console.log(error.message)
);

function random_results(num) {
  //Promise のインスタンスを作成して返す
  return new Promise((resolve, reject) => {
    const rand = Math.floor( Math.random() * 10 );

    //コンストラクタ内で発生した例外は自動的に捕捉され reject() を呼び出しエラーが渡されます
    throw new Error("例外発生！");
    // 例外が発生すると以降の処理は実行されません

    setTimeout(() => {
      if (rand === num) {
        resolve(rand);
      } else {
        reject(new Error(`残念でした。値：${rand}`));
      }
    }, 1000 );
  });
}

//promise オブジェクトを生成
const promise = random_results(4);

promise.then(
  // 非同期処理が成功したときのコールバック
  (result) => console.log(`大当たり！：${result}`),
  // 非同期処理が失敗したときのコールバック
  (error) => console.log('失敗のコールバック：' + error.message)
);

/*
実行例
例外発生！
*/

function random_results(num) {
  return new Promise((resolve, reject) => {
    const rand = Math.floor( Math.random() * 10 );

    setTimeout(() => {
      // ここでのエラーは捕捉されない
      throw new Error("例外発生（補足されない！）");
      if (rand === num) {
        resolve(rand);
      } else {
        reject(new Error(`残念でした。値：${rand}`));
      }
    }, 1000 );
  });
}
const promise = random_results(4);
promise.then(
  (result) => console.log(`大当たり！：${result}`),
  (error) => console.log('失敗のコールバック：' + error.message)
);

console.log('Hello!');

/*
実行例
Hello!
Uncaught Error: 例外発生（補足されない！）// 補足できず、エラーになる
*/

function random_results(num) {
  return new Promise((resolve, reject) => {
    const rand = Math.floor( Math.random() * 10 );

    setTimeout(() => {
      // 非同期処理内で try～catch で囲んでエラーを補足
      try {
        // 何らかの処理
        throw new Error('捕捉されるエラー');
      } catch(err) {
        reject(err); // reject を呼び出す
      }
      if (rand === num) {
        resolve(rand);
      } else {
        reject(new Error(`残念でした。値：${rand}`));
      }
    }, 1000 );
  });
}
const promise = random_results(4);
promise.then(
  (result) => console.log(`大当たり！：${result}`),
  (error) => console.log('失敗のコールバック：' + error.message)
);

console.log('Hello!');

/*
実行例
Hello!
失敗のコールバック：捕捉されるエラー
*/

const promise = Promise.resolve(); 

const promise = new Promise((resolve) => {
  resolve();
});

//または、以下でも同じ（引数と式の括弧を省略）
const promise = new Promise(resolve => resolve());

const promise = Promise.resolve('hello');

//上記は以下と同じこと
const promise = new Promise((resolve) => {
  resolve('hello');
});

promise.then( value => console.log(value) );  // hello と出力

//引数に値を渡さずに呼び出すと undefined で実行される Promise が作成されます
const promise = Promise.resolve();
promise.then( value => console.log(value) );  // undefined と出力

const promise = Promise.resolve('hello');

//then メソッドで登録したコールバック関数の呼び出し
promise.then((val) => {
    console.log(val);  // hello
});

//同期的な処理
console.log('こんにちは');

//同期的な処理
console.log('ハロー');

//出力
/*
こんにちは
ハロー
hello
*/

const promise = Promise.reject(new Error('Error!'));

const promise = new Promise((resolve, reject) => {
  reject(new Error('Error!'));
});

//または、以下でも同じ
const promise = new Promise((resolve, reject) => reject(new Error('Error!')));

const promise = Promise.reject(new Error('Error!'));

promise.catch((error) => {
    console.log(error.message); //Error!
});

// then メソッドを使った記述（上記と同じこと）
promise.then( undefined, (error) => {
  console.log(error.message); //Error!
});

//error を使わない例
promise.catch(() => {
    console.log('エラー！');  //エラー！
}); 

//catch メソッドで登録したコールバック関数の呼び出し
Promise.reject(new Error('Error!')).catch((error) => {
    console.log(error.message);  //Error!
});

//同期的な処理
console.log('こんにちは');

//同期的な処理
console.log('ハロー');

//出力
/*
こんにちは
ハロー
Error!
*/

new Promise(function(resolve, reject) {

  setTimeout(() => resolve('hello'), 1000); //1秒で解決される

}).then(function(result) {

  console.log(result); // hello
  return result + ' hello2'; //結果を（処理して）返す

}).then(function(result) {
  //8行目で return された値が result に入っている
  console.log(result); // hello hello2
  return result + ' hello3'; //結果を（処理して）返す

}).then(function(result) {
  //13行目で return された値が result に入っている
  console.log(result); //  hello hello2 hello3

});

/*
出力結果
hello
hello hello2
hello hello2 hello3
*/

function is_random_even() {
  //Promise のインスタンスを作成して返す
  return new Promise((resolve, reject) => {
    const rand = Math.floor( Math.random() * 10 );
    setTimeout(() => {
      //成功した場合（乱数が偶数の場合）
      if (rand%2 === 0) {
        //以下の引数に指定した値（rand）は成功したときのコールバックに result として渡される
        resolve(rand);
      } else { //失敗した場合（乱数が奇数の場合）
        //引数に指定したエラーオブジェクトは失敗したときのコールバックに error として渡される
        reject(new Error(`偶数ではありません。値：${rand}`));
      }
    }, 1000 );
  });
}


//promise オブジェクトを生成
const promise = is_random_even();

promise.then(
  // 非同期処理が成功したときのコールバック
  result => {
    console.log(`1回目の偶数です。：${result}`);
    // Promise を返す
    return is_random_even();
  }
).then(
  // 非同期処理が成功したときのコールバック
  result => {
    console.log(`2回連続の偶数です。：${result}`);
    // Promise を返す
    return is_random_even();
  }
).then(
  // 非同期処理が成功したときのコールバック
  result => {
    console.log(`3回連続の偶数です。：${result}`);
    // Promise を返す
    return is_random_even();
  }
).catch(
  // 非同期処理が失敗したときのコールバック
  (error) => console.log(error.message)
)

/*出力例*/

//最初に奇数が出た場合（最初で失敗した場合）
//catch で登録した失敗時の処理が呼び出され、成功時の処理は実行されない
//偶数ではありません。値：5

//2回目に奇数が出た場合（2回目で失敗した場合）
//成功時の処理が1回呼び出され、失敗時の処理が呼び出される
//1回目の偶数です。：2
//偶数ではありません。値：3

//3回目に奇数が出た場合（3回目で失敗した場合）
//成功時の処理が2回呼び出され、失敗時の処理が呼び出される
//1回目の偶数です。：4
//2回連続の偶数です。：4
//偶数ではありません。値：3

//3回全てが偶数の場合（全て成功 ）
//成功時の処理が3回呼び出され、失敗時の処理は呼び出されない
//1回目の偶数です。：6
//2回連続の偶数です。：4
//3回連続の偶数です。：4

new Promise((resolve, reject)  => {

  setTimeout(() => resolve('hello'), 1000);

}).then((result) => {

  console.log(result);  //hello
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(result + ' hello2'), 1000);
  });

}).then((result) => {

  throw new Error("例外発生！");  //例外を発生させる
  console.log(result);
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(result + ' hello3'), 1000);
  });

}).then((result) => console.log(result)

).catch(
  // 非同期処理が失敗したときのコールバック
  (error) => console.log(error.message)
);

/*
//出力
hello
例外発生！ //console.log(error.message)
*/

const promise = Promise.all(iterable);

const promise = Promise.all( [ promiseInstance, ... ] );

function delayed_action(num, ms) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`${num}つ目の処理（${ms} ミリ秒）`);
    }, ms)
  })
}

const promise1 = delayed_action(1, 2000);
const promise2 = delayed_action(2, 500);
const promise3 = delayed_action(3, 1000);

// Promise.all による新しい Promise インスタンスを作成
const promiseAll = Promise.all([promise1, promise2, promise3]);

// 結果を出力
promiseAll.then(response => console.log(response));

/* 出力（全ての Promise インスタンスの結果をまとめた配列）
["1つ目の処理（2000 ミリ秒）", "2つ目の処理（500 ミリ秒）", "3つ目の処理（1000 ミリ秒）"]
*/

// forEach を使って出力
promiseAll.then(responses => responses.forEach(
  response => console.log(response)
));

/* 出力
1つ目の処理（2000 ミリ秒）
2つ目の処理（500 ミリ秒）
3つ目の処理（1000 ミリ秒）
*/

function delayed_action(num, ms) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`${num}つ目の処理（${ms} ミリ秒）`);
    }, ms)
  })
}

// Promise.all による新しい Promise インスタンスを作成
const promiseAll = Promise.all(
  [
    delayed_action(1, 2000),
    delayed_action(2, 500),
    delayed_action(3, 1000)
  ]
);

// 受け取る引数を分割代入
promiseAll.then(([promise1, promise2, promise3])=> {
    console.log(promise1);
    console.log(promise2);
    console.log(promise3);
  }
);

/*
1つ目の処理（2000 ミリ秒）
2つ目の処理（500 ミリ秒）
3つ目の処理（1000 ミリ秒）
*/

function delayed_action(num, ms, rejected=false) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(rejected) {
        // 第3引数が true の場合は、失敗させる
        reject(new Error(`エラー：${num}つ目の処理（${ms} ミリ秒）`));
      }
      resolve(`${num}つ目の処理（${ms} ミリ秒）`);
    }, ms)
  })
}

Promise.all(
  [
    delayed_action(1, 2000),
    delayed_action(2, 500, true), // 失敗する Promise
    delayed_action(3, 1000)
  ]
)
.then(response => console.log(response))
.catch(
  (error) => console.log(error.message)
);

/* 以下が 0.5 秒後に出力される
エラー：2つ目の処理（500 ミリ秒）
*/

const promise = Promise.allSettled( [ promiseInstance, ... ] );

function delayed_action(num, ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${num}つ目の処理（${ms} ミリ秒）`);
    }, ms)
  })
}

const promise1 = delayed_action(1, 2000);
const promise2 = delayed_action(2, 500);
const promise3 = delayed_action(3, 1000);

Promise.allSettled([promise1, promise2, promise3])
.then(response => console.log(response));

/* 以下が出力されます
[
  {
    "status": "fulfilled",
    "value": "1つ目の処理（2000 ミリ秒）"
  },
  {
    "status": "fulfilled",
    "value": "2つ目の処理（500 ミリ秒）"
  },
  {
    "status": "fulfilled",
    "value": "3つ目の処理（1000 ミリ秒）"
  }
]
*/

function delayed_action(num, ms, rejected=false) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(rejected) {
        // 第3引数が true の場合は、失敗させる
        reject(new Error(`エラー：${num}つ目の処理（${ms} ミリ秒）`));
      }
      resolve(`${num}つ目の処理（${ms} ミリ秒）`);
    }, ms)
  })
}

const promise1 = delayed_action(1, 2000);
const promise2 = delayed_action(2, 500, true); // 失敗する Promise
const promise3 = delayed_action(3, 1000);

Promise.allSettled([promise1, promise2, promise3])
.then(response => console.log(response));

/* 以下が出力されます
[
  {
    "status": "fulfilled",
    "value": "1つ目の処理（2000 ミリ秒）"
  },
  {
    "status": "rejected",
    "value": "エラー：2つ目の処理（500 ミリ秒）"
  },
  {
    "status": "fulfilled",
    "value": "3つ目の処理（1000 ミリ秒）"
  }
]
*/

function delayed_action(num, ms, rejected=false) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(rejected) {
        // 第3引数が true の場合は、失敗させる
        reject(new Error(`エラー：${num}つ目の処理（${ms} ミリ秒）`));
      }
      resolve(`${num}つ目の処理（${ms} ミリ秒）`);
    }, ms)
  })
}

const promise1 = delayed_action(1, 2000);
const promise2 = delayed_action(2, 500, true); // 失敗する Promise
const promise3 = delayed_action(3, 1000);

Promise.allSettled([promise1, promise2, promise3])
.then(response => {
  // 成功した Promise の配列
  const fulfilled = response.filter(data => data.status === 'fulfilled');
  // 失敗した Promise の配列
  const rejected = response.filter(data => data.status === 'rejected');
  console.log(fulfilled);
  /*
  [
    {
      "status": "fulfilled",
      "value": "1つ目の処理（2000 ミリ秒）"
    },
    {
      "status": "fulfilled",
      "value": "3つ目の処理（1000 ミリ秒）"
    }
  ]
  */
  console.log(rejected);
  /*
  [
    {
      "status": "rejected",
      "value": "エラー：2つ目の処理（500 ミリ秒）"
    }
  ]
  */

});

const promise = Promise.race([promiseInstance, ... ]);

function delayed_action(num, ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`最初に完了：${num}つ目の処理（${ms} ミリ秒）`);
    }, ms)
  })
}

const promise1 = delayed_action(1, 2000);
const promise2 = delayed_action(2, 500);
const promise3 = delayed_action(3, 1000);

Promise.race([promise1, promise2, promise3]).then(value => console.log(value));

/* 出力
最初に完了：2つ目の処理（500 ミリ秒）
*/

function delayed_action(num, ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`最初に完了：${num}つ目の処理（${ms} ミリ秒）`);
    }, ms)
  })
}

const promise1 = delayed_action(1, 2000);
const promise2 = delayed_action(2, 500);
const promise3 = delayed_action(3, 1000);

Promise.race([
  promise1,

  //処理時間が一番短く且つエラーになる Promise インスタンスを追加
  new Promise((resolve, reject) =>
        setTimeout(() =>
          reject(new Error('エラー発生!')), 10)
       ),

  promise2,
  promise3
]).then( value =>
  console.log(value)
).catch( error =>
  // 失敗したときのコールバック
  console.log(error.message)
);

/* 出力
エラー発生!
*/

function delayed_action(num, ms, rejected=false) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(rejected) {
        // 第3引数が true の場合は、失敗させる
        reject(new Error(`エラー：${num}つ目の処理（${ms} ミリ秒）`));
      }
      resolve(`最初に完了：${num}つ目の処理（${ms} ミリ秒）`);
    }, ms)
  })
}

const promise1 = delayed_action(1, 2000);
const promise2 = delayed_action(2, 500);
const promise3 = delayed_action(3, 1000, true); // 失敗する Promise

Promise.race([promise1, promise2, promise3]).then(value => console.log(value)).catch( error =>
  // 失敗したときのコールバック
  console.log(error.message)
);

/* 出力
最初に完了：2つ目の処理（500 ミリ秒）
*/

function delayed_action(num, ms, rejected=false) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(rejected) {
        // 第3引数が true の場合は、失敗させる
        reject(new Error(`エラー：${num}つ目の処理（${ms} ミリ秒）`));
      }
      resolve(`最初に完了：${num}つ目の処理（${ms} ミリ秒）`);
    }, ms)
  })
}

const promise1 = delayed_action(1, 2000);
const promise2 = delayed_action(2, 500, true); // 失敗する Promise
const promise3 = delayed_action(3, 1000);

Promise.race([promise1, promise2, promise3]).then(value => console.log(value)).catch( error =>
  // 失敗したときのコールバック
  console.log(error.message)
);

/* 出力
エラー：2つ目の処理（500 ミリ秒）
*/

// 指定したミリ秒後に失敗する Promise を返す関数
function delayedReject(delay) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error(`タイムアウト：${delay}ミリ秒経過`));
    }, delay);
  });
}

// 乱数を使ったランダムな時間後に成功する Promise を返す関数
function delayed_action() {
  return new Promise((resolve) => {
    // 乱数を使ってランダムな遅延時間（ミリ秒単位）を作成
    const randomDelay =  Math.random() * 1000;
    // 上記で作成した遅延時間後に成功する
    setTimeout(() => {
      resolve(`完了：（${randomDelay} ミリ秒）`);
    }, randomDelay)
  })
}

Promise.race([
  delayed_action(),
  delayedReject(500),
]).then(response => {
  console.log(response); // 例：完了：（79.7... ミリ秒）※ 500ms以内で完了した場合
}).catch(error => {
  console.log(error.message); // タイムアウト：500ミリ秒経過 ※ 500ms経過した場合
});

const promise = Promise.any([promiseInstance, ... ]);

function delayed_action(num, ms, rejected=false) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(rejected) {
        // 第3引数が true の場合は、失敗させる
        reject(new Error(`エラー：${num}つ目の処理（${ms} ミリ秒）`));
      }
      resolve(`最初に成功：${num}つ目の処理（${ms} ミリ秒）`);
    }, ms)
  })
}

const promise1 = delayed_action(1, 2000, true);
const promise2 = delayed_action(2, 500, true);// 失敗する Promise
const promise3 = delayed_action(3, 1000, true);

Promise.any([promise1, promise2, promise3])
.then(value => console.log(value))
.catch( error =>
  // 失敗したときのコールバック
  console.log(error.message)
);

/* 出力
最初に成功：3つ目の処理（1000 ミリ秒）
*/

function delayed_action(num, ms, rejected=false) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(rejected) {
        // 第3引数が true の場合は、失敗させる
        reject(new Error(`エラー：${num}つ目の処理（${ms} ミリ秒）`));
      }
      resolve(`最初に成功：${num}つ目の処理（${ms} ミリ秒）`);
    }, ms)
  })
}

const promise1 = delayed_action(1, 2000, true); // 失敗する Promise
const promise2 = delayed_action(2, 500, true); // 失敗する Promise
const promise3 = delayed_action(3, 1000, true); // 失敗する Promise

Promise.any([promise1, promise2, promise3])
.then(value => console.log(value))
.catch( error => {
    console.log(error.message);  // All promises were rejected
    console.log(error.name); // AggregateError
    console.log(error.errors[0]); // Error: エラー：1つ目の処理（2000 ミリ秒）
    console.log(error.errors[1]); // Error: エラー：2つ目の処理（500 ミリ秒）
    console.log(error.errors[2]); // Error: エラー：3つ目の処理（1000 ミリ秒）
  }
);

const getDataThen = (url) => {
  fetch(url)
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  });
}
getDataThen('https://jsonplaceholder.typicode.com/users');

const getDataAsync = async (url) => {
  const response = await fetch(url);
  const data = await response.json();
  console.log(data);
}
getDataAsync('https://jsonplaceholder.typicode.com/users');

const getApiKey = (data) => {
  //Promise を返す
  return new Promise( (resolve) => {
    fetch('apikeys.php', {
      method: 'POST',
      body: data //引数で受け取った値
    })
    .then((response) => {
      return response.text();
    })
    .then((apikey) => {
      //apikey に解決される Promise を返す
      resolve(apikey);
    });
  });
}

const getApiKey = async (data) => {
  const response = await fetch('apikeys.php', {
    method: 'POST',
    body: data //引数で受け取った値
  });
  const apikey = await response.text();
  //apikey を返すと apikey に解決される Promise が返される
  return apikey;
}