【JS応用|初心者向け】料理で学ぶ!JavaScriptの「Promise」入門

プログラミングを学んでいると必ずぶつかる壁、それが「非同期処理」です。特にPromiseという言葉を聞くと難しく感じますが、実は私たちの身近な「料理」に例えると非常に分かりやすくなります。

レストランの注文で考える非同期

皆さんがレストランで注文をする場面を想像してください。注文をすると店員さんは「注文票」を厨房に渡しますよね。この「注文票」こそがPromiseの正体です。

注文をした瞬間、まだ料理は出てきていません。しかし、店員さんは「後で料理を運んできますね」という約束(Promise)をあなたと交わしました。この「結果はまだ出ていないけれど、将来的に結果が確定する予定のもの」を保持しておく仕組みがPromiseなのです。

Promiseの3つの状態

Promiseには、料理の状況に例えられる3つの状態があります。

1. Pending(待機中): 注文した料理がまだ厨房で調理されている状態です。
2. Fulfilled(成功): 無事に料理が完成し、テーブルに運ばれてきた状態です。
3. Rejected(失敗): 「申し訳ありません、材料が切れていて作れません」と断られた状態です。

なぜPromiseを使う必要があるのか

もしPromiseを使わなかったらどうなるでしょうか。料理が来るまで店員さんがその場を動かず、他のお客さんの注文も一切取れなくなってしまいますよね。

JavaScriptの世界でも同じです。例えば「サーバーから大きなデータを取得する」という処理は時間がかかります。Promiseを使わないと、データが届くまでの間、画面がフリーズして操作できなくなってしまいます。

Promiseを使うことで、重い処理をバックグラウンドに任せ、その間に別の作業(ボタンの反応やアニメーションなど)を並行して行えるようになるのです。

基本の書き方を見てみよう

実際のコードでは、以下のように記述します。

成功した時の処理:.then()

失敗した時の処理:.catch()

注文が成功したときは.then()で料理を受け取り、何かトラブルがあったときは.catch()で「すみません」という謝罪を受け取る、という流れです。

まとめ

Promiseは「未来の結果を約束するもの」です。最初は複雑に見えますが、「料理の注文」をイメージすれば、非同期処理の仕組みがぐっと身近に感じられるはずです。まずは細かい構文よりも、「時間のかかる処理を待たずに、次の準備を進めるためのチケット」という感覚を大切にしてみてください。

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