JavaScript

スポンサーリンク
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 | 配列・オブジェクト:オブジェクト操作 – デフォルト値の設定

デフォルト値の設定とは何かデフォルト値は「値が未指定(または欠損)のときに使う“代替値”」です。ここが重要です:何を“未指定”とみなすかで手段が変わります。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 | 配列・オブジェクト:オブジェクト基礎 – 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 を返します。ここが重...
スポンサーリンク