JavaScriptにおけるプリミティブ型の基本知識10選

JavaScriptにおけるプリミティブ型の基本 JS
この記事は約13分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●JavaScriptのプリミティブ型とは？

JavaScriptを学び始めたばかりの頃、データ型という言葉に戸惑った経験はありませんか？

特にプリミティブ型とオブジェクト型の違いについては、理解するのに少し時間がかかるかもしれません。

この記事を読み進めていくうちに、プリミティブ型についてスッと理解できるようになるはずです。

プリミティブ型は、JavaScriptの基本的なデータ型で、単一の値を表します。

これらは、JavaScriptの言語仕様で定義されている組み込み型です。

プリミティブ型は、シンプルで軽量なので、効率的にメモリを使用できます。

○プリミティブ型の種類

JavaScriptには、次の6つのプリミティブ型があります。

  1. 数値型（Number）：整数や浮動小数点数を表します。
  2. 文字列型（String）：テキストデータを表します。シングルクォートまたはダブルクォートで囲みます。
  3. 真偽値型（Boolean）：trueまたはfalseの2つの値を取ります。
  4. undefined型：変数が宣言されているが、値が割り当てられていないことを表します。
  5. null型：意図的に値が存在しないことを表します。
  6. シンボル型（Symbol）：ES2015で導入された一意の識別子を表します。

これらのプリミティブ型は、JavaScriptの根幹をなす重要な概念です。

それぞれの型には、固有の特性と役割があります。

○プリミティブ型とオブジェクト型の違い

プリミティブ型とオブジェクト型の主な違いは、その構造と挙動です。

プリミティブ型は単一の値を表すのに対し、オブジェクト型はプロパティとメソッドを持つことができる複合的な値です。

プリミティブ型は、変数に直接値が格納されます。

つまり、プリミティブ型の変数は、実際の値そのものを保持しています。

一方、オブジェクト型の変数は、値への参照（メモリ上の場所）を保持します。

また、プリミティブ型は不変（immutable）です。

つまり、一度作成されたプリミティブ型の値は変更できません。

オブジェクト型は変更可能（mutable）で、プロパティの値を変更したり、新しいプロパティを追加したりできます。

○サンプルコード1：プリミティブ型の宣言と初期化

ここでは、プリミティブ型の変数を宣言し、初期化する例を紹介します。

// 数値型
let age = 25;

// 文字列型
let name = "John";

// 真偽値型
let isStudent = true;

// undefined型
let value;

// null型
let result = null;

このように、プリミティブ型の変数は、型に応じた値を直接格納します。

それぞれの型には、値を表現するための適切なリテラル表記があります。

実行結果

age: 25
name: "John"
isStudent: true
value: undefined
result: null

プリミティブ型は、シンプルで基本的な値を扱うために使用されます。

これらの型を理解することは、JavaScriptを効果的に使用するための第一歩です。

次は、プリミティブ型のデータがどのように扱われるのかについて見ていきましょう。

●プリミティブ型のデータの扱い方

プリミティブ型のデータを扱う際、値渡しと参照渡しの違いを理解することが重要です。

この2つの概念は、JavaScriptだけでなく、他のプログラミング言語でも頻繁に登場します。

値渡しと参照渡しを正しく使い分けることで、意図しない結果を避け、効率的なコードを書くことができます。

○値渡しと参照渡し

値渡しは、変数の値そのものがコピーされて渡される方式です。

プリミティブ型の変数を別の変数に代入したり、関数の引数として渡したりする際は、値渡しが行われます。

つまり、元の変数とは別のメモリ領域に値がコピーされるため、元の変数への影響はありません。

一方、参照渡しは、変数の値そのものではなく、その値が格納されているメモリ上の場所（参照）が渡される方式です。

オブジェクト型のデータは参照渡しで扱われます。

参照渡しでは、元の変数と同じメモリ領域を指し示すため、変更が加えられると元の変数にも影響があります。

○サンプルコード2：値渡しの例

プリミティブ型の変数を別の変数に代入する場合、値渡しが行われます。

let x = 10;
let y = x;

console.log(x); // 10
console.log(y); // 10

y = 20;

console.log(x); // 10
console.log(y); // 20

実行結果

10
10
10
20

この例では、xの値がyに代入されています。yの値を変更しても、xの値は影響を受けません。

これは、xとyが別々のメモリ領域を参照しているためです。

○サンプルコード3：参照渡しの例

オブジェクト型のデータを扱う際は、参照渡しが行われます。

let obj1 = { value: 10 };
let obj2 = obj1;

console.log(obj1.value); // 10
console.log(obj2.value); // 10

obj2.value = 20;

