JavaScript
JavaScript | 1 日 120 分 × 7 日アプリ学習：ローカル保存対応メモ帳
JavaScript
JavaScript JavaScript Tips | 基本・共通ユーティリティ：環境 – 本番環境判定
「本番環境判定」は何のためにあるのか「本番環境判定」は、「今このコードは“お客さんが触っている本番”なのか、それ以外（開発・検証）なのか」を判定するためのユーティリティです。業務システムでは、同じコー...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：環境 – 開発環境判定
「開発環境判定」とは何を判定するのかまず言葉を整理します。ここでいう「開発環境判定」は、ざっくり言うと「今このコードは“本番”で動いているのか、“開発用”で動いているのか」を判定するためのユーティリテ...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：環境 – Chrome 判定
なぜ「Chrome 判定」ユーティリティが欲しくなるのか業務システムを書いていると、「ほとんどのユーザーは Chrome（または Chrome 系）を使っている」という前提で設計されることが多いです。...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：環境 – Android 判定
なぜ「Android 判定」ユーティリティが必要になるのかモバイル対応をしていると、「iOS と Android で挙動が微妙に違う」という場面に必ずぶつかります。同じ“スマホ”でも、こういう差があり...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：環境 – iOS 判定
なぜ「iOS 判定」ユーティリティが必要になるのかモバイル判定より一歩踏み込んだのが「iOS 判定」です。業務システムを作っていると、こういう“iOS 特有の事情”にぶつかります。Safari（iOS...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：環境 – モバイル判定
なぜ「モバイル判定」ユーティリティが必要になるのか業務システムでも、今は「PC だけ」ではなく「スマホ・タブレット」からの利用が当たり前になっています。その結果、こういう要件がよく出てきます。PC で...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：環境 – ブラウザ判定
なぜ「ブラウザ判定」ユーティリティが業務で必要になるのか業務システムをブラウザで動かしていると、「Chrome では動くのに、IE だと落ちる」「スマホの Safari だけ挙動が違う」みたいなこと、...
JavaScript JavaScript | 非同期処理：async / await – 同期風コードの注意点
async / await が生み出す「同期っぽいコード」とはasync / await を使うと、await を並べるだけで、「上から順番に実行されているように見えるコード」 が書けます。async...
JavaScript JavaScript | 非同期処理：async / await – async 関数の戻り値
async 関数の戻り値を一言でいうとasync 関数の戻り値は、「必ず Promise になる」 です。もう少しだけ正確に言うと：async を付けた関数は、必ず Promise を返すその Pro...
JavaScript JavaScript | 非同期処理：async / await – await とループ
await とループを一言でいうとawait をループの中で使うときのポイントは、「そのループを“順番にゆっくり回す”のか、“できるだけ同時に走らせる”のかを意識すること です。同じループでも、各要素...
JavaScript JavaScript | 非同期処理：async / await – 並列 await の書き方
並列 await を一言でいうと「並列 await」は、“複数の非同期処理を同時にスタートさせて、あとからまとめて結果を受け取る書き方” です。普通に await を縦に並べると、A が終わってから ...
JavaScript JavaScript | 非同期処理：async / await – 複数 await の順序
複数の await の「順序」を一言でいうとawait を何回も使うとき、「どこで await を書くか」によって、非同期処理が「順番に」動くか「同時に」動くかが変わります。同じ await でも、上...
JavaScript JavaScript | 非同期処理：async / await – finally との併用
async / await と finally を一言でいうとasync / await と finally を組み合わせると、「非同期処理が成功しても失敗しても、必ず最後にやりたい処理」を書ける よ...
JavaScript JavaScript | 非同期処理：async / await – try / catch との併用
async / await と try / catch を一言でいうとasync / await と try / catch を組み合わせると、「非同期処理の成功もエラーも、同期コードと同じように書け...
JavaScript JavaScript | 非同期処理：async / await – await の戻り値
await の戻り値を一言でいうとawait の「戻り値」は、「Promise が resolve（成功）したときに渡される“中身の値”」 です。const result = await somePr...
JavaScript JavaScript | 非同期処理：async / await – await の役割
await を一言でいうとawait は、「Promise の完了を“その行で一旦止まって待ち”、結果の値を取り出すためのキーワード」 です。await promise と書くと、その行で「promi...
JavaScript JavaScript | 非同期処理：async / await – async 関数の定義
async / await の「async 関数」を一言でいうとasync 関数は、「中で await が使える “非同期版の関数”」 です。先に一番大事なポイントだけ言うと：関数の前に async ...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：汎用 – 処理回数制限
「処理回数制限」ユーティリティは何を守るためのものか「処理回数制限」は、「この関数は最大〇回までしか動かさない」というルールをコードで表現するためのユーティリティです。例えば次のような場面を想像してみ...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：汎用 – 実行時間計測
なぜ「実行時間計測」ユーティリティが業務で効いてくるのか業務コードを書いていると、「この処理、なんか重くない？」「どこがボトルネックなのか分からない」という場面が必ず出てきます。ここで大事なのは、「体...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：汎用 – 連番生成
「連番生成」ユーティリティは何に使うのか連番生成は、「1, 2, 3, 4, … と増えていく番号を、安全に・簡単に振るための仕組み」です。業務コードでは、次のような場面でよく使います。テーブルの行 ...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：汎用 – UUID 生成
UUID ってそもそも何者？まず言葉から整理します。UUID は Universally Unique Identifier（ほぼ世界中で一意な識別子） の略です。見た目はだいたいこんな感じの文字列で...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：汎用 – ランダム ID 生成
なぜ「ランダム ID 生成」が業務ユーティリティになるのか業務コードでは、意外なほど頻繁に「一意な ID（かぶらない識別子）」が必要になります。一時的なデータのキーフロント側だけで使う仮 IDDOM ...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：汎用 – タイムアウト実行
タイムアウト実行とは何を守るための仕組みなのか「タイムアウト実行」は、“一定時間以内に終わらなかった処理を強制的に中断し、失敗として扱う”ためのユーティリティです。業務システムでは、次のような問題が頻...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：汎用 – 再試行処理
なぜ「再試行処理」が業務ユーティリティとして必須になるのか業務システムで一番よくあるのが「外部としゃべる処理」です。API 呼び出し、DB アクセス、外部サービス連携、キュー処理など、どれも「たまに失...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：汎用 – 遅延実行
「遅延実行」とは何をしたいテクニックか「遅延実行」は、その名の通り「今すぐではなく、少し時間をおいてから処理を実行する」ためのテクニックです。例えば、次のような場面をイメージしてください。ユーザーがボ...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：汎用 – 一度だけ実行
「一度だけ実行」ユーティリティが欲しくなる場面業務コードを書いていると、「この処理は絶対に一回だけ動いてほしい」という場面がよく出てきます。初期化処理（同じ初期化を二回やると壊れる）イベント登録（同じ...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：汎用 – no-op 関数
no-op 関数ってそもそも何？「no-op（ノーオペ）」は no operation の略で、「何もしない関数」 のことです。JavaScript だと、いちばんシンプルな形はこれです。functi...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：API通信アプリ（ExchangeRate.hostで通貨変換アプリ）
1日目のゴールと今日やること1日目のテーマは「ExchangeRate.host API を使って“シンプルな通貨レート取得アプリ”を作りながら、fetch / async‑await / エラーハン...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：API通信アプリ（Nager.Date APIで祝日一覧アプリ）
1日目のゴールと今日やること1日目のテーマは「Nager.Date API を使って “今年の祝日一覧アプリ” を作りながら、fetch / async‑await / エラーハンドリングの基本パター...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：安全処理 – 安全な数値計算
なぜ「安全な数値計算」が業務で重要になるのか業務コードの数値計算は、単なる足し算・引き算では終わりません。外部 API のレスポンス、フォーム入力、DB の値など、「本当に数値か分からないもの」を相手...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：安全処理 – null 合体代入
「null 合体代入」とは何をしてくれる構文か「null 合体代入」は、「その変数が null または undefined のときだけ、デフォルト値を代入する」ということを一発で書ける構文です。Jav...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：安全処理 – undefined 防止代入
「undefined 防止代入」とは何を守りたいのか「undefined 防止代入」は、一言でいうと「よく分からない値を代入したせいで、ちゃんと入っていた値を undefined で上書きしてしまう事...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：安全処理 – 存在チェック付き実行
「存在チェック付き実行」とは何を守りたいのか存在チェック付き実行は、一言でいうと「その値が“本当に実行していい関数か”を確認してから呼ぶ」ためのパターンです。業務コードでよくあるのが、こういうやつです...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：安全処理 – オプショナル取得
「オプショナル取得」とは何を楽にしたいのかオプショナル取得は、一言でいうと「あるかもしれないし、ないかもしれない値を“落とさずに”扱うための取り方」です。業務コードだと、こんな状況が日常茶飯事です。u...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：安全処理 – 安全なプロパティ取得
なぜ「安全なプロパティ取得」が業務で必須になるのか業務コードで一番よく見るエラーの一つがこれです。Cannot read properties of undefined (reading 'xxx')...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：安全処理 – デフォルト値補完
なぜ「デフォルト値補完」が業務でめちゃくちゃ大事なのか業務コードでは、「外から来る値」がとにかく信用できません。API レスポンス、フォーム入力、設定ファイル、環境変数、ローカルストレージなど、どれも...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：安全処理 – try-catch ラッパー
なぜ「try-catch ラッパー」が業務で効いてくるのかまず前提として、JavaScript の try-catch は「例外が投げられても、アプリ全体を落とさずに処理を続けるための仕組み」です。t...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：安全処理 – 安全な JSON stringify
JSON.stringify の基本をまず押さえるJSON.stringify は、「JavaScript の値（オブジェクトや配列など）を JSON 文字列に変換する関数」です。const obj ...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：安全処理 – 安全な JSON parse
JSON.parse が「危険」になりやすい理由まず前提として、JSON.parse は「JSON 形式の文字列を、JavaScript の値（オブジェクトや配列など）に変換する関数」です。const...
JavaScript JavaScript | 非同期処理：Promise 応用 – Promise の落とし穴
まず「Promise の落とし穴」をざっくり整理するPromise 自体は仕組みとしてはそんなに難しくないのに、実際に書き始めると「なんか思った通りに動かない」「エラーが消える」「順番がおかしい」みた...
JavaScript JavaScript | 非同期処理：Promise 応用 – 非同期関数の再利用
「非同期関数の再利用」を一言でいうと非同期関数の再利用は、「一度作った Promise ベースの処理を、“場面だけ変えて何度も使い回せる形” に設計すること」です。言い換えると、同じような API 呼...
JavaScript JavaScript | 非同期処理：Promise 応用 – Promise のラップ
まず「Promise のラップ」を一言でいうとPromise の「ラップ」とは、「既存の処理（コールバック形式や Promise など）を “Promise を返す関数” という形に包み直して、扱いや...
JavaScript JavaScript | 非同期処理：Promise 応用 – 条件付き非同期処理
「条件付き非同期処理」って何かをまずイメージするPromise を使っていると、だんだんこういう場面が出てきます。「A の結果しだいで、B を呼ぶか呼ばないか決めたい」「ログイン済みなら API を叩...
JavaScript JavaScript | 非同期処理：Promise 応用 – 逐次処理の書き方
まず「逐次処理」とは何かをはっきりさせるPromise で言う「逐次処理（ちくじ処理）」は、「非同期処理を A → B → C… のように“順番に”実行する書き方」 のことです。具体的には、A が終わ...
JavaScript JavaScript | 非同期処理：Promise 応用 – 並列処理の考え方
まず「並列処理」をざっくりイメージでつかむJavaScript の Promise でいう「並列処理」は、「待ち時間がある処理を “同時にスタート” させて、全部終わる（またはどれかが終わる）のを待つ...
JavaScript JavaScript | 非同期処理：Promise 応用 – Promise.any
Promise.any を一言でいうとPromise.any は、「複数の Promise のうち、“最初に成功したもの 1 つ” だけの結果を採用する関数」 です。race が「一番早く 成功でも失...
JavaScript JavaScript | 非同期処理：Promise 応用 – Promise.race
Promise.race を一言でいうとPromise.race は、「複数の Promise のうち、“一番早く決着したやつだけ” の結果を採用する関数」 です。race（レース）という名前の通り、...
JavaScript JavaScript | 非同期処理：Promise 応用 – Promise.allSettled
Promise.allSettled を一言でいうとPromise.allSettled は、「複数の Promise が “成功しても失敗しても、とにかく全部終わるまで待ち、結果をぜんぶレポートして...
JavaScript JavaScript | 非同期処理：Promise 応用 – Promise.all
Promise.all を一言でいうとPromise.all は、「複数の Promise を“同時に走らせて”、全部そろったら結果をまとめて受け取るための関数」です。たとえば、ユーザー情報を取得する...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：API通信アプリ（Datamuse APIで語彙検索アプリ）
Datamuse API 編 1日目へようこそ今日は 「API 通信アプリの基礎を“実際に動く形”で理解する」 ことがゴールです。Datamuse API は「単語の関連語・類義語・韻を踏む単語」を返...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：型チェック – 有限数判定
有限数判定とは何を見分けたいのか有限数判定は、「その値が 無限大（Infinity / -Infinity）でもなく、NaN でもなく、ちゃんとした“有限の数値”かどうか」を見分けることです。業務では...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：型チェック – 負の数判定
「負の数判定」とは何を見分けたいのか負の数判定は、「その値が“0 より小さい数値として扱ってよいか”どうか」を見分けることです。業務では、赤字金額、減算値、差分（マイナス方向）、残高の変化量など、「負...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：型チェック – 正の数判定
「正の数判定」とは何を見分けたいのか正の数判定は、「その値が“0 より大きい数値として扱ってよいか”どうか」を見分けることです。業務では「数量」「個数」「ページ番号」「在庫数」「ポイント」「金額（マイ...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：型チェック – NaN 判定
NaN 判定とは何を見分けたいのかNaN 判定は、「その値が“数値型ではあるけれど壊れた値（NaN）かどうか”」を見分けることです。NaN は “Not a Number” の略ですが、型としては n...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：型チェック – 数値判定
「数値判定」とは何を見分けたいのかここでいう「数値判定」は、その値が「本当に“数値として扱っていいものか”どうか」を見分けることです。JavaScript では、"10" のような文字列も、10 のよ...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：型チェック – Promise 判定
Promise 判定とは何を見分けたいのかここでいう「Promise 判定」は、その値が「非同期処理を表す Promise なのかどうか」を見分けることです。業務コードでは、async/await や...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：型チェック – Date 判定
「Date 判定」とは何を見分けたいのかここでいう「Date 判定」は、その値が「本物の Date オブジェクトかどうか」を見分けることです。業務では「日付を表す値」がたくさん出てきますが、その正体は...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：型チェック – 関数判定
関数判定とは何を見分けたいのか「関数判定」は、その値が「本当に関数かどうか」を見分けることです。業務コードでは、「コールバックを受け取る」「オプションでフック関数を渡せる」「イベントハンドラを登録する...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：型チェック – オブジェクト判定
「オブジェクト判定」とは何を見分けたいのか「オブジェクト判定」と聞くと、「typeof value === 'object' って書けばいいんでしょ？」と思いがちですが、実務ではそれだと足りません。J...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：型チェック – 配列判定
配列判定とは何か「配列判定」は、その値が「本当に配列かどうか」を見分けることです。JavaScript では、配列もオブジェクトの一種なので、typeof だけでは配列かどうかを判定できません。con...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – 浮動小数変換
「浮動小数変換」とは何をするものか浮動小数変換は、「文字列や整数などの値を“小数を含む数値”として安全に扱える形にする」ことです。金額（小数点以下の税率や手数料）、割合、重さ、距離、レート、単価など、...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – 整数変換
「整数変換」とは何をするものか整数変換は、「文字列や小数など、いろいろな値を“業務で扱いやすい整数”にそろえる」ことです。数量、個数、ページ番号、ID、在庫数、ポイント、金額（税抜き・税込みの端数処理...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – 数値変換
「数値変換」とは何をするものか数値変換は、「文字列やその他の値を、最終的に“ちゃんとした数値”として扱える形にする」ことです。業務コードでは、フォーム入力、CSV、API のレスポンスなど、ほとんどが...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – 真偽値変換
「真偽値変換」とは何をするものか真偽値変換は、「どんな値でも最終的に true か false に決める」ことです。業務コードでは、「この値を条件として扱っていいか」「フラグとしてオンなのかオフなのか...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – 空オブジェクト判定
空オブジェクトとは何かをまず整理するJavaScript の「オブジェクト」は、キーと値のペアを入れておくための入れ物です。その中に自分が定義したプロパティが 1 つもない {} の状態を、ここでは「...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – 空配列判定
空配列とは何かをまず押さえるJavaScript の「配列」は、複数の値を順番付きで持てるオブジェクトです。その中に要素が 1 つも入っていない配列、つまり [] が「空配列」です。const a =...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – 空文字判定
空文字とは何かをまず整理するJavaScript での「空文字」は、長さ 0 の文字列、つまり "" のことです。中に何も文字が入っていないけれど、「文字列という型の値」はちゃんと存在している状態です...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – null または undefined 判定
「null または undefined 判定」とは何か業務コードでは「値が 0 かどうか」よりも、「そもそも値が“あるか・ないか”」を判定する場面がとても多いです。ここでいう「ない」は、JavaScr...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – undefined 判定
JavaScript における undefined とはundefined は「まだ値が決まっていない」「存在しないものを見に行った」ときに JavaScript が自動的に使う特別な値です。プログラ...
JavaScript JavaScript Tips | 基本・共通ユーティリティ：基本判定・変換 – null 判定
JavaScript における「null」とはまず「null」は、「ここには“意図的に”値がない」ということを表す特別な値です。たとえば「まだデータが来ていない」「検索したけど見つからなかった」など、...
JavaScript JavaScript | 非同期処理：Promise 基礎 － エラー伝播
まず「エラー伝播」を一言でいうとPromise のエラー伝播は、「どこかの then で失敗しても、その“失敗情報”がチェーンを下へ流れていき、最後の catch まで届く仕組み」のことです。コールバ...
JavaScript JavaScript | 非同期処理：Promise 基礎 – 値の受け渡し
まず「値の受け渡し」を一言でいうとPromise の「値の受け渡し」は、「前の then（または resolve/reject）で決まった値が、次の then / catch にバトンのように渡ってい...
JavaScript JavaScript | 非同期処理：Promise 基礎 – チェーン処理
まず「チェーン処理」を一言でいうとPromise のチェーン処理は、「非同期のステップを、then を使って“上から順番に”つなげていく書き方」 です。コールバック地獄だと、A の中で B を呼んでB...
JavaScript JavaScript | 非同期処理：Promise 基礎 – finally の役割
まず finally を一言でいうとfinally は、「Promise が成功しても失敗しても“どっちにしても最後に必ず実行したい処理”を書く場所」です。例えば、ローディング表示を消したいモーダルを...
JavaScript JavaScript | 非同期処理：Promise 基礎 – catch の基本
まず catch を一言でいうとcatch は、「Promise で起きたエラー（失敗）を、最後にまとめて受け止める場所」です。then が「成功したときの続きを書く場所」だとしたら、catch は ...
JavaScript JavaScript | 非同期処理：Promise 基礎 – then の基本
まず then を一言でいうとthen は、「Promise が“成功したあとにやりたい処理”を登録するための関数」です。Promise は「そのうち結果が入る箱」でしたね。then はその箱に対して...
JavaScript JavaScript | 非同期処理：Promise 基礎 – reject の役割
まず「reject」のイメージを一言でreject は、「この Promise の非同期処理は“失敗”で終わったよ、と確定させるスイッチ」です。そして同時に、「なぜ失敗したのか（エラー情報）はこれだよ...
JavaScript JavaScript | 非同期処理：Promise 基礎 – resolve の役割
まず「resolve」のイメージを一言でresolve は、「この Promise の非同期処理は“成功”で終わったよ、と確定させるスイッチ」です。そして同時に、「成功した結果はこれだよ」と、Prom...
JavaScript JavaScript | 非同期処理：Promise 基礎 – Promise の状態（pending / fulfilled / rejected）
Promise の状態を一言でイメージするPromise は「そのうち結果が入る箱」 で、その箱には常にどれか 1 つの「状態」がくっついています。pending（保留中）fulfilled（成功）r...
JavaScript JavaScript | 非同期処理：Promise 基礎 – Promise とは何か
まず Promise を一言でイメージするPromise は、「まだ終わっていない非同期処理の“結果がそのうち入る箱”」だと思ってください。今は結果が分からないけど、そのうち 成功するかもしれないもし...
JavaScript JavaScript | 非同期処理：コールバック – Promise が生まれた背景
なぜ Promise なんてものが出てきたのか（ざっくり全体像）Promise は、「非同期処理をコールバックだけで頑張った結果、みんながしんどくなったので生まれた“救急アイテム” です。特に、次のよ...
JavaScript JavaScript | 非同期処理：コールバック – 可読性の低下
「コールバックで可読性が落ちる」という話の本質コールバックは、非同期処理には欠かせない仕組みです。ただし、使い方次第でコードの「可読性（読みやすさ）」を一気に悪くしてしまう ことがあります。特に問題に...
JavaScript JavaScript | 非同期処理：コールバック – エラーハンドリングの問題
コールバックとエラーハンドリングの関係（まず全体像）コールバックを使った非同期処理では、「エラーをどう扱うか」 が一気に難しくなります。同期処理なら、try { const result = doSo...
JavaScript JavaScript | 非同期処理：コールバック – コールバック地獄
コールバック地獄とは何か（まずイメージ）コールバック地獄（callback hell）は、「非同期処理をコールバックだけでつなぎまくった結果、コードが右に右にネストしまくって、読めない・直せない状態」...
JavaScript JavaScript | 非同期処理：コールバック – ネストしたコールバック
ネストしたコールバックとは何か（まずイメージ）ネストしたコールバックというのは、「コールバックの中で、さらに別の非同期処理を呼び、その中でまたコールバックを書き…と階段状に深くなっていく書き方」 のこ...
JavaScript JavaScript | 非同期処理：コールバック – 同期コールバックとの違い
いちばん大事な違いのイメージまず、ざっくりこう覚えてください。同期コールバック→ 「その場で、すぐに呼ばれるコールバック」非同期コールバック→ 「あとで、別のタイミングで呼ばれるコールバック」どちらも...
JavaScript JavaScript | 非同期処理：コールバック – 非同期コールバック
まず「非同期コールバック」を一言でイメージする非同期コールバックは、「“今すぐ”ではなく、“あとで”呼び出してもらうために登録しておく関数」のことです。普通のコールバックも「あとで呼ばれる関数」ですが...
JavaScript JavaScript | 非同期処理：コールバック – setInterval の仕組み
setInterval を一言でいうと何かsetInterval は「この処理を◯ミリ秒ごとにくり返し実行してね」とブラウザ（または Node）に頼む関数です。setTimeout が「1回だけ、あと...
JavaScript JavaScript | 非同期処理：コールバック – setTimeout の仕組み
まず setTimeout を一言でイメージするsetTimeout は、「この処理を◯ミリ秒“後に”実行してね」とブラウザ（または Node）にお願いする関数です。ポイントはここです。setTime...
JavaScript JavaScript | 非同期処理：コールバック – コールバック関数とは
コールバック関数のイメージ（まず感覚から）コールバック関数は、「あとで呼んでね」と他の関数に渡しておく関数 です。自分で直接 myFunc() と呼ぶのではなく、「この処理が終わったときに、この関数を...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：API通信アプリ（LibreTranslate APIで翻訳アプリ）
1日目のゴールと今日やることLibreTranslate API 中級編 1 日目のテーマは「テキストを入力 → API に送信 → 翻訳結果を表示する“翻訳アプリの基礎”を作る」ことです。扱う技術は...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：API通信アプリ（Datamuse APIで関連語検索アプリ）
1日目のゴールと今日やることDatamuse API 中級編 1 日目のテーマは「単語を入力すると、関連する単語や類義語を API から取得して表示するミニアプリを作る」ことです。キーワードはこの 3...
JavaScript JavaScript | 非同期処理：非同期の基礎概念 – 非同期が必要な理由
まず「なぜ非同期なんて面倒なものがあるのか」いきなり本音から言うと、多くの人はこう感じます。「同期処理だけで書けたらどれだけ楽か」「非同期って急に難しくなるし、できれば避けたい」実は JavaScri...
JavaScript JavaScript | 非同期処理：非同期の基礎概念 – 実行順序の全体像
まず「実行順序の全体像」を一言でまとめるJavaScript の実行順序は、ざっくり言うとこうなります。同期処理（ふつうのコード）を上から順番に実行する同期が一段落してコールスタックが空いたら、Pro...
JavaScript JavaScript | 非同期処理：非同期の基礎概念 – イベントループ
まずイベントループを一言でイメージするイベントループは、「JavaScript に“次にやるべき仕事”をひたすら渡し続ける司会進行役」です。JavaScript はシングルスレッドで、同時に動ける処理...
JavaScript JavaScript | 非同期処理：非同期の基礎概念 – マイクロタスクキュー
マイクロタスクキューとは何か（まずざっくりイメージ）マイクロタスクキューは、「とても優先度の高い“あとで実行する処理”が並ぶ、特別レーンの待ち行列」 です。前回の「タスクキュー」は、setTimeou...
JavaScript JavaScript | 非同期処理：非同期の基礎概念 – タスクキュー
まずタスクキューを一言でイメージするタスクキューは、「あとで実行する処理（コールバック）を順番に並べておく待ち行列」 です。JavaScript はシングルスレッドなので、「今」実行できるのは 1 つ...
JavaScript JavaScript | 非同期処理：非同期の基礎概念 – Web API の役割
全体像：Web API は「JavaScript の外にいる助っ人」まず前提から整理します。ブラウザの中で JavaScript が動くとき、JavaScript エンジン（言語そのものを実行する脳み...
JavaScript JavaScript | 非同期処理：非同期の基礎概念 – コールスタック
コールスタックとは何か（まずイメージから）コールスタックは、「今、どの関数を実行中で、その関数からどの関数を呼び出しているか」を記録している“関数呼び出しの積み重ねメモ” です。JavaScript ...
JavaScript JavaScript | 非同期処理：非同期の基礎概念 – JavaScript がシングルスレッドである理由
まず「シングルスレッド」のイメージからJavaScript が「シングルスレッド」というのは、「同時に実行できるのは、基本的に1つのことだけ」 という意味です。console.log() を実行してい...
JavaScript JavaScript | 非同期処理：非同期の基礎概念 – ブロッキングとは何か
「ブロッキング」とは何か（まずイメージから）「ブロッキング」は、ある処理が終わるまで、そこから先の処理が一切進めなくなる状態のことです。JavaScript だと「一番の働き手（メインスレッド）が、そ...
JavaScript JavaScript | 非同期処理：非同期の基礎概念 – 同期処理と非同期処理の違い
同期処理と非同期処理の一番大事なイメージまず、抽象的な言葉を捨てて、イメージから掴みにいきます。同期処理は、「一列に並んで順番待ちする世界」 です。前の人の処理が終わるまで、次の人は絶対に動けません。...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：API通信アプリ（NewsAPI.orgでニュースアプリ）
1日目のゴールと今日やることNewsAPI.org 中級編 1 日目のテーマは「ニュース API から記事一覧を安全に取得して、ちゃんと“待ち”と“失敗”を扱えるようになること」です。キーワードはこの...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：API通信アプリ（WeatherAPI.comで天気アプリ）
1日目のゴールと今日やること中級編 API 通信アプリ 1 日目のテーマは「fetch と async/await を使って、天気 API から安全にデータを取ってくる」ことです。キーワードはこの 3...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：タイマー & ストップウォッチ
1日目のゴールと今日やること中級編の 1 日目は「タイマー & ストップウォッチの基礎ロジックを完全に理解する」ことがテーマです。今日扱うキーワードは次の 6 つ。setTimeoutsetInter...
JavaScript JavaScript | 1 日 90 分 × 7 日アプリ学習：ミニ総合アプリ（初級編）
1日目のゴールと今日やること1日目のテーマは「入力 → 一覧表示 → 削除 → 条件分岐までを一つのミニアプリでつなげる」ことです。今日やるのは、超シンプルだけど“アプリっぽさ”がちゃんとあるもの：テ...
JavaScript JavaScript | ES6+ 文法：その他の ES6+ 機能 – ES 仕様の更新追跡方法
何を追えばいいのか（ゴールのイメージ）まず、「ES 仕様の更新を追う」と聞くと、毎年の ECMAScript 版（ES2020, ES2021…）その中に入る新機能（Optional chaining...
JavaScript JavaScript | ES6+ 文法：その他の ES6+ 機能 – Intl API
Intl API とは何か（まずイメージから）Intl（Internationalization）は、「言語や国ごとのルールに合わせて、数値・通貨・日付・文字列などをキレイに表示するための標準 API...
JavaScript JavaScript | ES6+ 文法：その他の ES6+ 機能 – Reflect
Reflect とは何か（まずイメージから）Reflect は ES6 で追加された、「オブジェクトに対する基本操作を、“関数の形”でまとめて持っている道具箱」 です。これまでバラバラに存在していたプ...
JavaScript JavaScript | ES6+ 文法：その他の ES6+ 機能 – Proxy
Proxy とは何か（まずイメージから）Proxy は、「あるオブジェクトの前に立って、そのオブジェクトへの操作を横取り・監視・カスタマイズできる“番人”」のような仕組みです。普通はこうです。cons...
JavaScript JavaScript | ES6+ 文法：その他の ES6+ 機能 – for…of の内部
for...of の「見た目」と「中身」は別物だと思ってみるfor...of は、表面上はとてもシンプルです。const arr = [10, 20, 30];for (const value of ...
JavaScript JavaScript | ES6+ 文法：その他の ES6+ 機能 – Generator
Generator とは何か（まずイメージから）Generator（ジェネレータ）は、「少しずつ値を返しながら、一時停止・再開できる特別な関数」 です。普通の関数は、一気に最後まで実行されて「結果はこ...
JavaScript JavaScript | ES6+ 文法：その他の ES6+ 機能 – Iterator
Iterator とは何か（まずイメージから）Iterator（イテレータ）は、「次の値をください」「もう終わりです」を順番に教えてくれる“値の自動販売機”のような仕組み です。自販機にコインを入れる...
JavaScript JavaScript | ES6+ 文法：その他の ES6+ 機能 – Symbol
Symbol とは何か（まずイメージから）Symbol は、ES6 で追加された 「絶対にかぶらない“名前札”のような値」 です。string や number と同じ「プリミティブ型」の一種ですが、...
JavaScript JavaScript | ES6+ 文法：その他の ES6+ 機能 – Nullish coalescing
Nullish coalescing とは何か（まずイメージから）Nullish coalescing（ヌリッシュ・コアレスシング）は?? という演算子で書く、「値が null または undefin...
JavaScript JavaScript | ES6+ 文法：その他の ES6+ 機能 – Optional chaining
Optional chaining とは何か（まずイメージから）Optional chaining（オプショナルチェイニング）は?. という記号で書く、「存在しないかもしれないプロパティに安全にアクセ...
JavaScript JavaScript | 1 日 90 分 × 7 日アプリ学習：フォーム送信シミュレーター（初級編）
1日目のゴールと今日やること1日目のテーマは「フォーム送信の仕組みを“JavaScript で自由にコントロールできるようになる”」ことです。フォーム送信シミュレーターは、「入力 → 確認画面 → 擬...
JavaScript JavaScript | ES6+ 文法：新データ構造 – 実務利用判断
まずゴールをはっきりさせる：何を判断したいのかES6 の「新データ構造」と言われると、Map / SetWeakMap / WeakSetが一気に出てきて、「全部使えたほうがいいのかな？」と身構えがち...
JavaScript JavaScript | ES6+ 文法：新データ構造 – GC と Weak 構造
まず「GC」とは何か（やさしくイメージから）JavaScript の世界では、「もう使われなくなったデータを、自動で片付けてくれる仕組み」 が動いています。これを GC（Garbage Collect...
JavaScript JavaScript | ES6+ 文法：新データ構造 – size プロパティ
size プロパティとは何か（まずイメージから）size プロパティは、「そのコレクションの中に、今いくつ要素が入っているか」を教えてくれる数字 です。ES6 の新しいデータ構造では、MapSetに ...
JavaScript JavaScript | ES6+ 文法：新データ構造 – 反復処理
ES6 の反復処理とは何か（まずイメージから）ES6 以降の「新データ構造」（Map, Set, WeakMap, WeakSet）には、「反復処理しやすいように統一された仕組み」 が用意されています...
JavaScript JavaScript | ES6+ 文法：新データ構造 – Set による重複排除
Set で重複排除とは何か（まずイメージから）Set は「同じ値を 2 回入れようとしても、1 回分しか持たないコレクション」でしたね。この「同じ値は 1 つだけ」という性質を利用すると、配列に同じ値...
JavaScript JavaScript | ES6+ 文法：新データ構造 – Map vs Object
まずざっくりイメージ：Map と Object は「役割」が違う同じように「キーと値」を扱えるので、最初は「Map でも Object でもできるじゃん。どっち使えばいいの？」と感じると思います。ざっ...
JavaScript JavaScript | ES6+ 文法：新データ構造 – WeakSet
WeakSet とは何か（まずイメージから）WeakSet は、「オブジェクトだけを入れられる、弱い参照を持つ Set」 です。普通の Set と似ていますが、決定的に違う点がいくつかあります。1つ目...
JavaScript JavaScript | ES6+ 文法：新データ構造 – WeakMap
WeakMap とは何か（まずイメージから）WeakMap は、「キーをオブジェクトに限定した、”弱い紐づけ” をするための特別な Map」 です。普通の Map と似ていますが、決定的に違うのはここ...
JavaScript JavaScript | ES6+ 文法：新データ構造 – Set
Set とは何か（まずイメージから）Set は、ES6 で追加された「重複を許さない値の集まり（コレクション）」 です。配列：同じ値を何回入れてもいいSet：同じ値は 1 回しか入らないというイメージ...
JavaScript JavaScript | ES6+ 文法：新データ構造 – Map
Map とは何か（まずイメージから）Map は、ES6 で追加された「キーと値のペアを柔軟に保存できる専用のコレクション」 です。似たものに「オブジェクト {}」がありますが、Map には大きな違いが...
JavaScript JavaScript | ES6+ 文法：モジュール – バンドラとの関係
そもそも「バンドラ」とは何か（まずイメージから）バンドラ（bundler）は、「たくさんの JS ファイル（モジュール）を、ブラウザが読みやすい形にまとめてくれる道具」 です。ES6 の import...
JavaScript JavaScript | ES6+ 文法：モジュール – モジュール分割設計
モジュール分割設計とは何か（まずイメージから）モジュール分割設計は、「アプリ全体を、意味のある小さな“部品（ファイル）”に分けて、その関係をきれいに整理すること」 です。1ファイル = 1モジュール、...
JavaScript JavaScript | ES6+ 文法：モジュール – 循環参照の注意
循環参照とは何か（まずイメージから）モジュールの「循環参照（循環依存）」は、モジュール A がモジュール B を import し、同時にモジュール B もモジュール A を import している状...
JavaScript JavaScript | ES6+ 文法：モジュール – モジュールスコープ
モジュールスコープとは何か（まずイメージから）モジュールスコープは、「そのモジュール（＝1ファイル）の中だけで有効な“自分専用の世界”」 のことです。ES6 モジュール（import / export...
JavaScript JavaScript | ES6+ 文法：モジュール – 動的 import
動的 import とは何か（まずイメージから）ES6 以降のモジュールの import には、「ファイルの先頭で書く静的な import」と「コードの中で呼び出せる動的 import」の2種類があり...
JavaScript JavaScript | ES6+ 文法：モジュール – import の別名
「import の別名」とは何か（まずイメージから）import の別名 は、「他のファイルから持ってきた名前に、今のファイルで使いやすい別の名前を付け直す」 仕組みです。同じ名前が他でも使われていて...
JavaScript JavaScript | ES6+ 文法：モジュール – 再エクスポート
再エクスポートとは何か（まずイメージから）再エクスポート（re-export）は、「他のモジュールから import したものを、そのまま（または名前を変えて）もう一度 export し直すこと」 で...
JavaScript JavaScript | ES6+ 文法：モジュール – default export
default export とは何か（まずイメージから）default export は、「このモジュール（ファイル）の“看板商品”を 1 つだけ外に出す」ための仕組みです。名前付き export：...
JavaScript JavaScript | ES6+ 文法：モジュール – 名前付き export
名前付き export とは何か（まずイメージから）名前付き export は、「このファイルから、名前を付けて外に公開するものを選ぶ仕組み」です。// math.jsexport const PI ...
JavaScript JavaScript | ES6+ 文法：モジュール – import / export 基本
モジュールの考え方（まず全体像から）モジュールは、「ファイルごとに役割を分けて、必要なものだけをやり取りする仕組み」です。1ファイル = 1モジュール、と考えておけばOKです。「このファイルから外に出...
JavaScript JavaScript | 1 日 90 分 × 7 日アプリ学習：タブ切り替えアプリ（初級編）
1日目のゴールと今日やること1日目のテーマは「タブ切り替えアプリの“いちばん小さな仕組み”を理解する」ことです。タブ切り替えアプリとは、「ボタン（タブ）を押すと、対応する画面だけが表示される」という、...
JavaScript JavaScript | ES6+ 文法：クラス構文 – クラス設計の考え方
クラス設計の考え方とは何かクラス設計は、「コードをどう書くか」より先に、「このクラスは何者で、何ができて、どこまで面倒を見るのか」を決める作業です。JavaScript の class は、単に「便利...
JavaScript JavaScript | ES6+ 文法：クラス構文 – getter / setter
getter / setter とは何か（まずイメージから）getter / setter は、「プロパティに見える“入り口・出口”の裏に、処理を仕込むための仕組み」 です。普通のプロパティはこうです...
JavaScript JavaScript | ES6+ 文法：クラス構文 – プライベートフィールド（#）
プライベートフィールド（#）とは何かプライベートフィールドは、class の中で「クラスの外から絶対に直接触られたくない値」を隠すための仕組みです。書き方は、名前の前に # をつけます。class U...
JavaScript JavaScript | ES6+ 文法：クラス構文 – 静的メソッド
静的メソッドとは何か（まずイメージから）静的メソッド（static メソッド）は、「インスタンスではなく“クラスそのもの”に属するメソッド」 です。普通のメソッドはこう呼びます。const user ...
JavaScript JavaScript | ES6+ 文法：クラス構文 – super
super とは何か（まずイメージから）super は、クラスの継承で使う「親クラスへの入り口」です。具体的には次の2つの役割があります。親クラスの constructor を呼ぶ親クラスのメソッドを...
JavaScript JavaScript | ES6+ 文法：クラス構文 – 継承（extends）
継承（extends）とは何か（まずイメージから）継承（extends）は、「あるクラスをベースにして、それを少しだけ“追加・変更”したクラスを作る仕組み」 です。「動物」という共通部分を持つクラスが...
JavaScript JavaScript | ES6+ 文法：クラス構文 – メソッド定義
クラスの「メソッド定義」とは何かクラスのメソッドは、「そのクラスから作ったインスタンスができる“動き（振る舞い）”を表す関数」です。class の中に書く関数が、インスタンスから user.greet...
JavaScript JavaScript | ES6+ 文法：クラス構文 – インスタンス生成
「インスタンス生成」とは何か（まずイメージを掴む）クラスは「設計図」、インスタンスは「その設計図から作られた実物」です。class User { ... } は「ユーザーとはこういう性質・機能を持つ」...
JavaScript JavaScript | ES6+ 文法：クラス構文 – constructor
constructor とは何か（まずはイメージから）constructor は、class から new したときに「最初に一回だけ」呼ばれる特別なメソッドです。役割はシンプルで、インスタンスが生ま...
JavaScript JavaScript | ES6+ 文法：クラス構文 – class 構文
class 構文とは何か（まずイメージを掴む）class 構文は、「同じような性質と振る舞いをもつオブジェクトを量産するための設計図を書くための文法」です。「ユーザー」「商品」「敵キャラ」みたいな“種...
JavaScript JavaScript | 1 日 90 分 × 7 日アプリ学習：タイマーアプリ（初級編）
1日目のゴールと今日やることこの「JavaScript タイマーアプリ（基礎） 初級編」では、最終的に「スタート」「ストップ」「リセット」ができる、シンプルなタイマーアプリを作ることを目指します。でも...
JavaScript JavaScript | ES6+ 文法：オブジェクト拡張 – オブジェクト操作設計
オブジェクト操作設計とは何か「オブジェクト操作設計」というのは、単に user.name = "Alice" といった「その場しのぎの代入」を書くのではなく、どんな形のオブジェクトにするか（構造・型）...
JavaScript JavaScript | ES6+ 文法：オブジェクト拡張 – Object.getPrototypeOf
Object.getPrototypeOf とは何かObject.getPrototypeOf は、あるオブジェクトの「プロトタイプ（親オブジェクト）」を取り出すためのメソッドです。プロトタイプとは、...
JavaScript JavaScript | ES6+ 文法：オブジェクト拡張 – Object.getOwnPropertyNames
Object.getOwnPropertyNames とは何かObject.getOwnPropertyNames は、オブジェクトが「自分で持っている」すべてのプロパティ名を配列で返すメソッドです。...
JavaScript JavaScript | ES6+ 文法：オブジェクト拡張 – Object.fromEntries
Object.fromEntries とは何かObject.fromEntries は、「配列（や Map）の一覧」からオブジェクトを作り直すためのメソッドです。一言でいうと、Object.entri...
JavaScript JavaScript | ES6+ 文法：オブジェクト拡張 – Object.entries
Object.entries とは何かObject.entries は、オブジェクトの中身を「配列の配列」に変換する ES2017（ES8）のメソッドです。「キーと値のペア」を という2要素配列にし、...
JavaScript JavaScript | ES6+ 文法：オブジェクト拡張 – Object.assign
Object.assign とは何かObject.assign は、複数のオブジェクトを「左から右へ」順番にコピーして、1つのオブジェクトにまとめるための ES6 のメソッドです。一言でいうと、「プロ...
JavaScript JavaScript | ES6+ 文法：オブジェクト拡張 – Object.is
Object.is とは何かObject.is は、「2つの値が“本当に”同じ値かどうか」を判定するための ES6 の比較関数です。見た目は ===（厳密等価演算子）に似ていますが、NaN と +0 ...
JavaScript JavaScript | ES6+ 文法：オブジェクト拡張 – メソッド定義省略
メソッド定義省略とは何かオブジェクトの「メソッド定義省略」は、ES6 から入った“関数っぽいプロパティ”を短く書くための記法です。従来はこう書いていました。const user = { name: "...
JavaScript JavaScript | ES6+ 文法：オブジェクト拡張 – 計算されたプロパティ名
計算されたプロパティ名とは何か「計算されたプロパティ名（computed property name）」は、オブジェクトリテラルのキーを、文字列リテラルではなく「式の結果」から動的に決める書き方です。...
JavaScript JavaScript | ES6+ 文法：オブジェクト拡張 – プロパティ短縮記法
プロパティ短縮記法とは何かオブジェクトの「プロパティ短縮記法」は、変数名とプロパティ名が同じときに、キー: 値 の 値 を省略できる ES6 の書き方です。ふつうはこう書きます。const name ...
JavaScript JavaScript | 1 日 90 分 × 7 日アプリ学習：ランダム表示アプリ（初級編）
1日目のゴールと今日のテーマ1日目のテーマは「ランダムに1つ選んで表示する感覚をつかむ」 ことです。目指すのは、とてもシンプルなランダム表示アプリ。ボタンを押すと「今日の運勢」や「おみくじ結果」がラン...
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – 旧構文との比較
スプレッド構文と「旧構文」をざっくり比較するとES6 のスプレッド構文 ... は、「配列やオブジェクトの中身をその場でバラして並べる」ための新しい書き方です。旧構文（ES5 まで）は、concat ...
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – 不変データ作成
「不変データ」とは何か（まずここを押さえる）不変データ（immutable data）とは、「一度作ったデータを書き換えず、変更したいときは新しいデータを作る」という考え方です。ここが重要です：配列....
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – 浅いコピーの理解
「浅いコピー」とは何か（まずイメージを掴む）スプレッド構文のコピー（ や { ...obj }）は「浅いコピー（shallow copy）」です。ここが最重要ポイントです：外側の「箱」（配列そのもの・...
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – 上書き順序
スプレッド構文の「上書き順序」とは何かスプレッド構文では、... を使って配列・オブジェクトの中身を「左から右へ」順番に展開していきます。ここが最重要ポイントです：オブジェクトの { ...a, .....
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – 結合処理
スプレッド構文による「結合処理」とは何かスプレッド構文での結合処理は、... を使って「配列やオブジェクトの中身をバラして並べ直し、新しい配列／オブジェクトを作る」書き方です。ここが重要です：配列なら...
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – 関数引数展開
関数引数展開とは何かスプレッド構文の「関数引数展開」は、fn(...array) のように書いて「配列（や配列っぽいもの）をバラして、関数の複数の引数として渡す」書き方です。ここが重要です：... が...
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – オブジェクトコピー
オブジェクトコピーとスプレッド構文の関係オブジェクトのスプレッド構文は、{ ...obj } のように書いて「オブジェクトの中身（プロパティ）を展開して、新しいオブジェクトを作る」書き方です。ここが重...
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – 配列コピー
スプレッド構文で「配列コピー」とは何かスプレッド構文を使うと、 のように書いて「配列の中身だけを取り出して、新しい配列を作る」ことができます。ここが重要です：const copy = arr; は“同...
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – オブジェクト展開
オブジェクトのスプレッド構文とは何かオブジェクトのスプレッド構文は、{ ...obj } のように書いて「オブジェクトの中身（プロパティ）をその場に展開する」書き方です。イメージとしては、「そのオブジ...
JavaScript JavaScript | ES6+ 文法：スプレッド構文 – 配列展開
スプレッド構文の「配列展開」とは何かスプレッド構文の配列展開は、...array の形で「配列をバラして、その場に1個ずつ並べる」書き方です。ここが重要です： と書くと「arr の中身だけ」が新しい配...
JavaScript JavaScript | 1 日 90 分 × 7 日アプリ学習：簡単 ToDo アプリ（初級編）
1日目のゴールと今日のテーマ1日目のテーマは「配列でタスクを管理して、画面を“描き直しながら”ToDoリストを動かす感覚をつかむこと」です。作るのは、ほんとにシンプルな ToDo アプリです。テキスト...
JavaScript JavaScript | 1 日 90 分 × 7 日アプリ学習：入力チェックアプリ（初級編）
1日目のゴールと今日のテーマ1日目のテーマは「“入力された文字がOKかどうか”をプログラムに判断させる感覚をつかむこと」です。ただ文字を受け取るだけじゃなくて、未入力（空）のときに警告を出す。文字が長...
JavaScript JavaScript | 1 日 90 分 × 7 日アプリ学習：強化版カウンターアプリ（初級編）
1日目のゴールと今日のテーマ1日目のテーマは「シンプルだけど“設計の考え方”が入ったカウンターアプリを作ること」です。ただの「+1ボタン」ではなく、複数ボタンを持つ。ボタンごとに役割を分ける（イベント...
JavaScript JavaScript | 1 日 60 分 × 7 日アプリ学習：超初級編
1日目のゴールと全体の流れ1日目のテーマは「JavaScriptに触ってみて、“動いた！”を体で感じること」です。理解度は50％で十分。それよりも「自分の手で打ったコードが反応した」という経験を作りた...
JavaScript JavaScript | ES6+ 文法：分割代入 – 安全な分割
安全な分割とは何か分割代入は「欲しい値だけ」を短く取り出せますが、未定義（undefined）や欠落、深いネスト、null、宣言順の問題で簡単にエラーになります。ここが重要です：安全な分割の基本は「外...
JavaScript JavaScript | ES6+ 文法：分割代入 – 値の入れ替え
値の入れ替え（スワップ）とは何か分割代入を使うと、2つ以上の変数の値を“一時変数なし”で入れ替えられます。ここが重要です：左側のパターンに「新しい並び」を書き、右側に「古い並び」を配列で渡すだけ。読み...
JavaScript JavaScript | ES6+ 文法：分割代入 – rest 要素
rest 要素とは何かrest 要素（残余要素）は、分割代入の左側で ...rest のように書き、“取りきれなかった残り全部”を配列やオブジェクトとしてまとめて受ける記法です。ここが重要です：配列な...
JavaScript JavaScript | ES6+ 文法：分割代入 – 一部要素のスキップ
一部要素のスキップとは何か配列の分割代入では、左側のパターンにカンマだけを書いて「その位置の要素を受け取らない」ことができます。ここが重要です：スキップは“要素の位置”で意味を表すので、読み手が「どこ...
JavaScript JavaScript | ES6+ 文法：分割代入 – 関数引数での使用
関数引数での分割代入とは何か関数のパラメータ部分で分割代入を使うと、渡された配列・オブジェクトから「必要な値だけ」を直接取り出して、引数の宣言に“意図（何を使うのか、欠けたらどうするのか）”を明示でき...
JavaScript JavaScript | ES6+ 文法：分割代入 – ネスト分割
ネスト分割とは何かネスト分割（ネストした分割代入）は、オブジェクトや配列の“入れ子構造”から、必要な値だけを階層に沿って取り出す書き方です。ここが重要です：左側のパターン（構造の形）に合わせて、右側の...
JavaScript JavaScript | ES6+ 文法：分割代入 – 変数名変更
変数名変更（エイリアス）とは何か分割代入の「変数名変更」は、オブジェクトのプロパティ名を“別名の変数”へ取り出す書き方です。ここが重要です：{ prop: alias } の形で「右側のオブジェクトの...
JavaScript JavaScript | ES6+ 文法：分割代入 – デフォルト値
デフォルト値（既定値）とは何か分割代入のデフォルト値は、「取り出そうとした場所に値が無い（undefined）」とき、代わりに使われる“埋め草”です。ここが重要です：デフォルト値は undefined...
JavaScript JavaScript | ES6+ 文法：分割代入 – オブジェクトの分割代入
オブジェクトの分割代入とは何かオブジェクトの分割代入は、オブジェクトから「欲しいプロパティだけ」を取り出し、同名の変数に一気に割り当てる ES6 の書き方です。ここが重要です：左側のパターン { id...
JavaScript JavaScript | ES6+ 文法：分割代入 – 配列の分割代入
配列の分割代入とは何か配列の分割代入は、配列の「位置」に合わせて、複数の変数へ一気に値を取り出す書き方です。ここが重要です：左側のパターン に、右側の配列の先頭から順に対応します。足りない要素は un...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：フォームバリデーションアプリ
この7日間のゴールと全体像この 7 日間は「ログインフォーム風のミニアプリ」を題材に、メールアドレスとパスワードの入力チェックを通して、正規表現での形式チェックエラー表示と submit 制御ユーザー...
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 | 1 日 120 分 × 7 日アプリ学習：ローカル保存対応メモ帳
この7日間のゴールと全体像この 7 日間は「ローカル保存対応メモ帳」を題材に、ブラウザだけで完結する“ちゃんとした”アプリを作りながら、次の3つを体に入れることがゴールです。localStorage ...
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 | 1 日 120 分 × 7 日アプリ学習：ToDoアプリ（設計力強化編）
この7日間のゴールと全体像この 7 日間は「ToDoアプリ」を題材に、ただ動くものではなく「設計できる人」になることを狙います。テーマは次の 3 つです。状態管理（state）：アプリの「今の状態」を...
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など...
JavaScript JavaScript | 1 日 120 分 × 7 日アプリ学習：中級編
この中級編7日間で目指すことこの「1日 120 分 × 7 日・中級編」は、あなたがすでに「変数・if・for・関数・配列・DOM操作・イベント」あたりを触った前提で、「なんとなく動いてる」を卒業して...
JavaScript JavaScript | 1 日 60 分 × 7 日アプリ学習：家計簿編
この7日間プランで作る家計簿アプリのゴールこの 7 日間では、ブラウザ上で動く「シンプル家計簿アプリ」を作ります。機能は次のようなイメージです。日付・内容・金額・種別（収入 / 支出）を入力して追加で...
JavaScript JavaScript | 1 日 60 分 × 7 日アプリ学習：タイマー・ストップウォッチ編
この7日間で作るもののゴールこの 7 日間では、ブラウザで動く「ストップウォッチ＋簡単なタイマー」を作ります。ボタンを押すと時間が進んだり止まったりする、“時間を扱うアプリ” なので、以下のような力が...
JavaScript JavaScript | 1 日 60 分 × 7 日アプリ学習：TODOアプリ編
この7日間 TODOアプリ学習のゴールこの 7 日間では、「ブラウザ上で動くシンプルな TODO アプリ」を完成させます。機能は次の 4 つに絞ります。テキスト入力欄にやることを書く追加ボタンでリスト...
JavaScript JavaScript | 1 日 60 分 × 7 日アプリ学習：電卓アプリ編
この7日間で作る電卓アプリのゴールこの 7 日間では、「ブラウザで動く電卓アプリ」を完成させながら、JavaScript の超基礎と、画面とプログラムをつなぐ考え方（DOM 操作）を身につけます。電卓...
JavaScript JavaScript | 1 日 60 分 × 7 日アプリ学習：初級編
この 7 日・60 分でどこまで行くかこの「初級編・60 分 × 7 日」は、すでにconsole.log変数・if・関数・配列簡単なおみくじやボタン付きアプリあたりを「なんとなく触ったことがある」前...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト操作 – デフォルト値の設定
デフォルト値の設定とは何かデフォルト値は「値が未指定（または欠損）のときに使う“代替値”」です。ここが重要です：何を“未指定”とみなすかで手段が変わります。undefined/null だけを未指定と...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト操作 – 構造の分解（分割代入）
分割代入（構造の分解）とは何か分割代入は、オブジェクトや配列から「必要な部分だけ」を抜き出して、変数に一気に割り当てる書き方です。ここが重要です：オブジェクトは“キー名で取り出す”、配列は“位置で取り...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト操作 – JSON.parse / stringify
JSON とは何かJSON は「データを文字列で表すための軽量フォーマット」です。JavaScript のオブジェクトに“似ている”けれど、JSON はあくまで文字列。送受信・保存に向いており、プログ...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト操作 – 浅いコピーと深いコピー
浅いコピーと深いコピーとは何か浅いコピーは「外側のプロパティだけ新しいオブジェクトに複製し、入れ子（オブジェクトや配列）の“参照”はそのまま共有する」コピーです。深いコピーは「入れ子の内部まで再帰的に...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト操作 – スプレッド構文によるコピー
スプレッド構文によるコピーとは何かスプレッド構文 { ...obj } は「オブジェクトの“自分が持つ列挙可能なプロパティ”を、浅く（シャロー）コピーして新しいオブジェクトを作る」ための書き方です。こ...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト操作 – Object.assign
Object.assign とは何かObject.assign は「右側のオブジェクトの“自前の列挙可能なプロパティ”を左側（ターゲット）へコピーして上書きする」関数です。ここが重要です：コピーされる...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト操作 – for…in
for...in とは何かfor...in は「オブジェクトの“列挙可能なキー（プロパティ名）”を1つずつ取り出して処理する」ためのループ構文です。ここが重要です：for...in は“自分のキーだけ...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト操作 – Object.entries
Object.entries とは何かObject.entries は「オブジェクトが“自分で持つ”列挙可能な文字列キーとその値の組（）」を、配列として返す関数です。ここが重要です：返るのは“自前の・...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト操作 – Object.values
Object.values とは何かObject.values は「オブジェクトが“自分で持つ”列挙可能なプロパティの値だけを、配列で返す」関数です。ここが重要です：返るのは“自前の”かつ“enume...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト操作 – Object.keys
Object.keys とは何かObject.keys は「オブジェクトが“自分で持つ”列挙可能なキー（プロパティ名）を、文字列の配列で返す」関数です。ここが重要です：継承（プロトタイプ）上のキーは含...
JavaScript JavaScript | 1 日 30 分 × 7 日アプリ学習：初級編
この 7 日間・初級編で目指すゴールこの「初級編」では、すでに「超初級」でコンソールでコードを動かす変数、if、関数、配列、ランダム簡単なおみくじアプリあたりを触った人を想定して、もう一歩「アプリ寄り...
JavaScript JavaScript | 1 日 30 分 × 7 日アプリ学習：超初級編
この 7 日間で目指すゴールこの「超初級編」では、たった 7 日 × 1 日 30 分で「自分の手で動くミニアプリ」を作れるところまで行きます。難しい理論は一旦置いておき、次の三つだけを大事にします。...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト基礎 – hasOwnProperty
hasOwnProperty とは何かhasOwnProperty は「そのオブジェクト“自身”が、指定したキー（プロパティ）を持っているか」を真偽値で返すメソッドです。ここが重要です：“継承（プロト...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト基礎 – in 演算子
in 演算子とは何かin 演算子は「そのキー（プロパティ名）が、オブジェクト“自身またはプロトタイプ上”に存在するか」を真偽値で返す演算子です。ここが重要です：in は「値があるか」ではなく「キーが存...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト基礎 – プロパティ削除
プロパティ削除とは何かオブジェクトから「特定のキー（プロパティ）とその値」を取り除くことです。ここが重要です：削除は“存在そのもの”を消します。値を undefined や null にするのは“値を...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト基礎 – プロパティ追加
プロパティ追加とは何かオブジェクトに“新しいキー（プロパティ名）と値”を後から足すことです。ここが重要です：追加の基本は「ドット記法（静的キー）」と「ブラケット記法（動的キー）」の使い分け。さらに、オ...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト基礎 – 動的キー
動的キーとは何か動的キーは「キー名をその場で計算・選択して使う」ための仕組みです。文字列を組み立てたり、変数の値をキーにしたり、日本語や記号・スペースを含むキーにアクセスしたりできます。ここが重要です...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト基礎 – ブラケット記法
ブラケット記法とは何かブラケット記法は obj の形で、オブジェクトのプロパティへアクセス・追加・更新・削除する書き方です。ここが重要です：キーを“文字列として動的”に扱えるため、変数でキー名を決めた...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト基礎 – ドット記法
ドット記法とは何かドット記法は、オブジェクトのプロパティ（キー）に「.」でアクセスする最も読みやすい書き方です。配列が順番で取り出すのに対し、オブジェクトは“名前で取り出す”ため、ドット記法は直感的で...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト基礎 – プロパティと値
プロパティと値とは何かオブジェクトは「キー（プロパティ名）と値」のペアを集めた入れ物です。キーは通常“文字列”か“シンボル”、値は数値・文字列・真偽値・配列・別オブジェクト・関数など何でも入れられます...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト基礎 – オブジェクトリテラル
オブジェクトリテラルとは何かオブジェクトリテラルは { ... } を使って「キー（名前）: 値」をまとめて書く最も基本的な方法です。設定、データレコード、メッセージ、座標など“ラベル付きの情報”をひ...
JavaScript JavaScript | 配列・オブジェクト：オブジェクト基礎 – オブジェクトとは
オブジェクトとは何かオブジェクトは「名前（キー）と値（バリュー）の組み合わせ」を入れる“入れ物”です。実世界の「人」「商品」「設定」などを、その属性として表現します。ここが重要です：キーは文字列（やシ...
JavaScript JavaScript | 配列・オブジェクト：ループ処理 – ループの可読性
ループの可読性とは何か「可読性が高いループ」とは、意図が一目で分かり、バグが起きにくく、後から変更しやすい書き方です。ここが重要です：処理の目的（抽出・変換・集計・実行）に合った構文を選び、否定条件を...
JavaScript JavaScript | 配列・オブジェクト：ループ処理 – インデックス利用の注意点
インデックス利用とは何か配列やオブジェクトをループ処理するとき、インデックス（位置番号）を使って要素へアクセスすることがあります。例えば arr は先頭要素、arr は i 番目の要素です。ここが重要...
JavaScript JavaScript | 配列・オブジェクト：ループ処理 – early return 的な書き方
早期リターン（early return）とは何かearly return は「不要な処理をなるべく“前で打ち切る”書き方」です。関数の先頭でガード（不正条件ならすぐ return）し、ループ内でも“用...
JavaScript JavaScript | 配列・オブジェクト：ループ処理 – ネスト配列の処理
ネスト配列とは何かネスト配列は「配列の中にさらに配列が入っている」入れ子構造です。例えば行列（2次元）、ツリー（多次元）、グループ化されたデータなどが該当します。ここが重要です：処理の設計は“どの深さ...
JavaScript JavaScript | 配列・オブジェクト：ループ処理 – reduce での集計
reduce での集計の基本reduce は「配列の全要素を順に処理して、ひとつの値へ“畳み込む（集約する）”」ためのメソッドです。合計・平均・最大最小だけでなく、辞書（オブジェクト）や Map を作...
JavaScript JavaScript | 配列・オブジェクト：ループ処理 – map と forEach の違い
何が違うのかmap は「各要素を同じルールで変換して“新しい配列”を返す」メソッドです。一方、forEach は「各要素に対して“処理（副作用）を実行するだけ”で、配列は返しません」。ここが重要です：...
JavaScript JavaScript | 配列・オブジェクト：ループ処理 – break / continue の使えない理由（forEach）
forEach で break / continue が使えない理由forEach は「配列の各要素に対して“関数を呼び出す”」高階メソッドです。ここが重要です：forEach は“自分でループを制御...
JavaScript JavaScript | 配列・オブジェクト：ループ処理 – forEach
forEach とは何かforEach は「配列の各要素に対して、指定した関数を順番に“実行する”」ためのメソッドです。ここが重要です：forEach は“副作用（処理をすること）”が目的で、戻り値と...
JavaScript JavaScript | 配列・オブジェクト：ループ処理 – for…of
for...of とは何かfor...of は「配列など“反復可能（イテラブル）”なものを、要素の値にフォーカスしてシンプルに処理する」構文です。ここが重要です：for...of は“値”を1つずつ取...
JavaScript JavaScript | 配列・オブジェクト：ループ処理 – for での配列処理
for とは何かfor は「カウンター（インデックス）を使って、配列を順番に処理する」ための基本的なループ構文です。ここが重要です：配列の長さと位置を明示的に扱えるので、部分処理・スキップ・早期終了・...
JavaScript JavaScript | 配列・オブジェクト：配列の変換・加工 – 非破壊的操作の考え方
非破壊的操作とは何か非破壊的操作は「元の配列を変更せず、新しい配列を返す」考え方とテクニックの総称です。ここが重要です：配列を“直接書き換えない”ことで、予期せぬ影響（共有参照のバグ、UI状態の崩れ）...
JavaScript JavaScript | 配列・オブジェクト：配列の変換・加工 – sort（カスタム）
カスタム sort とは何かカスタム sort は「比較関数（compareFn）を自分で定義して、並べ替えの“ルール”をコントロールする」ことです。ここが重要です：compareFn は負・ゼロ・正...
JavaScript JavaScript | 配列・オブジェクト：配列の変換・加工 – sort（基本）
sort とは何かArray.prototype.sort は「配列の要素を並べ替える」メソッドです。ここが重要です：sort は“破壊的（インプレース）”で、元の配列そのものを書き換えます。返り値は...
JavaScript JavaScript | 配列・オブジェクト：配列の変換・加工 – reverse
reverse とは何かreverse は「配列の要素の並びを“逆順”に並べ替える」メソッドです。ここが重要です：reverse は“破壊的（インプレース）”に働き、元の配列そのものを逆順に書き換えま...
JavaScript JavaScript | 配列・オブジェクト：配列の変換・加工 – join
join とは何かjoin は「配列の要素を“区切り文字”でつないで、ひとつの文字列を作る」メソッドです。元の配列は変更されない非破壊操作で、返り値は常に文字列です。ここが重要です：区切り文字（セパレ...
JavaScript JavaScript | 配列・オブジェクト：配列の変換・加工 – flatMap
flatMap とは何かflatMap は「各要素を“変換”して、その結果を1階層だけ“平坦化（フラットに）”して新しい配列を返す」メソッドです。map と flat(1) を連続で行うのと同じ効果を...
JavaScript JavaScript | 配列・オブジェクト：配列の変換・加工 – flat
flat とは何かflat は「“入れ子（ネスト）になった配列”を、指定した深さまで“平坦化（フラットに）して新しい配列”を返す」メソッドです。元の配列は変更しない非破壊操作です。ここが重要です：fl...
JavaScript JavaScript | 配列・オブジェクト：配列の変換・加工 – reduce
reduce とは何かreduce は「配列のすべての要素を順に処理して、“ひとつの値”にまとめる（集約する）」メソッドです。合計、最大値、オブジェクトの構築、グルーピングなど“ひとつにまとめ上げる”...
JavaScript JavaScript | 配列・オブジェクト：配列の変換・加工 – filter
filter とは何かfilter は「配列から、条件を満たす要素だけを“抽出して新しい配列”を返す」メソッドです。元の配列は変更しない非破壊操作で、返される配列の要素数は条件次第で増減します。ここが...
JavaScript JavaScript | 配列・オブジェクト：配列の変換・加工 – map
map とは何かmap は「配列の各要素に同じ処理を適用して、“変換後の新しい配列”を作る」ためのメソッドです。元の配列は変更されない非破壊操作で、要素数は常に同じままです。ここが重要です：map は...
JavaScript JavaScript | 配列・オブジェクト：配列の検索・判定 – 条件検索の書き方
条件検索とは何か配列の「条件検索」は、要素の値やプロパティが“指定した条件を満たす”ものを探すことです。ここが重要です：何を返したいかで使うメソッドが変わります。要素そのものが欲しいなら find、位...
JavaScript JavaScript | 配列・オブジェクト：配列の検索・判定 – undefined 要素の扱い
undefined 要素とは何か配列の「undefined 要素」は2種類あります。ここが重要です：値が undefined で“入っている要素”と、インデックスはあるのに“実際には値がない空スロット...
JavaScript JavaScript | 配列・オブジェクト：配列の検索・判定 – 配列内存在チェック
配列内存在チェックとは何か「配列内存在チェック」は、ある値や条件に合う要素が配列に含まれているかどうかを判定することです。ここが重要です：何を知りたいかで使うメソッドが変わります。「あるかどうかだけ」...
JavaScript JavaScript | 配列・オブジェクト：配列の検索・判定 – every
every とは何かevery は「配列の全ての要素が、与えた条件を満たすか」を true/false で返す判定メソッドです。1つでも条件を満たさない要素が見つかった瞬間に false を返し、探索...
JavaScript JavaScript | 配列・オブジェクト：配列の検索・判定 – some
some とは何かsome は「配列の中に、条件を満たす要素が“少なくとも1つでもあるか”を true/false で返す」判定メソッドです。見つかった瞬間に検索を止める“短絡評価”を行います。ここが...
JavaScript JavaScript | 配列・オブジェクト：配列の検索・判定 – findIndex
findIndex とは何かfindIndex は「配列の中から、条件に一致する“最初の1要素のインデックス（位置）”を返す」検索メソッドです。見つかれば 0 以上の番号、見つからなければ -1 を返...
JavaScript JavaScript | 配列・オブジェクト：配列の検索・判定 – find
find とは何かfind は「配列から、条件を満たす“最初の1要素”を返す」検索メソッドです。見つかればその要素、見つからなければ null ではなく undefined を返します。ここが重要です...
JavaScript JavaScript | 配列・オブジェクト：配列の検索・判定 – includes
includes とは何かincludes は「配列の中に、指定した値が“存在するかどうか”を true/false で返す」判定メソッドです。位置は返さず、単純に“あるかないか”だけを答えます。ここ...
JavaScript JavaScript | 配列・オブジェクト：配列の検索・判定 – lastIndexOf
lastIndexOf とは何かlastIndexOf は「配列の中から、指定した値が“最後に現れる位置（インデックス）”を返す」検索メソッドです。見つかれば 0 以上の番号、見つからなければ -1 ...
JavaScript JavaScript | 配列・オブジェクト：配列の検索・判定 – indexOf
indexOf とは何かindexOf は「配列の中から、指定した値が最初に現れる位置（インデックス）を返す」検索メソッドです。見つかれば 0 以上の番号、見つからなければ -1 を返します。ここが重...
JavaScript JavaScript | 配列・オブジェクト：配列の追加・削除 – 空配列にする方法
空配列にするとは何か「空配列にする」とは、配列からすべての要素を取り除いて要素数を 0 にすることです。ここが重要です：やり方によって“参照を保つ（同じ配列オブジェクトのまま空にする）”場合と、“別の...
JavaScript JavaScript | 配列・オブジェクト：配列の追加・削除 – スプレッド構文での追加
スプレッド構文とは何かスプレッド構文 ... は「配列の“中身”をその場で展開する」書き方です。たとえば ] は と同じ意味になり、, 3] は を作ります。ここが重要です：スプレッドは“非破壊”で新...
JavaScript JavaScript | 配列・オブジェクト：配列の追加・削除 – 配列の結合（concat）
concat とは何かconcat は「複数の配列や値を“結合して新しい配列”を返す」非破壊メソッドです。元の配列は変更されず、つなげた結果だけが戻り値として返ります。ここが重要です：concat は...
JavaScript JavaScript | 配列・オブジェクト：配列の追加・削除 – slice
slice とは何かslice は「配列から“指定した範囲”を切り出して、新しい配列を返す」非破壊メソッドです。元の配列は変更されず、開始位置から終了位置の“手前まで”がコピーされます。ここが重要です...
JavaScript JavaScript | 配列・オブジェクト：配列の追加・削除 – splice（追加）
splice（追加）とは何かsplice は「配列の途中に要素を挿入（必要なら置き換えも）できる」メソッドです。書式は array.splice(start, deleteCount, ...inse...
JavaScript JavaScript | 配列・オブジェクト：配列の追加・削除 – splice（削除）
splice（削除）とは何かsplice は「配列の途中から指定した数だけ要素を削除する」ためのメソッドです。書式は array.splice(start, deleteCount, ...inser...
JavaScript JavaScript | 配列・オブジェクト：配列の追加・削除 – unshift
unshift とは何かunshift は「配列の先頭に要素を追加し、その結果の要素数（length）を返す」メソッドです。ここが重要です：unshift は“破壊的操作”で、元の配列を直接書き換えま...
JavaScript JavaScript | 配列・オブジェクト：配列の追加・削除 – shift
shift とは何かshift は「配列の先頭の要素を1つ取り出して、配列から削除する」メソッドです。取り出した要素を返し、配列の長さを1つ減らします。ここが重要です：shift は“破壊的操作”で、...
JavaScript JavaScript | 配列・オブジェクト：配列の追加・削除 – pop
pop とは何かpop は「配列の末尾から要素を1つ取り出して、配列から削除する」メソッドです。取り出した要素を返し、配列の長さを1つ減らします。ここが重要です：pop は“破壊的操作”で、元の配列を...
JavaScript JavaScript | 配列・オブジェクト：配列の追加・削除 – push
push とは何かpush は「配列の末尾に要素を追加し、その結果の要素数を返す」メソッドです。ここが重要です：push は“破壊的操作”です。元の配列を直接書き換えるため、同じ配列を共有している変数...
JavaScript JavaScript | 配列・オブジェクト：配列の基礎 – 配列のコピー方法
配列のコピーとは何か配列のコピーは「元の配列を壊さず、別の配列インスタンスを作る」ことです。ここが重要です：コピーには“浅いコピー”（一次元ぶんだけ独立）と“深いコピー”（入れ子の中身まで独立）があり...
JavaScript JavaScript | 配列・オブジェクト：配列の基礎 – 配列の初期化方法
配列の初期化とは何か配列の初期化は「配列を作って、最初の中身（要素）や長さを決める」ことです。ここが重要です：JavaScript では複数の初期化方法がありますが、意図と挙動が微妙に違います。最も安...
JavaScript JavaScript | 配列・オブジェクト：配列の基礎 – 配列と文字列の違い
配列と文字列とは何か配列は「値を順番に並べるための入れ物」、文字列は「文字を順番に並べたテキスト」です。どちらも“順序がある並び”ですが、決定的な違いがあります。ここが重要です：配列は変更可能（要素の...
JavaScript JavaScript | 配列・オブジェクト：配列の基礎 – 多次元配列
多次元配列とは何か多次元配列は「配列の中に配列を入れた構造」です。2次元は行と列、3次元はさらに“層”があるイメージになります。ここが重要です：JavaScriptには専用の多次元型はなく、配列の入れ...
JavaScript JavaScript | 配列・オブジェクト：配列の基礎 – 配列の変更可能性
配列の変更可能性とは何か配列は「参照型のオブジェクト」で、デフォルトでは中身を自由に変更できます。push・pop・splice・sort などのメソッドは配列を“その場で書き換える”ため、同じ配列を...
JavaScript JavaScript | 配列・オブジェクト：配列の基礎 – 配列の参照渡し
配列の参照渡しとは何か配列は「参照型」のオブジェクトです。変数が直接値そのものを持つのではなく、“配列がある場所（参照）”を指しています。ここが重要です：代入や関数引数で配列を渡すと、“配列そのもの”...
JavaScript JavaScript | 配列・オブジェクト：配列の基礎 – length プロパティ
length プロパティとは何かlength プロパティは「配列の要素数」を表す特別な値です。配列に何個の要素が入っているかを常に返してくれます。ここが重要です：length は「最後のインデックス ...
JavaScript JavaScript | 配列・オブジェクト：配列の基礎 – インデックスの概念
インデックスとは何かインデックスは「配列の中で、要素に付いている番号」です。JavaScript では先頭が 0、次が 1…と続きます。ここが重要です：配列の要素数（length）とインデックスの最大...
JavaScript JavaScript | 配列・オブジェクト：配列の基礎 – 配列リテラル
配列リテラルとは何か配列リテラルは、角括弧 は数値の配列、 は型が混在した配列になります。ここが重要です：JavaScript の配列はどんな型でも混ぜられ、長さは後から自由に伸び縮みします。new ...
JavaScript JavaScript | 配列・オブジェクト：配列の基礎 – 配列とは何か
配列とは何か配列は「値を順番に並べて、ひとまとめに扱うための箱」です。1つの変数に複数の値を入れて、後から順番や番号（インデックス）で取り出せます。ここが重要です：JavaScript の配列は“どん...
JavaScript JavaScript | DOM 操作：フォーム操作 – フォームデータ送信（FormData）
FormData とは何かFormData は、フォームの入力値を「送信用のペア（name → value）」としてまとめるための標準APIです。ファイルも含めて簡単に扱え、fetch などの非同期送...
JavaScript JavaScript | DOM 操作：フォーム操作 – エラー表示の DOM 操作
エラー表示の DOM 操作とは何かフォームの「どこが、なぜ、どう直せばいいか」を画面に明確に示すために、DOM（HTML構造）を動的に追加・更新・削除することです。ここが重要です：ブラウザ標準のバブル...
JavaScript JavaScript | DOM 操作：フォーム操作 – バリデーション（required, pattern など）
バリデーションとは何かバリデーションは「入力が条件を満たしているか」をチェックして、誤入力や欠落を防ぐ仕組みです。HTML とブラウザは、required・type・min/max・pattern な...
JavaScript JavaScript | DOM 操作：フォーム操作 – フォーム送信イベント
フォーム送信イベントとは何かフォーム送信イベントは、ユーザーがフォームを送ろうとした瞬間に発火する “submit” イベントのことです。ここが重要です：submit は「実際の送信前」に発火するため...
JavaScript JavaScript | DOM 操作：フォーム操作 – フォームの reset
フォームの reset とは何かフォームの reset は「フォーム内のすべての入力を“初期状態（HTMLで指定された値・選択）”に戻す」操作です。ここが重要です：reset は“現在値”ではなく“初...
JavaScript JavaScript | DOM 操作：フォーム操作 – ラジオボタンの取得
ラジオボタンの取得とは何かラジオボタンは「同じ name を持つ選択肢の中から“必ず0か1つ”だけ選ぶ」入力です。JavaScript では“グループとして”扱うのがコツです。ここが重要です：同じ n...
JavaScript JavaScript | DOM 操作：フォーム操作 – checked の操作
checked とは何かchecked は、checkbox と radio の「選択状態」を表す真偽値プロパティです。true なら選ばれている、false なら選ばれていない状態を意味します。ここ...
JavaScript JavaScript | DOM 操作：フォーム操作 – select の取得・変更
select の取得・変更とは何かselect は「選択肢の中から値を1つ（または複数）選ぶ」ためのフォーム要素です。JavaScript では現在の選択値を読み取ったり、選択を変更したり、選択肢を動...
JavaScript JavaScript | DOM 操作：フォーム操作 – input の value
input の value とは何かinput 要素の value は「現在の入力値」を表す文字列です。type に関わらず、基本は文字列として読み書きします。ここが重要です：type="number...
JavaScript JavaScript | DOM 操作：フォーム操作 – フォーム要素の取得
フォーム要素の取得とは何かフォーム要素の取得は、HTML の form や input・select・textarea・button などにプログラムからアクセスして、値を読んだり書いたり、送信を制御...
JavaScript JavaScript | DOM 操作：要素の位置・サイズ・スクロール – スクロール固定（overflow: hidden）
スクロール固定（overflow: hidden）とは何か「スクロール固定」は、ユーザーがスクロールできない状態にすることです。最も簡単な方法は、対象要素（よくあるのは body）に overflow...
JavaScript JavaScript | DOM 操作：要素の位置・サイズ・スクロール – boundingClientRect
getBoundingClientRect とは何かgetBoundingClientRect は、要素の「画面（ビューポート）に対する位置とサイズ」を返すメソッドです。返ってくる値は小数を含む CS...
JavaScript JavaScript | DOM 操作：要素の位置・サイズ・スクロール – ビューポートとは
ビューポートとは何かビューポートは「今、ユーザーに見えている画面の領域」です。ページ全体（ドキュメント）の中で、スクロールせずに表示されている矩形がビューポート。ここが重要です：JavaScriptで...
JavaScript JavaScript | DOM 操作：要素の位置・サイズ・スクロール – 画面中央配置
画面中央配置とは何か「画面中央配置」は、要素をビューポート（今見えている画面）のちょうど真ん中に置くことです。モーダル、ダイアログ、ロード中インジケーターなどで頻繁に使います。ここが重要です：中央は「...
JavaScript JavaScript | DOM 操作：要素の位置・サイズ・スクロール – スクロール位置の取得
スクロール位置の取得とは何かスクロール位置の取得は「今、ページや要素がどれだけスクロールされているか」を数値で読み取ることです。縦方向はどれだけ上から下へ動いたか（Top）、横方向は左から右へ動いたか...
JavaScript JavaScript | DOM 操作：要素の位置・サイズ・スクロール – scrollTo / scrollBy
scrollTo / scrollBy とは何かscrollTo と scrollBy は、「スクロール位置をプログラムで動かす」ためのメソッドです。window（ページ全体）にも、スクロール可能な要...
JavaScript JavaScript | DOM 操作：要素の位置・サイズ・スクロール – scrollWidth / scrollHeight
scrollWidth / scrollHeight とは何かscrollWidth と scrollHeight は、「要素のコンテンツが本来必要としている大きさ」を返すプロパティです。visibl...
JavaScript JavaScript | DOM 操作：要素の位置・サイズ・スクロール – clientWidth / clientHeight
clientWidth / clientHeight とは何かclientWidth と clientHeight は、要素の「内側で実際に使える領域」のサイズを整数ピクセルで返すプロパティです。ここ...
JavaScript JavaScript | DOM 操作：要素の位置・サイズ・スクロール – offsetWidth / offsetHeight
offsetWidth / offsetHeight とは何かoffsetWidth と offsetHeight は、要素の「見た目のサイズ」をピクセルで返すプロパティです。ここが重要です：bord...
JavaScript JavaScript | DOM 操作：要素の位置・サイズ・スクロール – offsetTop / offsetLeft
offsetTop / offsetLeft とは何かoffsetTop と offsetLeft は、「その要素が“基準の親”（offsetParent）からどれだけ離れているか」を示すピクセル値で...
JavaScript JavaScript | DOM 操作：イベント発展 – once: true
once: true とは何かonce: true は addEventListener のオプションで、「このリスナーは最初の一回だけ実行し、終わったら自動で取り外す」という宣言です。ここが重要です...
JavaScript JavaScript | DOM 操作：イベント発展 – passive: true
passive: true とは何かpassive: true は、addEventListener のオプションで「このリスナーでは preventDefault を呼ばない」とブラウザに約束する設...
JavaScript JavaScript | DOM 操作：イベント発展 – dispatchEvent
dispatchEvent とは何かdispatchEvent は「イベントを自分で発火させる」ためのメソッドです。DOM 要素や EventTarget に対して、既存のイベント（click など）...
JavaScript JavaScript | DOM 操作：イベント発展 – カスタムイベント
カスタムイベントとは何かカスタムイベントは、あなたが「アプリ内の合図」を自由に作って通知できる仕組みです。DOM の仕組み（addEventListener / dispatchEvent）をそのまま...
JavaScript JavaScript | DOM 操作：イベント発展 – コンテキストメニュー
コンテキストメニューとは何かコンテキストメニューは、右クリック（または長押し）した場所や対象に応じて“その場に適した操作”を提示するための UI です。ブラウザ標準のメニューを表示するイベントは co...
JavaScript JavaScript | DOM 操作：イベント発展 – スクロールイベント
スクロールイベントとは何かスクロールイベントは、ページや特定のスクロール可能な要素のスクロール位置が変わった瞬間に発火する合図です。window（ページ全体）にも、overflow: auto などで...
JavaScript JavaScript | DOM 操作：イベント発展 – フォーカスイベント
フォーカスイベントとは何かフォーカスイベントは「どの要素がキーボード操作の対象になったか／外れたか」を知らせる合図です。代表は focus（入る）、blur（出る）、そしてバブリングする仲間の foc...
JavaScript JavaScript | DOM 操作：イベント発展 – イベント委譲
イベント委譲とは何かイベント委譲は、「たくさんの子要素それぞれにリスナーを付けず、親に1つだけ付けて子の操作に反応する」設計です。イベントがバブル（内側→外側）で伝わる仕組みを利用し、親のリスナー内で...
JavaScript JavaScript | DOM 操作：イベント発展 – イベント伝播（キャプチャ / バブル）
イベント伝播とは何か（キャプチャ／バブルの全体像）イベント伝播は「ある要素で起きたイベントが、DOM ツリーの上下へ段階的に届く仕組み」です。段階は「キャプチャ（外側→内側）→ターゲット（実際の要素）...
JavaScript JavaScript | DOM 操作：イベント発展 – stopPropagation
stopPropagation とは何かstopPropagation は「イベントが親要素へ伝わっていく流れ（伝播）を止める」ためのメソッドです。クリックなどのイベントは、最初に操作された要素から外...
JavaScript JavaScript | DOM 操作：イベント基礎 – preventDefault
preventDefault とは何かpreventDefault は「イベントのデフォルト動作（ブラウザが標準で行う処理）」をキャンセルするためのメソッドです。例えばリンクの遷移、フォームの送信、ス...
JavaScript JavaScript | DOM 操作：イベント基礎 – イベントのデフォルト動作
イベントのデフォルト動作とは何か「イベントのデフォルト動作」は、ブラウザが標準で行う振る舞いのことです。例として、リンクのクリックでページ遷移、フォームの submit で送信、テキスト入力で Ent...
JavaScript JavaScript | DOM 操作：イベント基礎 – submit
submit とは何かsubmit は「フォームが送信される瞬間」に発火するイベントです。Enter キーや type="submit" のボタンで送信しようとしたとき、フォーム要素で受け取れます。こ...
JavaScript JavaScript | DOM 操作：イベント基礎 – input / change
input と change とは何かinput と change は、フォーム要素の値が変わったときに発火するイベントです。input は「値が変わるたびに逐次発火」、change は「確定したタイ...
JavaScript JavaScript | DOM 操作：イベント基礎 – キーボードイベント（keydown / keyup）
キーボードイベントとは何か（keydown / keyup）keydown は「キーが押された瞬間」、keyup は「キーが離された瞬間」に発火するイベントです。ショートカット、ゲームの操作、フォーム...
JavaScript JavaScript | DOM 操作：イベント基礎 – マウスイベント（click / dblclick / mouseover）
マウスイベントの基礎（click / dblclick / mouseover）マウスイベントは「ユーザーの操作」をコードへ橋渡しする合図です。click は単押し、dblclick は素早い二連続ク...
JavaScript JavaScript | DOM 操作：イベント基礎 – target と currentTarget
target と currentTarget とは何かイベントオブジェクトの target は「実際に操作された最も内側の要素」、currentTarget は「そのイベントリスナーが登録されている要...
JavaScript JavaScript | DOM 操作：イベント基礎 – イベントオブジェクト
イベントオブジェクトとは何かイベントオブジェクト（一般に e と書く）は、「何が、どこで、どのように起きたか」の詳細を持つ“出来事の記録”です。addEventListener のコールバックに渡され...
JavaScript JavaScript | DOM 操作：イベント基礎 – removeEventListener
removeEventListener とは何かremoveEventListener は、addEventListener で登録したイベントリスナーを「取り外す」ためのメソッドです。特定の要素（ま...
JavaScript JavaScript | DOM 操作：イベント基礎 – addEventListener
addEventListener とは何かaddEventListener は「イベントが起きたときに実行する処理（リスナー）を登録する」ためのメソッドです。クリック、入力、スクロール、ロードなど、ブ...
JavaScript JavaScript | DOM 操作：ノード操作 – prepend
prepend とは何かprepend は、親ノードの「先頭」にコンテンツを追加するメソッドです。ノード（要素やテキストノード）だけでなく、文字列も直接渡せ、さらに複数の引数を一度に追加できます。ここ...
JavaScript JavaScript | DOM 操作：ノード操作 – append
append とは何かappend は、親ノードの「末尾」にコンテンツを追加するためのメソッドです。ノード（要素やテキストノード）だけでなく、文字列も直接渡せるのが特徴です。ここが重要です：appen...
JavaScript JavaScript | DOM 操作：ノード操作 – remove（直接削除）
remove とは何か（直接削除のイメージ）remove は、要素自身が「自分を親から切り離して画面から消える」ためのメソッドです。document.getElementById("x").remov...
JavaScript JavaScript | DOM 操作：ノード操作 – fragment の利用
DocumentFragment とは何かDocumentFragment（以下フラグメント）は、DOM に一時的に要素を“まとめて保持するための入れ物”です。画面（実DOM）にまだ接続されていないミ...
JavaScript JavaScript | DOM 操作：ノード操作 – cloneNode
cloneNode とは何かcloneNode は、既存の DOM ノード（要素やテキスト）を“複製”するメソッドです。形は node.cloneNode(deep)。ここが重要です：deep が f...
JavaScript JavaScript | DOM 操作：ノード操作 – replaceChild
replaceChild とは何かreplaceChild は「親ノードの子を別のノードに置き換える」メソッドです。形は parent.replaceChild(newChild, oldChild)...
JavaScript JavaScript | DOM 操作：ノード操作 – removeChild
removeChild とは何かremoveChild は「親ノードから指定した子ノードを取り外す」メソッドです。形は parent.removeChild(child)。画面から消えるだけでなく、D...
JavaScript JavaScript | DOM 操作：ノード操作 – insertBefore
insertBefore とは何かinsertBefore は「親ノードの中で、指定した子ノードの“直前”に新しいノードを挿入する」メソッドです。形は parent.insertBefore(newN...
JavaScript JavaScript | DOM 操作：ノード操作 – appendChild
appendChild とは何かappendChild は、親ノードの「末尾」に子ノードを追加するメソッドです。DOM で新しく作った要素（createElement）や既存の要素を、指定した親の最後...
JavaScript JavaScript | DOM 操作：ノード操作 – createElement
createElement とは何かcreateElement は、JavaScript で新しい HTML 要素を“ゼロから”作るためのメソッドです。たとえば div、button、img、li な...
JavaScript JavaScript | DOM 操作：属性操作 – aria-* 属性
aria-* 属性とは何かARIA（Accessible Rich Internet Applications）の aria-* 属性は、UI の「意味・状態・関係」を支援技術（スクリーンリーダーなど...
JavaScript JavaScript | DOM 操作：属性操作 – checked
checked とは何かchecked は「チェックボックスやラジオボタンの“選択状態”」を表します。ここが重要です：HTMLの checked 属性は“初期状態”を示し、JavaScript の e...
JavaScript JavaScript | DOM 操作：属性操作 – input の value
input の value とは何かinput の value には「現在の入力値（プロパティ）」と「初期値（属性）」の2種類があります。JavaScript から扱うときは、今画面に表示されている“...
JavaScript JavaScript | DOM 操作：属性操作 – href・src の変更
href・src とは何かhref と src は、要素が「どこを指すか・何を読み込むか」を示す属性です。href はリンク先（a、link、area）、src はリソースの場所（img、script...
JavaScript JavaScript | DOM 操作：属性操作 – disabled 属性
disabled 属性とは何かdisabled は「フォーム要素を操作不可」にするための“boolean 属性”です。ボタン、入力欄、セレクト、テキストエリア、フィールドセットなどに付けると、フォーカ...
JavaScript JavaScript | DOM 操作：属性操作 – data-* 属性
data-* 属性とは何かdata-* 属性は、HTML 要素に「任意のメタ情報」を文字列として安全に持たせるための仕組みです。例として data-id、data-role、data-payload ...
JavaScript JavaScript | DOM 操作：属性操作 – hasAttribute
hasAttribute とは何かhasAttribute は、要素に指定した「属性が付いているか」を true/false で判定するメソッドです。値が空文字でも、属性が存在していれば true に...
JavaScript JavaScript | DOM 操作：属性操作 – removeAttribute
removeAttribute とは何かremoveAttribute は、要素から指定した「属性」を完全に取り除くメソッドです。title、href、src、aria-、data-、style など...
JavaScript JavaScript | DOM 操作：属性操作 – setAttribute
setAttribute とは何かsetAttribute は、要素の「属性（attr）」に文字列の値を設定するためのメソッドです。href、title、alt、aria-、data- など、HTML...
JavaScript JavaScript | DOM 操作：属性操作 – getAttribute
getAttribute とは何かgetAttribute は、要素に付いている「属性の値」を文字列で取り出すためのメソッドです。返ってくるのは“常に文字列”か“存在しないときは null”。ここが重...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – getComputedStyle
getComputedStyle とは何かgetComputedStyle は、CSS の継承・外部スタイル・メディアクエリ・ユーザー設定などをすべて反映した「最終的な見え方」を取得するための関数です...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – 要素の高さ・幅の取得
要素の高さ・幅の「どれを測るか」同じ「幅・高さ」でも、境界や余白の扱いで数値が変わります。どの API を使うかで意味が違うため、まず“何を含めたいか”を決めましょう。ここが重要です：枠線（borde...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – visibility の切り替え
visibility の切り替えとは何かvisibility は「要素を見える/見えない」にするプロパティです。visibility: hidden にすると見えなくなりますが、レイアウト上の“場所”...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – display の切り替え
display の切り替えとは何か要素の「表示・非表示」を制御する最基本の方法が display の切り替えです。display: none にすると要素は完全に消え、ページのレイアウト計算からも外れ...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – スタイル変更（style）
style とは何かstyle は、要素の「インライン CSS（その要素だけに直接書くスタイル）」を JavaScript から読み書きするためのプロパティです。クラス切り替えより細かく数値や色を直接...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – classList.contains
classList.contains とは何かclassList.contains は、要素に指定した「CSS クラスが付いているか」を真偽値で判定するメソッドです。返り値は true/false の...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – classList.toggle
classList.toggle とは何かclassList.toggle は、要素に指定した「CSS クラス」を付けたり外したりするメソッドです。クラスが付いていなければ追加、付いていれば削除します...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – classList.remove
classList.remove とは何かclassList.remove は、要素から指定した「CSS クラス」を安全に取り除くメソッドです。指定したクラスが付いていなければ何も起こらず、エラーにも...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – classList.add
classList.add とは何かclassList.add は、要素に「CSS クラス」を安全に追加するためのメソッドです。すでに同じクラスが付いていても重複せず、必要なクラス名を1つ以上まとめて...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – className
className とは何かclassName は、要素の class 属性（CSS クラス名の一覧）を「文字列として」読み書きするためのプロパティです。p, div などの要素に対して、クラスをまと...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – 値の安全な出力方法
値の安全な出力方法とは何か「安全な出力」とは、外部データやユーザー入力を画面に表示・属性へ設定する際に、HTMLとして解釈・実行されないように扱うことです。ここが重要です：構造（HTML）は固定し、可...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – テキストと要素の違い
テキストと要素の違いとは何かDOM は「要素ノード」と「テキストノード」でできています。要素ノードはタグ（div、p、span など）そのもので、属性やクラス、イベントを持てます。テキストノードは純粋...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – 属性値の文字列化
属性値の文字列化とは何か「属性値の文字列化」は、DOM の属性に値を入れるとき、数値や真偽値、オブジェクトなど“文字列以外”の値を安全・意図通りの文字列に変換してから設定することです。ここが重要です：...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – 改行・スペースの扱い
改行・スペースの扱いとは何かテキストの改行やスペースは、「どのプロパティで入れるか（textContent/innerText/innerHTML）」と「CSS の white-space 設定」によ...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – insertAdjacentHTML
insertAdjacentHTML とは何かinsertAdjacentHTML は、指定した位置に「HTML文字列をそのままパースして挿入」するためのメソッドです。ターゲット要素の周囲や内側に、細...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – createTextNode
createTextNode とは何かcreateTextNode は、「テキストノード」を新しく作るためのメソッドです。HTML の中身は要素ノード（div、p、span など）とテキストノード（純...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – HTML インジェクションの危険性
HTML インジェクションとは何かHTML インジェクションは、外部から渡された文字列が「HTMLとして解釈・実行されてしまう」問題です。表示したい“文字”のはずがタグとして扱われると、画面の改ざん、...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – innerHTML
innerHTML とは何かinnerHTML は、要素の「中身（子要素やテキスト）」を、HTML文字列として読み書きするためのプロパティです。文字列を代入すると、その場でパースされて要素やテキストに...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – innerText
innerText とは何かinnerText は「画面に見えているテキスト」を読み書きするためのプロパティです。値を読むと、CSS の表示状態を考慮して“今見えている文字列”だけが返ります。値を書き...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – textContent
textContent とは何かtextContent は、要素の「テキストだけ」を安全に読み書きするためのプロパティです。値を設定すると、要素内のテキストノードが置き換わり、HTML タグは「ただの...
JavaScript JavaScript | DOM 操作：要素の取得 – 要素の存在チェック
要素の存在チェックとは何か「要素の存在チェック」は、操作したい要素が本当に DOM にあるかを確認し、なければ安全にスキップしたり代替処理に切り替えたりすることです。ここが重要です：存在を前提に書くと...
JavaScript JavaScript | DOM 操作：要素の取得 – matches
matches とは何かmatches は、ある要素が「指定した CSS セレクタに現在一致しているか」を真偽値で返すメソッドです。ここが重要です：取得した要素に対して直接判定できるため、「このクリッ...
JavaScript JavaScript | DOM 操作：要素の取得 – closest
closest とは何かclosest は、ある要素から「自分自身を含めて、上方向（祖先方向）にセレクタに一致する最初の要素」を返すメソッドです。見つかればその要素、見つからなければ null。ここが...
JavaScript JavaScript | DOM 操作：要素の取得 – 親要素・子要素の取得
親要素・子要素とは何かDOM は木構造で、要素どうしが「親子」の関係を持ちます。ある要素を内側に包む要素が親、内側に含まれている要素が子です。ここが重要です：DOM 操作では「どの範囲（親配下）を対象...
JavaScript JavaScript | DOM 操作：要素の取得 – CSS セレクタの使い分け
CSS セレクタの使い分けとは何かCSS セレクタは、HTML の中から「どの要素を対象にするか」を表す記法で、querySelector / querySelectorAll でもそのまま使えます。...
JavaScript JavaScript | DOM 操作：要素の取得 – querySelectorAll
querySelectorAll とは何かquerySelectorAll は、CSS セレクタを使って「一致するすべての要素」を取得するメソッドです。返り値は NodeList（静的コレクション） ...
JavaScript JavaScript | DOM 操作：要素の取得 – querySelector
querySelector とは何かquerySelector は、CSS セレクタで「最初に一致した1つの要素」を取得するためのメソッドです。返り値は要素か、見つからなければ null。ここが重要で...
JavaScript JavaScript | DOM 操作：要素の取得 – getElementsByTagName
getElementsByTagName とは何かgetElementsByTagName は、指定したタグ名（例: "div", "p", "a"）を持つ要素をまとめて取得するメソッドです。返り値は...
JavaScript JavaScript | DOM 操作：要素の取得 – getElementsByClassName
getElementsByClassName とは何かgetElementsByClassName は、「指定したクラス名を持つ要素をまとめて取得する」ためのメソッドです。返り値は HTMLColle...
JavaScript JavaScript | DOM 操作：要素の取得 – getElementById
getElementById とは何かgetElementById は、document（ページ全体の入口）から「id が一致する要素を1つだけ即座に取得する」ための最短ルートです。見つかれば要素を返...
JavaScript JavaScript | DOM 操作：DOM 基礎 – 静的 NodeList とライブ HTMLCollection の違い
静的 NodeList とライブ HTMLCollection とは何か静的 NodeList とライブ HTMLCollection は、DOM から複数ノードを集めた「コレクション」を表します。違...
JavaScript JavaScript | DOM 操作：DOM 基礎 – DOM API の基本概念
DOM API とは何かDOM API は、ブラウザが作る「HTML の木構造（DOM ツリー）」を JavaScript から読み書きするための関数やプロパティ群です。document を起点にノー...
JavaScript JavaScript | DOM 操作：DOM 基礎 – HTML と JavaScript の紐づけ
HTML と JavaScript の紐づけとは何かHTML は「見た目と構造」、JavaScript は「動きと振る舞い」を担当します。紐づけとは、HTML の要素を JavaScript から選び...
JavaScript JavaScript | DOM 操作：DOM 基礎 – DOM の読み込み順序
DOM の読み込み順序とは何かDOM の読み込み順序は、ブラウザが HTML を上から解析し、DOM ツリーを構築していく過程の時間軸です。重要なのは「ブラウザは文書を一気に読み終えてから作るのではな...
JavaScript JavaScript | DOM 操作：DOM 基礎 – window と document の違い
window と document の違いwindow は「ブラウザタブ（ウィンドウ）そのもの」を表す最上位のオブジェクトです。タイマー、画面サイズ、スクロール、イベント、ストレージ、ネットワークなど...
JavaScript JavaScript | DOM 操作：DOM 基礎 – DOMContentLoaded
DOMContentLoaded とは何かDOMContentLoaded は、「ブラウザが HTML の構文解析を終えて、DOM ツリーの構築が完了した瞬間」に発火するイベントです。ここが重要です：...
JavaScript JavaScript | DOM 操作：DOM 基礎 – 要素ノード / テキストノード
要素ノード / テキストノードとは何か要素ノードは HTML のタグそのもの（div, p, a など）を表し、属性（id, class, style など）や子ノードを持てます。テキストノードは、要...
JavaScript JavaScript | DOM 操作：DOM 基礎 – ドキュメントツリーの構造
ドキュメントツリーとは何かドキュメントツリーは、HTML文書を「ノード（要素・テキスト・コメント）」の入れ子で表した木構造です。最上位の document を根にして、html、head、body と...
JavaScript JavaScript | DOM 操作：DOM 基礎 – ノードとは何か
ノードとは何かDOMの「ノード」は、HTML文書を構成する最小パーツのことです。要素（div、p、aなど）、テキスト（文字列）、コメント、属性など、画面に関係するすべてがノードとして木構造に並びます。...
JavaScript JavaScript | DOM 操作：DOM 基礎 – DOM とは何か
DOM とは何かDOM（Document Object Model）は、ブラウザが「HTML や XML の文書をプログラムから操作できるようにした、木構造のデータモデル」です。ページは「ノード（要素...
JavaScript JavaScript | 基礎構文：オブジェクト － Object.keys / values / entries
Object.keys / Object.values / Object.entries は「オブジェクトを配列に変換する道具」オブジェクトは「名前付きの引き出しがたくさんあるタンス」でした。Obje...
JavaScript JavaScript | 基礎構文：オブジェクト － in 演算子
in 演算子って何者？in 演算子は、「このオブジェクトに、このプロパティ名は“存在しているか？”」を調べるための道具です。ポイントは、「値が何か」ではなく「その名前のプロパティがあるかどうか」だけを...
JavaScript JavaScript | 基礎構文：オブジェクト － Freeze（凍結）
Object.freeze は「オブジェクトを氷漬けにする魔法」Object.freeze は、「このオブジェクト、もう二度と書き換えられないようにしたい」というときに使う機能です。一言でいうと、その...
JavaScript JavaScript | 基礎構文：オブジェクト － スプレッド構文による浅いコピー
スプレッド構文による「浅いコピー」って何者？スプレッド構文 { ...obj } は、「既存のオブジェクトの中身を“広げて”、新しいオブジェクトを作る書き方」 です。そしてここで超重要なのが、このコピ...
JavaScript JavaScript | 基礎構文：オブジェクト － オブジェクトのコピー
オブジェクトのコピーって何者？「オブジェクトのコピー」は、「元のオブジェクトとは独立した“もう一つのオブジェクト”を作ること」 です。ここで一番ハマりやすい落とし穴が、const original =...
JavaScript JavaScript | 基礎構文：オブジェクト － メソッド
メソッドって何者？メソッドは、「オブジェクトにくっついている関数」 です。オブジェクトが「データ（状態）」を持っているとしたら、メソッドはそのデータに対して「できること（振る舞い）」を表します。人で言...
JavaScript JavaScript | 基礎構文：オブジェクト － プロパティアクセス（. と []）
「プロパティアクセス」は“タンスの引き出しを開ける”動作オブジェクトは「名前付きの引き出しがたくさんあるタンス」のようなものです。プロパティアクセスは、その引き出しを「開ける」「中身を入れる」ための書...
JavaScript JavaScript | 基礎構文：オブジェクト － プロパティの削除（delete）
delete は「引き出しごと取り外す」イメージオブジェクトは「名前付きの引き出しがたくさんあるタンス」のようなものです。delete は、その引き出し（プロパティ）を“丸ごと取り外す”ための演算子 ...
JavaScript JavaScript | 基礎構文：オブジェクト － プロパティの追加
「プロパティの追加」は“あとから引き出しを増やす”イメージオブジェクトは「名前付きの引き出しがたくさんあるタンス」のようなものです。プロパティの追加は、「そのタンスにあとから新しい引き出しを増やす」イ...
JavaScript JavaScript | 基礎構文：オブジェクト － オブジェクトリテラル
オブジェクトリテラルって何者？オブジェクトリテラルは、「波カッコ {} を使って、その場で“まとまりのあるデータ”を作る書き方」 です。人間の世界でいうと、「名前・年齢・住所がセットになった“1人の人...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － 変数解決の仕組み（順序）
「変数解決の仕組み」って何を指しているかここでいう「変数解決の仕組み（順序）」は、「ある名前（変数名）を書いたときに、JavaScript が“どの値を使うか”をどう決めているかという話です。同じ名前...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － TDZ（Temporal Dead Zone）
TDZ（Temporal Dead Zone）って何者？TDZ は「変数が“まだ使えない時間帯”のことです。もっと砕くと、let / const で宣言された変数は、「スコープに入った瞬間から宣言行ま...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － this の基礎
this は「今、誰のことを指しているか」を表すキーワードthis は、「このコードを“実行している主体（オブジェクト）”は誰か？」を指す特別なキーワードです。よく「自分自身」と説明されますが、Jav...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － 関数スコープ
関数スコープって何者？関数スコープは、「その関数の中だけで有効な“専用の部屋”」 のことです。関数の中で宣言した変数や関数は、基本的にその関数の外からは見えません。「関数ごとに、自分だけの小さな世界を...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － 変数のシャドーイング
変数のシャドーイングって何者？変数のシャドーイングは、「内側のスコープで同じ名前の変数を宣言して、外側の変数を“影に隠してしまう”こと」 です。“shadow（影）”という名前の通り、外側にある同じ名...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － クロージャの基礎（応用はまだ不要）
クロージャって何者？クロージャは、「外側のスコープの変数を“覚えたまま”生きている関数」 です。もう少しだけ丁寧に言うと、ある関数の中で定義された関数が、その外側の変数にアクセスし続けられる仕組みこれ...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － レキシカルスコープ
レキシカルスコープって何者？レキシカルスコープは、「変数がどこから見えるかは、“コードが書かれている場所”で決まる」というルールのことです。もう少し砕くと、「どの変数が使えるか」は「どこでその関数を“...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － ブロックスコープ
ブロックスコープって何者？ブロックスコープは、「{}（ブロック）の中だけで有効な“ミニスコープ”」 のことです。if、for、while、単なる {} など、波カッコで囲まれた範囲ごとに「その中だけで...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － ローカルスコープ
ローカルスコープって何者？ローカルスコープは、「その中だけで有効な“自分だけの部屋”みたいな領域」 です。グローバルスコープが「家全体」だとしたら、ローカルスコープは「自分の部屋」。部屋の中のもの（変...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － グローバルスコープ
スコープってそもそも何？その中の「グローバルスコープ」とはまず前提として、スコープとは「変数や関数が“どこから見えるか（使えるか）”の範囲 のことです。その中で「グローバルスコープ」は、「プログラム全...
JavaScript JavaScript | 基礎構文：関数 – コールバック関数の基礎
コールバック関数って何者？コールバック関数は、「あとで呼び出してもらうために“渡しておく関数”」 です。ふつうは「関数を“呼び出す”側」と「呼び出される側」がはっきり分かれていますが、コールバックでは...
JavaScript JavaScript | 基礎構文：関数 – 早期 return
早期 return を一言でいうと早期 return（early return）は、「ダメな条件のときは、関数の途中でさっさと抜けてしまう書き方」 です。これを意識して書けるようになると、if が何重...
JavaScript JavaScript | 基礎構文：関数 – 戻り値
戻り値ってそもそも何者？戻り値は、「関数が“仕事を終えたあとに外に渡す結果”」 です。関数は「何かをして終わり」のときもあれば、「計算して、その結果を返してほしい」ときもあります。その「結果」を外に返...
JavaScript JavaScript | 基礎構文：関数 – 可変長引数（…args）
可変長引数って何者？可変長引数（かへんちょうひきすう）は、「引数が何個来るか分からないけど、とりあえず全部受け取りたい」 ときに使う仕組みです。JavaScript では ...args のように、引...
JavaScript JavaScript | 基礎構文：関数 – デフォルト引数
デフォルト引数って何者？デフォルト引数は、「引数が渡されなかったときに使う“あらかじめ決めておく値”」 です。「この引数は省略されることもあるけど、そのときはこの値を使ってね」という“保険”を関数側で...