JavaScript

スポンサーリンク
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - 排他制御の考え方

排他制御を一言でいうと排他制御(はいたせいぎょ)は、「同時に走ると困る処理を、“必ず1つずつしか動かさないようにする考え方” です。非同期処理が増えてくると、「同じデータを同時に書き換える」「同じ処理...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - 競合状態(Race Condition)

競合状態(Race Condition)を一言でいうと競合状態(Race Condition)は、「どっちの非同期処理が先に終わるかによって、結果が変わってしまう危険な状態」 です。コード上は「こう動...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - 非同期状態管理

「非同期状態管理」を一言でいうと非同期状態管理は、「今この非同期処理が、どの状態にいるのかをコードと UI で一貫して扱うこと」 です。例えば、API 呼び出しひとつ取っても、状態はざっくりこう変わり...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - WebSocket との比較

WebSocket とポーリングの違いを一言でまとめるとポーリングは 「クライアントが定期的にサーバーへ様子を見に行く」 方式。WebSocket は 「サーバーとクライアントが常時つながり、サーバー...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - ポーリング

ポーリングを一言でいうとポーリング(polling)は、「サーバー側の状態が変わったかどうかを、クライアント側から定期的に“様子見”しに行く仕組み」です。サーバーから「変わったよ!」と通知してくれるの...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - スロットリング

スロットリングを一言でいうとスロットリング(throttle)は、「どれだけ連続でイベントが発生しても、“一定間隔ごとにしか処理を実行させない”テクニック です。スクロール、マウス移動、リサイズなどは...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - デバウンス

デバウンスを一言でいうとデバウンスは、「連続して何度も呼ばれる処理を、“最後の1回だけ”にまとめるテクニック」 です。ユーザーがキーボードを連打したり、入力ボックスに高速で文字を打ち込んだりすると、イ...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - キャンセル処理(AbortController)

キャンセル処理(AbortController)を一言でいうとAbortController は、「一度投げた非同期処理(特に fetch)を、あとから“やっぱりやめる”と止めるための仕組み」 です。...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - 多重送信防止

多重送信防止を一言でいうと多重送信防止は、「ユーザーが同じ操作を連打しても、サーバーには“1 回分だけ”しか飛ばさないようにする仕組み」 です。非同期処理(特にフォーム送信やボタン押下)では、ユーザー...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - ローディング表示

ローディング表示を一言でいうとローディング表示は、「今、アプリはちゃんと動いているよ。止まっているんじゃなくて“待っているだけ”だよ」とユーザーに伝えるためのサインです。非同期処理(fetch / A...
JavaScript

JavaScript | 非同期処理:エラー処理・例外設計 - 障害時の復旧設計

「障害時の復旧設計」を一言でいうと障害時の復旧設計は、「エラーが起きた“あと”に、アプリをどう立て直すかをあらかじめ決めておくこと」 です。エラー処理というと、つい「catch してログ出して終わり」...
JavaScript

JavaScript | 非同期処理:エラー処理・例外設計 – エラー再送出

「エラー再送出」を一言でいうとエラー再送出(rethrow)は、「一度 catch で受け取ったエラーを、“ここでは処理しきらないから、上のレイヤーにもう一回投げ直す” 行為 です。非同期処理では特に...
JavaScript

JavaScript | 非同期処理:エラー処理・例外設計 – ログ出力設計

ログ出力設計を一言でいうとログ出力設計は、「エラーや重要な出来事を、あとから“意味を持って”追いかけられるように記録する設計」 のことです。ただ console.log(err) を散らばせるのではな...
JavaScript

JavaScript | 非同期処理:エラー処理・例外設計 – ユーザー向けエラー表示

ユーザー向けエラー表示を一言でいうとユーザー向けエラー表示は、「技術的に何が壊れたか」ではなく、「ユーザーが次にどうすればいいか」を伝えるためのメッセージ です。非同期処理(fetch / API 通...
JavaScript

JavaScript | 非同期処理:エラー処理・例外設計 – エラー情報の整形

「エラー情報の整形」を一言でいうと「エラー情報の整形」は、「バラバラで生々しいエラー情報を、“人間やアプリが扱いやすい形” に整理し直すこと」 です。生のエラーは、たいていこうです。・メッセージが英語...
JavaScript

JavaScript | 非同期処理:エラー処理・例外設計 – カスタムエラー

カスタムエラーを一言でいうとカスタムエラーは、「自分のアプリ専用の“名前付きエラー型”を作って、エラーの意味をはっきりさせる仕組み」 です。ただの Error だけだと、「何が原因で」「どのレイヤーで...
JavaScript

JavaScript | 非同期処理:エラー処理・例外設計 – catch の共通化

「catch の共通化」を一言でいうと「catch の共通化」は、「あちこちにバラバラに書いているエラー処理を、意味のある“ひとつの場所”にまとめること」 です。同じような catch (err) {...
JavaScript

JavaScript | 非同期処理:エラー処理・例外設計 – Promise 内 throw

「Promise 内 throw」を一言でいうとPromise の中で throw する、というのは「その Promise を reject(失敗状態)にするための、ちょっと短い書き方」 です。new...
JavaScript

JavaScript | 非同期処理:エラー処理・例外設計 – try / catch の範囲

「try / catch の範囲」を一言でいうとtry / catch の「範囲」は、「どこで起きたエラーまで、この try / catch で捕まえられるのか」 という話です。ここを勘違いすると、「...
JavaScript

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 通信 - 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...
スポンサーリンク