console.log(obj1.value); // 20
console.log(obj2.value); // 20

実行結果

10
10
20
20

この例では、obj1とobj2が同じオブジェクトを参照しています。

obj2のvalueプロパティを変更すると、obj1のvalueプロパティも変更されます。

これは、両方の変数が同じメモリ領域を指し示しているためです。

○不変性について

プリミティブ型のデータは不変（immutable）です。

つまり、一度作成されたプリミティブ型の値は変更できません。

プリミティブ型の変数に新しい値を代入すると、変数は新しいメモリ領域を参照するようになります。

この特性により、プリミティブ型のデータは予期せぬ変更から保護され、コードの安全性が高まります。

値渡しと参照渡しの違いを理解し、データの不変性を意識することで、バグを防ぎ、より堅牢なコードを書くことができます。

JavaScriptのプリミティブ型は、シンプルで予測可能な挙動を提供してくれます。

●プリミティブ型の変換

特に、JavaScriptでは型が動的に決定されるため、型変換のルールを理解することが重要です。

ここでは、プリミティブ型の変換について、明示的な型変換と暗黙的な型変換の2つの方法を見ていきましょう。

○明示的な型変換

明示的な型変換は、開発者が意図的にデータ型を変換する方法です。

JavaScriptには、次のような型変換のための関数やメソッドがあります。

  • Number()：数値型への変換
  • String()：文字列型への変換
  • Boolean()：真偽値型への変換

これらの関数を使うことで、プリミティブ型のデータを目的の型に変換できます。

○サンプルコード4：文字列への変換

文字列型への変換には、String()関数やtoString()メソッドを使用します。

let num = 123;
let bool = true;

console.log(String(num));    // "123"
console.log(String(bool));   // "true"

console.log(num.toString());  // "123"
console.log(bool.toString()); // "true"

実行結果:

"123"
"true"
"123"
"true"

この例では、数値型のnumと真偽値型のboolを文字列型に変換しています。

String()関数とtoString()メソッドのどちらを使っても、同じ結果が得られます。

○サンプルコード5：数値への変換

数値型への変換には、Number()関数や単項プラス演算子（+）を使用します。

let str1 = "123";
let str2 = "45.67";
let bool = false;

console.log(Number(str1));  // 123
console.log(Number(str2));  // 45.67
console.log(Number(bool));  // 0

console.log(+str1);         // 123
console.log(+str2);         // 45.67
console.log(+bool);         // 0

実行結果:

123
45.67
0
123
45.67
0

この例では、文字列型のstr1とstr2、真偽値型のboolを数値型に変換しています。

Number()関数と単項プラス演算子のどちらを使っても、同じ結果が得られます。

真偽値型のfalseは0に、trueは1に変換されます。

○暗黙的な型変換

暗黙的な型変換は、JavaScriptが自動的にデータ型を変換する方法です。これは、演算子や関数の要求する型に合わせて行われます。

例えば、数値型と文字列型を加算する場合、数値型が文字列型に変換されてから連結されます。

暗黙的な型変換は便利な一方で、予期せぬ結果を引き起こすこともあります。

そのため、意図しない型変換が発生していないか注意が必要です。

型変換を理解することは、JavaScriptを効果的に使うための重要なステップです。

明示的な型変換を積極的に使い、暗黙的な型変換に注意を払うことで、バグを防ぎ、コードの可読性を高めることができます。

●プリミティブ型のよくある間違い

プリミティブ型の扱いに関して、よくある間違いをしてしまうことがあります。

特に、等価性の比較や、undefinedとnullの違いについては、初心者が陥りやすい落とし穴だと思います。

ここでは、そんなプリミティブ型のよくある間違いについて、具体的に見ていきましょう。

○==と===の違い

JavaScriptには、等価性を比較するための2つの演算子があります。

それが、等価演算子（==）と厳密等価演算子（===）です。

この2つの演算子の違いを理解することは、バグを防ぐために重要です。

等価演算子（==）は、比較する前に型変換を行います。

つまり、比較する値の型が異なる場合、JavaScriptが自動的に型を変換してから比較します。

一方、厳密等価演算子（===）は、型変換を行わず、値と型の両方が等しい場合にのみtrueを返します。

○サンプルコード6：==による比較

等価演算子（==）を使った比較の例を見てみましょう。

console.log(1 == "1");    // true
console.log(0 == false);  // true
console.log(null == undefined);  // true

実行結果

true
true
true

この例では、数値型の1と文字列型の"1"が等しいと評価されています。

また、数値型の0と真偽値型のfalse、そしてnullとundefinedも等しいと評価されています。

これは、等価演算子が型変換を行った上で比較しているためです。

