JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

クラス設計の考え方とは何かクラス設計は、「コードをどう書くか」より先に、「このクラスは何者で、何ができて、どこまで面倒を見るのか」を決める作業です。JavaScript の class は、単に「便利...

getter / setter とは何か（まずイメージから）getter / setter は、「プロパティに見える“入り口・出口”の裏に、処理を仕込むための仕組み」 です。普通のプロパティはこうです...

プライベートフィールド（#）とは何かプライベートフィールドは、class の中で「クラスの外から絶対に直接触られたくない値」を隠すための仕組みです。書き方は、名前の前に # をつけます。class U...

静的メソッドとは何か（まずイメージから）静的メソッド（static メソッド）は、「インスタンスではなく“クラスそのもの”に属するメソッド」 です。普通のメソッドはこう呼びます。const user ...

super とは何か（まずイメージから）super は、クラスの継承で使う「親クラスへの入り口」です。具体的には次の2つの役割があります。親クラスの constructor を呼ぶ親クラスのメソッドを...

継承（extends）とは何か（まずイメージから）継承（extends）は、「あるクラスをベースにして、それを少しだけ“追加・変更”したクラスを作る仕組み」 です。「動物」という共通部分を持つクラスが...

クラスの「メソッド定義」とは何かクラスのメソッドは、「そのクラスから作ったインスタンスができる“動き（振る舞い）”を表す関数」です。class の中に書く関数が、インスタンスから user.greet...

「インスタンス生成」とは何か（まずイメージを掴む）クラスは「設計図」、インスタンスは「その設計図から作られた実物」です。class User { ... } は「ユーザーとはこういう性質・機能を持つ」...

constructor とは何か（まずはイメージから）constructor は、class から new したときに「最初に一回だけ」呼ばれる特別なメソッドです。役割はシンプルで、インスタンスが生ま...

class 構文とは何か（まずイメージを掴む）class 構文は、「同じような性質と振る舞いをもつオブジェクトを量産するための設計図を書くための文法」です。「ユーザー」「商品」「敵キャラ」みたいな“種...

オブジェクト操作設計とは何か「オブジェクト操作設計」というのは、単に user.name = "Alice" といった「その場しのぎの代入」を書くのではなく、どんな形のオブジェクトにするか（構造・型）...