new Promise に渡した関数はいつ動きますか

その場ですぐ動きます。予約されるわけではありません。中に書いた setTimeout や通信の開始はこのときに始まり、resolve が呼ばれるまで箱は pending のままです。new Promise を書いた行で処理が始まる、と覚えてください。

resolve と return はどう違いますか

resolve は箱の中身を確定させる関数で、return はその関数から抜けるための構文です。new Promise に渡した関数の中で return を書いても、箱の中身は決まりません。中身を決めたいときは必ず resolve を呼んでください。

then を使わずに await だけ書けばよいですか

自分のコードでは await のほうが読みやすいので、そちらを主に使ってください。ただし他人のコードやライブラリの説明では then が出てきます。then に渡した関数が、await した次の行に相当する、という対応さえ分かっていれば読めます。

Promise をつくって返す｜コードで実践

このレッスンで分かること

new Promise に渡した関数の中で resolve を呼ぶと、値が確定します

Promise は戻り値なので、変数に入れたり関数から返したりできます

呼んだ瞬間には、まだ中身が無い

時間のかかる処理を関数にすると、return で答えを返せません。答えが出るのは何百ミリ秒か先で、return の行はもう過ぎているからです。そこで JavaScript は、値の代わりに「あとで値が入る箱」を返す形にそろえました。これが Promise です。

JavaScript

const box = fetchHeadline();
console.log(box);   // Promise { <pending> }

呼んだ瞬間に返ってくるのは箱だけで、中身はまだ空です。この状態を pending と呼びます。大事なのは、この箱そのものが値だという点です。変数に入れられますし、関数から返せますし、配列に並べることもできます。

箱を自分で作る

自分で箱を作るときは new Promise を使い、引数に関数を 1 つ渡します。この関数はすぐその場で実行され、resolve と reject という 2 つの関数を受け取ります。

JavaScript

function wait(ms) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve("待ち終わりました");
    }, ms);
  });
}

resolve("待ち終わりました") を呼んだ瞬間に、箱の中身が確定します。return の位置に注目してください。返しているのは resolve の結果ではなく、new Promise で作った箱そのものです。箱は関数を呼んだ直後に返り、中身だけがあとから入ります。resolve に渡した値がそのまま中身になり、何も渡さなければ undefined になります。

状態	意味	どうなると移るか
pending	まだ返事が来ていない	作った直後はこれ
fulfilled	成功の返事が来た	`resolve` が呼ばれた
rejected	失敗の返事が来た	`reject` が呼ばれた

pending から動くのは一度きりです。resolve を 2 回呼んでも、2 回目以降は黙って無視されます。エラーにならないぶん気付きにくいので、確定させる場所は 1 つに絞ってください。今回作る箱は必ず成功する側なので、使うのは resolve だけです。

箱を開ける

箱の中身を外から覗く方法はありません。box.text のように書いても取り出せません。中身に触るには await を書きます。await は async を付けた関数の中でだけ使えます。

JavaScript

async function showHeadline() {
  const text = await wait(100);
  console.log(text);   // 待ち終わりました
}

await wait(100) の行で、この関数はいったん中断します。中断しているあいだ作業員は解放されているので、画面は固まりません。中身が確定すると続きから再開し、text に文字列が入ります。await の左の変数に入るのは、箱ではなく中身です。

await が入るより前は、.then に関数を渡して中身を受け取っていました。他人のコードやライブラリの説明で今でもよく見かけるので、対応だけ押さえておきます。

JavaScript

wait(100).then(function (text) {
  console.log(text);
});

then に渡した関数は、中身が確定したときに、その中身を引数として呼ばれます。自分で書くときは await のほうが読みやすいので、then は読めれば十分です。

もう 1 つ、async を付けた関数の戻り値は必ず Promise になります。中で配列を return しても、呼ぶ側が受け取るのは「あとで配列が入る箱」です。だから呼ぶ側にも await が要ります。

よくある間違い

resolve を呼び忘れる — 箱は pending のまま永遠に確定せず、await した側も再開しません。エラーが出ないぶん気付けず、採点では時間切れになります。new Promise を書いたら、resolve がどの行で呼ばれるかを必ず目で追ってください
箱のまま使ってしまう — await を書き忘れると、変数に入るのは中身ではなく Promise です。配列やオブジェクトのメソッドが無いというエラーが出たら、まず await の書き忘れを疑ってください

fetchPublishedWorks(works) を作る。new Promise を返し、100 ミリ秒後に published が true の作品だけの配列で resolve する
loadPublishedTitles(works) を async function として作り、fetchPublishedWorks を await する
await した結果から title だけを取り出した配列を返す。公開中が 1 件も無ければ空の配列を返す

このレッスンで分かること

new Promise に渡した関数の中で resolve を呼ぶと、値が確定します

Promise は戻り値なので、変数に入れたり関数から返したりできます

呼んだ瞬間には、まだ中身が無い

JavaScript

const box = fetchHeadline();
console.log(box);   // Promise { <pending> }

箱を自分で作る

JavaScript

function wait(ms) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve("待ち終わりました");
    }, ms);
  });
}

状態	意味	どうなると移るか
pending	まだ返事が来ていない	作った直後はこれ
fulfilled	成功の返事が来た	`resolve` が呼ばれた
rejected	失敗の返事が来た	`reject` が呼ばれた

箱を開ける

JavaScript

async function showHeadline() {
  const text = await wait(100);
  console.log(text);   // 待ち終わりました
}

JavaScript

wait(100).then(function (text) {
  console.log(text);
});

よくある間違い

resolve を呼び忘れる — 箱は pending のまま永遠に確定せず、await した側も再開しません。エラーが出ないぶん気付けず、採点では時間切れになります。new Promise を書いたら、resolve がどの行で呼ばれるかを必ず目で追ってください
箱のまま使ってしまう — await を書き忘れると、変数に入るのは中身ではなく Promise です。配列やオブジェクトのメソッドが無いというエラーが出たら、まず await の書き忘れを疑ってください

fetchPublishedWorks(works) を作る。new Promise を返し、100 ミリ秒後に published が true の作品だけの配列で resolve する
loadPublishedTitles(works) を async function として作り、fetchPublishedWorks を await する
await した結果から title だけを取り出した配列を返す。公開中が 1 件も無ければ空の配列を返す

Promise をつくって返す

呼んだ瞬間には、まだ中身が無い

箱を自分で作る

箱を開ける

よくある間違い

要件

入出力例

ヒント

メモ

Promise をつくって返す

呼んだ瞬間には、まだ中身が無い

箱を自分で作る

箱を開ける

よくある間違い

要件

入出力例

ヒント

メモ