JavaScriptを学び始めると、「100 + 100」が「200」になることもあれば、なぜか「100100」という文字になって繋がってしまう現象に遭遇することがあります。
この原因こそが、今回のテーマである「データ型（だーたがた）」です。
コンピューターは、私たちが入力した値が「数字」なのか「文字」なのかを厳密に区別しています。この区別を正しく理解していないと、計算ミスや予期せぬバグを引き起こしてしまいます。この記事では、初心者の方がまず押さえるべき「基本のデータ型」と、型を調べる「typeof演算子」について詳しく解説します。
変数について分からない場合、下の記事を確認してみてください
データ型とは？コンピュータが値を識別するルール
データ型とは、簡単に言うと「データの種類」のことです。
現実世界でも、私たちが「123」を見れば「数」だと認識し、「こんにちは」を見れば「言葉」だと認識するように、JavaScriptの世界にもデータのカテゴリが存在します。
なぜデータ型を意識する必要があるのか？
コンピュータは、データ型によって「そのデータを使って何ができるか」を判断します。
- 数値型であれば、足し算や引き算などの「計算」ができます。
- 文字列型であれば、文字を繋げたり、長さを測ったりする「加工」ができます。
これらが混ざってしまうと、プログラムは「計算すればいいの？文字として繋げればいいの？」と迷ってしまい、私たちの意図しない結果を返してくるのです。
JavaScriptの主なデータ型の分類
JavaScriptのデータ型は大きく分けて2つあります。
- プリミティブ型：数値、文字列、真偽値など、シンプルで基本的なデータ。
- オブジェクト型：配列や関数など、複数のデータをまとめた複雑なデータ。
この記事では、まず初心者が絶対にマスターすべき「プリミティブ型」を詳しく見ていきましょう。
最も重要な2つの型：数値（Number）と文字列（String）
プログラミングで最も頻繁に使うのが「数値」と「文字列」です。この2つの違いを正しく理解することが、脱・初心者の第一歩です。
数値型（Number）
数値型は、その名の通り「数字」を扱う型です。整数だけでなく、少数も含まれます。
- 書き方のルール：引用符（”や’）で囲まずに、そのまま数字を書きます。
- 例：123、3.14、-50
const price = 500; // 数値型文字列型（String）
文字列型は、テキスト（文章）を扱う型です。
- 書き方のルール：必ずダブルクォーテーション（”）またはシングルクォーテーション（’）で囲みます。
- 例：“こんにちは”、“123”、‘JavaScript’
ここで注意したいのは、「数字であっても引用符で囲むと文字列になる」という点です。
const textPrice = "500"; // 文字列型（ただの文字として扱われる）実践でハマる！「数値」と「文字列」の計算の違い
数値と文字列を混同すると何が起きるのか、具体的な例で見てみましょう。
数値どうしの足し算
const a = 100;
const b = 200;
console.log(a + b); // 結果：300これは算数と同じ、正しい計算結果になります。
文字列どうしの足し算（結合）
const a = "100";
const b = "200";
console.log(a + b); // 結果："100200"文字列の場合、+記号は「計算ではなく「文字の連結」として機能します。数字が並んだだけで、計算はされていません。
数値と文字列が混ざった場合
const a = 100; // 数値
const b = "200"; // 文字列
console.log(a + b); // 結果："100200"一方が文字列だと、JavaScriptは「全体を文字列として繋げよう」と判断してしまいます。これが意図せぬバグの大きな原因となります。
データ型を確認する魔法の言葉「typeof」
「今の変数は数値なの？文字列なの？」と迷った時に役立つのがtyprof（タイプオフ）演算子です。
typeofの基本的な使い方
使い方は非常に簡単です。typeofの後ろに調べたい値を書くだけです。
console.log(typeof 123); // 結果："number"
console.log(typeof "こんにちは"); // 結果："string"変数の中身をチェックする
プログラムが長くなってくると、変数の型が途中で変わったり分からなくなったりします。そんな時はこう使います。
const data = "100";
console.log(typeof data); // "string" と出るので「あ、これは計算できないぞ」と分かります開発の現場でも、バグの原因調査（デバッグ）の際に「そもそも型が間違っていないか？」をtypeofで確認するのは定石です。
その他の基本的なプリミティブ型
数値と文字列以外にも、覚えておくべき型がいくつかあります。
真偽値（Boolean）
「はい（正しい）」か「いいえ（間違い）」の2つの状態だけを持つ型です。
- true：真（正しい）
- false：偽（間違い）
主に「もし〜なら（if文）」という条件分岐の判断材料として使われます。引用符で囲む必要はありません。
underfiedとnull
どちらも「値がない」ことを表しますが、ニュアンスが異なります。
- undefined：変数を宣言したけれど、まだ中身を入れていない状態（「未定義」）。
- null：意図的に「中身を空っぽにした」という状態。
最初は少し難しく感じますが、まずは「何もないことを表す特別な型があるんだな」くらいの認識で大丈夫です。
【応用】型を変換する方法（型キャスト）
「文字列の”100″を、計算できる数値の100に変えたい！」という場面はよくあります。
文字列から数値へ変換
Number()という機能を使います。
const str = "100";
const num = Number(str); // 数値の 100 に変換される
console.log(num + 50); // 結果：150（計算できる！）数値から文字列へ変換
String()という機能を使います。
const num = 100;
const str = String(num); // 文字列の "100" に変換されるこのように、型を意識して使い分けられるようになると、JavaScriptの制御がぐっと楽になります。
まとめ：データ型を制する者はJavaScriptを制す
今回は、JavaScriptの基礎である「データ型」について解説しました。
- 数値型（Number）：引用符なし。計算ができる。
- 文字列型（String）：引用符（” “）あり。文字の連結ができる。
- データ型の違いで
+の挙動が変わる（計算か、連結か）。 - typeof演算子を使えば、いつでも型を確認できる。
まずは「今扱っているデータは何型なのか？」を常に意識する癖をつけてみてください。これだけで、初心者がハマりやすいエラーの半分以上は回避できるようになります。
