レッスン2：変数とデータ型——値に名前を付けて使い回す

このレッスンで学ぶこと

変数とは何かを理解し、letとconstを使い分けられる
文字列・数値・真偽値・null・undefinedといった主要なデータ型を区別できる
算術・比較・論理の各演算子を使える
テンプレートリテラルで読みやすい文字列を組み立てられる

レッスン1では、console.log でJavaScriptをブラウザに動かしてもらう体験をしました。このレッスンでは、JavaScriptで値を扱うための基本となる「変数」と「データ型」を学びます。これらはコース全体を通して使う土台になります。

変数とは

変数は、値に名前を付けて使い回せるようにする仕組みです。例えば「私の名前は森田彩花」「私の年齢は30」といった情報を、コードの中で何度も使うとき、毎回書き直すのは大変です。一度変数に入れておけば、その名前で呼び出せるようになります。

my-website フォルダの assets/js/main.js を開き、これまでの console.log の行はそのままに、次のコードを追加してみてください。

let name = "森田 彩花";
let age = 30;

console.log(name);
console.log(age);

保存してブラウザを再読み込みすると、コンソールに「森田彩花」「30」と表示されます。name と age という変数に値を入れ、その変数名で値を呼び出した結果です。

letとconst——変数の宣言の2つの方法

JavaScriptで変数を宣言する方法は、現在2つあります。

let は、後から値を変更できる変数を作ります。

let count = 0;
count = 1;        // 値を変えられる
count = count + 1; // 結果は2

const は、最初に入れた値を変更できない変数を作ります。「定数」を作るキーワードです。

const pi = 3.14;
// pi = 3.15;  // ← これはエラーになる

実務でも入門学習でも、まず const で書き、後で値を変えたくなったら let に変える、という方針が定番です。「変えないつもりで書く」ことで、誤って値を上書きしてしまう事故を減らせます。

💡 ポイント 「迷ったら const」と覚えておきましょう。const で書いてみて、「ここの値は後で変える必要がある」とわかったときだけ let に切り替えれば十分です。

📝 補足 古いJavaScriptには var という変数宣言もあります。今でも動きますが、現在の入門・実務では使わないのが一般的です。本コースでは扱いません。古いコードで var を見かけたら「letに近いが古い書き方」と理解してください。

変数名のルール

変数名は次のルールで付けます。

半角英数字とアンダースコア（_）、ドル記号（$）が使える
数字から始められない（1count はNG、count1 はOK）
予約語（if、for、function など）は使えない
半角アルファベットの小文字で始めるのが慣例
複数の単語をつなぐときは、2つ目以降の単語の頭を大文字にする（キャメルケース）

const userName = "佐藤";       // OK
const userAge = 25;            // OK
const isLoggedIn = true;       // OK
// const 1user = ...           // NG：数字始まり
// const user-name = ...       // NG：ハイフン使用

🔰 初学者の方へ 変数名は「自分が後で読み返したときに意味がわかるもの」を選びましょう。a、x、tmp のような短すぎる名前は避け、userName、itemPrice のように何を表すかがわかる名前にする習慣をつけると、後々の自分を助けます。

データ型——値の種類

JavaScriptでは、変数に入れる値に「型（タイプ）」があります。文字列なのか、数値なのか、真偽値なのか、といった区別です。本レッスンでは入門段階で押さえておきたい5つのデータ型を紹介します。

1. 文字列（String）

シングルクォート ' またはダブルクォート " で囲んで書きます。本コースではダブルクォート " で統一します。

const greeting = "こんにちは";
const courseName = "JavaScript基礎";

2. 数値（Number）

整数も小数も、同じ数値型として扱います。

const age = 30;
const price = 1980;
const ratio = 0.75;

3. 真偽値（Boolean）

true（真）または false（偽）の2つだけの型です。条件分岐（次のレッスン）で活躍します。

const isStudent = true;
const isAdmin = false;

4. null

「値が空であること」を意図的に示すための値です。「明示的に何もない」という意味で使います。

let selectedItem = null;

5. undefined

「値がまだ設定されていない」状態を表す値です。変数を宣言しただけで値を入れていないときも undefined になります。

let name;
console.log(name);  // undefined と表示される

null と undefined の違いは混乱しがちですが、入門段階では「nullは意図的な空、undefinedはまだ何も入っていない」と区別しておけば十分です。

typeofで型を確認する

ある値の型を調べたいときは、typeof という演算子が使えます。

