JavaScript

スポンサーリンク
JavaScript

JavaScript 逆引き集 | 再試行ロジック(簡易)

再試行ロジック(簡易) — for(i=0;i<3;i++){ try{await f();break}catch{} }「失敗するかもしれない処理を、何度か繰り返して成功を狙う」仕組みが 再試行ロジ...
JavaScript

JavaScript 逆引き集 | カスタムエラー投げる

カスタムエラー投げるの基本 — throw new Error('msg')「想定外の入力」「外部APIの不整合」「ビジネスルール違反」など、続行できない状況を即座に知らせたいときは、エラーを投げて処...
JavaScript

JavaScript 逆引き集 | カスタムエラー投げる

カスタムエラー投げる — throw new Error('msg') の基本と実践「想定外の入力」「外部APIの不整合」「ビジネスルール違反」など、続行できない状況を即座に知らせたいときは、エラーを...
JavaScript

JavaScript 逆引き集 | エラーハンドリング(try/catch)

エラーハンドリング(try/catch)の基本と実践JavaScript では try/catch 構文を使って「エラーが起きてもプログラム全体が止まらないようにする」ことができます。初心者がまず覚え...
JavaScript

JavaScript 逆引き集 | axios(外部)基本

axios(外部ライブラリ)の基本 — axios.get(url).then(r => r.data)axios は人気のある HTTP クライアントライブラリで、ブラウザや Node.js で使え...
JavaScript

JavaScript 逆引き集 | fetch POST(JSON)

