JavaScript

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

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 | 文字列ユーティリティ:検証 - 数字のみ判定

「数字のみ判定」で本当に知りたいことは何かまずゴールをはっきりさせます。ここでやりたいのは、「この文字列は“数字だけ”でできているか?」を判定するユーティリティを作ることです。例えば、こんな要件が典型...
スポンサーリンク