JavaScriptで変数の型を確認！解説とサンプルコード10選

はじめに

この記事を読めば、JavaScriptで変数の型を確認する方法ができるようになります。

初心者の方でもわかりやすいように解説していますので、ぜひ最後までお読みください。

●JavaScript変数とは

JavaScriptでは、データを保持するために変数を使用します。

変数はデータを一時的に格納する場所で、プログラムの実行中に値を変更できます。

○変数の宣言

JavaScriptで変数を宣言するには、letやconstを使います。

letは再代入可能な変数を宣言し、constは再代入不可能な定数を宣言します。

let age = 20; // 再代入可能な変数
const name = "Taro"; // 再代入不可能な定数

●JavaScriptのデータ型

JavaScriptにはいくつかの基本データ型が存在します。

主なデータ型は下記の通りです。

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

これらのデータ型を理解しておくことで、変数の型確認がスムーズに行えます。

●変数の型確認方法

JavaScriptで変数の型を確認する方法は主に2つあります。

○typeof演算子

typeof演算子は、変数のデータ型を文字列で返します。

基本的な使い方は下記の通りです。

let num = 10;
console.log(typeof num); // "number"

○instanceof演算子

instanceof演算子は、変数が特定のオブジェクトのインスタンスであるかを真偽値で返します。

基本的な使い方は下記の通りです。

let arr = [1, 2, 3];
console.log(arr instanceof Array); // true

●サンプルコード10選

ここでは、変数の型確認に関するサンプルコードを10個紹介し、詳細な説明と日本語のコメントを追加します。

○サンプルコード1：typeof演算子を使った型確認

// 変数を定義
let num = 42;
let str = "Hello, World!";
let bool = true;

// typeof演算子を使用してデータ型を確認
console.log(typeof num); // "number"
console.log(typeof str); // "string"
console.log(typeof bool); // "boolean"

ここでは、数値、文字列、真偽値の3つのデータ型を定義し、それぞれの型をtypeof演算子で確認しています。

○サンプルコード2：instanceof演算子を使った型確認

// クラスの定義
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

// インスタンスの生成
let taro = new Person("Taro", 20);

// instanceof演算子を使用してデータ型を確認
console.log(taro instanceof Person); // true

ここでは、Personクラスを定義し、そのインスタンスであるtaroを生成しています。

そして、instanceof演算子を使用してtaroがPersonクラスのインスタンスであることを確認しています。

○サンプルコード3：配列の型確認

ここでは、関数を定義し、typeof演算子を使用して関数であるかどうかを確認しています。

// 配列の定義
let arr = [1, 2, 3];

// Array.isArray()メソッドを使用して配列であるか確認
console.log(Array.isArray(arr)); // true

ここでは、配列を定義し、Array.isArray()メソッドを使用して配列であるかどうかを確認しています。

○サンプルコード4：関数の型確認

// 関数の定義
function exampleFunction() {}

// typeof演算子を使用して関数であるか確認
console.log(typeof exampleFunction); // "function"

ここでは、関数を定義し、typeof演算子を使用して関数であるかどうかを確認しています。

○サンプルコード5：nullの型確認

// nullの定義
let nul = null;

// 厳密等価演算子を使用してnullであるか確認
console.log(nul === null); // true

ここでは、nullを定義し、厳密等価演算子を使用してnullであるかどうかを確認しています。

○サンプルコード6：undefinedの型確認

// 定義されていない変数
let undef;

// typeof演算子を使用してundefinedであるか確認
console.log(typeof undef); // "undefined"

ここでは、定義されていない変数を宣言し、typeof演算子を使用してundefinedであるかどうかを確認しています。

○サンプルコード7：オブジェクトの型確認

// オブジェクトの定義
let obj = { key: "value" };

// typeof演算子を使用してオブジェクトであるか確認
console.log(typeof obj); // "object"

ここでは、オブジェクトを定義し、typeof演算子を使用してオブジェクトであるかどうかを確認しています。

○サンプルコード8：正規表現の型確認

// 正規表現の定義
let regex = /abc/;

// instanceof演算子を使用して正規表現オブジェクトであるか確認
console.log(regex instanceof RegExp); // true

ここでは、正規表現を定義し、instanceof演算子を使用して正規表現オブジェクトであるかどうかを確認しています。

○サンプルコード9：日付オブジェクトの型確認

// 日付オブジェクトの定義
let date = new Date();

// instanceof演算子を使用して日付オブジェクトであるか確認
console.log(date instanceof Date); // true

ここでは、日付オブジェクトを定義し、instanceof演算子を使用して日付オブジェクトであるかどうかを確認しています。

○サンプルコード10：エラーオブジェクトの型確認

// エラーオブジェクトの定義
let error = new Error("エラーメッセージ");

// instanceof演算子を使用してエラーオブジェクトであるか確認
console.log(error instanceof Error); // true

ここでは、エラーオブジェクトを定義し、instanceof演算子を使用してエラーオブジェクトであるかどうかを確認しています。

●注意点

型確認には、typeof演算子やinstanceof演算子を使用しますが、それぞれに適用できるデータ型が異なります。

typeof演算子はプリミティブ型を確認するのに適しており、instanceof演算子はオブジェクト型を確認するのに適しています。

ただし、nullに関してはtypeof演算子で”object”が返されることに注意してください。

また、JavaScriptにおいては暗黙の型変換が発生しやすいため、型確認を行うことでバグを防ぐことができます。

特に、== 演算子は型変換を行うので、型が異なる変数同士を比較する際には、=== 演算子を使用して厳密な等価性を確認することが重要です。

まとめ

本記事では、JavaScriptのデータ型の確認方法とサンプルコードを紹介しました。

typeof演算子とinstanceof演算子を使い分けることで、さまざまなデータ型の確認が可能です。

型確認を行うことで、バグを未然に防ぐことができます。

JavaScriptを使用する際は、適切な型確認方法を活用してコーディングを進めてください。