JavaScript

スポンサーリンク
JavaScript

JavaScript | ES6+ 文法:変数・宣言の進化 – グローバル汚染回避

グローバル汚染とは何かグローバル汚染は「意図せずグローバルスコープ(window/globalThis)に変数や関数が増えてしまい、別コードと衝突や上書きが起きる」状態です。衝突は“同じ名前”が複数フ...
JavaScript

JavaScript | ES6+ 文法:変数・宣言の進化 – for 文での let

for 文での let とは何かfor 文での let は「ループの各反復ごとに“新しい束縛”を作る」宣言です。ここが重要です:i のようなインデックスを let で宣言すると、反復ごとに独立した値が...
JavaScript

JavaScript | ES6+ 文法:変数・宣言の進化 – 定数オブジェクトの注意点

定数オブジェクトとは何かconst で宣言したオブジェクトは「変数がどのオブジェクトを指すか」が固定されます。ここが重要です:const は参照を固定するだけで、中身(プロパティや配列要素)は変更可能...
JavaScript

JavaScript | ES6+ 文法:変数・宣言の進化 – 再宣言エラー

再宣言エラーとは何か再宣言エラーは「同じスコープ内で、同じ名前の変数をもう一度宣言しようとすると起きるエラー」です。ES6 以降、let と const は“同スコープの再宣言”を禁止します。ここが重...
JavaScript

JavaScript | ES6+ 文法:変数・宣言の進化 – var との挙動差

