JavaScript

スポンサーリンク
JavaScript

JavaScript | 非同期処理:fetch / API 通信 – API 設計との関係

API 設計と fetch の関係の全体像fetch 自体は「URL に HTTP リクエストを送って、レスポンスを受け取るだけ」の素朴な道具です。でも、実際のコードの書きやすさ・分かりやすさは、AP...
JavaScript

JavaScript | 非同期処理:fetch / API 通信 – 再試行処理

「再試行処理」を一言でいうとfetch の「再試行処理」は、「1 回の通信が失敗したときに、すぐ諦めずにもう何回かやり直す仕組み」 のことです。ネットワークの世界では、「たまたま一瞬だけ回線が不安定だ...
JavaScript

JavaScript | 非同期処理:fetch / API 通信 – タイムアウト対策

fetch の「タイムアウト対策」を一言でいうとfetch のタイムアウト対策は、「一定時間待ってもサーバーから返事がこなかったら、自分から通信を打ち切る仕組みを入れること」 です。そのままの fet...
JavaScript

JavaScript | 非同期処理:fetch / API 通信 – エラーレスポンス処理

「エラーレスポンス処理」を一言でいうとfetch / API 通信における「エラーレスポンス処理」は、「サーバーから“うまくいかなかった”という返事が返ってきたときに、何をどうするか決めておくこと」 ...
JavaScript

JavaScript | 非同期処理:fetch / API 通信 – ステータスコード確認

ステータスコード確認を一言でいうとfetch で API を叩くときの「ステータスコード確認」は、「サーバーが今どんな気持ちで返事してきているか」をちゃんと見ること です。200「OK、うまくいったよ...
JavaScript

JavaScript | 非同期処理:fetch / API 通信 – JSON 送受信

JSON と fetch の関係を一言でいうとJSON と fetch の関係は、「JavaScript とサーバーが会話するときの“共通言語(JSON)”を、fetch という電話で送受信する」 と...
JavaScript

JavaScript | 非同期処理:fetch / API 通信 – headers の設定

headers ってそもそも何?なぜ設定が必要なのかfetch の headers は、「このリクエストに関する“メタ情報”(追加情報)をサーバーに伝えるためのラベル集」 です。サーバーは、ただ UR...
JavaScript

JavaScript | 非同期処理:fetch / API 通信 - POST リクエスト

POST リクエストを一言でいうとfetch の POST リクエストは、「ブラウザからサーバーに“データを送る”ための HTTP 通信」 です。GET が「取りに行く」だとしたら、POST は「渡し...
JavaScript

JavaScript | 非同期処理:fetch / API 通信 – GET リクエスト

GET リクエストって何をしているのかまず「GET リクエスト」とは、“サーバーにデータをください、とお願いするためのリクエスト” です。今日の天気を教えてユーザー一覧をちょうだい記事の詳細を見せてみ...
JavaScript

JavaScript | 非同期処理:fetch / API 通信 – fetch の基本

fetch ってそもそも何者かfetch は、JavaScript から「ネット越しにデータを取りに行く(サーバーと通信する)」ための関数 です。天気 API から今日の天気をもらう自分のサーバーにフ...
JavaScript

JavaScript | 非同期処理:async / await – 同期風コードの注意点

async / await が生み出す「同期っぽいコード」とはasync / await を使うと、await を並べるだけで、「上から順番に実行されているように見えるコード」 が書けます。async...
JavaScript

JavaScript | 非同期処理:async / await – async 関数の戻り値

async 関数の戻り値を一言でいうとasync 関数の戻り値は、「必ず Promise になる」 です。もう少しだけ正確に言うと:async を付けた関数は、必ず Promise を返すその Pro...
JavaScript

JavaScript | 非同期処理:async / await – await とループ

await とループを一言でいうとawait をループの中で使うときのポイントは、「そのループを“順番にゆっくり回す”のか、“できるだけ同時に走らせる”のかを意識すること です。同じループでも、各要素...
JavaScript

JavaScript | 非同期処理:async / await – 並列 await の書き方

並列 await を一言でいうと「並列 await」は、“複数の非同期処理を同時にスタートさせて、あとからまとめて結果を受け取る書き方” です。普通に await を縦に並べると、A が終わってから ...
JavaScript

