JavaScript

スポンサーリンク
JavaScript

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

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

JavaScript Tips | 基本・共通ユーティリティ:汎用 – 処理回数制限

「処理回数制限」ユーティリティは何を守るためのものか「処理回数制限」は、「この関数は最大〇回までしか動かさない」というルールをコードで表現するためのユーティリティです。例えば次のような場面を想像してみ...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:汎用 – 実行時間計測

なぜ「実行時間計測」ユーティリティが業務で効いてくるのか業務コードを書いていると、「この処理、なんか重くない?」「どこがボトルネックなのか分からない」という場面が必ず出てきます。ここで大事なのは、「体...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:汎用 – 連番生成

「連番生成」ユーティリティは何に使うのか連番生成は、「1, 2, 3, 4, … と増えていく番号を、安全に・簡単に振るための仕組み」です。業務コードでは、次のような場面でよく使います。テーブルの行 ...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:汎用 – UUID 生成

UUID ってそもそも何者?まず言葉から整理します。UUID は Universally Unique Identifier(ほぼ世界中で一意な識別子) の略です。見た目はだいたいこんな感じの文字列で...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:汎用 – ランダム ID 生成

なぜ「ランダム ID 生成」が業務ユーティリティになるのか業務コードでは、意外なほど頻繁に「一意な ID(かぶらない識別子)」が必要になります。一時的なデータのキーフロント側だけで使う仮 IDDOM ...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:汎用 – タイムアウト実行

タイムアウト実行とは何を守るための仕組みなのか「タイムアウト実行」は、“一定時間以内に終わらなかった処理を強制的に中断し、失敗として扱う”ためのユーティリティです。業務システムでは、次のような問題が頻...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:汎用 – 再試行処理

なぜ「再試行処理」が業務ユーティリティとして必須になるのか業務システムで一番よくあるのが「外部としゃべる処理」です。API 呼び出し、DB アクセス、外部サービス連携、キュー処理など、どれも「たまに失...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:汎用 – 遅延実行

「遅延実行」とは何をしたいテクニックか「遅延実行」は、その名の通り「今すぐではなく、少し時間をおいてから処理を実行する」ためのテクニックです。例えば、次のような場面をイメージしてください。ユーザーがボ...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:汎用 – 一度だけ実行

「一度だけ実行」ユーティリティが欲しくなる場面業務コードを書いていると、「この処理は絶対に一回だけ動いてほしい」という場面がよく出てきます。初期化処理(同じ初期化を二回やると壊れる)イベント登録(同じ...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:汎用 – no-op 関数

no-op 関数ってそもそも何?「no-op(ノーオペ)」は no operation の略で、「何もしない関数」 のことです。JavaScript だと、いちばんシンプルな形はこれです。functi...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:API通信アプリ(ExchangeRate.host)

1日目のゴールと今日やること1日目のテーマは「ExchangeRate.host API を使って“シンプルな通貨レート取得アプリ”を作りながら、fetch / async‑await / エラーハン...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:API通信アプリ(Nager.Date API)

1日目のゴールと今日やること1日目のテーマは「Nager.Date API を使って “今年の祝日一覧アプリ” を作りながら、fetch / async‑await / エラーハンドリングの基本パター...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:安全処理 – 安全な数値計算

なぜ「安全な数値計算」が業務で重要になるのか業務コードの数値計算は、単なる足し算・引き算では終わりません。外部 API のレスポンス、フォーム入力、DB の値など、「本当に数値か分からないもの」を相手...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:安全処理 – null 合体代入

「null 合体代入」とは何をしてくれる構文か「null 合体代入」は、「その変数が null または undefined のときだけ、デフォルト値を代入する」ということを一発で書ける構文です。Jav...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:安全処理 – undefined 防止代入

「undefined 防止代入」とは何を守りたいのか「undefined 防止代入」は、一言でいうと「よく分からない値を代入したせいで、ちゃんと入っていた値を undefined で上書きしてしまう事...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:安全処理 – 存在チェック付き実行

「存在チェック付き実行」とは何を守りたいのか存在チェック付き実行は、一言でいうと「その値が“本当に実行していい関数か”を確認してから呼ぶ」ためのパターンです。業務コードでよくあるのが、こういうやつです...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:安全処理 – オプショナル取得

「オプショナル取得」とは何を楽にしたいのかオプショナル取得は、一言でいうと「あるかもしれないし、ないかもしれない値を“落とさずに”扱うための取り方」です。業務コードだと、こんな状況が日常茶飯事です。u...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:安全処理 – 安全なプロパティ取得

なぜ「安全なプロパティ取得」が業務で必須になるのか業務コードで一番よく見るエラーの一つがこれです。Cannot read properties of undefined (reading 'xxx')...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:安全処理 – デフォルト値補完

なぜ「デフォルト値補完」が業務でめちゃくちゃ大事なのか業務コードでは、「外から来る値」がとにかく信用できません。API レスポンス、フォーム入力、設定ファイル、環境変数、ローカルストレージなど、どれも...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:安全処理 – try-catch ラッパー

なぜ「try-catch ラッパー」が業務で効いてくるのかまず前提として、JavaScript の try-catch は「例外が投げられても、アプリ全体を落とさずに処理を続けるための仕組み」です。t...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:安全処理 – 安全な JSON stringify

JSON.stringify の基本をまず押さえるJSON.stringify は、「JavaScript の値(オブジェクトや配列など)を JSON 文字列に変換する関数」です。const obj ...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:安全処理 – 安全な JSON parse

JSON.parse が「危険」になりやすい理由まず前提として、JSON.parse は「JSON 形式の文字列を、JavaScript の値(オブジェクトや配列など)に変換する関数」です。const...
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 が「一番早く 成功でも失...
スポンサーリンク