JavaScript

スポンサーリンク
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

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)」は、プログラミングでよく使う“名前の付け方”のルールの一つです。先頭は小文字。単語の区切りごとに、次の...
スポンサーリンク