【第4回】変数を使いこなそう！データの箱を理解する | JavaScript入門

はじめに

前回の記事「初めてのJavaScript！コンソールに「Hello, World!」を表示してみよう」では、プログラミングの世界への第一歩として、JavaScriptで「Hello, World!」をコンソールに表示する方法を学びました。自分の書いたコードが実際に動作するのを確認できた時の感動は、きっと忘れられないものになったのではないでしょうか。これで、あなたはJavaScriptのコードを書き、その結果を自分で確認できる基本的なスキルを身につけました。

しかし、実際のプログラムでは、「Hello, World!」のような静的なメッセージを表示するだけでは不十分です。ユーザーの名前を入力してもらったり、計算結果を一時的に保存したり、Webサイトの訪問者数をカウントしたりと、プログラムは様々な「データ」を扱います。これらのデータを一時的に記憶し、必要に応じて取り出したり、変更したりするための仕組みが不可欠です。

そこで登場するのが、今回のテーマである「変数（Variable）」です。変数は、プログラミングにおける最も基本的な概念の一つであり、データを格納するための「箱」のようなものだと考えると分かりやすいでしょう。この箱に名前をつけ、様々な種類のデータを自由に出し入れすることで、プログラムはより柔軟に、そして賢く動作するようになります。

本記事では、JavaScriptにおける変数の役割、宣言方法、値の代入、そして変数が保持できるデータの種類（データ型）について、初心者の方でも確実に理解できるよう、具体例を豊富に交えながら丁寧に解説していきます。変数をマスターすることは、JavaScriptを使った複雑なプログラムを構築するための強固な土台となります。

このガイドを読み終える頃には、あなたはプログラムの中でデータを自由に操るための基本的なスキルを身につけ、より実践的なJavaScriptの世界へと足を踏み入れているはずです。Ping Tech Blogと一緒に、プログラミングの次の扉を開きましょう！

変数とは？データを格納する「箱」の概念

変数の役割と重要性

プログラムは、様々な処理を行うためにデータを必要とします。例えば、ユーザーが入力した氏名、商品の価格、計算結果、現在の時刻、Webページのスクロール位置など、プログラムが扱うデータは多種多様です。これらのデータを一時的に保存し、後で参照したり、変更したりするために「変数」が使われます。

変数を理解するための最も分かりやすい例えは、「データを格納するための名前付きの箱」です。

この箱には、以下のような特徴があります。

• 名前がある: 箱にはそれぞれユニークな名前（変数名）が付けられます。この名前を使って、箱の中のデータを識別したり、取り出したりします。例えば、「ユーザーの名前」を保存する箱にはuserName、「商品の価格」を保存する箱にはproductPriceといった名前を付けることができます。
• データが入れられる: 箱の中には、数値、文字列、真偽値（はい/いいえ）など、様々な種類のデータを格納できます。
• 中身を入れ替えられる: 一度箱にデータを入れた後でも、別の新しいデータに中身を入れ替えることができます。これが「変数」と呼ばれるゆえんです（「変わる数」）。

プログラムにおいて変数がなぜ重要なのかというと、データが固定ではなく、状況に応じて変化するからです。例えば、ゲームのスコア、チャットアプリのメッセージ、ECサイトのカート内の商品数など、これらはすべてプログラムの実行中に変化するデータであり、変数がなければこれらを扱うことはできません。変数を活用することで、プログラムは柔軟性と動的な振る舞いを持つことができるのです。

JavaScriptでの変数の宣言と値の代入

JavaScriptで変数を使うには、まず「変数を宣言する」という手順が必要です。これは、「これからこの名前の箱を使いますよ」とプログラムに伝える作業です。

変数の宣言方法：letとconst

JavaScriptでは、変数を宣言するために主にletとconstという2つのキーワードを使用します。以前はvarというキーワードも使われていましたが、現代のJavaScript開発ではletとconstが推奨されています。

