JavaScript

スポンサーリンク
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 - オンライン状態判定

なぜ「オンライン状態判定」ユーティリティが業務で重要なのか業務システムでも、ユーザーは常に安定したネットワーク環境にいるとは限りません。社内 Wi-Fi が不安定、移動中のモバイル回線、一瞬だけオフラ...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 - タイムゾーン取得

なぜ「タイムゾーン取得」ユーティリティが業務で重要なのか業務システムで日付や時刻を扱うとき、必ず出てくるのが「タイムゾーン」の問題です。日本のユーザーと海外のユーザーが混在していたり、サーバーは UT...
JavaScript

JavaScript Tips | 基本・共通ユーティリティ:環境 ‐ 言語設定取得

なぜ「言語設定取得」ユーティリティが必要になるのか業務システムを作っていると、「日本語ユーザーには日本語で」「英語ユーザーには英語で」といった多言語対応の話がほぼ確実に出てきます。ここで大事なのは、「...
JavaScript

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

「本番環境判定」は何のためにあるのか「本番環境判定」は、「今このコードは“お客さんが触っている本番”なのか、それ以外(開発・検証)なのか」を判定するためのユーティリティです。業務システムでは、同じコー...
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...
スポンサーリンク