JavaScript | 非同期処理:async / await – 複数 await の順序

複数の await の「順序」を一言でいうとawait を何回も使うとき、「どこで await を書くか」によって、非同期処理が「順番に」動くか「同時に」動くかが変わります。同じ await でも、上...
JavaScript

JavaScript | 非同期処理:async / await – finally との併用

async / await と finally を一言でいうとasync / await と finally を組み合わせると、「非同期処理が成功しても失敗しても、必ず最後にやりたい処理」を書ける よ...
JavaScript

JavaScript | 非同期処理:async / await – try / catch との併用

async / await と try / catch を一言でいうとasync / await と try / catch を組み合わせると、「非同期処理の成功もエラーも、同期コードと同じように書け...
JavaScript

JavaScript | 非同期処理:async / await – await の戻り値

await の戻り値を一言でいうとawait の「戻り値」は、「Promise が resolve(成功)したときに渡される“中身の値”」 です。const result = await somePr...
JavaScript

JavaScript | 非同期処理:async / await – await の役割

await を一言でいうとawait は、「Promise の完了を“その行で一旦止まって待ち”、結果の値を取り出すためのキーワード」 です。await promise と書くと、その行で「promi...
JavaScript

JavaScript | 非同期処理:async / await – async 関数の定義

async / await の「async 関数」を一言でいうとasync 関数は、「中で await が使える “非同期版の関数”」 です。先に一番大事なポイントだけ言うと:関数の前に async ...
JavaScript

JavaScript | 非同期処理:Promise 応用 – Promise の落とし穴

まず「Promise の落とし穴」をざっくり整理するPromise 自体は仕組みとしてはそんなに難しくないのに、実際に書き始めると「なんか思った通りに動かない」「エラーが消える」「順番がおかしい」みた...
JavaScript

JavaScript | 非同期処理:Promise 応用 – 非同期関数の再利用

「非同期関数の再利用」を一言でいうと非同期関数の再利用は、「一度作った Promise ベースの処理を、“場面だけ変えて何度も使い回せる形” に設計すること」です。言い換えると、同じような API 呼...
JavaScript

JavaScript | 非同期処理:Promise 応用 – Promise のラップ

まず「Promise のラップ」を一言でいうとPromise の「ラップ」とは、「既存の処理(コールバック形式や Promise など)を “Promise を返す関数” という形に包み直して、扱いや...
JavaScript

JavaScript | 非同期処理:Promise 応用 – 条件付き非同期処理

「条件付き非同期処理」って何かをまずイメージするPromise を使っていると、だんだんこういう場面が出てきます。「A の結果しだいで、B を呼ぶか呼ばないか決めたい」「ログイン済みなら API を叩...
JavaScript

JavaScript | 非同期処理:Promise 応用 – 逐次処理の書き方

まず「逐次処理」とは何かをはっきりさせるPromise で言う「逐次処理(ちくじ処理)」は、「非同期処理を A → B → C… のように“順番に”実行する書き方」 のことです。具体的には、A が終わ...
JavaScript

JavaScript | 非同期処理:Promise 応用 – 並列処理の考え方

まず「並列処理」をざっくりイメージでつかむJavaScript の Promise でいう「並列処理」は、「待ち時間がある処理を “同時にスタート” させて、全部終わる(またはどれかが終わる)のを待つ...
JavaScript

JavaScript | 非同期処理:Promise 応用 – Promise.any

Promise.any を一言でいうとPromise.any は、「複数の Promise のうち、“最初に成功したもの 1 つ” だけの結果を採用する関数」 です。race が「一番早く 成功でも失...
JavaScript

JavaScript | 非同期処理:Promise 応用 – Promise.race

Promise.race を一言でいうとPromise.race は、「複数の Promise のうち、“一番早く決着したやつだけ” の結果を採用する関数」 です。race(レース)という名前の通り、...
JavaScript

JavaScript | 非同期処理:Promise 応用 – Promise.allSettled

Promise.allSettled を一言でいうとPromise.allSettled は、「複数の Promise が “成功しても失敗しても、とにかく全部終わるまで待ち、結果をぜんぶレポートして...
JavaScript