1. letキーワード（再代入可能な変数） letは、宣言後に値を再代入（変更）できる変数を定義するために使います。プログラムの途中で値が変わる可能性があるデータ（例: ユーザーの年齢、スコア、カウントなど）に最適です。

   // 変数名を「message」として宣言
   let message;
   
   // 宣言した変数に値を代入（箱にデータを入れる）
   message = "Hello, JavaScript!";
   
   // コンソールに出力して確認
   console.log(message); // "Hello, JavaScript!" と表示される
   
   // 変数の値を変更（再代入）
   message = "Good Morning!";
   console.log(message); // "Good Morning!" と表示される
   ```let`で宣言された変数は、同じスコープ内（後で詳しく学びます）で
   同じ名前で再度宣言することはできません。
   これにより、意図しない変数の上書きを防ぎ、コードの安全性が高まります。
   
   ```javascript
   let greeting = "こんにちは";
   // let greeting = "こんばんは"; // エラーになる！ (SyntaxError: 'greeting' has already been declared)

2. constキーワード（再代入不可能な変数：定数） constは、一度値を代入したら、その後は値を変更できない変数を定義するために使います。このような変数を「定数（Constant）」と呼びます。プログラムの実行中に値が変わらないデータ（例: 円周率、固定のメッセージ、設定値など）に最適です。

   // 変数名を「pi」として宣言し、同時に値を代入
   const pi = 3.14159;
   
   console.log(pi); // 3.14159 と表示される
   
   // pi = 3.14; // エラーになる！ (TypeError: Assignment to constant variable.)
   // constで宣言した変数は値を変更できない
   ```const`で宣言した変数には、
   **必ず宣言と同時に値を代入する必要があります。**
   値を代入せずに`const`変数だけを宣言しようとするとエラーになります。
   
   ```javascript
   // const appName; // エラーになる！ (SyntaxError: Missing initializer in const declaration)

letとconst、どちらを使うべきか？

現代のJavaScript開発では、基本的にはconstを使い、値が変更される可能性がある場合にのみletを使うという考え方が推奨されています。

• constを優先する理由:
  • コードの意図が明確になる: 「この変数の値は変わらない」ということが一目でわかるため、コードの可読性が向上します。
  • バグの発生を抑制: 意図しない値の変更を防ぐことで、プログラムのバグを減らすことができます。

最初は少し戸惑うかもしれませんが、この習慣を身につけることで、より堅牢で理解しやすいJavaScriptコードを書けるようになります。

変数名（識別子）のルールと命名規則

変数に付ける名前を「変数名」または「識別子（Identifier）」と呼びます。変数名には、JavaScriptで定められたいくつかのルールがあります。

• 使用できる文字: 半角英数字、アンダースコア（_）、ドル記号（$）が使えます。
• 先頭の文字: 数字で始めることはできません（例: 1stNameはNG）。
• 予約語の使用不可: JavaScriptのキーワード（let, const, function, ifなど）や予約語は変数名として使えません。
• 大文字と小文字の区別: JavaScriptは大文字と小文字を区別します（ケースセンシティブ）。userNameとusernameは別の変数として扱われます。

一般的な命名規則（慣習）:

• キャメルケース（camelCase）: 最初の単語は小文字で始め、2つ目以降の単語の先頭を大文字にする方法です。JavaScriptではこれが最も一般的な命名規則です。
  • 例: userName, productPrice, calculateTotalPrice
• アンダースコア（snake_case）: 単語間をアンダースコアで繋ぐ方法です。他の言語でよく使われますが、JavaScriptでは定数名以外ではあまり使われません。
  • 例: user_name, product_price
• アッパーケーススネークケース（UPPER_SNAKE_CASE）: すべて大文字で、単語間をアンダースコアで繋ぐ方法です。constで宣言された定数の中でも、特に「プログラム全体で共通して使われる、変更されない値」に対して使われることが多いです。
  • 例: MAX_ITEMS, API_KEY

