1.変数とデータ型

学習目標

変数を宣言し、値の代入・再代入・出力ができる
let と const を使い分けられる
数値・文字列・真偽値の違いを理解し、typeof で型を確認できる

1. 変数

前のドキュメントでは、console.log() に直接値を書いて出力していました。しかしプログラムが複雑になると、計算の途中結果を残しておいたり、同じ値を何度も使い回したりする場面が出てきます。そのために使うのが変数です。

1-1. 変数の基本

変数は、値に名前をつけて扱うための仕組みです。「名前のついた入れ物」と考えてください。

たとえば、500円の商品の税込み価格を計算して表示したいとします。

console.log(500 * 1.1);

これでも計算結果 550 は出ますが、コードを読んだだけでは 500 が何の値で 1.1 が何なのか判断できません。後からこのコードを読み返したとき、「500って何の数字だっけ？」と分からなくなります。

変数を使うと、次のように書くことができます。

let price = 500;
let taxRate = 1.1;
console.log(price * taxRate);

price（価格）と taxRate（税率）という名前がついたことで、「500円の商品に税率1.1をかけている」ということがコードから読み取れるようになりました。また、価格を変更したいときは let price = 800; に書き換えるだけで、計算式はそのまま使えます。

1-2. 変数の宣言と代入

変数を使うには、まず変数の名前を決めて用意する必要があります。これを 変数の宣言 と呼びます。

let message;

これで message という変数が宣言されました。

変数に値を入れる操作を代入と呼び、= を使って表します。

let message;
message = "おはようございます";
console.log(message);

おはようございます

message = "おはようございます" で、変数に "おはようございます" という値が入りました。console.log(message) で変数の中身を表示しています。

宣言と代入は、1行にまとめて書くこともできます。こちらの書き方のほうが一般的です。

let message = "おはようございます";
console.log(message);

1-3. 再代入

let で宣言した変数は、後から別の値を入れ直すことができます。これを 再代入 と呼びます。

let message = "おはようございます";
console.log(message);

message = "こんにちは";
console.log(message);

message = "こんばんは";
console.log(message);

おはようございます
こんにちは
こんばんは

message = "こんにちは" を実行した時点で、元の値 "おはようございます" は上書きされて消えてしまいます。変数の中身は常に「最後に代入した値」です。古い値を保持しておきたい場合は、別の変数に入れておく必要があります。

同じ名前の変数を2回宣言するとエラーになります。

let count = 0;
let count = 10; // エラー: 'count' は既に宣言されています

1-4. 変数名と値の区別

コードを読むとき、greeting と "greeting" は見た目が似ていますが、意味がまったく異なります。"" の有無で変数か文字列かが決まります。

引用符なし（変数）
引用符あり（文字列）

let greeting = "こんにちは";
console.log(greeting);

こんにちは

greeting は変数として扱われ、中身の "こんにちは" が出力されます。

let greeting = "こんにちは";
console.log("greeting");

greeting

"greeting" は文字列として扱われ、そのまま出力されます。

1-5. `let` と `const`

変数の宣言には let と const の2種類があります。

let は後から値を変更（再代入）できます。

let count = 0;
console.log(count); // 0

count = 10;
console.log(count); // 10

const は一度値を入れたら変更できません。const は「constant（定数）」の略です。

const tax = 0.1;
console.log(tax); // 0.1

tax = 0.08; // ここでエラーになる

実行すると以下のエラーが表示されます。

TypeError: Assignment to constant variable.

これは「定数（constant variable）に代入（assignment）しようとした」という意味です。

使い分けの基準は「後で値を変えるかどうか」です。

値が変わらないもの → const（消費税率、円周率、アプリの名前など）
値が変わるもの → let（カウンター、計算途中の合計値など）

1-6. 変数名のルール

変数名には以下のルールがあります。

使用できる文字は英数字と _（アンダースコア）
先頭に数字は使えない（name1 は OK、1name はエラー）
大文字と小文字は区別される

let score1 = 80;    // OK
let 1name = "田中"; // エラー

let count = 10;
let Count = 20;
console.log(count); // 10
console.log(Count); // 20

変数には、中身が想像できる名前をつけます。「ユーザーの年齢」なら age、「商品の個数」なら quantity、「合計金額」なら totalPrice のように名前から意味が読み取れるようにします。

// よくない例: 何の値か分からない
let x = 500;
let y = 1.1;

// 良い例: 名前から意味が読み取れる
let price = 500;
let taxRate = 1.1;

2. データ型

変数にはさまざまな値を入れることができますが、値にはそれぞれ種類があります。この種類のことを データ型 と呼びます。

コンピューターは値の種類に応じて処理の仕方を変えます。数値であれば計算ができますが、文字列に対して掛け算をしても意味がありません。型を意識しておくと、コードの動きを正しく読み取れるようになります。

ここでは数値・文字列・真偽値の3つの基本的なデータ型と、型を確認する typeof の使い方を学びます。

2-1. 数値（number）

計算に使う値です。商品の価格、テストの点数、年齢、身長など、足したり掛けたりする対象は数値型で扱います。

const price = 500;
console.log(price); // 500

整数（500）も小数（3.14）も、JavaScript では同じ「数値」型です。

2-2. 文字列（string）

"" または '' で囲んだ値です。人名、住所、メッセージ、商品名など、文字として扱いたいデータに使います。

const name = "田中太郎";
console.log(name); // 田中太郎

2-3. 真偽値（boolean）

true（真）と false（偽）の2つの値だけを取るデータ型です。

const isAdult = true;
const isStudent = false;
console.log(isAdult);   // true
console.log(isStudent); // false

true と false は条件が成り立つかどうかを表す値です。次のドキュメントで学ぶ条件分岐で、「isStudent が true なら学割を適用する」のような判定に使います。

2-4. `typeof`

値のデータ型は typeof で確認できます。

console.log(typeof 100);      // number
console.log(typeof "Hello");  // string
console.log(typeof true);     // boolean

typeof の後に値を書くと、その型の名前が表示されます。プログラムが思い通りに動かないとき、typeof で変数の型を確認すると原因が見えてくることがあります。

let value = "100";
console.log(typeof value); // string（数値ではなく文字列）

このように、見た目が 100 でも "" で囲まれていれば文字列です。

3. 演習

演習: 変数とデータ型