var と ES6(let/const)の根本的な違いvar は“関数スコープ+巻き上げ(hoisting)あり、再宣言可能”という古い挙動、let/const は“ブロックスコープ+TDZ(宣言前ア...
JavaScript

JavaScript | ES6+ 文法:変数・宣言の進化 – TDZ(Temporal Dead Zone)

TDZ(Temporal Dead Zone)とは何かTDZ は「let/const で宣言される変数が、宣言位置まで“存在しない扱い”になるゾーン」のことです。ここが重要です:TDZ 中にその変数へ...
JavaScript

JavaScript | ES6+ 文法:変数・宣言の進化 – ブロックスコープ

ブロックスコープとは何かブロックスコープは「波括弧 { } で囲まれた“その範囲内だけ”有効な変数の生存範囲」です。ES6 以降、let と const はブロックスコープを持ち、宣言されたブロックの...
JavaScript

JavaScript | ES6+ 文法:変数・宣言の進化 – 再代入不可の意味

再代入不可とは何か「再代入不可」は、同じ変数名に“別の値(参照)をもう一度割り当てることができない”という意味です。ES6 の const はブロックスコープで、宣言した後にその変数へ新しい値を入れ直...
JavaScript

JavaScript | ES6+ 文法:変数・宣言の進化 – const の仕様

const とは何かconst は ES6 で導入された“ブロックスコープの再代入不可な変数宣言”です。ここが重要です:const は「宣言したブロック内でのみ有効」「同じスコープで再宣言できない」「...
JavaScript

JavaScript | ES6+ 文法:変数・宣言の進化 – let の仕様

let とは何かlet は ES6 で導入された“ブロックスコープの再代入可能な変数宣言”です。ここが重要です:let は「宣言されたブロック内でのみ有効」「同じスコープで再宣言できない」「宣言前に使...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – 実務でのベストプラクティス

実務でのベストプラクティスとは何か「ベストプラクティス」とは、現場で繰り返し使われてきた“安全で効率的なやり方”のことです。JavaScript の配列・オブジェクト操作では、可読性・性能・安全性のバ...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – データ構造選択

データ構造選択とは何かデータ構造選択は「どの形(配列、オブジェクト、Map、Set、派生構造)でデータを持つか」を決めることです。ここが重要です:用途に合った構造を選ぶと、計算量が下がり、コードが短く...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – 関数分割

関数分割とは何か関数分割は「大きな処理を、明確な役割ごとの“小さな関数”に切り出して組み合わせる」設計です。ここが重要です:1つの関数は1つの責務(Single Responsibility)。入力と...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – 可読性優先 vs 速度優先

可読性優先 vs 速度優先とは何かコードには「誰が読んでも意図が分かる」「実行が速い」という2つの価値があります。ここが重要です:大半の業務コードでは“まず可読性”を優先し、速さは“必要な箇所だけ”最...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – 大量データ処理の考え方

大量データ処理とは何か大量データ処理は「配列やオブジェクトが数万〜数百万件規模になっても、時間とメモリを破綻させずに目的を果たす」ための考え方です。ここが重要です:やみくもに map や filter...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – メモリ参照の注意点

メモリ参照とは何かJavaScript の配列・オブジェクトは「参照型」です。ここが重要です:変数には“値そのもの”ではなく“値への参照(ポインタのようなもの)”が入ります。参照が同じだと、片方を変更...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – 破壊的 / 非破壊的操作

破壊的 / 非破壊的操作とは何か破壊的操作は「元の配列・オブジェクトを直接書き換える」こと、非破壊的操作は「元を保ったまま、新しい配列・オブジェクトを返す」ことです。ここが重要です:共有されているデー...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – reduce の使いどころ

reduce とは何かreduce は「配列を1回なめて、“累積器(accumulator)”に結果を積み上げ、最後に1つの値(数値・文字列・配列・オブジェクト)にまとめる」ための関数です。ここが重要...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – map / filter のコスト

map / filter のコストとは何かmap / filter は「要素ごとにコールバックを呼び、結果配列を新しく作る」処理です。ここが重要です:計算量は基本的に (O(n)) ですが、時間とメモ...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – 配列操作の計算量

配列操作の計算量とは何か「計算量」は、要素数を (n) としたとき操作に必要なステップ数の目安です。ここが重要です:操作ごとに増え方が違います。例えば末尾に追加(push)はほぼ一定時間ですが、先頭に...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – API レスポンス加工

API レスポンス加工とは何かAPI レスポンス加工は「外部サービスから受け取ったJSON(欠損・余分・型揺れが混在しがち)を、アプリで使いやすい“整った配列・オブジェクト”に変換する」ことです。ここ...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – フォームデータ整形

フォームデータ整形とは何かフォームデータ整形は「UIから入力された生の値(文字列中心・未入力混在・チェックボックスの揺れなど)を、バックエンドが扱いやすい“型の揃ったオブジェクト”に変換する」作業です...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – ページング用データ加工

ページング用データ加工とは何かページングは「長い配列をページ単位に切り分けて、必要な部分だけ表示・送信する」処理です。ここが重要です:順序(ソート)→フィルタ→ページ分割の“処理順”を守り、メタ情報(...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – フィルタ条件切替

フィルタ条件切替とは何かフィルタ条件切替は「現在の条件(カテゴリ、価格帯、検索語、ステータスなど)をON/OFFや値変更で切り替え、その都度配列を絞り込む」実務パターンです。ここが重要です:条件を“関...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – フラグ更新

フラグ更新とは何かフラグ更新は「オブジェクトや配列の中で、真偽値(true/false)や状態を表す小さな印(flag)を安全に切り替える」操作です。ここが重要です:配列やネスト構造では“直接書き換え...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – 並び替え

並び替えとは何か並び替え(ソート)は「配列の要素を一定の順序で並べ直す」処理です。ここが重要です:JavaScript の Array.prototype.sort は“文字列として比較する”のが既定...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – グループ化

グループ化とは何かグループ化は「配列の要素を“共通のキー”でまとめ、キーごとに要素の集合を作る」処理です。ここが重要です:グループの“鍵(キー)”をどう決めるかで実務の使いやすさが決まります。単純なキ...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – 重複削除

重複削除とは何か重複削除は「同じ値や同じレコードが複数含まれる配列から、重複を取り除き“1回だけ”にする」処理です。ここが重要です:何を“同じ”とみなすかで手法が変わります。プリミティブ(数値・文字列...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – 一意データの抽出

一意データの抽出とは何か一意データの抽出は「重複している要素を取り除き、同じものが1回だけ現れる集合にする」処理です。ここが重要です:何を“同じ”とみなすかで手法が変わります。プリミティブ(数値・文字...
JavaScript

JavaScript | 配列・オブジェクト:実務パターン – ID で検索

ID で検索とは何か「ID で検索」は、配列やオブジェクトの中から“特定の一件”を高速・安全に取り出す実務の基本パターンです。ここが重要です:配列から毎回探すのは線形検索で遅くなりがち。頻繁に検索する...
スポンサーリンク