入門

何を追えばいいのか（ゴールのイメージ）まず、「ES 仕様の更新を追う」と聞くと、毎年の ECMAScript 版（ES2020, ES2021…）その中に入る新機能（Optional chaining, Nullish coalescing...

Intl API とは何か（まずイメージから）Intl（Internationalization）は、「言語や国ごとのルールに合わせて、数値・通貨・日付・文字列などをキレイに表示するための標準 API 集合」 です。例えば同じ「123456...

Reflect とは何か（まずイメージから）Reflect は ES6 で追加された、「オブジェクトに対する基本操作を、“関数の形”でまとめて持っている道具箱」 です。これまでバラバラに存在していたプロパティの取得 / 設定プロパティの削除...

Proxy とは何か（まずイメージから）Proxy は、「あるオブジェクトの前に立って、そのオブジェクトへの操作を横取り・監視・カスタマイズできる“番人”」のような仕組みです。普通はこうです。const user = { name: "Al...

for...of の「見た目」と「中身」は別物だと思ってみるfor...of は、表面上はとてもシンプルです。const arr = [10, 20, 30];for (const value of arr) { console.log(v...

Generator とは何か（まずイメージから）Generator（ジェネレータ）は、「少しずつ値を返しながら、一時停止・再開できる特別な関数」 です。普通の関数は、一気に最後まで実行されて「結果はこれ！」で終わりですが、Generator...

Iterator とは何か（まずイメージから）Iterator（イテレータ）は、「次の値をください」「もう終わりです」を順番に教えてくれる“値の自動販売機”のような仕組み です。自販機にコインを入れると、1 本ずつジュースが出てきて、最後に...

Symbol とは何か（まずイメージから）Symbol は、ES6 で追加された 「絶対にかぶらない“名前札”のような値」 です。string や number と同じ「プリミティブ型」の一種ですが、役割がかなり特殊です。一番大事な性質は「...

Nullish coalescing とは何か（まずイメージから）Nullish coalescing（ヌリッシュ・コアレスシング）は?? という演算子で書く、「値が null または undefined のときだけ、代わりの値を使う」ため...

Optional chaining とは何か（まずイメージから）Optional chaining（オプショナルチェイニング）は?. という記号で書く、「存在しないかもしれないプロパティに安全にアクセスするための仕組み」 です。const ...

まずゴールをはっきりさせる：何を判断したいのかES6 の「新データ構造」と言われると、Map / SetWeakMap / WeakSetが一気に出てきて、「全部使えたほうがいいのかな？」と身構えがちです。でも実務的には、いきなり全部をフル...

まず「GC」とは何か（やさしくイメージから）JavaScript の世界では、「もう使われなくなったデータを、自動で片付けてくれる仕組み」 が動いています。これを GC（Garbage Collection / ガベージコレクション）と呼び...

size プロパティとは何か（まずイメージから）size プロパティは、「そのコレクションの中に、今いくつ要素が入っているか」を教えてくれる数字 です。ES6 の新しいデータ構造では、MapSetに size が用意されています。const...

ES6 の反復処理とは何か（まずイメージから）ES6 以降の「新データ構造」（Map, Set, WeakMap, WeakSet）には、「反復処理しやすいように統一された仕組み」 が用意されています。この「反復処理しやすいもの」を専門用語...

Set で重複排除とは何か（まずイメージから）Set は「同じ値を 2 回入れようとしても、1 回分しか持たないコレクション」でしたね。この「同じ値は 1 つだけ」という性質を利用すると、配列に同じ値が何個も入っていても「かんたんに重複を取...

まずざっくりイメージ：Map と Object は「役割」が違う同じように「キーと値」を扱えるので、最初は「Map でも Object でもできるじゃん。どっち使えばいいの？」と感じると思います。ざっくり分けると、こうです。Object：「...

WeakSet とは何か（まずイメージから）WeakSet は、「オブジェクトだけを入れられる、弱い参照を持つ Set」 です。普通の Set と似ていますが、決定的に違う点がいくつかあります。1つ目に、WeakSet に入れられるのは「オ...

WeakMap とは何か（まずイメージから）WeakMap は、「キーをオブジェクトに限定した、”弱い紐づけ” をするための特別な Map」 です。普通の Map と似ていますが、決定的に違うのはここです。Map：キーに何でも使えるし、キー...

Set とは何か（まずイメージから）Set は、ES6 で追加された「重複を許さない値の集まり（コレクション）」 です。配列：同じ値を何回入れてもいいSet：同じ値は 1 回しか入らないというイメージを持つと分かりやすいです。const s...

Map とは何か（まずイメージから）Map は、ES6 で追加された「キーと値のペアを柔軟に保存できる専用のコレクション」 です。似たものに「オブジェクト {}」がありますが、Map には大きな違いがあります。オブジェクトキーは基本「文字列...

そもそも「バンドラ」とは何か（まずイメージから）バンドラ（bundler）は、「たくさんの JS ファイル（モジュール）を、ブラウザが読みやすい形にまとめてくれる道具」 です。ES6 の import / export を使うと、ファイルを...

モジュール分割設計とは何か（まずイメージから）モジュール分割設計は、「アプリ全体を、意味のある小さな“部品（ファイル）”に分けて、その関係をきれいに整理すること」 です。1ファイル = 1モジュール、として「このファイルは何を担当するのか？...

循環参照とは何か（まずイメージから）モジュールの「循環参照（循環依存）」は、モジュール A がモジュール B を import し、同時にモジュール B もモジュール A を import している状態 です。もっと言うとこうです。A.js...

モジュールスコープとは何か（まずイメージから）モジュールスコープは、「そのモジュール（＝1ファイル）の中だけで有効な“自分専用の世界”」 のことです。ES6 モジュール（import / export を使うファイル）は、それぞれが「自分だ...

動的 import とは何か（まずイメージから）ES6 以降のモジュールの import には、「ファイルの先頭で書く静的な import」と「コードの中で呼び出せる動的 import」の2種類があります。静的 import（いつも見ている...

「import の別名」とは何か（まずイメージから）import の別名 は、「他のファイルから持ってきた名前に、今のファイルで使いやすい別の名前を付け直す」 仕組みです。同じ名前が他でも使われていて衝突しそうなときもっと分かりやすい名前に...

再エクスポートとは何か（まずイメージから）再エクスポート（re-export）は、「他のモジュールから import したものを、そのまま（または名前を変えて）もう一度 export し直すこと」 です。簡単に言うと：A ファイルで何かを定...

default export とは何か（まずイメージから）default export は、「このモジュール（ファイル）の“看板商品”を 1 つだけ外に出す」ための仕組みです。名前付き export：export function add(...

名前付き export とは何か（まずイメージから）名前付き export は、「このファイルから、名前を付けて外に公開するものを選ぶ仕組み」です。// math.jsexport const PI = 3.14;export functi...

モジュールの考え方（まず全体像から）モジュールは、「ファイルごとに役割を分けて、必要なものだけをやり取りする仕組み」です。1ファイル = 1モジュール、と考えておけばOKです。「このファイルから外に出すもの」を export する「他のファ...