JavaScript

スポンサーリンク
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)) ですが、時間とメモ...
スポンサーリンク