入門

まず finally を一言でいうとfinally は、「Promise が成功しても失敗しても“どっちにしても最後に必ず実行したい処理”を書く場所」です。例えば、ローディング表示を消したいモーダルを閉じたいファイルや接続を閉じたいなど、「...

まず catch を一言でいうとcatch は、「Promise で起きたエラー（失敗）を、最後にまとめて受け止める場所」です。then が「成功したときの続きを書く場所」だとしたら、catch は 「どこかで失敗したときの“落とし穴”とし...

まず then を一言でいうとthen は、「Promise が“成功したあとにやりたい処理”を登録するための関数」です。Promise は「そのうち結果が入る箱」でしたね。then はその箱に対して、「中身（成功結果）が決まったら、この関...

まず「reject」のイメージを一言でreject は、「この Promise の非同期処理は“失敗”で終わったよ、と確定させるスイッチ」です。そして同時に、「なぜ失敗したのか（エラー情報）はこれだよ」と、Promise の中に「失敗の理由...

まず「resolve」のイメージを一言でresolve は、「この Promise の非同期処理は“成功”で終わったよ、と確定させるスイッチ」です。そして同時に、「成功した結果はこれだよ」と、Promise の中に値をセットする役割 を持っ...

Promise の状態を一言でイメージするPromise は「そのうち結果が入る箱」 で、その箱には常にどれか 1 つの「状態」がくっついています。pending（保留中）fulfilled（成功）rejected（失敗）Promise は...

まず Promise を一言でイメージするPromise は、「まだ終わっていない非同期処理の“結果がそのうち入る箱”」だと思ってください。今は結果が分からないけど、そのうち 成功するかもしれないもしかしたら 失敗するかもしれないどちらにし...

なぜ Promise なんてものが出てきたのか（ざっくり全体像）Promise は、「非同期処理をコールバックだけで頑張った結果、みんながしんどくなったので生まれた“救急アイテム” です。特に、次のような問題が限界に達していました。コールバ...

「コールバックで可読性が落ちる」という話の本質コールバックは、非同期処理には欠かせない仕組みです。ただし、使い方次第でコードの「可読性（読みやすさ）」を一気に悪くしてしまう ことがあります。特に問題になるのは、ネストが深くなる処理の流れ（順...

コールバックとエラーハンドリングの関係（まず全体像）コールバックを使った非同期処理では、「エラーをどう扱うか」 が一気に難しくなります。同期処理なら、try { const result = doSomething(); // ここでエラー...

コールバック地獄とは何か（まずイメージ）コールバック地獄（callback hell）は、「非同期処理をコールバックだけでつなぎまくった結果、コードが右に右にネストしまくって、読めない・直せない状態」のことです。やっていること自体はシンプル...

ネストしたコールバックとは何か（まずイメージ）ネストしたコールバックというのは、「コールバックの中で、さらに別の非同期処理を呼び、その中でまたコールバックを書き…と階段状に深くなっていく書き方」 のことです。イメージとしてはこうです。「A ...

いちばん大事な違いのイメージまず、ざっくりこう覚えてください。同期コールバック→ 「その場で、すぐに呼ばれるコールバック」非同期コールバック→ 「あとで、別のタイミングで呼ばれるコールバック」どちらも「関数を引数として渡す」のは同じですが、...

まず「非同期コールバック」を一言でイメージする非同期コールバックは、「“今すぐ”ではなく、“あとで”呼び出してもらうために登録しておく関数」のことです。普通のコールバックも「あとで呼ばれる関数」ですが、非同期コールバックは特に、いつ呼ばれる...

setInterval を一言でいうと何かsetInterval は「この処理を◯ミリ秒ごとにくり返し実行してね」とブラウザ（または Node）に頼む関数です。setTimeout が「1回だけ、あとで実行」なのに対して、setInterv...

まず setTimeout を一言でイメージするsetTimeout は、「この処理を◯ミリ秒“後に”実行してね」とブラウザ（または Node）にお願いする関数です。ポイントはここです。setTimeout を呼んだ瞬間に、コールバックの中...

コールバック関数のイメージ（まず感覚から）コールバック関数は、「あとで呼んでね」と他の関数に渡しておく関数 です。自分で直接 myFunc() と呼ぶのではなく、「この処理が終わったときに、この関数を実行して」「ボタンが押されたら、この関数...

まず「なぜ非同期なんて面倒なものがあるのか」いきなり本音から言うと、多くの人はこう感じます。「同期処理だけで書けたらどれだけ楽か」「非同期って急に難しくなるし、できれば避けたい」実は JavaScript の世界でも、本音はかなり近いです。...

まず「実行順序の全体像」を一言でまとめるJavaScript の実行順序は、ざっくり言うとこうなります。同期処理（ふつうのコード）を上から順番に実行する同期が一段落してコールスタックが空いたら、Promise 関連（マイクロタスク）を全部片...

まずイベントループを一言でイメージするイベントループは、「JavaScript に“次にやるべき仕事”をひたすら渡し続ける司会進行役」です。JavaScript はシングルスレッドで、同時に動ける処理は 1 つだけですが、setTimeou...

マイクロタスクキューとは何か（まずざっくりイメージ）マイクロタスクキューは、「とても優先度の高い“あとで実行する処理”が並ぶ、特別レーンの待ち行列」 です。前回の「タスクキュー」は、setTimeout や DOM イベントなどのコールバッ...

まずタスクキューを一言でイメージするタスクキューは、「あとで実行する処理（コールバック）を順番に並べておく待ち行列」 です。JavaScript はシングルスレッドなので、「今」実行できるのは 1 つだけ。でも setTimeout や f...

全体像：Web API は「JavaScript の外にいる助っ人」まず前提から整理します。ブラウザの中で JavaScript が動くとき、JavaScript エンジン（言語そのものを実行する脳みそ）Web API（ブラウザが提供する「...

コールスタックとは何か（まずイメージから）コールスタックは、「今、どの関数を実行中で、その関数からどの関数を呼び出しているか」を記録している“関数呼び出しの積み重ねメモ” です。JavaScript エンジンは、このコールスタックを見ながら...

まず「シングルスレッド」のイメージからJavaScript が「シングルスレッド」というのは、「同時に実行できるのは、基本的に1つのことだけ」 という意味です。console.log() を実行しているあいだは、他の関数は同時には動かない一...

「ブロッキング」とは何か（まずイメージから）「ブロッキング」は、ある処理が終わるまで、そこから先の処理が一切進めなくなる状態のことです。JavaScript だと「一番の働き手（メインスレッド）が、その処理に捕まってしまい、他のことが何もで...

同期処理と非同期処理の一番大事なイメージまず、抽象的な言葉を捨てて、イメージから掴みにいきます。同期処理は、「一列に並んで順番待ちする世界」 です。前の人の処理が終わるまで、次の人は絶対に動けません。非同期処理は、「順番待ちの札だけ渡して、...