JavaScript - 型変換
こんにちは、JavaScriptの志願者さんたち！今日は、JavaScriptの型変換の fascinante な世界に飛び込みます。プログラミングの初心者でも心配しないでください。私は、これまでに数多くの生徒を指導してきた経験を活かして、ステップバイステップで案内します。コーヒー（またはお好きな飲み物）を片手に、始めましょう！
JavaScript 型変換
本題に入る前に、型変換とは何かを理解しましょう。レゴブロックの箱があるとしますが、その中に木製のピースがあるとします。レゴ城を建てるためには、その木製のピースをレゴブロックに変換する必要があります。これが、JavaScriptでの型変換とは – データを一つの型から別の型に変換することです。
JavaScriptでは、主に2つの種類の変換があります：
- 暗黙的な型変換（Type Coercion）
- 明示的な型変換（Type Casting）
それぞれ詳しく見ていきましょう。
暗黙的な型変換
暗黙的な型変換は、JavaScriptが異なる型の値に対して操作を行おうとすると自動的に起こります。まるでJavaScriptが、「心配しないで、任せてくれ！」と言って、裏で型を変換しているかのようです。
文字列への変換（暗黙的な型変換）
JavaScriptは文字列への変換が非常に親切です。話を始めるのに誰にでも話しかけるような友達のようです！
let num = 5;
let str = "The number is: " + num;
console.log(str); // 出力: "The number is: 5"
console.log(typeof str); // 出力: "string"この例では、JavaScriptは + オペレータを使用して文字列と結合する際に、数値 5 を自動的に文字列に変換します。
数値への変換（暗黙的な型変換）
数値については、JavaScriptはできるだけ意味を取ろうとします。まるで数学の先生が生徒の汚い字を解読しているかのようです。
let str = "10";
let num = str - 5;
console.log(num); // 出力: 5
console.log(typeof num); // 出力: "number"ここで、JavaScriptは - オペレータを見て、「ああ、数学をやっているんだな！」と考え、文字列 "10" を数値 10 に変換してから 5 を引きます。
布尔値への変換（暗黙的な型変換）
JavaScriptには「真」と「偽」の値があります。何かが「真」と見なされる値は「truthy」と呼ばれ、それ以外は「falsy」と呼ばれます。
if ("Hello") {
console.log("This will run because 'Hello' is truthy");
}
if (0) {
console.log("This won't run because 0 is falsy");
}これらの例では、JavaScriptは「Hello」を true に、0を false に自動的に変換します。
null から数値への変換（暗黙的な型変換）
nullは少し厄介な値です。数値に変換されると0になります。まるで宿題を提出しなかった生徒が、まだ0点を得るかのようです。
let x = null;
console.log(+x); // 出力: 0ユニリティ + オペレータは、nullを数値に変換しようとします。
Undefined と数値、布尔値との変換（暗黙的な型変換）
Undefinedはさらに厄介です。宿題を提出しなかっただけでなく、クラスのリストにも載っていない生徒のようです！
let x;
console.log(+x); // 出力: NaN (Number Not a Number)
console.log(Boolean(x)); // 出力: false数値に変換するとundefinedはNaNになり、布尔値に変換するとfalseになります。
明示的な型変換
明示的な型変換は、私たちプログラマーがコントロールを取り、JavaScriptにどの型に変換したいかを明示的に指示するものです。まるで劇の監督が俳優たちに正確な役割を指示するかのようです。
文字列への変換（明示的な型変換）
文字列への変換にはいくつかの方法があります：
let num = 123;
let str1 = String(num);
let str2 = num.toString();
let str3 = num + "";
console.log(str1, typeof str1); // 出力: "123" string
console.log(str2, typeof str2); // 出力: "123" string
console.log(str3, typeof str3); // 出力: "123" stringこれらの方法はすべて同じ結果を達成しますが、String() と toString() は意図がより明確です。
数値への変換（明示的な型変換）
数値への変換にも似たようなオプションがあります：
let str = "456";
let num1 = Number(str);
let num2 = parseInt(str);
let num3 = +str;
console.log(num1, typeof num1); // 出力: 456 number
console.log(num2, typeof num2); // 出力: 456 number
console.log(num3, typeof num3); // 出力: 456 numberNumber() と parseInt() は意図がより明確で、ユニリティ + は開発者によって短絡的に使用されます。
布尔値への変換（明示的な型変換）
布尔値への変換はシンプルです：
let str = "Hello";
let bool1 = Boolean(str);
let bool2 = !!str;
console.log(bool1, typeof bool1); // 出力: true boolean
console.log(bool2, typeof bool2); // 出力: true booleanBoolean() 関数は明確で読みやすいです。二重否定（!!）は開発者によって短絡的に使用されますが、初心者には混乱するかもしれません。
日付の文字列/数値への変換
日付は特別なケースです。文字列と数値の両方に変換できます：
let date = new Date();
let dateString = String(date);
let dateNumber = Number(date);
console.log(dateString); // 出力: "Mon May 15 2023 12:34:56 GMT+0000 (Coordinated Universal Time)"
console.log(dateNumber); // 出力: 1684154096000 (1970年1月1日からのミリ秒)日付を文字列に変換すると人間が読める形式になり、数値に変換するとUnixエポックからのミリ秒になります。
JavaScriptでの変換表
学んだ変換方法をまとめると、以下の表になります：
| 元の値 | 文字列への変換 | 数値への変換 | 布尔値への変換 |
|---|---|---|---|
| false | "false" | 0 | false |
| true | "true" | 1 | true |
| 0 | "0" | 0 | false |
| 1 | "1" | 1 | true |
| "0" | "0" | 0 | true |
| "1" | "1" | 1 | true |
| NaN | "NaN" | NaN | false |
| Infinity | "Infinity" | Infinity | true |
| -Infinity | "-Infinity" | -Infinity | true |
| "" | "" | 0 | false |
| "20" | "20" | 20 | true |
| [ ] | "" | 0 | true |
| [20] | "20" | 20 | true |
| [10,20] | "10,20" | NaN | true |
| ["twenty"] | "twenty" | NaN | true |
| ["ten","twenty"] | "ten,twenty" | NaN | true |
| function(){} | "function(){}" | NaN | true |
| { } | "[object Object]" | NaN | true |
| null | "null" | 0 | false |
| undefined | "undefined" | NaN | false |
以上がJavaScriptの型変換の旅です。練習が大事ですので、これらの概念を試してみてください。誰かがレゴブロックを木製のピースに変えてから再びレゴブロックに戻す過程を楽しむかもしれません！
未来のJavaScriptの達人たち、お楽しみください！
Credits: Image by storyset