JavaScriptの基礎から学ぶ！データ型の理解と型の変換(Type Coercion)の実践

はじめに

JavaScriptはWeb開発に欠かせない言語であり、データ型について理解することはとても重要です。また、JavaScriptにおいては暗黙的な型の変換が行われることがあるため、この「型の変換(Type Coercion)」についても理解しておく必要があります。本記事では、JavaScriptとTypeScriptのデータ型について解説し、型の変換についても実際の例を交えて解説します。

JavaScriptとTypeScriptのデータ型について

JavaScriptには以下のような主要なデータ型があります。

数値(Number)
文字列(String)
真偽値(Boolean)
オブジェクト(Object)
undefined
null

TypeScriptは、JavaScriptに型付けを追加した言語です。JavaScriptと同様のデータ型に加えて、TypeScriptには以下のような型があります。

列挙型(Enum)
配列(Array)
タプル(Tuple)
any
void
never
undefined
null

データ型とは何か？

データ型とは、データの種類を表すものです。JavaScriptでは、変数に代入された値に応じて自動的にデータ型が決定されます。例えば、以下のようなコードでは、変数aには数値が、変数bには文字列が代入されます。

let a = 123;
let b = 'hello';

JavaScriptの主要なデータ型

数値(Number)

数値は、整数や小数を表すことができます。

let a = 123;
let b = 1.23;

文字列(String)

文字列は、文字の集合を表すことができます。

let a = 'hello';
let b = "world";

真偽値(Boolean)

真偽値は、trueまたはfalseを表すことができます。

let a = true;
let b = false;

オブジェクト(Object)

オブジェクトは、複数のプロパティを持つことができるデータ型です。

let obj = {
  name: 'Alice',
  age: 20
};

undefined

undefinedは、値が未定義であることを表します。

let a;
console.log(a); // undefined

null

nullは、値が存在しないことを表します。

let a = null;

型の変換(Type Coercion)とは何か？

型の変換とは、あるデータ型から別のデータ型に変換することです。JavaScriptでは、暗黙的な型の変換が行われることがあります。例えば、以下のようなコードでは、数値の1が文字列の”1″に変換されてから結合されます。

let a = 1;
let b = '2';
console.log(a + b); // "12"

JavaScriptにおける型の変換の例

JavaScriptにおいては、以下のような型の変換が行われます。

数値 → 文字列
文字列 → 数値
真偽値 → 数値
真偽値 → 文字列
null → 数値
null → 文字列
undefined → 数値
undefined → 文字列

以下に、それぞれの例を示します。

数値 → 文字列

let a = 123;
let b = String(a);
console.log(typeof b); // "string"

文字列 → 数値

let a = '123';
let b = Number(a);
console.log(typeof b); // "number"

真偽値 → 数値

let a = true;
let b = Number(a);
console.log(b); // 1

真偽値 → 文字列

let a = false;
let b = String(a);
console.log(b); // "false"

null → 数値

let a = null;
let b = Number(a);
console.log(b); // 0

null → 文字列

let a = null;
let b = String(a);
console.log(b); // "null"

undefined → 数値

let a;
let b = Number(a);
console.log(b); // NaN

undefined → 文字列

let a;
let b = String(a);
console.log(b); // "undefined"

型の変換の注意点とよくあるミス

型の変換には、以下のような注意点があります。

変換元の値がnullまたはundefinedの場合、変換後の値は必ずしも期待通りでないことがある。
文字列 → 数値の変換では、文字列が数値に変換できない場合にNaNが返される。
数値 → 文字列の変換では、数値が指数表記になる場合がある。
真偽値 → 数値の変換では、trueは1、falseは0に変換される。
真偽値 → 文字列の変換では、trueは”true”、falseは”false”に変換される。

また、以下のようなよくあるミスがあります。

let a = '1';
let b = '2';
console.log(a + b); // "12"
console.log(a - b); // -1

上記の例では、文字列の結合と数値の引き算が混在しています。このような場合、JavaScriptにおいては暗黙的な型の変換が行われ、文字列の”1″と”2″が数値に変換されて引き算が行われます。そのため、結果は-1となります。このような混在を避けるためには、明示的に型の変換を行うことが必要です。

まとめ

JavaScriptとTypeScriptのデータ型について解説し、型の変換についても実際の例を交えて解説しました。JavaScriptにおいては暗黙的な型の変換が行われることがあるため、注意が必要です。また、混在した計算を行う場合には明示的な型の変換が必要です。データ型と型の変換について理解し、正しく使いこなすことで、より高度なWebアプリケーションを開発することができるようになります。