fetch で HTTP POST(JSON)の基本と実践fetch は HTTP リクエストを送る API。JSON を POST する場合は、メソッド指定・本文の JSON 化・ヘッダー指定(Co...
JavaScript

JavaScript 逆引き集 | fetch で HTTP GET

fetch で HTTP GET の基本と実践fetch は「URLへリクエストを送り、レスポンスを Promise として受け取る」ための API です。GET/POST などの HTTP メソッド...
JavaScript

JavaScript 逆引き集 | Promise.allSettled(結果全取得)

Promise.allSettled(結果全取得)の基本と実践Promise.allSettled は「複数の非同期処理が、成功か失敗かに関係なくすべて終わるまで待って、各結果のステータスと値(または...
JavaScript

JavaScript 逆引き集 | Promise.race(最初)

Promise.race の基本と実践(最初に決着したひとつ)Promise.race は「複数の非同期のうち、もっとも早く“決着”したひとつの結果(成功または失敗)で返す」ための静的メソッドです。配...
JavaScript

JavaScript 逆引き集 | Promise.all(並列)

Promise.all の基本と実践(並列処理)複数の非同期処理を「同時に走らせて、全部そろったら結果を受け取りたい」—その最短ルートが Promise.all。依存関係がないタスクをまとめて走らせる...
JavaScript

JavaScript 逆引き集 | async/await 基本

async/await 基本 — async function f(){ const r = await p }async/await は「非同期処理を同期処理のように読みやすく書く」ための構文です。...
JavaScript

JavaScript 逆引き集 | Promise 基本生成

Promise の基本生成 — new Promise((resolve, reject) => {...})Promiseは「未来のある時点で値が返ることを約束する」オブジェクト。非同期処理の結果と...
JavaScript

JavaScript 逆引き集 | WeakMap の利用(ガベージに強い参照)

WeakMap の基本 — new WeakMap()WeakMap は「キーにオブジェクトだけを使える特殊なマップ」です。最大の特徴は キーとなるオブジェクトがガベージコレクション(不要メモリ解放)...
JavaScript

JavaScript 逆引き集 | Map から配列へ

Map から配列へ — の基本と実践Map の「キーと値のペア」を配列にしたいときは、 が最短です。配列化すれば map/filter/sort などの配列操作が自由に使えます。基本の使い方const...
JavaScript

JavaScript 逆引き集 | Set の基本

Set の基本 — new Set(arr)JavaScript の Set は「重複を許さない値の集合」を扱うための組み込みオブジェクトです。配列と似ていますが、同じ値を二度入れることはできません。...
JavaScript

JavaScript 逆引き集 | Map の基本

Map の基本 — new Map(), set, getJavaScript の Map は「キーと値のペア」を保持するコレクションです。オブジェクトと似ていますが、任意の型をキーにできるのが大きな...
JavaScript

JavaScript 逆引き集 | オブジェクトのキー順ソート(新規オブジェクト作成)

オブジェクトのキー順ソート(新規オブジェクト作成)の基本と実践「オブジェクトのプロパティをキー順に並べ替えて扱いたい」時は、キーを配列にしてソートし、reduceで新しいオブジェクトを組み立てます。元...
JavaScript

JavaScript 逆引き集 | 動的プロパティアクセス

動的プロパティアクセス(obj)の基本と実践「キーを変数で指定したい」「ユーザー入力や設定に合わせてプロパティ名が変わる」—そんなときに使うのが角括弧記法 obj。ドット記法は固定名、角括弧は“動的名...
JavaScript

JavaScript 逆引き集 | オブジェクトのプロパティ削除

オブジェクトのプロパティ削除(delete obj.key)の基本と実践delete は「そのプロパティをオブジェクトから完全に取り除く」演算子です。キーを消したいときに使い、値を未定義化したいときは...
JavaScript

JavaScript 逆引き集 | プロパティの存在チェック

プロパティの存在チェック('prop' in obj)の基本と実践「そのプロパティある?」を最短で判定するのが in 演算子。自前のプロパティだけでなく、プロトタイプから継承されたプロパティも「存在す...
JavaScript

JavaScript 逆引き集 | オブジェクトのマージ

オブジェクトのマージ(浅)— スプレッド構文 {...a, ...b} の基本と実践複数の設定やデータを“上書きルール”で一つにまとめたいときに使うのがスプレッド構文のマージ。右側が勝つ(後勝ち)とい...
JavaScript

JavaScript 逆引き集 | 深いコピー(JSON)(注意:関数/undef は除外)

深いコピー(JSON)— JSON.parse(JSON.stringify(obj)) の基本と実践「オブジェクトをまるっと別インスタンスにしたい」場面でよく使われる簡易テクニックが JSON.pa...
JavaScript

JavaScript 逆引き集 | オブジェクトのクローン(浅)

オブジェクトのクローン(浅)— スプレッド構文 {...obj} の基本と実践浅いクローンは「一番上の層だけ」をコピーして、新しいオブジェクトを作る方法です。最短はスプレッド構文 {...obj}。ネ...
JavaScript

JavaScript 逆引き集 | オブジェクトのエントリ列挙

オブジェクトのエントリ列挙(Object.entries)の基本と実践Object.entries(obj) は「オブジェクトのキーと値のペア」を の形で配列にして返す関数です。キーだけなら Obje...
JavaScript

JavaScript 逆引き集 | オブジェクトの値列挙

オブジェクトの値列挙(Object.values)の基本と実践Object.values(obj) は「オブジェクトの 値だけ を配列にして返す」便利な関数です。キーは不要で値だけを処理したいときに最...
JavaScript

JavaScript 逆引き集 | オブジェクトのキー列挙

オブジェクトのキー列挙(Object.keys)の基本と実践Object.keys は「オブジェクトの“自分が持つ(自前の)列挙可能なプロパティ名”」を配列で返します。設定画面の項目一覧、テーブルのヘ...
JavaScript

JavaScript 逆引き集 | JSON 文字列化/復元

JSON文字列化/復元の基本と実践「オブジェクト⇄文字列」を行き来する最短ルートが JSON.stringify と JSON.parse。保存・送受信・ログ・設定ファイルで頻出です。まずは基本// ...
JavaScript

JavaScript 逆引き集 | タイムゾーン指定変換(Intl)

Intl.DateTimeFormatでタイムゾーン指定表示の基本と実践Intl.DateTimeFormatは「表示するロケール」と「表示するタイムゾーン」を明示できるので、どこで実行しても同じ地域...
JavaScript

JavaScript 逆引き集 | Intl.DateTimeFormat の利用

Intl.DateTimeFormat の基本と実践Intl.DateTimeFormat はロケールやタイムゾーンに合わせた日付・時刻フォーマットを簡単に行える標準APIです。文字列連結や手作業のゼ...
JavaScript

JavaScript 逆引き集 | 日付フォーマット(簡易)

JavaScript日付フォーマット(簡易)の基本と実践最短で「YYYY-M-D」などの文字列にしたいなら、Dateの各値を取り出してテンプレートリテラルで組み立てます。月は0始まりなので「+1」を忘...
JavaScript

JavaScript 逆引き集 | 日付の差分(日数)

JavaScriptで日付の差分(日数)を求める基本と実践「2つの日時の差を“日数”で知りたい」ときは、2つのDateの差(ミリ秒)を1日のミリ秒で割るのが基本です。まず仕組みと丸め方、そしてタイムゾ...
JavaScript

JavaScript 逆引き集 | 日付を ISO 文字列に

JavaScriptで日付をISO文字列にする(toISOString)の基本と実践ISO 8601形式はシステム間で扱いやすい標準日時フォーマットです。new Date().toISOString(...
JavaScript

JavaScript 逆引き集 | 日付の現在取得

JavaScriptで現在日時を取得する(new Date)の基本と実践「今の日時が欲しい」ときは new Date()。これで現在の日時を表す Dateオブジェクトが作れます。そこから年・月・日・時...
JavaScript

JavaScript 逆引き集 | ランダム整数生成

JavaScriptランダム整数生成の基本と実践「0以上n未満のランダムな整数」を作る定番が Math.floor(Math.random() * n)。仕組みを理解すれば、任意の範囲の整数にも応用で...
JavaScript

JavaScript 逆引き集 | 数値の丸め(Math)

JavaScript数値の丸め(Math.round / Math.ceil / Math.floor)丸めは「端数をどう扱うか」を決める操作。表示や料金計算、ページネーションなどで頻出です。まずは3...
JavaScript

JavaScript 逆引き集 | 数値を固定小数点

JavaScript数値の固定小数点表示(toFixed)の基本と実践金額や割合など「小数点以下の桁数を揃えたい」ときは toFixed。指定した桁数に丸め、足りない桁は0で埋めた文字列を返します。構...
JavaScript

JavaScript 逆引き集 | テンプレートリテラル

JavaScriptテンプレートリテラルの基本と実践テンプレートリテラルはバッククォートで囲み、${...}の中に変数や式を埋め込めます。文字列連結より短く、読みやすく、改行もそのまま扱えます。構文と...
JavaScript

JavaScript 逆引き集 | 正規表現で部分抽出(キャプチャ)

JavaScript正規表現で部分抽出(キャプチャ)の基本と実践正規表現の キャプチャグループ (...) を使うと、文字列の一部を抜き出せます。match の返り値は配列で、 に「全体一致」、 以降...
JavaScript

JavaScript 逆引き集 | 正規表現で置換(全体)

JavaScript正規表現で置換(replace)の基本と実践文字列の中の「一致した部分」を別の文字列に置き換えるのが replace。正規表現を使えば「全件置換」や「一部だけ抜き出して再配置」も柔...
JavaScript

JavaScript 逆引き集 | 正規表現でマッチ

JavaScript正規表現でマッチ(match)の基本と実践文字列から「パターンに合う部分」を見つけて取り出すなら match。1件だけか、すべてか、グループ抽出かで挙動が変わるので、最初に仕組みを...
JavaScript

JavaScript 逆引き集 | 文字列を大文字/小文字

JavaScript文字列の大文字・小文字変換の基本と実践文字列を「全部大文字」「全部小文字」に揃えたいときは、toUpperCase と toLowerCase が最短ルート。検索や比較、表示整形で...
JavaScript

JavaScript 逆引き集 | 文字列のトリム

JavaScript文字列のトリムの基本と実践文字列の前後にある余分な空白や改行を取り除くときは trim を使います。元の文字列は変えず、前後のホワイトスペースだけを除いた新しい文字列を返します。構...
JavaScript

JavaScript 逆引き集 | split で文字列分割

JavaScript文字列の分割(split)の基本と実践文字列を「区切り文字」で分けて配列にするのが split。CSVの処理、URLやパスの分解、複数行テキストの扱いなどで頻出です。初心者でもすぐ...
JavaScript

JavaScript 逆引き集 | join で文字列結合

JavaScript配列の文字列結合(join)の基本と実践配列の要素を指定した区切り文字でつないで、1つの文字列にするのが join。CSV作成、UI表示、ログ出力などでよく使います。構文と基本ポイ...
JavaScript

JavaScript 逆引き集 | 配列の分割(chunk)

JavaScript配列の分割(chunk)の基本と実践「配列を一定サイズごとに分割したい」場面はよくあります。例えば、ページネーションやバッチ処理など。JavaScriptには標準で chunk 関...
JavaScript

JavaScript 逆引き集 | 配列をユニークに(オブジェクトキーで)

JavaScript配列をユニークに(オブジェクトキーで)lodashの _.keyBy を使うと「オブジェクト配列の重複を特定のキーでまとめて、ユニーク化」できます。プリミティブ値なら Set で十...
JavaScript

JavaScript 逆引き集 | 配列の重複除去(Set)

JavaScript配列の重複除去(Set)の基本と実践配列に同じ値が何度も入っているとき、「ユニークな値だけ欲しい」場面があります。そんなときに便利なのが Set とスプレッド構文 ... を組み合...
JavaScript

JavaScript 逆引き集 | 配列を逆順

JavaScript配列を逆順にする(reverse)の基本と実践reverseは配列の並びをその場で反転します。最初の要素が最後に、最後の要素が最初になります。元の配列が直接書き換えられる点が重要で...
JavaScript

JavaScript 逆引き集 | 配列のソート(数値)

JavaScript配列のソート(数値)の基本と実践数値配列を正しく並べ替えるには、比較関数を渡して「数値として」比較させるのがポイントです。デフォルトのsortは文字列として比較するため、数値だと期...
JavaScript

JavaScript 逆引き集 | スプレッドで配列コピー/結合

JavaScriptスプレッド構文で配列コピー/結合配列を「そのままコピーしたい」「複数の配列をつなげたい」ときに便利なのが スプレッド構文(...)。初心者でも直感的に書けて、concatよりも短く...
JavaScript

JavaScript 逆引き集 | concat で配列結合

JavaScript配列の結合(concat)の基本と実践「2つ以上の配列をつなげたい」ときに使うのが concat。初心者でも直感的に扱えるメソッドで、元の配列を壊さず新しい配列を返してくれるのが特...
JavaScript

JavaScript 逆引き集 | flatMap の変換+平坦化

JavaScript配列の変換+平坦化(flatMap)の基本と実践「mapで変換した結果が配列になってしまう → そのままでは二重配列になる」そんなときに便利なのが flatMap。mapとflat...
JavaScript

JavaScript 逆引き集 | flat で1階層平坦化

JavaScript配列の平坦化(flat)の基本と実践配列の中に配列が入っていると「二重配列」「ネスト配列」と呼ばれます。これを「1階層だけまっ平らにしたい」ときに使うのが flat。初心者でも直感...
JavaScript

JavaScript 逆引き集 | every で全件判定

JavaScript配列の全件判定(every)の基本と実践「配列のすべてが条件を満たす?」を一度で確かめるなら every。すべてが条件に合えばtrue、1つでも合わなければfalseを返します。最...
JavaScript

JavaScript 逆引き集 | some でいずれか判定

JavaScript配列のいずれか判定(some)の基本と実践「条件に合う要素がひとつでもある?」を真っ直ぐに確かめるなら some。true/falseだけ返すので、存在チェックやバリデーションに向...
JavaScript

JavaScript 逆引き集 | includes で存在確認(原始値)

JavaScript配列の存在確認(includes)の基本と実践「この値、配列に入ってる?」を一発で確かめるなら includes。true/falseだけ返すシンプルさが強みで、indexOfより...
JavaScript

JavaScript 逆引き集 | findIndex でインデックス取得

JavaScript配列のインデックス取得(findIndex)の基本と実践「条件に合う要素が配列のどこにあるか」を知りたいなら findIndex。見つかった最初の位置(インデックス)を返し、見つか...
JavaScript

JavaScript 逆引き集 | find で最初の一致を取得

JavaScript配列から最初の一致を取得(find)の基本と実践「条件に合う最初の要素を1つだけ取り出したい」なら find が最適です。filterは「全部」を返しますが、findは「最初の1件...
JavaScript

JavaScript 逆引き集 | reduce で集計

JavaScript配列の集計(reduce)の基本と実践「配列の値をまとめて1つにしたい」ときに使うのが reduce。合計・平均・最大値・オブジェクト化など、集計処理の万能ツールです。初心者には少...
JavaScript

JavaScript 逆引き集 | map で配列変換

JavaScript配列変換(map)の基本と実践「配列の各要素を加工して、新しい配列を作りたい」なら map が最短ルート。元の配列には触れず、処理結果だけを返してくれるので、初心者でも安全に“変換...
スポンサーリンク