0Pricing
JavaScript Academy · レッスン

型変換：予期しない動作を避ける安全なパターン

暗黙的変換と明示的変換を理解し、Number/String/Booleanによる明確なcastを優先して、NaNを安全に扱います。

「型変換：予期しない動作を避ける安全なパターン」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。

導入

目標: JavaScriptが型を変換する場面とその結果を理解し、予測しやすいコードを書くために明示的な型変換を使えるようになります。

  • 暗黙的な型変換と明示的な型変換
  • Number/String/Boolean
  • NaNの安全な扱い
型変換：予期しない動作を避ける安全なパターン — イラスト1

暗黙的な型変換の例

文字列に対して+を使うと連結が行われます。一方、- と * は数値への変換を試みます。

// Implicit coercion can surprise beginners
console.log("5" + 1);     
// "51"  (string concatenation)
console.log(5 + "1");    
// "51"  (number -> string)
console.log("5" - 1);     
// 4     (string -> number)
console.log("5" * 2);     
// 10    (string -> number)
型変換：予期しない動作を避ける安全なパターン — イラスト2

明示的な型変換

わかりやすさのために、Number(x)、String(x)、Boolean(x) を使ってください。

// Prefer explicit, readable casts
const n = Number("42");      
// 42
const s = String(42);         
// "42"
const t = Boolean("hi");      
// true (non-empty string)
const f = Boolean("");        
// false (empty string)

console.log(n, s, t, f);
型変換：予期しない動作を避ける安全なパターン — イラスト3

NumberとparseIntの違い

Number(x) は文字列全体が数値であることを求めます。一方、parseInt は先頭の数字だけを解析します。

// Number vs parseInt with examples
console.log(Number("42"));          
// 42 (full string must be numeric)
console.log(parseInt("42", 10));    
// 42
console.log(parseInt("42px", 10));  
// 42 (stops at non-digit)
console.log(Number("42px"));        
// NaN (not a pure number)
型変換：予期しない動作を避ける安全なパターン — イラスト4

NaNの確認

余分な型変換を行わずにNaNを確認するには、Number.isNaN を使ってください。

// NaN is "Not a Number" and is not equal to itself
const bad = Number("oops");   
// NaN
console.log(bad === NaN);     
// false
console.log(Number.isNaN(bad)); 
// true (use this)
console.log(isNaN("5"));      
// false (string coerces to number 5)
型変換：予期しない動作を避ける安全なパターン — イラスト5

安全性チェックリスト

安全なパターン:

  • === と明示的な型変換を優先してください。
  • 数値を表す文字列には Number(x) を使い、巧妙な小技は避けてください。
  • 入力値を検証し、解析後に Number.isNaN を確認してください。
型変換：予期しない動作を避ける安全なパターン — イラスト6

明示的な型変換クイズ

クイックチェック: 明示的な数値変換です。

型変換：予期しない動作を避ける安全なパターン — イラスト7

まとめ

まとめ: 暗黙的な型変換は予想外の結果を招くことがあります。Number/String/Boolean による明示的な型変換を優先し、必要に応じて Number.isNaN で安全性を確認してください。

型変換：予期しない動作を避ける安全なパターン — イラスト8

よくある質問

「型変換：予期しない動作を避ける安全なパターン」レッスンは無料ですか？

はい。「型変換：予期しない動作を避ける安全なパターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。

「型変換：予期しない動作を避ける安全なパターン」で何を学びますか？

暗黙的変換と明示的変換を理解し、Number/String/Booleanによる明確なcastを優先して、NaNを安全に扱います。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。

「型変換：予期しない動作を避ける安全なパターン」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. PrimitiveとObject、Core Type
  2. typeof、Truthy/Falsy、==と===
  3. 型変換：予期しない動作を避ける安全なパターン
← JavaScript Academyに戻る