先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptでプリミティブ型と参照型ってよく聞くんですが、何が違うんですか？」

先生

「いい質問ですね。プリミティブ型は数字や文字などのシンプルな値で、参照型はオブジェクトや配列のように複雑なデータを扱うものなんです。」

生徒

「シンプルな値と複雑な値の違いがよくわからないです。もう少し詳しく教えてもらえますか？」

先生

「もちろんです。わかりやすく例えながら説明しますね！」

1. プリミティブ型とは？

プリミティブ型は、数字（Number）、文字列（String）、真偽値（Boolean）、null、undefined、Symbol、そしてBigIntなどの、単純なデータのことです。これらは「値そのもの」を直接扱います。

例えば、let a = 10; とすると、aには「10」という数値のデータがそのまま入っています。

プリミティブ型の特徴は、値が直接変数に保存されるため、コピーや比較が単純で速いことです。

2. 参照型とは？

参照型は、オブジェクト（Object）、配列（Array）、関数（Function）などの複雑なデータを扱います。プリミティブ型と違い、変数には「データの場所（住所）」が保存されます。

たとえば、let obj = { name: "太郎" }; の場合、objには「このデータが置いてある場所」を覚えています。その場所を通じてデータにアクセスします。

参照型の特徴は、同じ場所を指している変数同士でデータが共有されることです。つまり、一方を変えるともう一方にも影響があります。

3. プリミティブ型と参照型の違いを具体例で比較

簡単な数字とオブジェクトで比べてみましょう。


let x = 10;
let y = x; // xの値をコピー
y = 20;
console.log(x); // 10（xは変わらない）

let obj1 = { name: "花子" };
let obj2 = obj1; // obj1の場所をコピー（同じ場所を指す）
obj2.name = "花子改";
console.log(obj1.name); // 花子改（obj1も変わる）

このように、プリミティブ型は値がコピーされるので独立していますが、参照型は場所がコピーされているため同じデータを共有しています。

4. なぜプリミティブ型と参照型の違いを理解するのか？

この違いを知らないと、データを書き換えたつもりが別の変数にも影響してしまったり、バグの原因になることがあります。特にオブジェクトや配列を扱うときは注意が必要です。

理解しておくと、コードの動きを正しく予想でき、効率よくプログラムを書くことができます。

5. プリミティブ型の主な種類

Number：整数や小数の数値
String：文字や文章
Boolean：true または false
null：値が「存在しない」ことを示す
undefined：値が「未定義」な状態
Symbol：一意の識別子を作るための特殊な値
BigInt：非常に大きな整数を扱うための型

6. 参照型の主な種類

Object：名前付きのデータの集まり
Array：順番付きのデータの集まり
Function：処理のまとまり（関数）

これらはすべて参照型で、変数にはデータの場所（参照）が保存されます。

7. 参照型のデータをコピーしたいときは？

参照型の変数を別の変数に代入すると、同じ場所を指すだけなのでデータは共有されます。完全に独立したコピーを作りたい場合は、「コピーの方法」を使う必要があります。

例えば、オブジェクトの浅いコピーは Object.assign() やスプレッド構文でできます。


let original = { a: 1, b: 2 };
let copy = Object.assign({}, original);
copy.a = 100;
console.log(original.a); // 1（影響なし）

ただし、オブジェクトの中にオブジェクトがある場合は、浅いコピーだと内部のオブジェクトは共有されるので注意が必要です。

8. まとめずに覚えておきたいポイント

プリミティブ型は「値そのもの」を扱う単純なデータ。
参照型は「データの場所」を扱う複雑なデータ。
プリミティブ型の変数同士の代入は値のコピーで独立。
参照型の変数同士の代入は場所のコピーで共有。
参照型のコピーは浅いコピーと深いコピーがあり、使い分けが重要。

JavaScriptのプリミティブ型と参照型の違いを初心者向けに解説