【JavaScript】データ型の基本と動的型付けの仕組みを１分で

JavaScriptを学ぶ上で最初に理解するべき重要なテーマの１つが「データ型」です。

データ型とは、変数や値が持つことができる「種類」を指します。数値、文字列、ブーリアン（true/false）といった基本的なデータ型から、より複雑なオブジェクトや関数に至るまで、JavaScriptでは多様なデータ型を扱うことができます。

このページでは、JavaScriptの基本的なデータ型とそれぞれの型がどのように使われるのか、また型変換および動的型付けという概念ついても触れていきます。JavaScriptのデータ型を理解することは、より効率的にコードを書き、エラーを減らすための第一歩。この記事を通して、JavaScriptの基礎を固めておきましょう！

データ型	説明
数値 (Number)	整数や浮動小数点数など、数学的な数値を表す。
文字列 (String)	テキスト。シングルクォート、ダブルクォート、バックティックで囲む。
真偽値 (Boolean)	`true` または `false` のいずれか。条件判断で用いられる。
未定義 (undefined)	値が割り当てられていない変数の状態。
空の値 (null)	「何もない」状態を意図的に表すために使用。
シンボル (Symbol)	ES6で導入された、一意で不変の値を作成するためのデータ型。

表1：JavaScriptにおける基本のデータ型

上記のデータ型の制限と取り扱いを１個１個丁寧に解説します。まずは、JavaScriptの特徴の１つ「動的型付け」の概念から解説を始めます。

参考　HTML CSS JavaScriptの違い・役割を３分で解説

JavaScriptの「動的型付け」
1. 動的型付けのメリット
2. 動的型付けのデメリット
JavaScriptのデータ型

JavaScriptの「動的型付け」

JavaScriptは動的型付け言語に分類されます。動的型付けとはその名の通りプログラムの実行過程で「自動的にデータ型が設定される」ということ。

JavaScriptエンジンは、コードの実行時に変数の型を推測して決定します。例えば、数値を代入するとその変数は自動的に数値型に。後にその変数に文字列を代入すれば、型は文字列型に変わります。動的型付けを行わないプログラミング言語では変数の宣言時に必ずデータ型を指定する必要がありますが、JavaScriptではこのデータ型の宣言が必須ではありません。

これは数値を入れる変数（＝箱だよ）！というのが一般的だったりするのですが、JavaScriptでは「あいうえお」が入っているということは文字列（string）だな！というように判断するということです。

参考　let（変数の宣言）

この特性はJavaScriptの柔軟性の１つで、開発者がより速くコードを書けるようにする一方で、型関連のエラーを引き起こしやすくしてします。本当は「10」という値を文字列として扱いたいのに自動的に数値として定義してしまい後からバグになってしまう・・・というような感じですね。

ちなみに、JavaScriptのこの性質を回避し「自分で明示的にデータ型を指定する」ように発展させた言語にTypeScriptというものがあります。ある意味で１つの言語を作り出してしまうほど、動的型付けは便利でやっかいな性質を持つということ。

「動的型付け」の理解はそれだけ重要なんだな！と理解しましょう！

早速JavaScriptの動的型付けを理解するために、いくつかのサンプルコードを通じて実例をお見せします。↓の例を確認しながら、JavaScriptがどのように変数の型を実行時に決定するか？に注目してください。

サンプルコード　変数に異なる型の値を代入

let data = 42; // 最初は数値型
console.log(typeof data); // 出力: "number"

data = "JavaScript"; // 同じ変数に文字列を代入
console.log(typeof data); // 出力: "string"

↑の例では、data 変数が最初に数値型(number)であることを typeof 演算子で確認しています。その後、同じ変数に文字列を代入しており、typeof で確認すると、変数の型が動的に文字列型(string)に変更されていることがわかります。

つまり、42 は数値なのでJavaScriptではその変数を「数値型」として扱っていたが、後から「"JavaScript"」が代入されたので今度は「文字列型」として扱うようになったということ。

このように、JavaScriptでは自動的に変数のデータ型を決定・変換します。

typeof演算子の使い方

typeof演算子は変数や値の型を調べるために使用されます。プログラムが期待するデータ型と実際のデータ型を確認する際に非常に便利で、数値、文字列、オブジェクトなど、JavaScriptのさまざまなデータ型を調べることができます。

基本的な使い方は以下の通り。

let example = "こんにちは";
console.log(typeof example); // 出力: "string"

サンプルコード　動的型付けによる演算

let result = 5 + 7; // 数値同士の加算
console.log(result); // 出力: 12

result = "5" + 7; // 文字列と数値の加算（連結）
console.log(result); // 出力: "57"

result = "5" * "2"; // 文字列の乗算（数値に変換されて計算）
console.log(result); // 出力: 10

