JavaScript

スポンサーリンク
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 – 開発環境判定

「開発環境判定」とは何を判定するのかまず言葉を整理します。ここでいう「開発環境判定」は、ざっくり言うと「今このコードは“本番”で動いているのか、“開発用”で動いているのか」を判定するためのユーティリテ...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 – Chrome 判定

なぜ「Chrome 判定」ユーティリティが欲しくなるのか業務システムを書いていると、「ほとんどのユーザーは Chrome(または Chrome 系)を使っている」という前提で設計されることが多いです。...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 – Android 判定

なぜ「Android 判定」ユーティリティが必要になるのかモバイル対応をしていると、「iOS と Android で挙動が微妙に違う」という場面に必ずぶつかります。同じ“スマホ”でも、こういう差があり...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 – iOS 判定

なぜ「iOS 判定」ユーティリティが必要になるのかモバイル判定より一歩踏み込んだのが「iOS 判定」です。業務システムを作っていると、こういう“iOS 特有の事情”にぶつかります。Safari(iOS...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 – モバイル判定

なぜ「モバイル判定」ユーティリティが必要になるのか業務システムでも、今は「PC だけ」ではなく「スマホ・タブレット」からの利用が当たり前になっています。その結果、こういう要件がよく出てきます。PC で...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 – ブラウザ判定

なぜ「ブラウザ判定」ユーティリティが業務で必要になるのか業務システムをブラウザで動かしていると、「Chrome では動くのに、IE だと落ちる」「スマホの Safari だけ挙動が違う」みたいなこと、...
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 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 が「一番早く 成功でも失...
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 | 1 日 120 分 × 7 日アプリ学習:API通信アプリ(Datamuse APIで語彙検索アプリ)

Datamuse API 編 1日目へようこそ今日は 「API 通信アプリの基礎を“実際に動く形”で理解する」 ことがゴールです。Datamuse API は「単語の関連語・類義語・韻を踏む単語」を返...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:型チェック – 有限数判定

有限数判定とは何を見分けたいのか有限数判定は、「その値が 無限大(Infinity / -Infinity)でもなく、NaN でもなく、ちゃんとした“有限の数値”かどうか」を見分けることです。業務では...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:型チェック – 負の数判定

「負の数判定」とは何を見分けたいのか負の数判定は、「その値が“0 より小さい数値として扱ってよいか”どうか」を見分けることです。業務では、赤字金額、減算値、差分(マイナス方向)、残高の変化量など、「負...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:型チェック – 正の数判定

「正の数判定」とは何を見分けたいのか正の数判定は、「その値が“0 より大きい数値として扱ってよいか”どうか」を見分けることです。業務では「数量」「個数」「ページ番号」「在庫数」「ポイント」「金額(マイ...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:型チェック – NaN 判定

NaN 判定とは何を見分けたいのかNaN 判定は、「その値が“数値型ではあるけれど壊れた値(NaN)かどうか”」を見分けることです。NaN は “Not a Number” の略ですが、型としては n...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:型チェック – 数値判定

「数値判定」とは何を見分けたいのかここでいう「数値判定」は、その値が「本当に“数値として扱っていいものか”どうか」を見分けることです。JavaScript では、"10" のような文字列も、10 のよ...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:型チェック – Promise 判定

Promise 判定とは何を見分けたいのかここでいう「Promise 判定」は、その値が「非同期処理を表す Promise なのかどうか」を見分けることです。業務コードでは、async/await や...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:型チェック – Date 判定

「Date 判定」とは何を見分けたいのかここでいう「Date 判定」は、その値が「本物の Date オブジェクトかどうか」を見分けることです。業務では「日付を表す値」がたくさん出てきますが、その正体は...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:型チェック – 関数判定

関数判定とは何を見分けたいのか「関数判定」は、その値が「本当に関数かどうか」を見分けることです。業務コードでは、「コールバックを受け取る」「オプションでフック関数を渡せる」「イベントハンドラを登録する...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:型チェック – オブジェクト判定

「オブジェクト判定」とは何を見分けたいのか「オブジェクト判定」と聞くと、「typeof value === 'object' って書けばいいんでしょ?」と思いがちですが、実務ではそれだと足りません。J...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:型チェック – 配列判定

配列判定とは何か「配列判定」は、その値が「本当に配列かどうか」を見分けることです。JavaScript では、配列もオブジェクトの一種なので、typeof だけでは配列かどうかを判定できません。con...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:基本判定・変換 – 浮動小数変換

「浮動小数変換」とは何をするものか浮動小数変換は、「文字列や整数などの値を“小数を含む数値”として安全に扱える形にする」ことです。金額(小数点以下の税率や手数料)、割合、重さ、距離、レート、単価など、...
スポンサーリンク