JavaScript: JavaScript 型変換

最終更新：2026-10-13

型変換は JavaScript で最もエラーが発生しやすい部分です。フォームに入力した数字？実は文字列だった！"5" + 3 が 8 ではなく "53" になる。初心者は誰もがこのような「驚き」に遭遇します。

関連するグローバルメソッド：parseFloat() parseInt() Number()

1. 型変換の方法と落とし穴

HTML フォームの input 値は type="number" でも常に文字列です。算術演算を行う前に型を変換しないと、結果は予測不能になります。

<div id="demo"></div>
<script>
const input = "42";
const result = input + 8;
document.getElementById("demo").textContent = 'input + 8 = ' + result + '（型: ' + typeof result + '）';
</script>

(2) 明示的な変換：String()、Number()、Boolean()

変換関数を明示的に呼び出すことで意図が明確になります。推奨されるアプローチです。

(3) 暗黙の変換：+ による連結と == による比較

JavaScript エンジンは自動的な型変換を行いますが、しばしば予期しない結果を生みます。

• + 演算子：どちらかの側が文字列なら、もう片方も文字列に変換されて連結される
• == 比較：比較前に型を変換する。複雑なルールで覚えにくい

<script>
console.log("5" + 3);       // "53"（数値 3 が文字列に変換）
console.log("5" - 3);       // 2（文字列 "5" が数値に変換）
console.log("" == 0);       // true（空文字列が 0 に変換）
console.log(null == undefined); // true
</script>

(4) よくある落とし穴

面接や実際の開発で高頻度に遭遇する落とし穴です。

<script>
console.log("5" + 3);        // "53"   + は文字列を見ると連結する
console.log("5" - 3);        // 2      - は引き算のみ。文字列を数値に変換
console.log("5" * 3);        // 15     * も数値に変換
console.log(true + 1);       // 2      true は 1 に変換
console.log(false + 1);      // 1      false は 0 に変換
console.log("" + 0);         // "0"    数値が文字列に変換
console.log("" == 0);        // true   両側が数値に変換
console.log(null == 0);      // false  null は undefined とのみ緩い等価
console.log("0" == false);   // true   両方とも 0 に変換
</script>

このルールを覚えてください：+ は文字列に出会うと連結し、他のすべての算術演算子は文字列を数値に変換します。

(5) Number() 変換ルール

空文字列が NaN ではなく 0 に変換されます。この設計で多くの開発者がつまずきました。

(6) Boolean() 変換ルール（falsy 値）

以下の6つの値は false に変換され、falsy 値と呼ばれます。それ以外はすべて true です。

<script>
console.log(Boolean(false));     // false
console.log(Boolean(0));         // false
console.log(Boolean(-0));        // false
console.log(Boolean(""));        // false
console.log(Boolean(null));      // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN));       // false
</script>

注意：Boolean("0") は true ですし、Boolean([]) も true です。空でない文字列と空でない配列は truthy です。

(7) === 厳密等価と == 緩い等価

<script>
console.log(5 === "5");   // false（型が異なる）
console.log(5 == "5");    // true（先に文字列が数値に変換）
console.log(null === undefined); // false
console.log(null == undefined);  // true
</script>

鉄則：常に === を使い、== は使わないこと。 何をしているか正確に理解している場合を除き（例：value == null は null と undefined の両方にマッチ）。

(8) サンプル：型変換の比較

(9) サンプル：Boolean() falsy 値クイックリファレンス

(10) サンプル：フォーム入力の計算

(11) サンプル：=== と == の比較

関連するグローバルメソッド：parseFloat() parseInt() Number()

❓ よくある質問

📖 まとめ

• 文字列→数値：Number()、parseInt()、parseFloat()。parseIntは末尾の非数字を無視
• 数値→文字列：String(n)、n.toString()、n.toFixed(2)
• 暗黙的変換は自動発生。== は型変換する（=== を推奨）。+ は文字列連結に
• よくある罠："5" - 3 は 2、"5" + 3 は "53"、null == undefined は true
• Boolean変換：!!value または Boolean(value)。6つの偽値：false/0/""/null/undefined/NaN

📝 練習問題

1. コードを実行せずに、これらの式の結果を予測してください："10" + 5、"10" - 5、"10" * "2"、true + true、Boolean("false")、"1" == 1、"1" === 1。その後、コードを書いて検証してください。
2. calculateBMI(weight, height) 関数を書きましょう。パラメータはフォーム入力（文字列）から取得します。関数内部で型変換してから BMI を計算し、空または無効な入力を処理してください（エラーメッセージを返す）。
3. strictCompare(a, b) 関数を書きましょう。=== のみを使って比較してください。型が異なる場合は "型が異なります。比較できません" を直接返し、型が一致する場合は比較結果を返してください。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて