JavaScript
JavaScript | DOM 操作：フォーム操作 – フォーム要素の取得
JavaScript
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － 英数字判定
「英数字判定」で何をチェックしたいのかをはっきりさせるまず最初に決めておきたいのは、あなたがやりたいのは次のどちらかです。「文字列が“全部”英数字だけかどうかを判定したい」「文字列の中に“英数字が含ま...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － URL 判定
「URL 判定」で本当にやりたいことは何かまず、「URL 判定」と聞くと、「正規表現で http から始まるかどうかをチェックする」みたいなイメージを持ちがちですが、それだとだいたい痛い目を見ます。業...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － 郵便番号判定
郵便番号判定で「何をしたいか」を先に決めるまずゴールをはっきりさせましょう。ここでやりたいのは、「日本の郵便番号として“それっぽいか”を判定するユーティリティを作ること」です。日本の郵便番号は、基本的...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － 電話番号判定
まず「電話番号判定」でやりたいことをはっきりさせる最初に決めておきたいのは、「どこまで厳しく判定するか」です。電話番号って、現実にはいろんな形で入力されます。03-1234-5678090-1234-...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － メールアドレス判定
「メールアドレス判定」はどこまでやるべきか最初に一番大事なことを言います。メールアドレス判定は「完璧」を目指さないほうがいいです。RFC に完全準拠しようとすると、正規表現が怪物みたいになりますし、現...
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 Tips | 文字列ユーティリティ：整形 － 小文字変換
「小文字変換」ユーティリティは何のために使うのか大文字変換と対になるのが「小文字変換」です。次のような値を考えてみてください。"ABC""Abc""abc"人間からすると「同じ abc」ですが、コンピ...
JavaScript JavaScript Tips | 文字列ユーティリティ：整形 － 大文字変換
「大文字変換」ユーティリティは何のために使うのかまずイメージからいきます。次のような値があるとします。"abc""Abc""ABC"人間から見ると「だいたい同じ」ですが、コンピュータ的には全部別物です...
JavaScript JavaScript Tips | 文字列ユーティリティ：整形 － 半角→全角
「半角→全角」ユーティリティは何のために使うのかさっきの「全角→半角」と逆方向の話です。業務システムでは、こんな要望がよく出ます。帳票や PDF で、桁をきれいに揃えたいから全角で出したい。画面上の見...
JavaScript JavaScript Tips | 文字列ユーティリティ：整形 － 全角→半角
「全角→半角」ユーティリティは何を解決してくれるのかまず、よくある業務の“あるある”からいきます。ユーザーが「１２３４」と全角数字で入力してくる。「＠」や「－」が全角のせいでメールアドレス判定に落ちる...
JavaScript JavaScript Tips | 文字列ユーティリティ：整形 － trim
trim は「余計な空白をきれいに落とす」道具まずイメージからいきましょう。ユーザーがフォームにこう入力したとします。" 山田太郎 "（前後にスペース付き）見た目は同じ「山田太郎」でも、実際の文字列と...
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 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 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 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 のよ...