変数名は、その変数にどのようなデータが格納されているのかを一目で理解できるような、意味のある名前を付けることが非常に重要です。例えば、xやaのような汎用的な名前ではなく、userCountやpageTitleのように具体的な名前をつけましょう。これにより、コードの可読性が大幅に向上し、他の開発者（そして未来の自分）がコードを理解しやすくなります。

JavaScriptのデータ型：変数に格納できるデータの種類

変数には、数値、文字列、真偽値など、様々な種類のデータを格納できます。JavaScriptには、これらのデータの種類を区別するための「データ型」という概念があります。データ型を理解することは、プログラムがデータをどのように扱うかを理解する上で非常に重要です。

JavaScriptの主なデータ型には、以下のものがあります。

1. 文字列（String）

テキストデータ（文字の並び）を扱うための型です。シングルクォーテーション（'）またはダブルクォーテーション（"）で囲んで記述します。

let userName = "山田太郎"; // ダブルクォーテーション
let greeting = 'こんにちは！'; // シングルクォーテーション

console.log(userName);
console.log(greeting);

let message = "JavaScriptの学習は楽しい！";
console.log(message);

// 文字列の結合もできます
let fullName = "田中" + " " + "花子";
console.log(fullName); // "田中 花子"

2. 数値（Number）

整数や小数を扱うための型です。クォーテーションで囲まずにそのまま記述します。

let age = 30; // 整数
let price = 1980; // 整数
let pi = 3.14; // 小数

console.log(age);
console.log(price);
console.log(pi);

// 数値は計算ができます
let total = 100 + 50 * 2;
console.log(total); // 200

3. 真偽値（Boolean）

true（真）またはfalse（偽）の2つの値のみを持つ型です。条件分岐（「もし〜ならば」という処理）で非常に頻繁に使われます。

let isLoggedIn = true; // ログインしている状態
let hasPermission = false; // 権限がない状態

console.log(isLoggedIn);
console.log(hasPermission);

// 条件式の結果も真偽値になります
console.log(10 > 5); // true
console.log(5 === 10); // false (===は値と型が等しいかを比較する演算子)

4. undefined（未定義）

変数を宣言したものの、まだ値を代入していない場合に自動的に設定される特殊な値です。

let myVariable; // 値を代入していない
console.log(myVariable); // undefined と表示される

5. null（ヌル：値がないことを明示）

「値が存在しない」ことを意図的に示すための特殊な値です。undefinedとは異なり、開発者が明示的に「値がない」と設定する場合に用いられます。

let selectedItem = null; // 何も選択されていない状態
console.log(selectedItem); // null と表示される

6. オブジェクト（Object）と配列（Array）

これらはより複雑なデータを扱うための型で、複数の値をまとめて格納できます。JavaScriptの非常に重要な概念ですが、次回の記事以降で詳しく学びます。

• オブジェクト: 複数の「キー（名前）」と「値」のペアをまとめたもの。

  let user = {
      name: "山田",
      age: 30
  };
  console.log(user); // { name: '山田', age: 30 }

• 配列: 複数の値を順番に並べたリスト。

  let colors = ["赤", "緑", "青"];
  console.log(colors); // [ '赤', '緑', '青' ]

typeof演算子でデータ型を確認する

typeof演算子を使うと、変数に格納されているデータの型を文字列として確認することができます。デバッグ時や、変数の型によって処理を変えたい場合に便利です。

let name = "Alice";
let age = 25;
let isActive = true;
let data = null;
let notAssigned;

console.log(typeof name); // "string"
console.log(typeof age); // "number"
console.log(typeof isActive); // "boolean"
console.log(typeof data); // "object" （※nullは歴史的な理由により"object"と表示されますが、プリミティブ型です）
console.log(typeof notAssigned); // "undefined"

変数を使った簡単な計算と文字列操作

変数の概念とデータ型を理解したところで、実際に変数を使って簡単な計算や文字列操作をしてみましょう。

