JavaScript

スポンサーリンク
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 Tips | 文字列ユーティリティ:検索・置換 - 連続空白圧縮

「連続空白圧縮」とは何をするユーティリティかまずイメージからいきましょう。ユーザー入力や外部データには、よくこんな文字列が紛れ込みます。"山田 太郎"" 東京都 中央区 ""a b c"人間からすると...
JavaScript

JavaScript Tips | 文字列ユーティリティ:検索・置換 - 改行除去

なぜ「改行除去」ユーティリティが必要になるのか業務システムでユーザー入力を扱っていると、テキストエリアからの入力や、外部システムからのデータに「改行」が普通に混ざります。見た目としては問題なくても、次...
JavaScript

JavaScript Tips | 文字列ユーティリティ:検索・置換 - HTML アンエスケープ

「HTML アンエスケープ」とは何をするものか前回の「HTML エスケープ」は、< や & などを「タグとして解釈されないように」安全な文字列に変える処理でした。"<b>太字</b>" → "<...
JavaScript

JavaScript Tips | 文字列ユーティリティ:検索・置換 - HTML エスケープ

なぜ「HTML エスケープ」が必要なのかまず、これだけははっきりさせておきたいです。HTML エスケープは「見た目を整えるテクニック」ではなく、「セキュリティのための必須処理」です。ユーザー入力をその...
JavaScript

JavaScript Tips | 文字列ユーティリティ:検索・置換 - 正規表現置換

「正規表現置換」ができると何が嬉しいのかまずイメージからいきます。普通の置換は「この文字列を、この文字列に変える」だけです。"2026/02/19" の "/" を "-" に変える"foo foo ...
JavaScript

JavaScript Tips | 文字列ユーティリティ:検索・置換 - 全置換

「全置換」って何をするユーティリティ?まずイメージからいきましょう。「この文字列の中にある foo を、全部 bar に変えたい」という場面、よくありますよね。"foo foo foo" → "bar...
JavaScript

JavaScript Tips | 文字列ユーティリティ:検索・置換 - 大文字小文字無視検索

「大文字小文字無視検索」とは何をしてくれるのかまずゴールのイメージからいきます。次の3つの文字列を見てください。"Apple""apple""APPLE"人間からすると「全部 Apple でしょ」です...
JavaScript

JavaScript Tips | 文字列ユーティリティ:検索・置換 - 後方一致

「後方一致」とは何をしているのか前回の「前方一致」は“先頭が合っているか”を見るものでした。「後方一致」はその逆で、文字列の“末尾”が、指定した文字列と一致しているかどうかを調べます。「report....
JavaScript

JavaScript Tips | 文字列ユーティリティ:検索・置換 - 前方一致

「前方一致」とは何をしているのかまず言葉の整理からいきます。「前方一致」は、文字列の“先頭”が、指定した文字列と一致しているかどうかを調べることです。「山田太郎」が「山田」で始まっているか?「」が「h...
JavaScript

JavaScript Tips | 文字列ユーティリティ:検索・置換 - 部分一致検索

「部分一致検索」ユーティリティは何をしてくれるのか業務システムで文字列を扱うとき、「完全一致」だけで足りることはあまりありません。ユーザー一覧から「山」で始まる人を探したい、商品名に「USB」が含まれ...
JavaScript

JavaScript Tips | 文字列ユーティリティ:整形 - 単語分割

なぜ「単語分割」ユーティリティが必要になるのかキャメルケース化・スネークケース化・ケバブケース化・パスカルケース化。ここまでいろいろやってきましたが、実は全部の“土台”にあるのが 「単語分割」 です。...
JavaScript

JavaScript Tips | 文字列ユーティリティ:整形 - パスカルケース化

パスカルケースってそもそも何かまず言葉の整理からいきます。「パスカルケース(PascalCase)」は、単語の先頭をすべて大文字にして、間をつめてつなげる書き方です。"user name" → "Us...
JavaScript

JavaScript Tips | 文字列ユーティリティ:整形 - ケバブケース化

ケバブケースってそもそも何かまず言葉の整理からいきましょう。「ケバブケース(kebab-case)」は、単語をハイフン - でつなぎ、全部小文字で書くスタイルです。"userName" → "user...
JavaScript

JavaScript Tips | 文字列ユーティリティ:整形 - スネークケース化

スネークケースってそもそも何かまず言葉の整理からいきます。「スネークケース(snake_case)」は、単語をアンダースコア _ でつなぎ、全部小文字で書くスタイルです。"userName" → "u...
JavaScript

JavaScript Tips | 文字列ユーティリティ:整形 - キャメルケース化

キャメルケースってそもそも何かまず言葉の整理からいきます。「キャメルケース(camelCase)」は、プログラミングでよく使う“名前の付け方”のルールの一つです。先頭は小文字。単語の区切りごとに、次の...
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、うまくいったよ...
スポンサーリンク