0Pricing
Frontend Academy · レッスン

データ型: string、number、boolean、null、undefined

JavaScriptのプリミティブ型を学び、typeofで確認し、nullとundefinedの違いを理解します。

「データ型: string、number、boolean、null、undefined」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

JavaScriptの型システム

JavaScript は動的型付けです。型を持つのは変数ではなく値です。同じ変数に、文字列、数値、null の順で異なる値を格納できます。7 種類のプリミティブ型を理解すると、多くのバグを防げます。

string

string はテキストを表します。シングルクォート、ダブルクォート、またはバッククォート（テンプレートリテラル）を使います。string は不変であり、文字列メソッドは新しい文字列を返します。string には .length プロパティと多くの組み込みメソッドがあります。

const greeting = 'Hello';
const lang = "JavaScript";
const sentence = `I love ${lang}`;  // template literal

console.log(greeting.length);   // 5
console.log('hello'.toUpperCase()); // 'HELLO'
console.log(' trim me '.trim()); // 'trim me'

number

JavaScript には数値型が 1 つだけあります。整数も小数もすべて 64 ビット浮動小数点数（IEEE 754）です。そのため、0.1 + 0.2 !== 0.3 となります。特殊な値には Infinity、-Infinity、NaN（Not a Number）があります。

const age = 30;
const price = 19.99;
console.log(0.1 + 0.2);          // 0.30000000000000004
console.log(typeof NaN);          // 'number'
console.log(isNaN('hello'));      // true
console.log(Number.isNaN('hello')); // false (safer check)

boolean

boolean は true または false です。条件分岐や比較で使います。JavaScript のすべての値には真偽値としての性質があります。falsy な値は false、0、''、null、undefined、NaN です。それ以外はすべて truthy です。

const isActive = true;
const isAdmin = false;

// Falsy values:
if (0) { /* never runs */ }
if ('') { /* never runs */ }
if (null) { /* never runs */ }

null

null は明示的に代入された空の値です。「意図的に値がない」ことを意味します。変数を空にしたり、値が存在しないことを示したりする場合に null を使います。typeof null === 'object' は、レガシー互換性のために残されている有名な JavaScript のバグです。

let selectedUser = null;  // no user selected yet
selectedUser = { name: 'Alice' };
selectedUser = null;       // cleared

undefined

undefined は、まだ値が代入されていないことを意味します。宣言されていても初期化されていない変数は undefined です。関数に渡されなかった引数も undefined です。存在しないオブジェクトのプロパティを参照すると undefined が返ります。

let x;                       // undefined
function greet(name) {
  console.log(name);           // undefined if called as greet()
}
const obj = {};
console.log(obj.foo);         // undefined

null と undefined の違い

null = 意図的に値がない。undefined = まだ値が代入されていない。原則として、undefined はエンジンに設定させ、「空」を意味するときは自分のコードで明示的に null を使ってください。

typeof演算子

実行時に値の型を調べるには typeof を使います。結果は文字列で、'string'、'number'、'boolean'、'undefined'、'object'、'function'、'bigint'、'symbol' のいずれかです。typeof null === 'object' は既知のバグであることを覚えておいてください。

typeof 'hello'     // 'string'
typeof 42          // 'number'
typeof true        // 'boolean'
typeof undefined   // 'undefined'
typeof null        // 'object' ← historical bug
typeof {}          // 'object'
typeof []          // 'object'
typeof function(){} // 'function'

SymbolとBigInt

Symbol: 一意で不変の識別子です。衝突しないオブジェクトのプロパティキーとして使います。BigInt: Number.MAX_SAFE_INTEGER（2^53-1）より大きい整数を扱います。42n または BigInt(42) で作成します。ほとんどのフロントエンド開発では必要ありません。

型強制変換の注意点

JavaScript は比較や演算の際に、型を暗黙的に変換します。型強制変換による予期しない結果を避けるため、==（緩い等価）ではなく ===（厳密等価）を使ってください。

0 == false        // true (coercion)
0 === false       // false (strict, no coercion)
'' == false       // true
'5' == 5          // true
'5' === 5         // false ✓ use this

型変換

Number()、String()、Boolean()、または parseInt() / parseFloat() を使って、型を明示的に変換します。暗黙的な型強制変換に頼るより、明示的な変換のほうが常に明確です。

Number('42')      // 42
Number('')        // 0
Number('abc')     // NaN
String(42)        // '42'
Boolean(0)        // false
Boolean('hello')  // true
parseInt('10px')  // 10

クイックチェック

JavaScript で typeof null は何を返しますか？

まとめ: JavaScriptのデータ型

プリミティブ型は string、number、boolean、null、undefined、symbol、bigint の 7 種類です。型の確認には typeof を使います。型強制変換を避ける比較には === を使います。null（意図的に空）と undefined（まだ設定されていない）を区別してください。それ以外の値はすべてオブジェクトです。

よくある質問

「データ型: string、number、boolean、null、undefined」レッスンは無料ですか？

はい。「データ型: string、number、boolean、null、undefined」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「データ型: string、number、boolean、null、undefined」で何を学びますか？

JavaScriptのプリミティブ型を学び、typeofで確認し、nullとundefinedの違いを理解します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「データ型: string、number、boolean、null、undefined」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. 変数: let、const、varとスコープ
  2. データ型: string、number、boolean、null、undefined
  3. 関数: 宣言、式、アロー関数
  4. 制御フロー: if、else、switch、for、while
← Frontend Academyに戻る