↑の例では、JavaScriptがどのように異なる型の値を扱うかを示しています。注目すべきポイントは、文字列と数値を+演算子で結合すると、数値が文字列に変換され結果として文字列が返される点です。また、*演算子を使用した場合、文字列が数値に暗黙的に変換され、計算が実行される点に注目しましょう。

動的型付けのメリット

動的型付けのメリットは、データ型を強く意識することなくコーディングが可能になるという点です。「そもそもデータ型って何？」というのをそこまで理解していなくても感覚的にコーディングすることが可能になることが１番のメリットだと言えます。

柔軟性: 変数に異なる型のデータを自由に代入できるため、開発が迅速に行えます。
簡潔さ: 型宣言が不要なため、コードが簡潔になります。

動的型付けのデメリット

逆に動的型付けのデメリットは、自動的にデータ型が決定される故に「意図しないデータ型変換が行われてしまう」という点。本当は「001」という値を文字列として扱いたかったが、数値型に変換され「1」として演算されてしまうようなバグが発生するイメージです。

型安全性の欠如: コンパイル時ではなく、実行時に型エラーが発生する可能性があるため、バグを見つけにくくなる場合があります。
パフォーマンス: 型チェックが実行時に行われるため、パフォーマンスに影響を与えることがあります。

JavaScriptの動的型付けは変数がプログラム実行中にさまざまな型のデータを保持できる柔軟性を提供します。しかしこの柔軟性は型関連のバグを引き起こす可能性もあるため、開発者は型変換の仕組みと、それに伴う挙動を正確に理解しておく必要があります。上記のサンプルコードを参考に、動的型付けの概念を探索し、JavaScriptでの効率的なコーディングに活かしてください。

JavaScriptのデータ型

JavaScriptでは基本となるデータ型が6つあります。この６つのデータ型をしっかり理解し適切に使い分けることでJavaScriptのコーディングスキルが徐々に向上していくことでしょう。

データ型	説明
数値 (Number)	整数や浮動小数点数など、数学的な数値を表します。
文字列 (String)	テキストデータを表し、シングルクォート、ダブルクォート、バックティックで囲みます。
真偽値 (Boolean)	`true` または `false` のいずれかを持ち、条件判断に使われます。
未定義 (undefined)	値が割り当てられていない変数の状態を表します。
空の値 (null)	「何もない」状態を意図的に表すために使用します。
シンボル (Symbol)	ES6で導入された、一意で不変の値を作成するためのデータ型です。

表1：JavaScriptにおける基本のデータ型

１つ１つサンプルコード付きでわかりやすく解説していきます。

数値 (Number)

JavaScriptにおける数値(Number)型は、整数や浮動小数点数を含む幅広い数値を扱うことができるデータ型です。数値型は演算、金額の計算、測定値の処理など、多岐にわたる用途で使用されます。JavaScriptの数値は内部的には64ビットの浮動小数点形式で表現され、非常に大きな数値や非常に小さな数値の精密な表現が可能です。ここでは、数値型の特徴と使用方法について詳しく見ていきましょう。

let decimal = 42; // 10進数の整数
let hex = 0x2A; // 16進数の整数（42と等価）
let octal = 0o52; // 8進数の整数（42と等価）
let binary = 0b101010; // 2進数の整数（42と等価）
let floatingPoint = 3.14; // 浮動小数点数
let bigNumber = 2.99792458e8; // 光速（m/s）を指数表記で

console.log(decimal, hex, octal, binary, floatingPoint, bigNumber);

// 特別な数値の例
console.log(1 / 0); // Infinity
console.log(-1 / 0); // -Infinity
console.log("not a number" / 2); // NaN

ポイント　数値の表現

整数
- 10進数、16進数（0xで始まる）、8進数（0oで始まる）、2進数（0bで始まる）のリテラルを使用して表現可能。
浮動小数点数
- 小数点を含む数値や、指数表記（eまたはEを使用）で表される数値。

ポイント　特別な数値

Infinity
- 無限大を表す特別な値で、何かを0で割ったときなどに発生する。
-Infinity
- 負の無限大を表す。
NaN (Not a Number)
- 「数値ではない」という特別な値で、数学的に無効な操作の結果として返される。

JavaScriptの数値型は、その柔軟性と包括性により、さまざまな数値計算を可能にしますが、特別な数値や精度の問題に注意が必要です。

文字列：String