○サンプルコード7：===による比較

厳密等価演算子（===）を使った比較の例を見てみましょう。

console.log(1 === "1");    // false
console.log(0 === false);  // false
console.log(null === undefined);  // false

実行結果

false
false
false

この例では、サンプルコード6とは異なり、すべての比較がfalseになっています。

厳密等価演算子は型変換を行わないため、値と型が異なる場合はfalseを返します。

一般的に、意図しない型変換を避けるために、厳密等価演算子（===）を使うことが推奨されています。

これにより、コードの予測可能性が高まり、バグを防ぐことができます。

○undefinedとnullの違い

JavaScriptには、値が存在しないことを表す2つの特殊な値があります。それが、undefinedとnullです。

この2つの値は似ていますが、微妙に異なる意味を持っています。

undefinedは、変数が宣言されているが、値が割り当てられていない場合に使われます。

一方、nullは、開発者が意図的に値が存在しないことを表すために使います。

初心者のうちは、undefinedとnullの違いに戸惑うかもしれません。

しかし、コードを書く中で徐々に使い分けができるようになっていくと思います。

重要なのは、undefinedとnullが特殊な値であることを理解し、適切に扱うことです。

プリミティブ型のよくある間違いを知ることで、バグを防ぎ、より堅牢なコードを書けるようになります。

等価性の比較では、意図しない型変換に注意し、基本的に厳密等価演算子（===）を使うようにしましょう。

また、undefinedとnullの違いを意識しながら、適切に使い分けていくことが大切です。

●プリミティブ型を使いこなすコツ

プリミティブ型を効果的に使うためには、適切な型を選択し、各型の特性を理解することが重要です。

ここまで、プリミティブ型の基本的な概念や扱い方について解説してきました。

それでは、実際のコーディングの場面で、プリミティブ型をどのように使いこなせばいいのでしょうか。

○適切な型の選択

プログラミングを始めたばかりの頃は、どの型を使えばいいのか迷うことがあるかもしれません。

しかし、経験を積むにつれ、適切な型を選択できるようになっていきます。

適切な型を選ぶためのポイントは、データの特性や用途を考えることです。

数値を扱う場合は数値型を、テキストデータを扱う場合は文字列型を使います。

真偽値型は、条件分岐や論理演算に使われます。

undefinedとnullは、値が存在しないことを表すために使い分けます。

○サンプルコード8：数値型の使用例

数値型は、数値を扱うための型です。

const price = 9.99;
const quantity = 3;
const total = price * quantity;

console.log(`合計金額は${total}ドルです。`);

実行結果

合計金額は29.97ドルです。

この例では、priceとquantityに数値を格納し、それらを乗算してtotalを計算しています。

数値型を使うことで、数学的な演算を自然に行うことができます。

○サンプルコード9：真偽値型の使用例

真偽値型は、条件分岐や論理演算に使われます。

const age = 20;
const isAdult = age >= 18;

if (isAdult) {
  console.log("あなたは成人です。");
} else {
  console.log("あなたはまだ未成年です。");
}

実行結果

あなたは成人です。

この例では、ageが18以上かどうかを判定し、isAdultに真偽値を格納しています。

isAdultの値に基づいて、if文で条件分岐を行っています。

真偽値型を使うことで、条件に基づいて処理を切り替えることができます。

○サンプルコード10：文字列型の使用例

文字列型は、テキストデータを扱うための型です。

const name = "Alice";
const age = 25;
const message = `私の名前は${name}で、${age}歳です。`;

console.log(message);

実行結果

私の名前はAliceで、25歳です。

この例では、nameとageを文字列と数値で定義し、テンプレートリテラルを使ってmessageを作成しています。

文字列型を使うことで、テキストデータを扱い、他の型と組み合わせて表現力豊かなメッセージを作ることができます。

まとめ

JavaScriptのプリミティブ型は、プログラミングの基礎となる重要な概念です。

数値型、文字列型、真偽値型、undefined型、null型、シンボル型の6つのプリミティブ型があり、それぞれ固有の特性と役割を持っています。

プリミティブ型とオブジェクト型の違いを理解し、値渡しと参照渡しの動作を把握することが大切です。

また、明示的な型変換と暗黙的な型変換についても知っておく必要があります。

等価性の比較では、厳密等価演算子（===）を使うことが推奨されます。

そして、適切な型を選択し、各型の特性を活かしてコードを書くことが、プリミティブ型を使いこなすコツです。

JavaScriptのプリミティブ型について学ぶことで、効率的で読みやすいコードを書けるようになり、バグを防ぐことができます。

プリミティブ型の知識は、JavaScriptを扱う上で欠かせない基礎となるでしょう。