JavaScript
JavaScript | 基礎構文：文字列操作 – 分割（split）
JavaScript Tips
JavaScript JavaScript Tips | 数値・計算：数値を小数点以下指定桁数にする
業務・実務で使える JavaScript ユーティリティ：数値を小数点以下指定桁数にする方法JavaScriptで数値を小数点以下指定桁数にしたい場面は、業務でも非常によくあります。金額の表示、税率や...
JavaScript JavaScript Tips | 数値・計算：数値を整数に丸める
業務・実務で使える JavaScript ユーティリティ：数値を整数に丸める方法JavaScriptで数値を整数に丸めたい場面は、業務でも非常によくあります。請求金額の端数処理、画面のページ番号、在庫...
JavaScript JavaScript Tips | 数値・計算：整数かどうか判定する
業務・実務で使える JavaScript ユーティリティ：整数かどうか判定する方法JavaScriptで「整数かどうか」を判定したい場面は、業務でも非常によくあります。ページ番号、在庫数、件数、年齢、...
JavaScript JavaScript Tips | 数値・計算：NaNを安全に判定する
業務・実務で使える JavaScript ユーティリティ：NaNを安全に判定する方法JavaScriptで計算や数値変換をしていると、ある日突然 NaN が出てきて困ることがあります。フォーム入力の計...
JavaScript JavaScript Tips | 数値・計算：数値かどうか判定する
業務・実務で使える JavaScript ユーティリティ：数値かどうか判定する方法JavaScriptで「数値かどうか」を判定したい場面は非常に多いです。フォーム入力の金額、CSVから読み込んだ数量、...
JavaScript JavaScript Tips | 文字列操作：文字列をURL用にエンコードする
業務・実務で使える JavaScript ユーティリティ：文字列をURL用にエンコードする方法JavaScriptで検索キーワードや商品名などの文字列をURLへ組み込むには、用途に応じて encode...
JavaScript JavaScript Tips | 文字列操作：文字列を安全にHTMLエスケープする
業務・実務で使える JavaScript ユーティリティ：文字列を安全にHTMLエスケープする方法JavaScriptで文字列をHTMLエスケープするには、HTMLで特別な意味を持つ文字を、< ...
JavaScript JavaScript Tips | 文字列操作：文字列からHTMLタグを除去する
業務・実務で使える JavaScript ユーティリティ：文字列からHTMLタグを除去する方法JavaScriptでHTMLを含む文字列から本文だけを取り出したい場合は、HTMLを解析してからテキスト...
JavaScript JavaScript Tips | 文字列操作：文字列内の指定文字をすべて置換する
JavaScriptで文字列内の指定文字をすべて置換する方法JavaScriptで文字列内の指定文字をすべて置き換えるには、基本的にreplaceAll()を使います。例えば、商品コードの区切り文字を...
JavaScript JavaScript Tips | 文字列操作：文字列が指定文字列で終わるか判定する
業務・実務で使える JavaScript ユーティリティ：文字列が指定文字列で終わるか判定する方法JavaScriptで文字列が指定した文字列で終わるかを判定するには、endsWith() を使います...
JavaScript JavaScript Tips | 文字列操作：文字列が指定文字列で始まるか判定する
業務・実務で使える JavaScript ユーティリティ：文字列が指定文字列で始まるか判定する方法JavaScriptで「文字列が指定した文字列で始まるか」を判定する処理は、業務・実務で非常によく使い...
JavaScript JavaScript Tips | 文字列操作：文字列に指定文字が含まれるか判定する
業務・実務で使える JavaScript ユーティリティ：文字列に指定文字が含まれるか判定する方法JavaScriptで「文字列に指定した文字や単語が含まれているか」を判定する処理は、業務・実務で非常...
JavaScript JavaScript Tips | 文字列操作：文字列を単語配列に変換する
業務・実務で使える JavaScript ユーティリティ：文字列を単語配列に変換する方法JavaScriptで文字列を単語配列に変換する処理は、業務開発で非常によく使います。検索キーワードの分割、タグ...
JavaScript JavaScript Tips | 文字列操作：CONSTANT_CASEに変換する
業務・実務で使える JavaScript ユーティリティ：文字列を CONSTANT_CASE に変換する方法JavaScriptで文字列を CONSTANT_CASE に変換する処理は、業務開発でと...
JavaScript JavaScript Tips | 文字列操作：kebab-caseに変換する
業務・実務で使えるJavaScriptユーティリティ：kebab-caseに変換する方法プログラミングの現場では、「UserName」のようなパスカルケースや「userName」のようなキャメルケース...
JavaScript JavaScript Tips | 文字列操作：snake_caseに変換する
業務・実務で使えるJavaScriptユーティリティ：snake_caseに変換する方法プログラミングの現場では、「UserName」のようなパスカルケースや「userName」のようなキャメルケース...
JavaScript JavaScript Tips | 文字列操作：PascalCaseに変換する
業務・実務で使えるJavaScriptユーティリティ：PascalCaseに変換する方法プログラミングの現場では、「user_name」のようなスネークケースや「userName」のようなキャメルケー...
JavaScript JavaScript Tips | 文字列操作：camelCaseに変換する
業務・実務で使えるJavaScriptユーティリティ：camelCaseに変換する方法プログラミングの現場では、「user_name」のようなスネークケースや「UserName」のようなパスカルケース...
JavaScript JavaScript Tips | 文字列操作：文字列の先頭文字を小文字にする
業務・実務で使えるJavaScriptユーティリティ：文字列の先頭文字を小文字にする方法プログラミングの現場では、「クラス名を変数名に変換したい」「APIのレスポンスをそのまま使いたい」といった場面で...
JavaScript JavaScript Tips | 文字列操作：文字列の先頭文字を大文字にする
業務・実務で使えるJavaScriptユーティリティ：文字列の先頭文字を大文字にする方法プログラミングの現場では、「ユーザー名の最初の文字を大文字にしたい」「商品名を見栄えよく表示したい」といった場面...
JavaScript JavaScript Tips | 文字列操作：文字列を省略記号付きで切り詰める
文字列を省略記号付きで切り詰めるとは業務システムやWebアプリケーションでは、長い文字列をそのまま表示すると画面レイアウトが崩れたり、一覧画面の視認性が低下したりすることがあります。そのため実務では、...
JavaScript JavaScript Tips | 文字列操作：文字列を指定文字数で切り詰める
文字列を指定文字数で切り詰めるとは業務システムやWebアプリケーションでは、長い文字列を一定の長さで表示したい場面が頻繁にあります。例えば次のようなケースです。商品一覧の商品名表示お知らせ一覧のタイト...
JavaScript JavaScript Tips | 文字列操作：改行コードを統一する
改行コードを統一するとは業務システムやWebアプリケーションでは、メモ欄、メール本文、CSVデータ、ログファイル、テキストファイルなどの文字列を扱う機会が非常に多くあります。その際に意外と問題になるの...
JavaScript JavaScript Tips | 文字列操作：改行を削除する
改行を削除するとは業務システムやWebアプリケーションでは、ユーザー入力やCSVデータ、テキストファイル、メール本文などを扱う機会が非常に多くあります。その中でよく発生するのが、不要な改行が含まれた文...
JavaScript JavaScript Tips | 文字列操作：連続する空白を1つにまとめる
連続する空白を1つにまとめるとは業務システムやWebアプリケーションでは、ユーザーが入力した文字列に不要な空白が含まれていることがよくあります。例えば氏名、住所、商品名、メモ欄などでは、誤って複数の半...
JavaScript JavaScript Tips | 文字列操作：文字列の全角空白を削除する
「文字列の全角空白を削除する」は“日本語入力特有のバグを防ぐための専用クリーナー”です業務・実務で使うWebアプリケーションを日本語環境で運用していると、 「全角スペース（全角空白）」が原因のバグに必...
JavaScript JavaScript Tips | 文字列操作：文字列の前後の空白を削除する
「文字列の前後の空白を削除する」は“入力をきれいに整えるクリーニングユーティリティ”です業務・実務で使うWebアプリケーションでは、ユーザー入力や設定値、検索キーワードなどに「余計な空白」が紛れ込むこ...
JavaScript JavaScript Tips | 文字列操作：null / undefined / 空文字をまとめて判定する
「null / undefined / 空文字をまとめて判定する」は“値があるかないかを一発で見抜く基礎ユーティリティ”です業務・実務で使うJavaScriptコードでは、 「この値は“ちゃんと入って...
JavaScript JavaScript Tips | 文字列操作：文字列が空白だけか判定する
「文字列が空白だけか判定する」は“ユーザー入力のノイズを見抜くフィルター”です業務・実務で使うWebアプリケーションでは、 「入力されているように見えるけれど、実は意味のない値」が紛れ込むことがありま...
JavaScript JavaScript Tips | 文字列操作：文字列が空文字か判定する
「文字列が空文字か判定する」は“バグを防ぐための一番小さいガード”です業務・実務で使うJavaScriptコードでは、 「文字列が空かどうか」を判定する処理は、ほぼすべての画面・APIで登場します。必...
JavaScript JavaScript Tips | ブラウザ・画面制御：ブラウザ機能の対応状況を確認する
「ブラウザ機能の対応状況を確認する」は“壊れないWebアプリを作るための安全確認ユーティリティ”です業務・実務で使うWebアプリケーションでは、 ユーザーが使うブラウザや端末は、必ずしも最新・同一とは...
JavaScript JavaScript Tips | ブラウザ・画面制御：Web Share APIを利用する
「Web Share APIを利用する」は“ネイティブアプリ級のシェア体験をWebに持ち込むユーティリティ”です業務・実務で使うWebアプリケーションでも、 「この画面を同僚に共有したい」「このレポー...
JavaScript JavaScript Tips | ブラウザ・画面制御：ブラウザ通知を表示する
「ブラウザ通知を表示する」は“画面の外からユーザーにそっと声をかけるためのユーティリティ”です業務・実務で使うWebアプリケーションでは、 ユーザーが常にそのタブだけを見ているとは限りません。別タブで...
JavaScript JavaScript Tips | ブラウザ・画面制御：beforeunloadを扱う
「beforeunloadを扱う」は“ユーザーの離脱直前に、最後のひと声をかけるためのユーティリティ”です業務・実務で使うWebアプリケーションでは、 ユーザーがページを離れる「直前」は、とても重要な...
JavaScript JavaScript Tips | ブラウザ・画面制御：ページ離脱を検出する
「ページ離脱を検出する」は“ユーザーの作業途中を守り、ログやトラッキングを正しく残すためのユーティリティ”です業務・実務で使うWebアプリケーションでは、 ユーザーがページを離れる瞬間は、とても重要な...
JavaScript JavaScript Tips | ブラウザ・画面制御：faviconを変更する
「faviconを変更する」は“タブの小さなアイコンで状態やブランドを伝えるユーティリティ”です業務・実務で使うWebアプリケーションでは、 画面の中身だけでなく、ブラウザタブに表示される小さなアイコ...
JavaScript JavaScript Tips | ブラウザ・画面制御：ページタイトルを変更する
「ページタイトルを変更する」は“タブの中でユーザーに語りかけるためのユーティリティ”です業務・実務で使うWebアプリケーションでは、 画面の中身だけでなく、ブラウザタブに表示される「ページタイトル」も...
JavaScript JavaScript Tips | ブラウザ・画面制御：印刷ダイアログを開く
「印刷ダイアログを開く」は“紙の世界とWebアプリをつなぐためのユーティリティ”です業務・実務で使うWebアプリケーションでは、 「画面の内容を紙に出したい」「PDFとして保存したい」というニーズが根...
JavaScript JavaScript Tips | ブラウザ・画面制御：Clipboardから貼り付ける
「Clipboardから貼り付ける」は“ユーザーの入力を自動化するがゆえに、慎重さが求められるユーティリティ”です業務・実務で使うWebアプリケーションでは、 「ユーザーが他のツールや画面からコピーし...
JavaScript JavaScript Tips | ブラウザ・画面制御：Clipboardへコピーする
「Clipboardへコピーする」は“ユーザーの手作業を一瞬で減らすためのユーティリティ”です業務・実務で使うWebアプリケーションでは、 「ユーザーが画面上の情報をコピーして、別のツールや画面に貼り...
JavaScript JavaScript Tips | ブラウザ・画面制御：Fullscreenを制御する
「Fullscreenを制御する」は“ユーザーの集中と作業空間を最大化するためのユーティリティ”です業務・実務で使うWebアプリケーションでも、 「画面をフルスクリーン表示にしたい」というニーズは意外...
JavaScript JavaScript Tips | ブラウザ・画面制御：タブがアクティブか判定する
「タブがアクティブか判定する」は“ユーザーの視線に合わせて処理を賢く切り替えるためのユーティリティ”です業務・実務でWebアプリケーションを作っていると、 「ユーザーが今このタブを見ているのか、それと...
JavaScript JavaScript Tips | ブラウザ・画面制御：ページのVisibilityを取得する
「ページのVisibilityを取得する」は“ユーザーが見ていない時間を賢く扱うための技術”です業務・実務でWebアプリケーションを作っていると、 「ユーザーが今このページを見ているのか、それとも別タ...
JavaScript JavaScript Tips | ブラウザ・画面制御：ネットワーク状態を監視する
「ネットワーク状態を監視する」は“通信前提のUIを賢く守るための中枢ユーティリティ”です業務・実務で使うWebアプリケーションは、ほぼすべてがサーバーとの通信を前提にしています。 しかし、ユーザーのネ...
JavaScript JavaScript Tips | ブラウザ・画面制御：オフライン状態を検出する
「オフライン状態を検出する」は“ユーザーを不安にさせないための守りのユーティリティ”です業務システムやWebアプリケーションは、サーバーとの通信が前提になっていることが多いですが、 現場のユーザーはい...
JavaScript JavaScript Tips | ブラウザ・画面制御：オンライン状態を取得する
「オンライン状態を取得する」は“通信前提のUIを安全に設計するための土台”です業務システムやWebアプリケーションは、ほぼすべてが「ネットワーク前提」で動いています。 しかし、現実のユーザー環境では、...
JavaScript JavaScript Tips | ブラウザ・画面制御：ブラウザを判定する
「ブラウザを判定する」は“環境依存の違いをできるだけ安全に扱うための最後の手段”です業務・実務でJavaScriptを書いていると、「このユーザーはどのブラウザを使っているのか？」を知りたくなる場面が...
JavaScript JavaScript Tips | ブラウザ・画面制御：OSを判定する
「OSを判定する」は“環境依存の挙動を最小限に安全に扱うための技術”です業務・実務でJavaScriptを使っていると、 「このユーザーは Windows なのか？ macOS なのか？ iOS / ...
JavaScript JavaScript Tips | ブラウザ・画面制御：ダークモードか判定する
「ダークモードか判定する」は“ユーザーの目と集中力”に寄り添うための入口です業務システムやWebアプリケーションでも、 ダークモード（暗いテーマ）をサポートすることが当たり前になりつつあります。夜間や...
JavaScript JavaScript Tips | ブラウザ・画面制御：タッチデバイスか判定する
「タッチデバイスか判定する」は“どんな操作を前提にUIを設計するか”を決めるための軸です業務システムやWebアプリケーションでは、 「マウス前提のUI」と「タッチ前提のUI」をどう切り替えるかが、ユー...
JavaScript JavaScript Tips | ブラウザ・画面制御：スマートフォンか判定する
「スマートフォンか判定する」は“モバイル体験”を切り替えるための入口です業務システムやWebアプリケーションでは、「スマートフォン向けのUI」を意識した設計が欠かせません。スマホではハンバーガーメニュ...
JavaScript JavaScript Tips | ブラウザ・画面制御：タブレットか判定する
「タブレットか判定する」は“中間デバイス向けのUI”を切り替えるための鍵です業務システムやWebアプリケーションでは、「PC」「スマホ」だけでなく、 「タブレット」という中間的なデバイスを意識したUI...
JavaScript JavaScript Tips | ブラウザ・画面制御：PCか判定する
「PCか判定する」は“どのデバイス向けの体験を出すか”を決める入口です業務システムやWebアプリケーションでは、 「PC向けのUI」と「スマホ・タブレット向けのUI」を切り替えたい場面が非常に多いです...
JavaScript JavaScript Tips | ブラウザ・画面制御：現在の画面高さを取得する
「現在の画面高さを取得する」は“縦方向のUX”を整えるための基盤です業務システムやWebアプリケーションでは、横幅だけでなく「縦方向のサイズ」を意識したUI設計がとても重要になります。画面高さに応じて...
JavaScript JavaScript Tips | ブラウザ・画面制御：現在の画面幅を取得する
「現在の画面幅を取得する」はレスポンシブUIの出発点です業務システムやWebアプリケーションでは、 「画面の幅に応じてUIの挙動を変えたい」というニーズが非常に多いです。画面幅が狭いときはサイドバーを...
JavaScript JavaScript Tips | UI・画面部品：UIコンポーネントを再利用可能にする
「UIコンポーネントを再利用可能にする」とは何を目指すのか業務システムやWebアプリケーションでは、同じようなUI部品が画面のあちこちに登場します。ボタン（決定・キャンセル・保存など）モーダルダイアロ...
JavaScript JavaScript Tips | UI・画面部品：UI状態を一元管理する
「UI状態を一元管理する」とは何かをまず言葉で整理する業務システムやWebアプリケーションでは、画面上にたくさんのUI部品が存在します。モーダルが開いているか／閉じているかサイドバーが展開されているか...
JavaScript JavaScript Tips | UI・画面部品：MutationObserverを共通化する
MutationObserverは「DOMの変化をトリガーに処理を走らせるための監視インフラ」です業務システムやWebアプリケーションでは、DOM（画面の要素）が動的に変化する場面がたくさんあります。...
JavaScript JavaScript Tips | UI・画面部品：ResizeObserverを共通化する
ResizeObserverは「要素のサイズ変化を賢く共有するための共通インフラ」です業務システムやWebアプリケーションでは、要素のサイズが変わるタイミングでUIを更新したい場面がたくさんあります。...
JavaScript JavaScript Tips | UI・画面部品：IntersectionObserverを共通化する
IntersectionObserverは「画面内に入ったタイミングを賢く共有するための共通インフラ」ですIntersectionObserverは、要素がビューポート（画面）に入ったかどうかを ブラ...
JavaScript JavaScript Tips | UI・画面部品：Lazy Loadを実装する
Lazy Loadは「必要になった瞬間にだけ重いリソースを読み込む」ための技術です業務システムやWebアプリケーションでは、画面に大量の画像やコンポーネントを配置することがよくあります。 しかし、それ...
JavaScript JavaScript Tips | UI・画面部品：スクロールロックする
無限スクロールは「ユーザーにページ遷移を意識させずにデータを流し続ける」ための仕組みです業務システムやWebアプリケーションで、一覧画面に大量のデータを表示したいとき、 「ページ番号付きのページネーシ...
JavaScript JavaScript Tips | UI・画面部品：スクロールロックする
スクロールロックは「ユーザーの視線を今扱っているコンテンツに固定する」ための技術です業務システムやWebアプリケーションでは、モーダルダイアログやフルスクリーンメニュー、サイドバーなどを表示したときに...
JavaScript JavaScript Tips | UI・画面部品：ハンバーガーメニューを制御する
ハンバーガーメニューは「限られた画面スペースでナビゲーションを出し入れする」ためのUI部品ですハンバーガーメニューは、三本線のアイコン（☰）をクリックすると ナビゲーションメニューが開閉する仕組みのこ...
JavaScript JavaScript Tips | UI・画面部品：Sidebarを開閉する
Sidebarは「画面の軸になるナビゲーション」をコンパクトに出し入れするためのUI部品です業務システムや管理画面では、画面の左側や右側に Sidebar（サイドバー） を置いて、 メニューやフィルタ...
JavaScript JavaScript Tips | UI・画面部品：Popoverを実装する
Popoverは「その場で小さなカードを開いて、少しリッチな情報や操作を見せる」UI部品です業務システムやWebアプリケーションでは、ユーザーに対して「ちょっと詳しい説明」や「簡単な入力フォーム」「ミ...
JavaScript JavaScript Tips | UI・画面部品：Tooltipを実装する
Tooltipは「その場でサッと補足説明を出す」ためのUI部品です業務システムやWebアプリケーションでは、画面上に専門用語や略語、アイコンだけのボタンなどが登場しやすいです。 しかし、すべてに長い説...
JavaScript JavaScript Tips | UI・画面部品：Dropdownを実装する
Dropdownは「選択肢をコンパクトにまとめて、必要なときだけ開く」ためのUI部品です業務システムやWebアプリケーションでは、ユーザーに「いくつかの選択肢の中から1つを選んでもらう」場面が非常に多...
JavaScript JavaScript Tips | UI・画面部品：Tabsを実装する
Tabsは「関連する情報を横並びで切り替える」ためのUI部品です業務システムやWebアプリケーションでは、 1つの画面の中に「関連しているけれど、同時に全部見せる必要はない情報」がよく登場します。「概...
JavaScript JavaScript Tips | UI・画面部品：Accordionを実装する
Accordionは「情報を折りたたんで、必要なときだけ開く」ためのUI部品です業務システムやWebアプリケーションでは、画面に載せたい情報が多くなりがちです。よくある質問（FAQ）詳細設定項目ログや...
JavaScript JavaScript Tips | UI・画面部品：Progress Barを制御する
Progress Barは「どこまで進んだか」をユーザーに見せるための“進捗の顔”です業務システムでは、処理に時間がかかる場面が少なくありません。大量データのインポート・エクスポートバッチ処理の進行状...
JavaScript JavaScript Tips | UI・画面部品：Spinnerを制御する
Spinnerを制御するユーティリティは「処理中であることを最小限の演出で伝えるための仕組み」です業務システムやWebアプリケーションでは、 「今、処理中です」という状態をユーザーに伝えるために Sp...
JavaScript JavaScript Tips | UI・画面部品：Loadingを非表示にする
「Loadingを非表示にする」ユーティリティは“処理の終わりをきちんと伝えるための仕上げ”ですLoading表示は、ユーザーに「今は処理中です」と伝えるための大事なUI部品ですが、 それ以上に重要な...
JavaScript JavaScript Tips | UI・画面部品：Loadingを表示する
Loading表示のユーティリティは「ユーザーに“待っている理由”を伝えるための仕組み」です業務システムでは、次のような「待ち時間」が頻繁に発生します。サーバーにデータを保存している大量データを検索し...
JavaScript JavaScript Tips | UI・画面部品：Confirmダイアログを作る
Confirmダイアログは「ユーザーに最終確認してもらうための“ブレーキ”」です業務システムでは、ユーザーの操作が重大な結果を生むことがよくあります。レコードを削除する大量データを一括更新する送信後に...
JavaScript JavaScript Tips | UI・画面部品：Alertを表示する
Alertを表示するユーティリティは「ユーザーに“重要な情報”をはっきり伝えるための仕組み」です業務システムやWebアプリケーションでは、 ユーザーに対して「これは知っておいてほしい」「注意してほしい...
JavaScript JavaScript Tips | UI・画面部品：Toastを表示する
Toastを表示するユーティリティは「ユーザーにさりげなく“結果”を伝えるための仕組み」です業務システムやWebアプリケーションでは、 ユーザーの操作に対して「結果」を伝える場面がたくさんあります。保...
JavaScript JavaScript Tips | UI・画面部品：Modalの多重表示を防ぐ
Modalの多重表示を防ぐユーティリティは「画面を“ごちゃごちゃさせない”ための安全装置」です業務システムでModal（モーダルダイアログ）を使っていると、 次のような状況に遭遇することがあります。ユ...
JavaScript JavaScript Tips | UI・画面部品：Modalを閉じる
Modalを閉じるユーティリティは「ユーザーを元の画面にスムーズに“帰す”ための仕組み」です業務システムでModal（モーダルダイアログ）を使うとき、 「開く」こと以上に大事なのが 「どう閉じるか」 ...
JavaScript JavaScript Tips | UI・画面部品：Modalを開く
Modalを開くユーティリティは「ユーザーの集中を一時的に一点に集めるための仕組み」です業務システムやWebアプリケーションでは、Modal（モーダルダイアログ）は非常によく使われます。確認ダイアログ...
JavaScript JavaScript Tips | セキュリティ：セキュリティログ用データを整形する
セキュリティログ用データを整形することは「後から“何が起きたか”を正しく再現するための土台づくり」です業務システムでセキュリティを真面目に考え始めると、 必ずと言っていいほど出てくるのが 「ログ」 の...
JavaScript JavaScript Tips | セキュリティ：URLパラメータの入力検証
URLパラメータの入力検証は「外部から渡される値に“権限”を渡しすぎないための基本設計」です業務システムでは、URLパラメータを使う場面がとても多いです。?page=2 のようなページ番号?id=12...
JavaScript JavaScript Tips | セキュリティ：MIME Type検証
MIME Type検証は「ファイルの“中身の種類”を確認して偽装を見抜くための防御」です業務システムでファイルアップロード機能を作るとき、 拡張子検証だけでは不十分であることがよく問題になります。vi...
JavaScript JavaScript Tips | セキュリティ：ファイルアップロードの拡張子検証
ファイルアップロードの拡張子検証は「危険なファイルを“入口で止める”ための基本防御」です業務システムでは、ファイルアップロード機能はとてもよく使われます。ユーザーがプロフィール画像をアップロードする取...
JavaScript JavaScript Tips | セキュリティ：外部リンクにrel属性を設定する
外部リンクにrel属性を設定することは「ユーザーと自サイトを外部ページから守るための小さくて重要な防御線」です業務システムやWebサービスでは、外部サイトへのリンクを設置する場面が多くあります。ヘルプ...
JavaScript JavaScript Tips | セキュリティ：innerHTML利用時の安全対策
innerHTML利用時の安全対策は「便利さと危険性のバランスを取るための設計」です業務システムのフロントエンドでは、innerHTML はとても魅力的なAPIです。 一行で複雑なHTMLを差し込めて...
JavaScript JavaScript Tips | セキュリティ：DOM Injectionを防止する
DOM Injectionを防止することは「画面を書き換える“権限”を外部入力に渡さない設計」です業務システムでは、JavaScriptでDOM（画面の要素）を書き換える処理が日常的に使われます。ユー...
JavaScript JavaScript Tips | セキュリティ：Open Redirectを防止する
Open Redirectを防止することは「自分のサイトを“攻撃者の踏み台”にしないための設計」です業務システムでは、ログイン後や処理完了後に「元の画面へ戻す」「指定されたURLへ遷移する」といった機...
JavaScript JavaScript Tips | セキュリティ：Token漏洩を防ぐ設計
Token漏洩を防ぐ設計は「認証の“鍵”を絶対に落とさないための全体設計」です業務システムで使われるアクセストークン（JWTなど）は、 ユーザーの認証・権限を表す 「鍵」そのもの です。このトークンを...
JavaScript JavaScript Tips | セキュリティ：Web Storageに機密情報を保存しない設計
Web Storageに機密情報を保存しない設計は「ブラウザ側を“信頼しすぎない”ための基本セキュリティ方針です」業務システムでは、localStorage や sessionStorage といった...
JavaScript JavaScript Tips | セキュリティ：iframeのOriginを検証する
iframeのOrigin検証は「画面の一部を“信頼できる外部コンテンツだけ”に限定するための防御技術です」業務システムでは、<iframe> を使って外部コンテンツを埋め込む場面がよくあります。外部...
JavaScript JavaScript Tips | セキュリティ：postMessageのOriginを検証する
postMessageのOrigin検証は「別ドメインとのメッセージ通信を“信頼できる相手だけ”に限定するための防御技術」ですwindow.postMessage は、親ページと <iframe>別タ...
JavaScript JavaScript Tips | セキュリティ：JSONPを安全に扱う
JSONPを安全に扱うことは「外部サイトからの“任意コード実行”を制御するための重要な防御技術」ですJSONP（JSON with Padding）は、古いブラウザやCORSが使えない環境で 別ドメイ...
JavaScript JavaScript Tips | セキュリティ：ユーザー入力をサニタイズする
ユーザー入力のサニタイズは「外部から来たデータを“攻撃ではなく情報”として扱うための基本防御技術」です業務システムでは、ユーザー入力を扱う場面が非常に多いです。会員登録フォームの名前・メールアドレスコ...
JavaScript JavaScript Tips | セキュリティ：危険なHTMLを除去する
危険なHTMLを除去することは「ユーザー入力を“安全なコンテンツ”だけに絞り込むための最後の防御線」です業務システムで、ユーザーが入力した内容を「リッチテキスト」として表示したい場面は多くあります。お...
JavaScript JavaScript Tips | セキュリティ：javascript: URLを拒否する
「javascript: URLを拒否する」は“リンクからのコード実行”を根本的に封じるためのセキュリティガードです業務システムで URL を扱うときに、必ず意識してほしい危険な存在が javascr...
JavaScript JavaScript Tips | セキュリティ：外部URLを検証する
外部URL検証は「ユーザーを“行ってほしくない場所”へ飛ばさないためのセキュリティゲート」業務システムでは、外部サイトへのリンクや遷移を扱う場面が多くあります。お知らせページから外部サービスへのリンク...
JavaScript JavaScript Tips | セキュリティ：URLを安全に検証する
URLを安全に検証することは「ユーザー入力や外部リンクを“信頼できる経路”だけに限定するための防御技術」業務システムで URL を扱う場面はとても多いです。ユーザーが入力したリンクを表示する外部サイト...
JavaScript JavaScript Tips | セキュリティ：XSS対策用の文字列処理をする
XSS対策用の文字列処理は「ユーザー入力を“攻撃コード”ではなく安全なデータとして扱うための基盤技術」Web業務システムで避けて通れないセキュリティテーマが XSS（クロスサイトスクリプティング）対策...
JavaScript JavaScript Tips | セキュリティ：HTMLエスケープする
HTMLエスケープは「ユーザー入力を“安全な文字列”に変換してXSS攻撃を防ぐための基本防御テクニック」業務システムで Web を扱うなら、HTMLエスケープは避けて通れないセキュリティ技術です。 特...
JavaScript JavaScript Tips | ログ・デバッグ・エラー処理：エラーをサーバーへ送信する
エラーをサーバーへ送信することは「障害を確実に記録し、運用チームへ“見える化”するための必須技術」業務システムでは、エラーをサーバーへ送信する仕組みが必ず必要になります。 理由は明確で、次のような問題...
JavaScript JavaScript Tips | ログ・デバッグ・エラー処理：開発者向けエラー情報を生成する
開発者向けエラー情報生成は「障害原因を最速で特定するための“深い技術情報”を整形して届ける技術」ユーザー向けエラーメッセージは「分かりやすさ」が目的ですが、 開発者向けエラー情報は “原因を特定するた...
JavaScript JavaScript Tips | ログ・デバッグ・エラー処理：ユーザー向けエラーメッセージを生成する
ユーザー向けエラーメッセージ生成は「技術的なエラーを“人が理解できる言葉”に翻訳するための必須技術」業務システムでは、内部で発生したエラーをそのままユーザーに見せることはできません。 理由は明確で、技...
JavaScript JavaScript Tips | ログ・デバッグ・エラー処理：エラーコードを管理する
エラーコード管理は「障害を分類し、原因特定を高速化し、運用を安定させるための必須技術」業務システムでは、エラーは必ず発生します。 しかし、初心者が陥りやすい問題があります。エラーメッセージがバラバラで...
JavaScript JavaScript Tips | ログ・デバッグ・エラー処理：Promiseエラーを捕捉する
Promiseエラー捕捉は「非同期処理の落とし穴を確実に拾い上げるための必須テクニック」Promise は便利ですが、初心者が必ずつまずくポイントがあります。try/catch では Promise ...
JavaScript JavaScript Tips | ログ・デバッグ・エラー処理：グローバルエラーを捕捉する
グローバルエラー捕捉は「予期しない例外を確実に記録し、システムの安全性を守るための最後の砦」try/catch は「自分で囲った範囲のエラー」しか捕捉できません。 しかし業務システムでは、次のような ...
JavaScript JavaScript Tips | ログ・デバッグ・エラー処理：try/catchを共通化する
try/catch を共通化することは「エラー処理を一箇所に集約し、コードの安全性と保守性を最大化する技術」業務システムでは、あらゆる場所でエラーが発生します。 API 呼び出し、DB 操作、ファイル...
JavaScript JavaScript Tips | ログ・デバッグ・エラー処理：ErrorをJSON化する
Error を JSON 化することは「エラー情報を安全・確実に構造化して扱うための基盤技術」Error オブジェクトは JavaScript の中でも特殊な存在です。 message や stack...
JavaScript JavaScript Tips | ログ・デバッグ・エラー処理：エラーオブジェクトを整形する
エラーオブジェクト整形は「原因を最速で特定するための“読みやすい形”に変換する技術」エラーは業務システムの中で必ず発生します。 しかし、そのエラーをどうログに残すかで、障害調査のスピードが劇的に変わり...
JavaScript JavaScript Tips | ログ・デバッグ・エラー処理：本番環境でログを抑制する
本番環境でログを抑制することは「安定運用のための必須テクニック」本番環境では、ログを大量に出すと次のような問題が発生します。ログファイルが肥大化してストレージを圧迫するパフォーマンスが低下する（ログ出...
JavaScript JavaScript Tips | ログ・デバッグ・エラー処理：DEBUGログを制御する
DEBUGログは「開発中の挙動を可視化し、必要なときだけ出すための制御技術」DEBUGログは、業務システムの開発・テスト段階で最も役に立つログです。 しかし、本番環境で DEBUG を大量に出してしま...
JavaScript JavaScript Tips | ログ・デバッグ・エラー処理：ERRORログを出力する
ERRORログは「異常が発生した瞬間を正確に記録するための最重要ログ」ERRORログは、業務システムにおいて 最も重要なログレベルです。 INFO や WARN が「正常系」「注意喚起」であるのに対し...
JavaScript JavaScript Tips | ログ・デバッグ・エラー処理：WARNログを出力する
WARNログは「異常の一歩手前」を知らせるための重要なアラートログWARNログは、エラーほど深刻ではないものの、 「このまま進むと問題になるかもしれない」 という状況を知らせるためのログです。業務シス...
JavaScript JavaScript Tips | ログ・デバッグ・エラー処理：INFOログを出力する
INFOログは「正常動作を記録するための最も基本で最も重要なログ」業務システムでは、エラーだけでなく 正常に動いていることを記録する INFOログ が非常に重要です。 なぜなら、障害調査やデバッグでは...
JavaScript JavaScript Tips | ログ・デバッグ・エラー処理：共通Loggerを作る
共通 Logger は「全てのログを一つの入口で管理するための業務必須ユーティリティ」業務システムでは、ログはただの「console.log の出力」ではありません。 障害調査、デバッグ、監査、ユーザ...
JavaScript JavaScript Tips | 日付・時間ユーティリティ：年末取得
年末取得は「1年の終わりを正確に定義するための重要ユーティリティ」年初取得と並んで 年末取得（その年の12月31日を求める処理）は、業務システムで非常に多く使われます。 決算処理、年間レポート、年間集...
JavaScript JavaScript Tips | 日付・時間ユーティリティ：年初取得
年初取得は「1年のスタート地点を正確に取り出すための基盤ユーティリティ」年初取得（その年の1月1日を求める処理）は、月初・月末と同じく業務システムで非常に多く使われます。 決算処理、年間レポート、年間...
JavaScript JavaScript Tips | 日付・時間ユーティリティ：月末取得
月末取得は「月の終わりを正確に求めるための必須ユーティリティ」月初取得と並んで 月末取得（月の最後の日付を求める処理）は、業務システムで非常に多く使われます。 請求書の締め処理、月次レポート、勤怠の集...
JavaScript JavaScript Tips | 日付・時間ユーティリティ：月初取得
月初取得は「月のスタート地点を正確に取り出すための基盤ユーティリティ」日付・時間ユーティリティの中でも 月初取得（月の最初の日付を求める処理）は、業務システムで非常に多く使われます。 請求書の締め処理...
JavaScript JavaScript Tips | 日付・時間ユーティリティ：日付差分
日付差分は「2つの日付の距離を正しく数値化する技術」日付・時間ユーティリティの中でも 日付差分（date difference）は、業務システムで非常に重要な処理です。 請求書の支払期限、予約の残り日...
JavaScript JavaScript Tips | 日付・時間ユーティリティ：日付比較
日付比較は「2つの日時の前後・一致を正しく判定する技術」日付・時間ユーティリティの中でも 日付比較（date comparison）は、業務システムで非常に重要な処理です。 予約システム、期限チェック...
JavaScript JavaScript Tips | 日付・時間ユーティリティ：日付パース
日付パースは「文字列 → Date オブジェクト」への変換作業日付・時間ユーティリティの中でも 日付パース（date parsing）は、業務で非常に重要な処理です。 API から受け取った日付、ユー...
JavaScript JavaScript Tips | 日付・時間ユーティリティ：yyyy/mm/dd
yyyy/mm/dd は「日本の業務システムで最も使われる日付フォーマット」日本の業務システムでは yyyy/mm/dd（2026/08/06 のような形式）が圧倒的に使われます。 帳票、レポート、請...
JavaScript JavaScript Tips | 日付・時間ユーティリティ：yyyy-mm-dd
「yyyy-mm-dd」という日付フォーマットは“業務の標準語”日付・時間ユーティリティの中でも 「yyyy-mm-dd」形式の生成は、業務システムで最も頻繁に使われる基本機能です。 ログ、レポート、...
JavaScript JavaScript Tips | 日付・時間ユーティリティ：現在日時取得
テーマの整理：「現在日時取得」は日付・時間ユーティリティの出発点日付・時間ユーティリティの中でも、「現在日時取得」はもっとも基本的でありながら、業務・実務ではほぼ必ず登場する重要な機能です。ログの記録...
JavaScript JavaScript Tips | 配列ユーティリティ：並び順復元
テーマの整理：「並び順復元」とは何か「並び順復元」は、以前保存しておいた“並び順情報”を使って、最新の配列を同じ順番に並べ直すユーティリティのことです。 直前の「並び順保存」が「順番を覚える」だとした...
JavaScript JavaScript Tips | 配列ユーティリティ：並び順保存
テーマの整理：「並び順保存」とは何か「並び順保存」は、ユーザーが並べ替えた配列の順番を、あとで再現できるように“記録しておく”ユーティリティのことです。 業務だと、次のような場面でよく出てきます。画面...
JavaScript JavaScript Tips | 配列ユーティリティ：UI 用整形
テーマの整理：「UI 用整形」とは何か「UI 用整形」は、配列データを「画面コンポーネントが扱いやすい形」に変換するユーティリティのことです。 API や DB から取ってきた“生データ”は、そのまま...
JavaScript JavaScript Tips | 配列ユーティリティ：API レスポンス整形
テーマの整理：「API レスポンス整形」とは何か「API レスポンス整形」は、外部 API から返ってきた“生のレスポンス”を、アプリ側で扱いやすい配列・オブジェクトの形に変換するユーティリティのこと...
JavaScript JavaScript Tips | 配列ユーティリティ：可視化用変換
テーマの整理：「可視化用変換」とは何か「可視化用変換」は、生の配列データを「グラフライブラリがそのまま読める形」に整えるユーティリティのことです。 業務だと、次のような場面でよく使います。売上データを...
JavaScript JavaScript Tips | 配列ユーティリティ：統計情報生成
テーマの整理：「統計情報生成」とは何かここでの「統計情報生成」は、配列に入っている数値データから、もう一歩踏み込んだ“統計的な指標”を計算するユーティリティのことです。 サマリー生成が「合計・平均・最...
JavaScript JavaScript Tips | 配列ユーティリティ：サマリー生成
テーマの整理：「サマリー生成」とは何かここでの「サマリー生成」は、配列に入っているたくさんのデータを「要約・集計」して、業務で使いやすい形にまとめるユーティリティのことです。 「生データの配列」から、...
JavaScript JavaScript Tips | 配列ユーティリティ：バリデーション
テーマの整理：「配列バリデーション」とは何かここでの「バリデーション」は、配列の中身が「業務で期待している形・値になっているか」をチェックすることです。 特に「オブジェクト配列」（レコード一覧）に対し...
JavaScript JavaScript Tips | 配列ユーティリティ：型変換一括
テーマの整理：「型変換一括」とは何かここでの「型変換一括」は、配列の中のオブジェクトに対して「特定のプロパティの型をまとめて変換する」ユーティリティのことです。 業務だと、次のような場面でよく出てきま...
JavaScript JavaScript Tips | 配列ユーティリティ：欠損補完
テーマの整理：「欠損補完」とは何かここでの「欠損補完」は、配列の中にある「抜けている値・足りないレコード」を、一定のルールで埋めるユーティリティのことです。 業務だと、次のような場面でよく出てきます。...
JavaScript JavaScript Tips | 配列ユーティリティ：配列正規化
テーマの整理：「配列正規化」とは何かここでの「配列正規化」は、バラバラな形・揺れのある配列データを、「扱いやすい一定の形」にそろえるユーティリティのことです。 業務だと、次のような場面でよく出てきます...
JavaScript JavaScript Tips | 配列ユーティリティ：行列転置
テーマの整理：「行列転置」とは何かここでの「行列転置」は、二次元配列（表データ）で「行と列を入れ替える」ユーティリティのことです。 業務だと、次のような場面で出てきます。Excel で「行と列を入れ替...
JavaScript JavaScript Tips | 配列ユーティリティ：カラム削除
テーマの整理：「カラム削除」とは何かここでの「カラム削除」は、オブジェクト配列から「いらない列（プロパティ）」を取り除くためのユーティリティです。 業務だと、次のような場面でよく使います。機密情報（パ...
JavaScript JavaScript Tips | 配列ユーティリティ：カラム抽出
テーマの整理：「カラム抽出」とは何かここでの「カラム抽出」は、オブジェクト配列から「欲しい列だけ」を取り出すためのユーティリティです。 業務だと、次のような場面でよく使います。画面の一覧では 10 項...
JavaScript JavaScript Tips | 配列ユーティリティ：表データ生成
テーマの整理：「表データ生成」とは何かここで扱う「表データ生成」は、配列から「表として扱いやすい形」を作るためのユーティリティです。 業務だと、次のような場面でよく出てきます。画面に一覧テーブルを表示...
JavaScript JavaScript Tips | 配列ユーティリティ：Excel 行変換
テーマの整理：「Excel 行変換」とは何かここで扱うのは、「JavaScript の配列（オブジェクト配列）を、Excel の“行”として扱いやすい形に変換するユーティリティ」です。 業務だと、次の...
JavaScript JavaScript Tips | 配列ユーティリティ：JSON 変換
テーマの整理：「配列ユーティリティ × JSON 変換」とは何かここで扱うのは、「JavaScript の配列を JSON 文字列に変換する」「JSON 文字列から配列に戻す」ための、業務でそのまま使...
JavaScript JavaScript Tips | 配列ユーティリティ：CSV 変換
テーマの整理：「配列ユーティリティ × CSV 変換」とは何かここで扱うのは、「JavaScript の配列（オブジェクト配列）を、業務でそのまま使える CSV 文字列に変換するユーティリティ」です。...
JavaScript JavaScript Tips | 配列ユーティリティ：ログ出力
テーマの整理：「配列ユーティリティ × ログ出力」とは何かここで話したいのは、「配列を扱う処理の動きや結果を、きちんとログに残すための小さなユーティリティ」です。 業務コードでは、配列まわりでバグが起...
JavaScript JavaScript Tips | 配列ユーティリティ：差分検出
テーマの整理：「差分検出」とは何か「差分検出」は、“前の配列”と“今の配列”を比べて、「何が増えたか」「何が消えたか」「何が変わったか」をはっきりさせるためのテクニックです。 業務だと、次のような場面...
JavaScript JavaScript Tips | 配列ユーティリティ：配列変更監視
テーマの整理：「配列変更監視」とは何か「配列変更監視」は、配列の中身が変わった瞬間を検知して、何かの処理（再計算・再描画・ログなど）を自動で走らせるための仕組みです。 業務だと、例えば次のような場面で...
JavaScript JavaScript Tips | 配列ユーティリティ：メモ化配列
テーマの整理：「メモ化配列」とは何か「メモ化配列」は、配列を入力にする処理の結果を“覚えておいて”、同じ入力に対しては再計算せずに結果を返す仕組みです。 さっきの「配列キャッシュ」とほぼ同じ考え方です...
JavaScript JavaScript Tips | 配列ユーティリティ：配列キャッシュ
テーマの整理：「配列キャッシュ」とは何か「配列キャッシュ」は、一度計算した「配列に対する結果」を覚えておいて、同じ入力に対しては再計算せずに使い回すための仕組みです。 業務だと、こんな場面で欲しくなり...
JavaScript JavaScript Tips | 配列ユーティリティ：件数制御実行
テーマの整理：「件数制御実行」とは何か「件数制御実行」は、配列の要素に対する非同期処理を「一度に何件まで動かすか」をきちんと制御しながら実行するユーティリティです。 イメージとしては「同時実行数を制限...
JavaScript JavaScript Tips | 配列ユーティリティ：並列処理
テーマの整理：「並列処理」とは何かここでいう「並列処理」は、配列の要素に対する非同期処理を「同時に複数まとめて動かす」ことです。 順次処理（1 件ずつ）に比べて速く終わりやすい一方で、負荷やレート制限...
JavaScript JavaScript Tips | 配列ユーティリティ：順次処理
テーマの整理：「順次処理」とは何かここでいう「順次処理」は、配列の要素を「必ず 1 件ずつ、順番に」処理していくパターンのことです。特に「処理が非同期（async）」なときに、順番をきちんと守りたい場...
JavaScript JavaScript Tips | 配列ユーティリティ：Promise 配列制御
テーマの整理：「Promise 配列制御」とは何か「Promise 配列制御」というのは、ざっくり言うと「複数の非同期処理（Promise）を、配列としてまとめて扱い、どう待つか・どう制御するかを決め...
JavaScript JavaScript Tips | 配列ユーティリティ：非同期 reduce
そもそも reduce と「非同期 reduce」の違いArray.prototype.reduce は、配列を 1 つの値に“畳み込む”ための関数です。合計を出したり、オブジェクトに集計したり、「最...
JavaScript JavaScript Tips | 配列ユーティリティ：非同期 filter
何をしたいユーティリティか：「非同期 filter」「非同期 filter」は、配列の各要素に対して「async な条件チェック」を行い、条件を満たした要素だけを残すユーティリティです。普通の Arr...
JavaScript JavaScript Tips | 配列ユーティリティ：非同期 map
何をしたいユーティリティか：「非同期 map」「非同期 map」は、配列の各要素に対して「async な処理」をして、その結果を配列として集めるユーティリティです。普通の map は同期処理専用ですが...
JavaScript JavaScript Tips | 配列ユーティリティ：map + filter 合成
何をしたいユーティリティか：「map + filter 合成」「map + filter 合成」は、「変換（map）」と「絞り込み（filter）」を、きれいに組み合わせて使うためのパターンやユーティ...
JavaScript JavaScript Tips | 配列ユーティリティ：reduce ヘルパー
そもそも reduce って何をする関数かArray.prototype.reduce は、「配列を 1 つの値に“畳み込む”ための関数」です。合計を出したり、オブジェクトに集計したり、別の配列に変形...
JavaScript JavaScript Tips | 配列ユーティリティ：フィルタ合成
何をしたいユーティリティか：「フィルタ合成」「フィルタ合成」は、複数の条件（フィルタ）を組み合わせて、1つのフィルタ関数として扱えるようにするテクニックです。もう少しくだいて言うと、「小さな条件関数を...
JavaScript JavaScript Tips | 配列ユーティリティ：AND 条件検索
何をしたいユーティリティか：「AND 条件検索」「AND 条件検索」は、配列の中から「複数の条件をすべて満たす要素」だけを探す処理です。論理式でいう「A かつ B かつ C」の“AND（かつ）”です。...
JavaScript JavaScript Tips | 配列ユーティリティ：OR 条件検索
何をしたいユーティリティか：「OR 条件検索」「OR 条件検索」は、配列の中から「いくつかの条件のうち、どれか1つでも満たしていればOK」という要素を探す処理です。論理式でいう「A または B または...
JavaScript JavaScript Tips | 配列ユーティリティ：複数条件検索
何をしたいユーティリティか：「複数条件検索」「複数条件検索」は、「この配列の中から、いくつかの条件をすべて満たす要素だけを探したい」ときに使うユーティリティです。例えば、次のような“複数条件”が典型で...
JavaScript JavaScript Tips | 配列ユーティリティ：インデックス検索
何をしたいユーティリティか：「インデックス検索」「インデックス検索」は、配列の中から「条件に合う要素がどこにあるか」を調べて、その位置（インデックス）を返す処理です。「この値は何番目にある？」「id ...
JavaScript JavaScript Tips | 配列ユーティリティ：要素置換
何をしたいユーティリティか：「要素置換」「要素置換」は、配列の中の特定の要素を“別の値に差し替える”処理です。「インデックス 2 の要素を新しい値にしたい」「id が一致する要素だけ更新したい」など、...
JavaScript JavaScript Tips | 配列ユーティリティ：要素削除
何をしたいユーティリティか：「要素削除」「要素削除」は、配列から特定の要素を取り除く処理です。「このインデックスの要素を消したい」「この値を全部消したい」「条件に合うものだけ消したい」など、業務でめち...
JavaScript JavaScript Tips | 配列ユーティリティ：要素挿入
何をしたいユーティリティか：「要素挿入」「要素挿入」は、配列の好きな位置に新しい要素を差し込む処理です。 の「2 と 4 の間に 3 を入れたい」みたいなやつですね。業務だと、例えばこういう場面でよく...
JavaScript JavaScript Tips | 配列ユーティリティ：シャローコピー
何をしたいユーティリティか：「シャローコピー」ここでの「シャローコピー」は、配列そのものだけをコピーして、“中身（要素）への参照はそのまま共有する”コピーのことです。一言でいうと、「配列の箱だけ新しく...
JavaScript JavaScript Tips | 配列ユーティリティ：ディープコピー
ディープコピーとは何か（まずここを正しく理解する）ディープコピーは、配列やオブジェクトの“中身まで含めて完全に別物を作るコピー”のことです。浅いコピー（shallow copy）と違い、ネストされた配...
JavaScript JavaScript Tips | 配列ユーティリティ：配列コピー
何をしたいユーティリティか：「配列コピー」「配列コピー」は、元の配列を壊さずに、同じ中身を持つ“別の配列”を作る処理です。業務ではほぼ必ずと言っていいほど使います。なぜなら、元の配列を直接いじると「い...
JavaScript JavaScript Tips | 配列ユーティリティ：部分一致判定
何をしたいユーティリティか：「部分一致判定」「部分一致判定」は、「完全に同じかどうか」ではなく、「一部が条件を満たしているかどうか」を判定する処理です。ここでは主に、配列に対して次のような問いを投げる...
JavaScript JavaScript Tips | 配列ユーティリティ：完全一致判定
何をしたいユーティリティか：「完全一致判定」ここでの「完全一致判定」は、「この2つの値（配列やオブジェクトを含む）が“中身まで含めてまったく同じか”を判定する処理です。単なる === ではなく、配列の...
JavaScript JavaScript Tips | 配列ユーティリティ：配列比較
何をしたいユーティリティか：「配列比較」「配列比較」は、「この2つの配列は同じか？」を判定する処理です。ここでいう「同じか？」は、基本的に次の3つを満たすことを意味します。要素数（長さ）が同じ各インデ...
JavaScript JavaScript Tips | 配列ユーティリティ：安定ソート
そもそも「安定ソート」とは何かまず言葉から整理します。安定ソート（stable sort）とは、「同じキー（同じ値）同士の元々の順番を壊さないソート」のことです。もう少し具体的に言うと、並び替えの基準...
JavaScript JavaScript Tips | 配列ユーティリティ：順序反転
何をしたいユーティリティか：「順序反転」「順序反転」は、配列の要素の並びを逆向きにする処理です。 を にする、というイメージですね。業務だと、例えばこういう場面で使います。ログを「新しい順」に並べ替え...
JavaScript JavaScript Tips | 配列ユーティリティ：Map 変換
何をしたいユーティリティか：「Map 変換」ここでの「Map 変換」は、配列から Map（キーと値のペアのコレクション）を作るユーティリティのことです。「id からユーザーを一発で引きたい」「コードか...
JavaScript JavaScript Tips | 配列ユーティリティ：Set 変換
何をしたいユーティリティか：「Set 変換」ここでの「Set 変換」は、配列を Set に変換するユーティリティのことです。一言でいうと「重複をなくしたい」「含まれているかを高速に調べたい」ときに使う...
JavaScript JavaScript Tips | 配列ユーティリティ：マップ生成
何をしたいユーティリティか：「マップ生成」ここでの「マップ生成」は、配列から「キー → 値」の対応表（オブジェクトや Map）を作る処理のことです。「id からユーザーを引けるようにしたい」「コードか...
JavaScript JavaScript Tips | 配列ユーティリティ：条件変換
何をしたいユーティリティか：「条件変換」「条件変換」は、配列の中の「条件に合う要素だけ」を変換し、それ以外はそのまま残す処理です。英語で言うと mapIf、mapWhen、conditionalMap...
JavaScript JavaScript Tips | 配列ユーティリティ：条件抽出
何をしたいユーティリティか：「条件抽出」「条件抽出」は、配列の中から「ある条件に当てはまる要素だけ」を取り出す処理です。JavaScript 標準の Array.prototype.filter を、...
JavaScript JavaScript Tips | 配列ユーティリティ：条件削除
何をしたいユーティリティか：「条件削除」「条件削除」は、配列の中から「ある条件に当てはまる要素だけ」を取り除く処理です。英語だとイメージ的には「removeIf」「reject」「filter-out...
JavaScript JavaScript Tips | 配列ユーティリティ：undefined 削除
何をしたいユーティリティか：「undefined 削除」ここでの「undefined 削除」は、配列の中から undefined を取り除いて、扱いやすい配列に整える処理です。「null 削除」と似て...
JavaScript JavaScript Tips | 配列ユーティリティ：null 削除
何をしたいユーティリティか：「null 削除」ここでの「null 削除」は、配列の中から null（と必要なら undefined）を取り除いて、扱いやすい配列に整える処理です。さっきの「空要素削除」...
JavaScript JavaScript Tips | 配列ユーティリティ：空要素削除
何をしたいユーティリティか：「空要素削除」ここでの「空要素削除」は、配列の中から「いらない空っぽの値」を取り除いて、きれいな配列にする処理です。英語だと compact や clean などと呼ばれま...
JavaScript JavaScript Tips | 配列ユーティリティ：末尾取得
何をしたいユーティリティか：「末尾取得」ここでの「末尾取得」は、配列の「一番最後の要素」や「末尾から数件」を取り出す処理のことです。英語だと last や takeRight などと呼ばれます。業務で...
JavaScript JavaScript Tips | 配列ユーティリティ：先頭取得
何をしたいユーティリティか：「先頭取得」ここでの「先頭取得」は、配列の「一番最初の要素」や「先頭から数件」を取り出す処理のことです。英語だと head や first、take などと呼ばれます。業務...
JavaScript JavaScript Tips | 配列ユーティリティ：件数制限
何をしたいユーティリティか：「件数制限」ここでの「件数制限」は、配列の要素数を「最大 N 件まで」に制御する処理のことです。イメージとしては「取りすぎない」「持ちすぎない」ためのブレーキです。業務では...
JavaScript JavaScript Tips | 配列ユーティリティ：採番
何をしたいユーティリティか：「採番」ここでの「採番」は、配列の要素に「業務で使う番号（連番・管理番号）」を振る処理のことです。さっきやった「インデックス付与」とよく似ていますが、目的が少し違います。イ...
JavaScript JavaScript Tips | 配列ユーティリティ：インデックス付与
何をしたいユーティリティか：「インデックス付与」「インデックス付与」は、配列の各要素に「何番目か」という情報をくっつける処理です。JavaScript の配列はもともと 0, 1, 2…というインデッ...
JavaScript JavaScript Tips | 配列ユーティリティ：ネスト化
何をしたいユーティリティか：「配列のネスト化」ここでの「ネスト化」は、平らな配列を「階層構造（入れ子）」に組み立て直す処理のことです。フラット化の逆方向だと思ってください。例えば、次のようなことをした...
JavaScript JavaScript Tips | 配列ユーティリティ：フラット化
何をしたいユーティリティか：「配列のフラット化」ここでの「フラット化」は、ネスト（入れ子）になっている配列を、浅い配列に“平らにする”処理のことです。英語だと flatten、flat と呼ばれます。...
JavaScript JavaScript Tips | 配列ユーティリティ：結合
何をしたいユーティリティか：「配列の結合」ここでの「結合」は、複数の配列を 1 つの配列にまとめる処理のことです。英語だと「merge」「concat」と呼ばれます。例えば、こんな場面で使います。月ご...
JavaScript JavaScript Tips | 配列ユーティリティ：分割
何をしたいユーティリティか：「配列の分割」ここでの「分割」は、1つの配列を「小さな配列のかたまり」に切り分ける処理のことです。英語だと「chunk（チャンク）」と呼ばれることが多いです。例えば、こんな...
JavaScript JavaScript Tips | 配列ユーティリティ：ページング
何をしたいユーティリティか：「配列のページング」ここでの「ページング」は、たくさんのデータを「ページ番号」と「1ページあたり件数」に分割して扱う処理のことです。Web の一覧画面でよく見る「1〜10件...
JavaScript JavaScript Tips | 配列ユーティリティ：多段ソート
何をしたいユーティリティか：「多段ソート」ここでの「多段ソート」は、複数のキーを優先順位付きで使って並び替える処理です。SQL でいう ORDER BY category ASC, price DES...
JavaScript JavaScript Tips | 配列ユーティリティ：キー指定ソート
何をしたいユーティリティか：「キー指定ソート」ここでの「キー指定ソート」は、オブジェクトの配列を「特定のキー（プロパティ）」を基準に並び替える処理です。SQL の ORDER BY price ASC...
JavaScript JavaScript Tips | 配列ユーティリティ：グループ化
何をしたいユーティリティか：「配列のグループ化」ここでの「グループ化」は、配列の要素を「ある条件（キー）」ごとにまとめ直す処理です。SQL の GROUP BY や、Excel の「ピボットテーブルの...
JavaScript JavaScript Tips | 配列ユーティリティ：平均算出
何をしたいユーティリティか：「配列の平均算出」ここでの「平均算出」は、配列の中の数値を全部足して、その合計を要素数で割る処理です。学校で習った「平均」と同じですが、プログラムでやるときは「空配列のとき...
JavaScript JavaScript Tips | 配列ユーティリティ：合計算出
何をしたいユーティリティか：「配列の合計算出」ここでの「合計算出」は、配列の中の値を全部足して、ひとつの数値にまとめる処理です。一番シンプルなのは「数値配列の合計」ですが、業務では「オブジェクト配列の...
JavaScript JavaScript Tips | 配列ユーティリティ：最小値取得
何をしたいユーティリティか：「配列の最小値取得」ここでの「最小値取得」は、配列の中で一番小さい値を取り出す処理です。「最大値取得」の逆ですが、業務では同じくらい頻繁に使います。例えばこんな場面がありま...
JavaScript JavaScript Tips | 配列ユーティリティ：最大値取得
何をしたいユーティリティか：「配列の最大値取得」ここでの「最大値取得」は、配列の中で一番大きい値を取り出す処理です。一番シンプルなのは「数値配列の最大値」ですが、業務では「オブジェクト配列の中で、特定...
JavaScript JavaScript Tips | 配列ユーティリティ：ランダム要素取得
何をしたいユーティリティか：「ランダム要素取得」ここでの「ランダム要素取得」は、配列の中から 1 要素（または複数要素）をランダムに取り出す処理です。「配列シャッフル」が「順番を全部ランダムにする」の...
JavaScript JavaScript Tips | 配列ユーティリティ：配列シャッフル
何をしたいユーティリティか：「配列シャッフル」ここでの「配列シャッフル」は、配列の要素の順番をランダムに並べ替える処理です。例えばこうです。[1, 2, 3, 4, 5]// ↓ シャッフル[3, 1...
JavaScript JavaScript Tips | 配列ユーティリティ：共通要素抽出
何をしたいユーティリティか：「共通要素抽出」ここでの「共通要素抽出」は、複数の配列を比べて「両方（または全部）に含まれている要素だけ」を取り出す処理です。イメージとしては「集合の積（intersect...
JavaScript JavaScript Tips | 配列ユーティリティ：差分抽出
何をしたいユーティリティか：「配列の差分抽出」ここでの「差分抽出」は、「ある配列 A と配列 B を比べて、“どこが違うのか”を取り出す処理」です。業務だと、例えばこんな場面で使います。画面で「変更前...
JavaScript JavaScript Tips | 配列ユーティリティ：重複抽出
何をしたいユーティリティか：「配列の重複抽出」ここでの「重複抽出」は、配列の中で「1 回しか出てこないもの」ではなく、「2 回以上出てくるもの」を取り出す処理です。重複削除（ユニーク化）は「かぶりを消...
JavaScript JavaScript Tips | 配列ユーティリティ：重複削除
何をしたいユーティリティか：「配列の重複削除」ここでの「重複削除」は、同じ値が何度も入っている配列から、重複を取り除いて「一意な要素だけの配列」を作る処理です。業務だと、こんな場面でよく出てきます。ユ...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 文字コード判定
何をしたいユーティリティか：「文字コード判定」ここでの「文字コード判定」は、外部から受け取った「バイト列」が、UTF-8 なのか Shift_JIS なのか EUC-JP なのか、といった「エンコーデ...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － BOM 除去
何をしたいユーティリティか：「BOM 除去」ここでの「BOM 除去」は、テキストの先頭にこっそり付いている「BOM（Byte Order Mark）」という特殊な目に見えない文字を取り除く処理です。C...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 改行コード統一
何をしたいユーティリティか：「改行コード統一」ここでの「改行コード統一」は、バラバラな改行コード（\n, \r\n, \r）が混ざったテキストを、指定した形式にそろえる処理です。Windows 由来の...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － パス正規化
何をしたいユーティリティか：「パス正規化」ここでの「パス正規化」は、"//api//v1/../v2//users/./123/" のような「ぐちゃっとしたパス文字列」を、"/api/v2/users...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － パンくず生成
何をしたいユーティリティか：「パンくず生成」ここでの「パンくず生成」は、「今いるページまでの階層（ホーム > マスタ > ユーザー一覧 > ユーザー詳細）」を、決まったルールで文字列や配列として作る」...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － HTML タイトル生成
何をしたいユーティリティか：「HTML タイトル生成」ここでの「HTML タイトル生成」は、<title>〜</title> に入れる文字列を、毎回バラバラに組み立てるのではなく、共通ルールで生成する...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － スラッグ生成
何をしたいユーティリティか：「スラッグ生成」ここでの「スラッグ生成」は、人間が読めて、URL や識別子としても扱いやすい「きれいな文字列」を作ることです。ブログ記事の URL、商品ページのパス、カテゴ...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 識別子生成
何をしたいユーティリティか：「識別子生成」ここでの「識別子生成」は、「一意な ID（識別子）を文字列として作る」処理を、毎回バラバラに書かず、共通ユーティリティにまとめることです。注文番号、セッション...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 日付文字列生成
何をしたいユーティリティか：「日付文字列生成」ここで目指すのは、「Date を、業務でよく使うフォーマットの文字列に変換する処理」を関数にまとめることです。画面表示、CSV 出力、ログ、固定長ファイル...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － ログ用文字列生成
何をしたいユーティリティか：「ログ用文字列生成」ここで作りたいのは、「人間が読んで状況をすぐ理解できるログ文字列」を、毎回バラバラに書かず、共通のフォーマットで生成するユーティリティです。業務システム...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － SQL エスケープ
何をしたいユーティリティか：「SQL エスケープ」ここでの「SQL エスケープ」は、文字列を SQL の文字列リテラルとして安全な形に整える処理です。ただし、最初にめちゃくちゃ大事なことを言います。本...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － TSV 生成
何をしたいユーティリティか：「TSV 生成」ここで目指すのは、業務データ（配列や配列の配列）から「TSV 文字列」を安全に生成するユーティリティです。TSV（Tab Separated Values）...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － CSV エスケープ
何をしたいユーティリティか：「CSV エスケープ」ここで作りたいのは、「任意の値を“CSV の 1 セルとして安全な文字列”に変換する関数」です。CSV はただのカンマ区切りではなく、「カンマ」「改行...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 固定長整形
何をしたいユーティリティか：「固定長整形」ここでの「固定長整形」は、文字列を「ちょうど N 文字」にそろえる」ユーティリティです。足りなければ埋める、長ければ切る——これを毎回バラバラに書くのではなく...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 数値ゼロ埋め
何をしたいユーティリティか：「数値ゼロ埋め」ここでの「数値ゼロ埋め」は、「桁数をそろえるために、足りない分を左側に 0 を付ける」ユーティリティです。1 → "01"（2 桁）12 → "012"（3...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 桁数制限
何をしたいユーティリティか：「桁数制限」ここでの「桁数制限」は、数値や数値文字列の「桁数」をルール通りに制限するユーティリティです。例えば、こんな要件がよくあります。金額は「整数 9 桁まで、小数 2...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 小数丸め
何を作るのか：「小数丸め」ユーティリティここで作りたいのは、「小数点以下を指定桁数で丸める」処理を、毎回バラバラに書かず、分かりやすい関数にまとめたものです。「四捨五入」「切り上げ」「切り捨て」を、業...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 通貨変換表示
何をしたいユーティリティか：「通貨変換表示」ここで目指すのは、単に「金額にカンマを付ける」だけではなく、「通貨単位や通貨コードを付けて、人間が見て意味が分かる形で表示する」ユーティリティです。たとえば...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － カンマ付与
何をしたいユーティリティか：「カンマ付与」ここで作りたいのは、数値や数値っぽい文字列に「3 桁ごとのカンマ」を付けるユーティリティです。1000 → 1,0001234567 → 1,234,567-...
JavaScript JavaScript Tips | 文字列ユーティリティ：業務用 － 金額フォーマット
何を作るのか：「業務で使える金額フォーマット」ここで目指すのは、「数値を“人間が業務で読みやすい金額表示”に変換するユーティリティ」です。例えば、こんな変換を安定して行いたいイメージです。format...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － ファイル名取得
何をしたいユーティリティか：「ファイル名取得」ここで作りたいのは、URL やパス文字列から「ファイル名だけ」を取り出す小さな関数です。例えば、こういうイメージです。 → "logo.png"/down...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － 拡張子取得
何をしたいユーティリティか：「拡張子取得」ここで作りたいのは、URL やパス文字列から「拡張子（.png や .js など）」だけを取り出す小さな関数です。 → "png"/scripts/app.m...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － パス結合
「パス結合」で何を楽にしたいのか「パス結合」は、URL のパスを安全にくっつけるユーティリティです。"/api" と "users" を結合して "/api/users" にしたい"/api/" と ...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － ハッシュ削除
「ハッシュ削除」で本当にやりたいことここでの「ハッシュ削除」は、URL の # 以降（フラグメント）をきれいに取り除いた新しい URL を作るユーティリティのことです。例えば、こんなことをしたい場面が...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － ハッシュ取得
「ハッシュ取得」で何を取りたいのかここでの「ハッシュ取得」は、URL の # 以降の部分（フラグメント）を、きれいに取り出して使いやすくするユーティリティのことです。例えば、こんな URL を考えます...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － クエリ削除
「クエリ削除」で本当にやりたいこと「クエリ削除」は、URL の ? 以降に付いているパラメータのうち、いらないものだけを取り除いて、新しい URL を作り直す処理です。例えば、こんなことをやりたい場面...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － クエリ取得
「クエリ取得」で何をしたいのかをはっきりさせるここでの「クエリ取得」は、URL の ? 以降（クエリ文字列）から、パラメータを取り出して使いやすい形にすることです。/search?q=JavaScri...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － クエリ生成
まず「クエリ生成」で何を自動化したいのかここで言う「クエリ生成」は、オブジェクト（連想配列）から ?key=value&key2=value2 みたいなクエリ文字列を、安全に・楽に作るユーティリティの...
JavaScript Tips JavaScript Tips | 文字列ユーティリティ：URL 系 － URL デコード
「URL デコード」で何を取り戻したいのかURL デコードは、URL の中で「%E3%81%82」みたいに変換されてしまった文字を、人間が読める元の文字列に戻すことです。エンコードは「安全に送るための...
JavaScript JavaScript Tips | 文字列ユーティリティ：URL 系 － URL エンコード
まず「URL エンコード」で何を守りたいのかURL エンコードは、「URL の中に入れてはいけない（入れると誤解される）文字を、安全な形に変換すること」です。日本語やスペース、? や & などの記号を...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － CSV 行生成
「CSV 行生成」でやりたいことをはっきりさせるここでのゴールは、「配列やオブジェクトの値から、正しい形式の1行分の CSV 文字列を生成するユーティリティ」を作ることです。見た目はただのカンマ区切り...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － 単語数カウント
「単語数カウント」で何を数えたいのかを決めるまず、ここをはっきりさせたいです。「単語数を数える」と言っても、言語や用途で意味が変わります。英語の文章なら、スペースで区切られた「単語」を数えたい。日本語...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － 文字数カウント
「文字数カウント」で本当に数えたいものは何かまず、ここをはっきりさせたいです。「文字数を数える」と言っても、実は意味が分かれます。画面上で「何文字入力されたか」を知りたい。DBのカラム制限（バイト数）...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － 行数カウント
「行数カウント」で何をしたいのかをはっきりさせるここでの「行数カウント」は、文字列の中に「何行分のテキストがあるか」を数えるユーティリティのことです。テキストエリアに何行入力されているか知りたい。ログ...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － 省略文字列
「省略文字列」で何をしたいのかをはっきりさせるここでの「省略文字列」は、長すぎる文字列を「…」などで途中カットして、画面に収まる形にするユーティリティのことです。テーブルのカラム幅に収まらないタイトル...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － 伏字変換
「伏字変換」でやりたいことを言葉にしてみるここでの「伏字変換」は、特定の単語やNGワードを、画面に出すときだけ隠す（置き換える）処理のことです。ログにはそのまま残したいけど、ユーザーには見せたくない。...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － マスク文字列
「マスク文字列」で何をしたいのかをはっきりさせるまず、「マスク文字列」でやりたいことを言葉にしてみます。画面に本物の値は出したくないけれど、「それっぽく」見せたい。例：******** や ****-...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － トークン生成
まず「トークン生成」で何を作りたいのかを決めるトークンと言っても、用途はいろいろあります。API トークンパスワードリセット用の一時 URL トークンメール認証用のワンタイムトークンCSRF トークン...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － パスワード生成
まず「パスワード生成」で絶対に外せない前提ランダム文字列と違って、パスワード生成は最初から「セキュリティ前提」で考える必要があります。ここを曖昧にすると、一見それっぽく動くけど「簡単に総当たりされるパ...
JavaScript JavaScript Tips | 文字列ユーティリティ：生成 － ランダム文字列
ランダム文字列ユーティリティで何をしたいか決める「ランダム文字列」と一口に言っても、目的で“正解の実装”が変わります。短い一時トークン（画面遷移の一時キー）テストデータ用の適当なIDユーザーに見せる仮...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － 絵文字検出
絵文字検出で「何をしたいか」を先に決めるまずゴールをはっきりさせましょう。ここでやりたいのは、文字列の中に「絵文字が含まれているかどうか」を判定するユーティリティを作ることです。業務だと、例えばこうい...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － カタカナ判定
「カタカナ判定」で何をチェックしたいのかまずゴールをはっきりさせます。カタカナ判定には、大きく二つのニーズがあります。「この文字列は“全部カタカナだけ”かを判定したい」「この文字列に“カタカナが1文字...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － ひらがな判定
「ひらがな判定」で何をチェックしたいのかまずゴールをはっきりさせます。ひらがな判定には、大きく二つのニーズがあります。「この文字列は“全部ひらがなだけ”かを判定したい」「この文字列に“ひらがなが1文字...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － 日本語判定
「日本語判定」で本当に知りたいことは何かまずゴールをはっきりさせましょう。ここでやりたいのは、「この文字列は“日本語を含んでいるか？”を判定するユーティリティを作ること」です。もう少し分解すると、よく...
JavaScript JavaScript Tips | 文字列ユーティリティ：検証 － 数字のみ判定
「数字のみ判定」で本当に知りたいことは何かまずゴールをはっきりさせます。ここでやりたいのは、「この文字列は“数字だけ”でできているか？」を判定するユーティリティを作ることです。例えば、こんな要件が典型...
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 のよ...
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 | 基本・共通ユーティリティ：基本判定・変換 – 浮動小数変換
「浮動小数変換」とは何をするものか浮動小数変換は、「文字列や整数などの値を“小数を含む数値”として安全に扱える形にする」ことです。金額（小数点以下の税率や手数料）、割合、重さ、距離、レート、単価など、...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – 整数変換
「整数変換」とは何をするものか整数変換は、「文字列や小数など、いろいろな値を“業務で扱いやすい整数”にそろえる」ことです。数量、個数、ページ番号、ID、在庫数、ポイント、金額（税抜き・税込みの端数処理...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – 数値変換
「数値変換」とは何をするものか数値変換は、「文字列やその他の値を、最終的に“ちゃんとした数値”として扱える形にする」ことです。業務コードでは、フォーム入力、CSV、API のレスポンスなど、ほとんどが...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – 真偽値変換
「真偽値変換」とは何をするものか真偽値変換は、「どんな値でも最終的に true か false に決める」ことです。業務コードでは、「この値を条件として扱っていいか」「フラグとしてオンなのかオフなのか...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – 空オブジェクト判定
空オブジェクトとは何かをまず整理するJavaScript の「オブジェクト」は、キーと値のペアを入れておくための入れ物です。その中に自分が定義したプロパティが 1 つもない {} の状態を、ここでは「...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – 空配列判定
空配列とは何かをまず押さえるJavaScript の「配列」は、複数の値を順番付きで持てるオブジェクトです。その中に要素が 1 つも入っていない配列、つまり [] が「空配列」です。const a =...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – 空文字判定
空文字とは何かをまず整理するJavaScript での「空文字」は、長さ 0 の文字列、つまり "" のことです。中に何も文字が入っていないけれど、「文字列という型の値」はちゃんと存在している状態です...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – null または undefined 判定
「null または undefined 判定」とは何か業務コードでは「値が 0 かどうか」よりも、「そもそも値が“あるか・ないか”」を判定する場面がとても多いです。ここでいう「ない」は、JavaScr...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – undefined 判定
JavaScript における undefined とはundefined は「まだ値が決まっていない」「存在しないものを見に行った」ときに JavaScript が自動的に使う特別な値です。プログラ...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – null 判定
JavaScript における「null」とはまず「null」は、「ここには“意図的に”値がない」ということを表す特別な値です。たとえば「まだデータが来ていない」「検索したけど見つからなかった」など、...