【入門編】 Promiseオブジェクトの型判定 – JavaScript実践ガイド

こんにちは!フロントエンドの現場で長年コードと向き合っていると、ふとした瞬間に「これって本当にPromiseなのかな?」と迷う場面に出くわします。

JavaScriptの世界へようこそ。Promiseという「未来の約束」を扱う仕組みは非常に便利ですが、いざ判定しようとすると、意外と奥が深くて厄介なやつなんです。今日は、そんなPromiseの正体をどうやって見極めるか、現場の知恵をギュッと詰め込んでお話ししますね。

—

そもそも「Promise」って何者?

想像してみてください。あなたはカフェで注文をして、店員さんから「番号札」を渡されました。この番号札は、まだコーヒーではないけれど、「後でコーヒーが手に入るという約束」ですよね。

JavaScriptにおける `Promise` もこれと全く同じです。今すぐ答えは出ないけれど、あとで結果を届けてくれる「予約券」のようなものです。

この「予約券(Promise)」を判定する時、初心者がやりがちなのが `typeof` を使うこと。でも、これには罠があるんです。

罠:typeofの限界

const myPromise = new Promise(resolve => resolve(“できた!”));

// 試しに typeof してみると…?
console.log(typeof myPromise); // “object” と返ってくる

そう、`typeof` では「オブジェクト(箱)」であることしかわかりません。これだと、ただの `{}`(空のオブジェクト)と区別がつかないんです。これでは困りますよね。

—

1. 「thenable」という考え方(緩い判定)

現場では、ガチガチに「これぞPromise!」と決めつけるよりも、「君、thenメソッド持ってる? じゃあ君はPromiseみたいなもんだね!」と判断することが多いです。これを「thenable(ゼン・エイブル)」と呼びます。

例えるなら、「コーヒーチケットの半券を持っていれば、それはもうコーヒーを交換できる資格があるよね」という考え方です。

function isThenable(value) {
// 値がオブジェクトか関数であり、かつ .then が関数であるかを確認
return (
value !== null &&
(typeof value === ‘object’ || typeof value === ‘function’) &&
typeof value.then === ‘function’
);
}

const fakePromise = {
then: (resolve) => resolve(“偽物だけど、thenはあるよ”)
};

console.log(isThenable(fakePromise)); // true

この判定は、「他のライブラリが作ったPromiseっぽいもの」も受け入れられるので、実務では非常によく使われます。

—

2. 「これぞ本物!」を厳密に判定する方法

もし、「外部の怪しいデータではなく、正真正銘の `Promise` インスタンスであること」を保証したいなら、`instanceof` を使うのが王道です。

ただし、これには一つだけ注意点があります。「iframe(別のウィンドウ)」をまたぐと、判定に失敗することがあるんです。ブラウザの別々の部屋で育ったPromiseは、血縁関係(クラスの定義)が違うとみなされてしまうことがあるからですね。

でも、通常のWeb開発ならこれで十分です!

const p = new Promise(r => r());

// instanceof を使うと、クラスの継承関係まで含めて厳密に確認できる
if (p instanceof Promise) {
console.log(“間違いなく本物のPromiseです!”);
}

—

結局、現場ではどうすればいいの?

結論から言うと、「その値がPromiseかどうかわからない時は、とりあえず `Promise.resolve()` に包む」のが、最も賢くて安全なテクニックです。

これが最強の「おまじない」です。

async function handleValue(value) {
// valueがPromiseならそのまま、そうでなければPromiseに変換してくれる
const result = await Promise.resolve(value);
console.log(“中身を取り出せました:”, result);
}

// Promiseじゃないただの数字を入れても、ちゃんと動く!
handleValue(42);
// Promiseを入れても、もちろん動く!
handleValue(Promise.resolve(“本物です”));

最後に、あなたへ伝えたいこと

JavaScriptの型判定は、一見すると「厳密にルールを決めること」が正義のように思えるかもしれません。でも、現場では「いかに柔軟に、かつ安全にデータを扱うか」が重要です。

`Promise.resolve()` を使えば、相手が「本物のPromise」か「ただの文字列」かなんて気にせず、同じリズムで処理を繋げることができます。これこそが、JavaScriptの泥臭くも美しい「柔軟性」なんです。

最初は迷って当然です。うまくいかないときは「あ、この子はPromiseじゃなかったんだな」と優しく気づいてあげてください。その繰り返しが、あなたのコードを少しずつ、強く、しなやかにしていきますよ。

大丈夫、一緒に一つずつ学んでいきましょう!

コメント

タイトルとURLをコピーしました