console.log(typeof "森田");      // "string"
console.log(typeof 30);          // "number"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object"（歴史的な事情でobjectになる）

最後の null の型が "object" と出るのは、JavaScriptの歴史的な事情によるものです。仕様上の特殊なケースとして覚えておきましょう。

算術演算子——数値の計算

数値同士の計算には、次の演算子が使えます。

演算子	意味	例
`+`	足し算	`3 + 2` → `5`
`-`	引き算	`5 - 2` → `3`
`*`	掛け算	`4 * 3` → `12`
`/`	割り算	`10 / 4` → `2.5`
`%`	余り	`10 % 3` → `1`

const taxRate = 0.10;
const price = 1000;
const total = price + price * taxRate;
console.log(total);  // 1100

比較演算子——値を比べる

2つの値を比べるための演算子です。結果は真偽値（true / false）になります。

演算子	意味
`===`	等しい
`!==`	等しくない
`>`	大きい
`>=`	以上
`<`	小さい
`<=`	以下

console.log(3 === 3);       // true
console.log(3 === "3");     // false（型も比較する）
console.log(5 > 2);         // true
console.log(10 <= 10);      // true

⚠️ 注意 JavaScriptには == という「ゆるい等価比較」もありますが、型の自動変換が起きるため予期しない結果になることがあります（例："3" == 3 は true）。本コースでは型まで含めて比較する === と !== を必ず使います。実務でも === が標準です。

論理演算子——条件を組み合わせる

複数の条件を組み合わせるための演算子です。

演算子	意味
`&&`	かつ（AND）
`\|\|`	または（OR）
`!`	ではない（NOT）

const age = 25;
console.log(age >= 18 && age < 65);  // true（18歳以上かつ65歳未満）
console.log(age < 18 || age >= 65);  // false
console.log(!(age >= 18));           // false（18歳以上の否定）

テンプレートリテラル——読みやすい文字列の組み立て

文字列の中に変数の値を埋め込みたいとき、+ でつなぐ方法もありますが、長くなると読みにくくなります。

const name = "森田 彩花";
const age = 30;
console.log("私の名前は" + name + "、年齢は" + age + "歳です。");

そこで便利なのがテンプレートリテラルです。バッククォート ` で囲み、${変数名} の形で値を埋め込めます。

const name = "森田 彩花";
const age = 30;
console.log(`私の名前は${name}、年齢は${age}歳です。`);

結果はどちらも同じですが、テンプレートリテラルのほうが読みやすく、間違いも減ります。改行もそのまま含められます。

console.log(`これは
複数行にわたる
文字列です`);

💡 ポイント 文字列を組み立てるときは、テンプレートリテラル（バッククォート＋${}）を優先しましょう。シングル・ダブルクォートで囲んだ文字列に + で変数をつなぐ書き方より、ぐっと読みやすくなります。

実習：自己紹介をコンソールに出す

ここまで学んだことを使って、自分のプロフィールをコンソールに出してみましょう。main.js の中身を、次のように書き換えてください（これまでのコードは消して構いません）。

const name = "森田 彩花";
const age = 30;
const hobby = "登山";
const isInstructor = true;

console.log(`名前：${name}`);
console.log(`年齢：${age}歳`);
console.log(`趣味：${hobby}`);
console.log(`講師かどうか：${isInstructor}`);

const yearsToFifty = 50 - age;
console.log(`50歳まであと${yearsToFifty}年です。`);

保存してブラウザを再読み込みし、コンソールを確認してください。5行のメッセージが表示されるはずです。最後の行は変数同士の引き算結果を埋め込んだ例です。

名前や年齢、趣味の値を変えて何度か試してみると、変数の便利さが体感できます。

まとめ

このレッスンでは、以下のことを学びました。

変数は値に名前を付けて使い回す仕組みで、let と const で宣言する
「迷ったら const 」、後で値を変える必要があるときだけ let に切り替える
主要なデータ型は文字列・数値・真偽値・null・undefinedの5つ
typeof で型を確認できる
比較は型まで含めて比べる === と !== を使う
文字列の中に変数を埋め込むときは、テンプレートリテラル（`${変数名}`）が読みやすい

次のレッスンでは、これらの値を使って「条件分岐」と「繰り返し」を書きます。プログラムに判断と反復の力を与えて、変数の中身に応じて違う処理を実行できるようにしましょう。

確認クイズ

このレッスンの理解度をチェックしましょう。