初心者必見！JavaScriptにおける型変換の完全解説10選

はじめに
●JavaScriptの型変換とは
- ○型変換の基本
●型変換の使い方
●型変換の応用例
- ○サンプルコード4：入力値チェック
- ○サンプルコード5：条件分岐の簡略化
●注意点と対処法
- ○型変換の罠
- ○対処法の例
●カスタマイズ方法
- ○サンプルコード6：独自の型変換関数
まとめ

はじめに

この記事を読むことで、JavaScriptの型変換を使いこなすことができるようになります。

JavaScriptは、動的型付け言語であり、変数の型が自動的に決定されます。

しかし、型変換が必要な場面があります。

そこで、この記事ではJavaScriptの型変換を初心者目線で詳しく徹底解説します。

●JavaScriptの型変換とは

型変換とは、あるデータ型から別のデータ型に変換することを指します。

JavaScriptでは、主に次のようなデータ型が存在します。

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

○型変換の基本

JavaScriptでは、型変換は自動的に行われることがありますが、明示的に型変換を行うこともできます。

●型変換の使い方

○サンプルコード1：数値と文字列の変換

JavaScriptで数値と文字列の型変換を行う方法を示します。

数値を文字列に変換するには、String()関数を使用します。

また、文字列を数値に変換するには、Number()関数を使用します。

let num = 42;
let str = String(num); // 数値を文字列に変換
console.log(typeof str); // "string"

let str2 = "123";
let num2 = Number(str2); // 文字列を数値に変換
console.log(typeof num2); // "number"

○サンプルコード2：真偽値の変換

真偽値への変換は、Boolean()関数を使用します。

0や空文字列など、偽とみなされる値はfalseに、それ以外の値はtrueに変換されます。

let num = 42;
let bool = Boolean(num); // 数値を真偽値に変換
console.log(bool); // true

let str = "";
let bool2 = Boolean(str); // 空文字列を真偽値に変換
console.log(bool2); // false

○サンプルコード3：オブジェクトの変換

オブジェクトを他の型に変換する場合は、オブジェクトのメソッドを使って値を取得し、それを適切な型に変換します。

let obj = { x: 42, y: "hello" };
let num = Number(obj.x); // オブジェクトのプロパティを数値に変換
console.log(num); // 42

let str = String(obj.y); // オブジェクトのプロパティを文字列に変換
console.log(str); // "hello"

●型変換の応用例

ここでは、型変換を活用した応用例を紹介します。

○サンプルコード4：入力値チェック

ユーザーからの入力値が数値かどうかをチェックする例です。

let input = "42"; // ユーザーからの入力値を仮定

if (!isNaN(Number(input))) {
  console.log("入力値は数値です。");
} else {
  console.log("入力値は数値ではありません。");
}

○サンプルコード5：条件分岐の簡略化

型変換を利用して、条件分岐をシンプルにする例です。

let num = 42;

// 型変換を使用しない場合
if (num > 0) {
  console.log("正の値です。");
} else {
  console.log("正の値ではありません。");
}

// 型変換を使用する場合
console.log(Boolean(num > 0) ? "正の値です。" : "正の値ではありません。");

●注意点と対処法

○型変換の罠

型変換には、意図しない挙動が起こることがあります。

例えば、文字列と数値の加算時に、意図しない文字列の連結が発生することがあります。

let str = "5";
let num = 10;
console.log(str + num); // "510" と表示される

○対処法の例

意図しない型変換が起こらないように、明示的に型変換を行ってから計算を行います。

let str = "5";
let num = 10;
console.log(Number(str) + num); // 15 と表示される

●カスタマイズ方法

○サンプルコード6：独自の型変換関数

独自の型変換関数を作成して、特定の条件で変換を行う方法を示します。

// 文字列を数値に変換する独自の関数
function customNumber(str) {
  if (str === "未入力") {
    return 0;
  }
  return Number(str);
}

let input = "未入力";
console.log(customNumber(input)); // 0 と表示される