今回は、JavaScriptでデータを扱ううえで欠かせない「データ型」について整理していきます。
どんなに正しくコードを書いても、
扱っている情報の「種類」を理解していなければ、
エラーが出たときの原因に気づきやすくなります。
実は、初心者がつまずく原因の多くは
難しいロジックではなく、
「その値が何として扱われているのか」を正しく理解できていないことです。
まずは土台となるデータ型をしっかり押さえて、
安心してコードを書ける状態を作っていきましょう！
基本の3つの型（プリミティブ型）
JavaScriptで特に頻繁に使うのが、次の3つの基本型です。
これらは「それ以上分解できない最小単位のデータ」として扱われます。
① 文字列型（String）
文字列型（String）は文字のまとまりを扱う型です。
名前やメッセージなどのテキストは、すべて文字列になります。
const name = "React太郎";
const message = 'こんにちは';
文字列は、必ず " " または ' ' で囲みます。
const tel = "09012345678";
数字のように見えても、クォーテーションで囲むと「文字」として扱われます。
見た目ではなく、「どう書いたか」で型が決まる。
この感覚はとても大切です！
なお、JavaScriptには「1文字だけの特別な型（Char型）」はありません。
1文字でも100文字でも、すべてString型として扱われます。
② 数値型（Number）
計算に使う数字を扱う型です。
const age = 25; // 整数
const price = 100.5; // 小数
JavaScriptでは、整数も小数も区別せず、すべて「Number型」として扱われます。
console.log(age + 5); // → 30
クォーテーションで囲まないことがポイントです。
囲んでしまうと、計算ではなく文字の結合になってしまいます。
なお、非常に大きな整数を扱うための「BigInt」という型もありますが、
通常のWebアプリ開発ではNumber型で十分対応できます。
まずはNumber型をしっかり理解しましょう！
③ 真偽値型（Boolean）
「はい」か「いいえ」か。
2つの状態だけを表す型です。
const isStudent = true;
const hasError = false;
条件分岐（if文など）でよく使われる、
とても重要な型です。
配列（Array） 〜複数の値をまとめる〜
関連するデータをひとまとまりで管理したいときに使うのが「配列」です。
const colors = ["red", "blue", "green"];
配列は [ ] で囲み、カンマで区切って書きます。
JavaScriptの配列はとても柔軟で、
異なる型の値を混ぜることもできます。
const mixed = ["React", 2026, true];
配列の最大の特徴は、「順番」でデータを管理することです。
中に入っている値には、自動的に番号が振られます。これを インデックス と呼びます。
この番号は 0から始まる という点が重要です。
console.log(colors[0]); // → "red"
なぜ0から始まるのかというと、
JavaScriptは「先頭を0番目」として数える仕組みになっているためです。
そのため、
- 1番目のデータ →
0 - 2番目のデータ →
1 - 3番目のデータ →
2
という対応になります。
最初は少し違和感があるかもしれませんが、
「配列は0スタート」と覚えておけば大丈夫です！
オブジェクト（Object） 〜意味でまとめる〜
一つの対象に関する情報を、
「名前（キー）」をつけて管理するのがオブジェクトです。
const user = {
name: "React太郎",
age: 25,
isStudent: true
};
配列が「順番」で管理するのに対して、
オブジェクトは「意味」で管理します。
ここでの name や age は「キー」と呼ばれ、
それぞれの値が何を表しているのかを示すラベルの役割を持っています。
console.log(user.name); // → React太郎
変数名.キー で取り出します。
配列の場合は「何番目か」を覚える必要がありましたが、
オブジェクトは意味のある「名前」でデータを取り出すことができるのが大きな特徴です！
配列とオブジェクトの使い分け
最初は迷いやすいポイントですが、基準はとてもシンプルです！
配列は「順番」が意味を持つデータに向いています。
例えば、ランキングや時系列データ、出席番号順の名簿などです。
「何番目か」が重要なときは、配列が自然です。
一方、オブジェクトは「項目の意味」が重要なデータに向いています。
プロフィール情報や設定値のように、
「名前」「年齢」「住所」といった“ラベル付きの情報”をまとめる場合はオブジェクトが適しています。
無理に覚えようとするよりも、
・ 順番で整理したい → 配列
・ 名前（意味）で整理したい → オブジェクト
この感覚を持っておくだけで、十分使い分けができるようになります！
ネスト（入れ子）構造
実際のアプリ開発では、
オブジェクトの中に配列が入り、
その中にさらにオブジェクトが入ることもあります。
const school = {
className: "Reactクラス",
students: [
{ id: 1, name: "佐藤", grades: [80, 90] },
{ id: 2, name: "鈴木", grades: [100, 60] }
]
};
このように「意味」と「順番」を組み合わせることで、
複雑な情報も整理して扱えるようになります。
このような構造では、
どの順番でデータをたどっているのかを意識することが大切です。
console.log(school.students[0].name); // → "佐藤"
このコードは、次のような流れで値を取り出しています。
schoolというオブジェクトのstudentsプロパティ（配列）にアクセスし- その中の
0番目の要素を取り出し - そのオブジェクトの
nameを取得する
少し長く見えますが、
「今どの箱を開けているのか」を順番に追っていけば、難しくありません！
ネスト構造は最初こそ複雑に感じますが、
データのまとまりを整理して考えるための、とても大切な仕組みです！
JSONとは？
学習を進めると、必ず出てくる言葉が「JSON」です。
JSON（JavaScript Object Notation）は、
データをテキスト形式で表現するためのルールです。
見た目はオブジェクトとよく似ていますが、役割が全く異なります！
・ JavaScriptオブジェクト
→ プログラムの中で扱うデータ
・ JSON
→ データをやり取り・保存するための形式
多くのWebアプリでは、
「サーバーからJSON形式で受け取り、
JavaScriptのオブジェクトとして扱う」
という流れになります。
ですがこれはまだ先の話。
まずは、
「JSONはデータ交換のための形式」
と理解しておけば十分です。
まとめ
JavaScriptは自由度の高い言語です。
だからこそ、「どんな種類のデータを扱っているのか」を理解しているかどうかが、とても大切になります。
＼＼ 今回のまとめ ／／
・ 基本型は String / Number / Boolean
・ 配列は「順番」でデータを管理する
・ オブジェクトは「意味」でデータを管理する
・ JSONはデータをやり取りするための形式
データ型を理解すると、
エラーが出たときの原因に気づきやすくなります。
「今これは文字なのか？ 数字なのか？」
その意識が、これからの学習を大きく助けてくれます！
次は、値が存在しない状態をどう扱うのか、
「null」と「undefined」について見ていきましょう！
コメント