JavaScript
JavaScript | 1 日 120 分 × 7 日アプリ学習：フォームバリデーションアプリ
JavaScript
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – 従来文字列との比較
何が違うのか（テンプレート文字列 vs 従来の文字列）テンプレート文字列はバッククォートで囲み、${...} に式をそのまま埋め込めて、複数行も“書いたとおり”に保持します。従来の文字列（' や "）...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – 可読性向上パターン
可読性向上パターンの考え方テンプレート文字列は“見た目をコードにそのまま表せる”のが強みです。ここが重要です：見た目（レイアウト）とロジック（計算・整形）を分離し、式の埋め込みは短く保つことで、初心者...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – XSS 対策の注意点
テンプレート文字列と XSS の基本認識テンプレート文字列はバッククォートで囲み、${...} に式を埋め込める便利な仕組みですが、ここが重要です：テンプレート文字列自体には自動エスケープ機能がありま...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – タグ付きテンプレート
タグ付きテンプレートとは何かタグ付きテンプレートは、テンプレート文字列の先頭に“関数名”を置き、文字列と式の分解結果をその関数で“加工してから”最終文字列を得る仕組みです。ここが重要です：通常のテンプ...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – HTML 生成用途
テンプレート文字列で HTML を作る意味テンプレート文字列はバッククォートで囲み、${...} に式を埋め込めるため、“見た目どおり”に HTML 断片を組み立てられます。ここが重要です：複数行とイ...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – 関数呼び出し埋め込み
関数呼び出し埋め込みとは何かテンプレート文字列はバッククォートで囲み、${ ... } の中に“任意の式”を置けます。その式に関数呼び出しを書けば、戻り値が文字列の中にそのまま埋め込まれます。ここが重...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – 条件式埋め込み
条件式埋め込みとは何かテンプレート文字列はバッククォートで囲み、${...}の中に“式”を書いて評価結果を挿入できます。ここが重要です：if/else をそのまま書くのではなく、三項演算子や論理演算子...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – 改行保持
改行保持とは何かテンプレート文字列はバッククォートで囲むだけで、書いた改行や空白をそのまま保持します。ここが重要です：'\n' を手書きしなくても、テンプレート内の改行が実際の文字列に含まれるため、H...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – 式の埋め込み
式の埋め込みとは何かテンプレート文字列はバッククォートで囲み、${ ... } に“式”を入れて、その評価結果を文字列内に埋め込めます。ここが重要です：式は変数だけでなく、計算、関数呼び出し、条件（三...
JavaScript JavaScript | ES6+ 文法：テンプレート文字列 – バッククォート
テンプレート文字列とは何かテンプレート文字列は、バッククォート（）で囲む新しい文字列リテラルです。ここが重要です：式の埋め込み（${...}）、複数行の文字列、可読性の高い整形が“素の文法”で書けます...
JavaScript JavaScript | ES6+ 文法：関数の進化 – 高階関数との相性
高階関数とは何か高階関数は「関数を“引数として受け取る”、または“関数を返す”関数」のことです。関数を値として扱えることで、ロジックの差し替え・再利用・合成が簡単になります。ここが重要です：ES6+ ...
JavaScript JavaScript | ES6+ 文法：関数の進化 – パラメータ分解
パラメータ分解（分割代入）とは何かパラメータ分解は、関数の引数に「オブジェクトや配列をその場で分解して、必要な部分だけ取り出す」ES6の構文です。ここが重要です：関数シグネチャ（引数の書き方）に“必要...
JavaScript JavaScript | ES6+ 文法：関数の進化 – 残余引数（…args）
残余引数（...args）とは何か残余引数（rest parameters）は、関数の仮引数に ...args のように書くと、渡された引数を“配列としてまとめて”受け取る仕組みです。ここが重要です：...
JavaScript JavaScript | ES6+ 文法：関数の進化 – デフォルト引数
デフォルト引数とは何かデフォルト引数は、関数のパラメータに「未指定（または undefined）のときに使われる初期値」を直接書ける仕組みです。ここが重要です：未指定・undefined のときだけ既...
JavaScript JavaScript | ES6+ 文法：関数の進化 – メソッド短縮記法
メソッド短縮記法とは何かメソッド短縮記法は、オブジェクトやクラスの「関数プロパティ」を function キーワードなしで、name() { ... } の形で簡潔に定義できる ES6 の構文です。こ...
JavaScript JavaScript | ES6+ 文法：関数の進化 – コールバックでの利点
コールバックとは何かコールバックは「関数に“後で呼んでね”と渡しておく関数」です。ES6+ では、アロー関数・レキシカル this・Promise/async との相乗効果で、コールバックが短く安全に...
JavaScript JavaScript | ES6+ 文法：関数の進化 – 暗黙の return
暗黙の return とは何か暗黙の return は、アロー関数で本体が“1つの式”だけのときに、return キーワードを書かなくてもその式の評価結果が返る仕組みです。ここが重要です：波括弧 {}...
JavaScript JavaScript | ES6+ 文法：関数の進化 – arguments 非対応
arguments 非対応とは何かアロー関数は「自分専用の arguments（可変長引数の擬似配列）」を持ちません。ここが重要です：従来の function なら arguments で渡された全引...
JavaScript JavaScript | ES6+ 文法：関数の進化 – this の束縛差
this の束縛差とは何かthis は「関数が“どのオブジェクトを対象に動くか”を指す特別な値」です。ここが重要です：従来の function は“呼び出し方”で this が決まり、アロー関数は“定...
JavaScript JavaScript | ES6+ 文法：関数の進化 – アロー関数構文
アロー関数とは何かアロー関数（arrow function）は、ES6 で導入された“短く書けて、this が静的（レキシカル）に決まる”新しい関数記法です。ここが重要です：function キーワー...
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 で検索」は、配列やオブジェクトの中から“特定の一件”を高速・安全に取り出す実務の基本パターンです。ここが重要です：配列から毎回探すのは線形検索で遅くなりがち。頻繁に検索する...
JavaScript JavaScript | 配列・オブジェクト：ネスト構造の扱い – 再帰処理の基礎
再帰処理とは何か再帰は「関数が自分自身を呼び出して、問題を“同じ形のより小さな問題”に分解して解く」テクニックです。ここが重要です：必ず“止まる条件（ベースケース）”を先に書き、次に“1歩進める処理（...
JavaScript JavaScript | 配列・オブジェクト：ネスト構造の扱い – 深いコピーの注意点
深いコピーとは何か深いコピーは「オブジェクトや配列の入れ子を“最深部まで”複製し、元データと完全に独立させる」操作です。ここが重要です：浅いコピー（スプレッドや Object.assign）は外側だけ...
JavaScript JavaScript | 配列・オブジェクト：ネスト構造の扱い – データ正規化
データ正規化とは何かデータ正規化は「ネストの深い配列・オブジェクトを、“重複なく参照しやすい形”に整理すること」です。ここが重要です：同じエンティティ（ユーザー、商品、コメントなど）を“1か所だけ”に...
JavaScript JavaScript | 配列・オブジェクト：ネスト構造の扱い – 不変性（イミュータブル）
不変性（イミュータブル）とは何か不変性（イミュータブル）とは「既存のオブジェクトや配列を直接書き換えず、“新しいインスタンス”を作って変更を表現する」考え方です。ここが重要です：直接代入は一見手軽でも...
JavaScript JavaScript | 配列・オブジェクト：ネスト構造の扱い – 深い階層の更新
深い階層の更新とは何か深い階層の更新は「入れ子（ネスト）になったオブジェクトや配列の、何層も奥にある値を安全に書き換えること」です。ここが重要です：共有状態（UIやストア）では“非破壊更新（新しいオブ...
JavaScript JavaScript | 配列・オブジェクト：ネスト構造の扱い – nullish coalescing
nullish coalescing（??）とは何かnullish coalescing（??）は「左側が undefined または null のときだけ、右側の“デフォルト値”を使う」演算子です。...
JavaScript JavaScript | 配列・オブジェクト：ネスト構造の扱い – オプショナルチェーン
オプショナルチェーンとは何かオプショナルチェーン（?.）は「途中のオブジェクトや配列が null/undefined でも、エラーにせず安全に次へ進む（または止まる）」ための記法です。ここが重要です：...
JavaScript JavaScript | 配列・オブジェクト：ネスト構造の扱い – 安全なアクセス（&&）
安全なアクセス（&&）とは何か「安全なアクセス」とは、ネストされたオブジェクトや配列を辿るときに、中間が欠損（null/undefined）でもエラーにせず安全に値を取り出す書き方です。ここが重要です...
JavaScript JavaScript | 配列・オブジェクト：ネスト構造の扱い – ネスト配列
ネスト配列とは何かネスト配列は「配列の中にさらに配列が入っている構造」です。2次元（行・列の表）、階層（ツリーの子配列）、グループ化（カテゴリごとの要素）など、現実のデータを自然に表現できます。ここが...
JavaScript JavaScript | 配列・オブジェクト：ネスト構造の扱い – ネストオブジェクト
ネストオブジェクトとは何かネストオブジェクトは「オブジェクトや配列の中に、さらにオブジェクトや配列が入っている構造」です。現実世界のデータ（ユーザー→住所→郵便番号、注文→明細の配列→各行のSKUなど...