JavaScript | 非同期処理:Promise 応用 – Promise.all

Promise.all を一言でいうとPromise.all は、「複数の Promise を“同時に走らせて”、全部そろったら結果をまとめて受け取るための関数」です。たとえば、ユーザー情報を取得する...
JavaScript

JavaScript | 非同期処理:Promise 基礎 - エラー伝播

まず「エラー伝播」を一言でいうとPromise のエラー伝播は、「どこかの then で失敗しても、その“失敗情報”がチェーンを下へ流れていき、最後の catch まで届く仕組み」のことです。コールバ...
JavaScript

JavaScript | 非同期処理:Promise 基礎 – 値の受け渡し

まず「値の受け渡し」を一言でいうとPromise の「値の受け渡し」は、「前の then(または resolve/reject)で決まった値が、次の then / catch にバトンのように渡ってい...
JavaScript

JavaScript | 非同期処理:Promise 基礎 – チェーン処理

まず「チェーン処理」を一言でいうとPromise のチェーン処理は、「非同期のステップを、then を使って“上から順番に”つなげていく書き方」 です。コールバック地獄だと、A の中で B を呼んでB...
JavaScript

JavaScript | 非同期処理:Promise 基礎 – finally の役割

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

JavaScript | 非同期処理:Promise 基礎 – catch の基本

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

JavaScript | 非同期処理:Promise 基礎 – then の基本

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

JavaScript | 非同期処理:Promise 基礎 – reject の役割

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

JavaScript | 非同期処理:Promise 基礎 – resolve の役割

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

JavaScript | 非同期処理:Promise 基礎 – Promise の状態(pending / fulfilled / rejected)

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

JavaScript | 非同期処理:Promise 基礎 – Promise とは何か

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

JavaScript | 非同期処理:コールバック – Promise が生まれた背景

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

JavaScript | 非同期処理:コールバック – 可読性の低下

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

JavaScript | 非同期処理:コールバック – エラーハンドリングの問題

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

JavaScript | 非同期処理:コールバック – コールバック地獄

コールバック地獄とは何か(まずイメージ)コールバック地獄(callback hell)は、「非同期処理をコールバックだけでつなぎまくった結果、コードが右に右にネストしまくって、読めない・直せない状態」...
JavaScript

JavaScript | 非同期処理:コールバック – ネストしたコールバック

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

JavaScript | 非同期処理:コールバック – 同期コールバックとの違い

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

JavaScript | 非同期処理:コールバック – 非同期コールバック

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

JavaScript | 非同期処理:コールバック – setInterval の仕組み

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

JavaScript | 非同期処理:コールバック – setTimeout の仕組み

まず setTimeout を一言でイメージするsetTimeout は、「この処理を◯ミリ秒“後に”実行してね」とブラウザ(または Node)にお願いする関数です。ポイントはここです。setTime...
JavaScript

JavaScript | 非同期処理:コールバック – コールバック関数とは

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

JavaScript | 非同期処理:非同期の基礎概念 – 非同期が必要な理由

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

JavaScript | 非同期処理:非同期の基礎概念 – 実行順序の全体像

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

JavaScript | 非同期処理:非同期の基礎概念 – イベントループ

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

JavaScript | 非同期処理:非同期の基礎概念 – マイクロタスクキュー

マイクロタスクキューとは何か(まずざっくりイメージ)マイクロタスクキューは、「とても優先度の高い“あとで実行する処理”が並ぶ、特別レーンの待ち行列」 です。前回の「タスクキュー」は、setTimeou...
JavaScript

JavaScript | 非同期処理:非同期の基礎概念 – タスクキュー

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

JavaScript | 非同期処理:非同期の基礎概念 – Web API の役割

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

JavaScript | 非同期処理:非同期の基礎概念 – コールスタック

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

JavaScript | 非同期処理:非同期の基礎概念 – JavaScript がシングルスレッドである理由

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

JavaScript | 非同期処理:非同期の基礎概念 – ブロッキングとは何か

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

JavaScript | 非同期処理:非同期の基礎概念 – 同期処理と非同期処理の違い

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