数値の計算

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>変数を使った計算</title>
</head>
<body>
    <h1>変数を使った計算</h1>
    <p>コンソールを確認してください。</p>

    <script>
        // 商品の価格を変数に格納
        const applePrice = 150; // りんご1個150円
        const orangePrice = 120; // オレンジ1個120円

        // 購入数を変数に格納
        let appleCount = 3; // りんご3個
        let orangeCount = 2; // オレンジ2個

        // 合計金額を計算
        let totalCost = (applePrice * appleCount) + (orangePrice * orangeCount);

        console.log("りんごの合計金額:", applePrice * appleCount, "円"); // りんごの合計金額: 450 円
        console.log("オレンジの合計金額:", orangePrice * orangeCount, "円"); // オレンジの合計金額: 240 円
        console.log("合計支払金額:", totalCost, "円"); // 合計支払金額: 690 円

        // 購入数を変更して再計算
        appleCount = 5; // りんごを5個に増やす
        totalCost = (applePrice * appleCount) + (orangePrice * orangeCount); // totalCostを再計算

        console.log("購入数を変更後の合計支払金額:", totalCost, "円"); // 購入数を変更後の合計支払金額: 990 円
    </script>
</body>
</html>

この例では、constで固定の価格を、letで変更可能な購入数を定義し、それらを使って合計金額を計算しています。let変数であるappleCountの値を変更することで、totalCostも再計算される様子が確認できます。

文字列の結合

文字列の結合には、+演算子を使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>変数を使った文字列操作</title>
</head>
<body>
    <h1>変数を使った文字列操作</h1>
    <p>コンソールを確認してください。</p>

    <script>
        let firstName = "太郎";
        let lastName = "山田";

        // 名前を結合
        let fullName = lastName + " " + firstName;
        console.log("フルネーム:", fullName); // フルネーム: 山田 太郎

        let greeting = "こんにちは、" + fullName + "さん！";
        console.log(greeting); // こんにちは、山田 太郎さん！

        // 数値と文字列を結合すると、数値が文字列に変換されます
        let product = "ペン";
        let quantity = 5;
        let orderMessage = "ご注文は" + product + "が" + quantity + "個です。";
        console.log(orderMessage); // ご注文はペンが5個です。
    </script>
</body>
</html>

文字列と数値を+演算子で結合すると、数値が自動的に文字列に変換されて結合される点に注意してください。

まとめ：変数をマスターし、データ操作の基礎を築こう！

本記事では、プログラミングにおけるデータの「箱」である「変数」について、その概念から具体的な使い方までを深く掘り下げて解説しました。

• 変数とは: データを一時的に格納するための名前付きの箱であり、プログラムが動的な振る舞いをするために不可欠な要素です。
• 変数の宣言方法:
  • let: 値を後から変更できる変数を宣言します。
  • const: 一度値を代入したら変更できない定数を宣言します。基本的にはconstを優先し、変更が必要な場合にのみletを使用しましょう。
• 変数名のルールと命名規則: 意味のあるキャメルケースで命名し、コードの可読性を高めることが重要です。
• JavaScriptのデータ型: 文字列（String）、数値（Number）、真偽値（Boolean）、undefined、nullといった基本的なデータ型を理解しました。
• 実践: console.log()を使って変数の中身を確認しながら、簡単な計算や文字列操作を行いました。

変数を理解し、使いこなせるようになることは、JavaScriptプログラミングの非常に強固な基礎となります。これからの学習で、あなたは様々なデータを変数に格納し、それらを組み合わせて複雑な処理を作り上げていくことになります。

次回の記事「計算もお任せ！演算子の種類と使い方」では、今回学んだ変数を使って、さらに多様な計算や比較を行うための「演算子」について詳しく解説します。プログラムに「判断」や「計算」をさせるための重要なステップです。

Ping Technologiesは、あなたのエンジニアとしての成長と、Web開発の世界での輝かしい活躍を心から応援しています！