こんにちは、かつコーチです。
前回は let・const・var という変数宣言の違いについて解説しました。
今回は、その変数の中に「どんな種類の値」を入れられるのか、データ型について整理していきます。
データ型を理解しておくと、後々つまずきやすいバグの原因がぐっと分かりやすくなります。
データ型とは？
値の種類を表すもの
データ型とは、その値が数値なのか文字列なのか、といった「値の種類」を表すものです。
JavaScriptは他の言語と違い、変数を宣言するときに型を指定する必要がありません。
let value = 100;
value = "こんにちは";
console.log(value);
// 出力: こんにちは（数値から文字列に変わってもエラーにならない）
同じ変数に数値を入れても文字列を入れてもエラーにならない、この柔軟さがJavaScriptの特徴です。
なぜ型を意識する必要があるのか
型を指定しなくていいなら意識しなくていいのでは、と思うかもしれません。
しかし実際には、型が違うことで演算の結果が想定と変わってしまうケースが多く、初心者がつまずきやすいポイントの一つです。
型を正しく理解しておくことが、バグの少ないコードを書く第一歩になります。
プリミティブ型：基本の6種類
数値型（Number）
整数と小数の区別なく、数値はすべて Number 型として扱われます。
let price = 1000;
let rate = 0.1;
console.log(price * rate);
// 出力: 100
文字列型（String）
文字や文章を表す型で、シングルクォート・ダブルクォート・バッククォートのいずれかで囲みます。
let name = "かつコーチ";
let greeting = `こんにちは、${name}さん`;
console.log(greeting);
// 出力: こんにちは、かつコーチさん
バッククォートで囲む書き方はテンプレートリテラルと呼ばれ、${ } の中に変数を埋め込めるので文字列の組み立てが読みやすくなります。
真偽値型（Boolean）
true（真）か false（偽）のどちらかしか持たない型です。
let isLoggedIn = true;
console.log(isLoggedIn);
// 出力: true
条件分岐の判定結果など、「Yes/No」を表したい場面で使います。
undefined・null・シンボル型
undefined は「値がまだ入っていない」状態を表します。
let score;
console.log(score);
// 出力: undefined
null は「値が空である」ことを意図的に表すために使います。
let selectedUser = null;
console.log(selectedUser);
// 出力: null
似ているようで意味が違うので、「undefined は未定義、null は意図的な空」と覚えておくと整理しやすいです。
オブジェクト型：複数の値をまとめる
オブジェクトの基本
複数の値をひとまとめにして扱いたいときは、オブジェクト型を使います。
const user = {
name: "かつコーチ",
age: 30,
};
console.log(user.name);
// 出力: かつコーチ
{ } の中に「キー：値」のペアを並べて、関連するデータをまとめて表現できます。
配列もオブジェクトの仲間
配列は複数の値を順番に並べたもので、実はオブジェクトの一種として扱われます。
const fruits = ["りんご", "みかん", "ぶどう"];
console.log(fruits[0]);
// 出力: りんご
配列の詳しい使い方は、この後の記事であらためて解説します。
つまずきやすいポイント：型による演算の違い
+ 演算子で数値と文字列が混ざるとどうなるか
私が実際につまずいたのが、フォームから受け取った値を数値だと思い込んで計算してしまったケースです。
HTMLのフォームから取得した値は、たとえ見た目が数字でも文字列型として渡されてくることがあります。
❌ Before：文字列と数値をそのまま足してしまう
const inputPrice = "1000"; // フォームから取得した値（文字列）
const quantity = 3;
const total = inputPrice + quantity;
console.log(total);
// 出力: 10003（数値の合計ではなく文字列の連結になってしまう）
"1000" は文字列なので、+ は「足し算」ではなく「文字列の連結」として扱われます。
合計金額を計算するつもりが、意図しない文字列がそのまま画面に表示されてしまい、原因を探るのにしばらく時間がかかりました。
✅ After：Number()で明示的に型変換してから計算する
const inputPrice = "1000";
const quantity = 3;
const total = Number(inputPrice) * quantity;
console.log(total);
// 出力: 3000
Number() を使って明示的に数値型へ変換してから計算することで、意図した通りの結果が得られます。
外部から受け取った値を計算に使う前には、必ず型を確認する癖をつけておくと安心です。
typeofで型を確認する
今その変数がどんな型なのか分からないときは、typeof 演算子で確認できます。
console.log(typeof "かつコーチ"); // 出力: string
console.log(typeof 100); // 出力: number
console.log(typeof true); // 出力: boolean
console.log(typeof undefined); // 出力: undefined
型に関するバグを疑ったときは、まず console.log(typeof 変数名) で確認する習慣をつけておきましょう。
まとめ
この記事のポイント
- JavaScriptには数値・文字列・真偽値・undefined・null・オブジェクトなどのデータ型がある
- 変数宣言時に型を指定しなくてよい分、意図しない型の値が混ざりやすい
+演算子は数値と文字列で挙動が変わるため、外部から受け取った値の型には注意するtypeofを使えば、今その変数がどんな型かをすぐに確認できる
次に読むべき記事
次回は、算術・比較・論理演算子の基本について解説します。
→ 次の記事：演算子の基本（算術・比較・論理）