文字列(String)型は、テキストデータを扱うためのデータ型です。文字列型は、文字の列（例: "こんにちは"、"Hello, world!"）を表現し、Webページ上のテキスト表示、ユーザー入力の処理、テキストベースのデータの操作など、多くの場面で使われます。文字列は、シングルクォート(')、ダブルクォート(")、またはバックティック(``)で囲むことによって作成されます。

シングルクォートとダブルクォートは、基本的に同じように文字列を定義しますが、テキスト内でクォートを使用したい場合は、異なる種類のクォートを外側と内側で使い分けることが一般的です。

let singleQuoted = 'テキスト';
let doubleQuoted = "テキスト";
let withQuotes = 'シングルクォート\' とダブルクォート"';
console.log(singleQuoted, doubleQuoted, withQuotes);

ダブルクォーテーションでも、シングルクォーテーションでも意味は全く同じです。ただし、両者を併用することはできません。

let strNG = "Hello World!!';　//"と`は併用できません。

文字列の操作

JavaScriptのStringオブジェクトには、文字列を操作するための多くのメソッドが用意されています→テキストの検索、置換、分割、結合などが容易に行えます。

検索
- indexOf(), includes() などを使用して、特定の文字列が含まれているかを検索。

let sentence = "Hello, JavaScript!";
let searchWord = "Java";

// 文字列が含まれるか確認
console.log(sentence.includes(searchWord)); // 出力: true

// 特定の文字列が最初に現れる位置を検索
console.log(sentence.indexOf("Java")); // 出力: 7
console.log(sentence.indexOf("python")); // 存在しない場合は-1を返す 出力: -1

置換
- replace() を使用して、文字列内の一部を置き換える。

let oldString = "Hello, JavaScript!";
let newString = oldString.replace("JavaScript", "World");

console.log(newString); // 出力: "Hello, World!"

分割
- split() を使用して、文字列を配列に分割する。

let fruits = "apple,orange,banana,grape";
let fruitArray = fruits.split(",");

console.log(fruitArray); // 出力: ["apple", "orange", "banana", "grape"]

結合
- + 演算子や concat() メソッドを使用して、複数の文字列を結合。

let firstName = "Taro";
let lastName = "Yamada";
let fullName = firstName + " " + lastName; // + 演算子による結合

console.log(fullName); // 出力: "Taro Yamada"

// `concat` メソッドによる結合
let greeting = "Hello, ";
console.log(greeting.concat(fullName)); // 出力: "Hello, Taro Yamada"

切り出し
- substring(), slice() などを使用して、文字列の一部を切り出す。

let sentence = "Hello, JavaScript!";
// `substring` を使用した切り出し
console.log(sentence.substring(7, 11)); // 出力: "Java"

// `slice` を使用した切り出し
console.log(sentence.slice(7, -1)); // "JavaScript" の最後の"!"を除いて全てを取得

文字列の不変性

JavaScriptの文字列は不変（immutable）です。つまり、文字列が一度作成されると、その文字列を直接変更することはできません。文字列を変更するには、新しい文字列を作成する操作が必要です。

let original = "Hello";
let modified = original.replace("H", "J");
console.log(original); // "Hello"
console.log(modified); // "Jello"

論理型：Boolean

論理型（Boolean型）は、真偽値を扱うデータ型であり、true（真）またはfalse（偽）のいずれかの値を取ります。この型は、条件分岐やループの制御、論理演算など、プログラムの流れを決定する際に重要な役割を果たします。

Boolean型の値は、直接trueまたはfalseを使用するか、Boolean()関数を用いて他のデータ型の値をBoolean型に変換することで作成できます。

let isTrue = true;
let isFalse = false;

// Boolean()関数を使った変換例
let truthyValue = Boolean(1); // 数値の1はtrueに変換される
let falsyValue = Boolean(0); // 数値の0はfalseに変換される

console.log(isTrue); // 出力: true
console.log(isFalse); // 出力: false
console.log(truthyValue); // 出力: true
console.log(falsyValue); // 出力: false

真偽値を返す表現

JavaScriptでは、特定の演算子や関数式が評価された結果として真偽値が返される場合があります。例えば、比較演算子や論理演算子の結果は真偽値になります。

let result = 10 > 5; // 比較演算子の結果は真偽値
console.log(result); // 出力: true

let isEven = 4 % 2 === 0; // 4は偶数か？
console.log(isEven); // 出力: true

let hasValue = !!'文字列'; // 真偽値に強制変換
console.log(hasValue); // 出力: true

null

nullは特別な値の１つで、「何もない」「空」または「存在しない値」を意味します。nullは意図的に変数に「値がない」ことを示すために使われることが多く、オブジェクトやデータが期待されるが、何らかの理由で利用不可能または未定義の場合に利用されます。nullは後述するundefinedと密接に関連していますが、両者の間には重要な違いがあります。

ポイント　nullの特徴と使用例

明示的な「何もない」の表現
- プログラマが変数に意図的に「値がない」状態を設定するために使用する。
オブジェクトのプレースホルダー
- オブジェクトを参照する予定の変数が一時的にオブジェクトを持たない場合にnullを割り当てることがあります。

let book = null; // まだ本の情報がない、または本の情報をリセットしたい場合
console.log(book); // 出力: null

`null`の型

JavaScriptにおけるnullの型に関しては少し特異な振る舞いを見せます。→typeof演算子を使用すると、nullの型はobjectとして返されます。これは、JavaScriptの初期設計の名残であり、nullが実際にはプリミティブ型であるにも関わらず生じる挙動です。

console.log(typeof null); // 出力: object

この振る舞いはJavaScriptの混乱の原因となることがありますが、nullが特別な値であることを理解しておけば、適切に扱うことができます。nullは、変数に「値がまだ設定されていない」または「オブジェクトが存在しない」ことを明示的に示すために重要な役割を果たします。

undefined

undefinedは、変数が宣言されたが、まだ値が割り当てられていないときのデフォルトの値です。nullと同様に、undefinedもJavaScriptの基本的なデータ型の一つであり、特別な意味を持ちます。

let notAssigned;
console.log(notAssigned); // 出力: undefined

function doNothing() {}
console.log(doNothing()); // 出力: undefined

let emptyObject = {};
console.log(emptyObject.noSuchProperty); // 出力: undefined

ポイント　undefinedの特徴

変数のデフォルト値
- 新しく宣言された変数は、自動的にundefinedという値を持つ。
関数の返り値
- 何も値を返さない関数からの返り値は、undefinedになる。
未定義のプロパティ
- オブジェクトから存在しないプロパティを読み取ろうとすると、undefinedが返される。

JavaScriptでは、undefinedは変数が初期化されていないことを示すために使われますが、これを直接チェックすることはあまり推奨されません。変数が「定義されていない」かどうかを確認するには、typeof演算子を使用するか、より一般的には変数がnullまたはundefinedでないことを確認する方法があります。

undefinedの明示的な使用は稀であり、ほとんどの場合はJavaScriptエンジンによって内部的に扱われます。しかし、変数が初期化されていない場合の挙動を理解し、適切に扱うことは、エラーを防ぐ上で重要です。

Symbol

JavaScriptのSymbolは、ES6（ECMAScript 2015）で導入された新しいデータ型です。シンボルは、一意で不変の値を生成することができ、主にオブジェクトのプロパティキーとして使用されます。シンボルによって作成される値は、他のどんなシンボルとも重複しないため、名前の衝突を避けることができる特性を持っています。

let symbol1 = Symbol("description");
let symbol2 = Symbol("description");

console.log(symbol1 === symbol2); // 出力: false

↑のコードでは、symbol1とsymbol2は同じ説明文字列を持っていますが、それぞれが一意のシンボルであるため、等価比較はfalseを返します。

まとめ　JavaScriptにおけるデータ型の基本

動的型付け
- JavaScriptは動的型付け言語→変数の型が実行時に決定される。
- 型変換は暗黙的に行われることが多く柔軟性と便利だが、型関連のバグに注意が必要。
基本的なデータ型
- 数値 (Number): 整数や浮動小数点数を含む数学的な数値
- 文字列 (String): テキストデータを扱うためのデータ型で、シングルクォート、ダブルクォートで囲む。
- 論理型 (Boolean): 真偽値（trueまたはfalse）を表し、条件分岐やループ制御に使用される。
- 未定義 (undefined): 値が割り当てられていない変数の状態を示す。
- 空の値 (null): 「何もない」状態を意図的に設定するために使用する。
- シンボル (Symbol): ES6で導入された、一意で不変の値を作成するためのデータ型です。

// 数値 (Number)
let number = 42;
console.log(number); // 42

// 文字列 (String)
let string = "Hello, JavaScript!";
console.log(string); // Hello, JavaScript!

// 文字列の結合
let name = "John";
let greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, John!

// 論理型 (Boolean)
let isTrue = true;
let isFalse = false;
console.log(isTrue, isFalse); // true false

// 論理演算
let andOperation = true && false;
let orOperation = true || false;
console.log(andOperation, orOperation); // false true

// 未定義 (undefined)
let undefinedVariable;
console.log(undefinedVariable); // undefined

// 空の値 (null)
let nullVariable = null;
console.log(nullVariable); // null

// シンボル (Symbol)
let symbol1 = Symbol("unique");
let symbol2 = Symbol("unique");
console.log(symbol1 === symbol2); // false

// 特別な数値
let infinity = 1 / 0;
let notANumber = "text" / 2;
console.log(infinity, notANumber); // Infinity, NaN

// 文字列の操作
let sentence = "JavaScript is fun!";
console.log(sentence.includes("fun")); // true
console.log(sentence.split(" ")); // ["JavaScript", "is", "fun!"]
console.log(sentence.replace("fun", "awesome")); // JavaScript is awesome!

// オブジェクトのプロパティとしてのシンボル
let id = Symbol("id");
let person = {
    name: "John",
    [id]: 123
};
console.log(person[id]); // 123