![JavaScriptの基礎から学ぶ!データ型の理解と型の変換(Type Coercion)の実践](https://machine-learning-skill-up.com/JavaScript-TypeScript/wp-content/uploads/2023/11/1.jpg)
はじめに
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アプリケーションを開発することができるようになります。