【6日でできるJavaScript入門】変数の利用

　JavaScriptでデータを扱う上で欠かせないのが変数です。変数は「数値や文字列などの値を格納するための名前付きの“箱”」と考えられます。本記事では、変数の宣言から代入、表示、そしてスコープ（有効範囲）までを段階的に学びます。

１．変数の宣言

JavaScriptでは let や const を使って変数を宣言します。以下の表で基本を整理しましょう。

キーワード	説明	再代入
`let`	値を後から変更できる変数を宣言	可能
`const`	一度だけ代入し、その後変更しない定数を宣言	不可

1.1. 単一宣言

ファイル名： lesson05-1.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>📥 変数宣言サンプル</title></head>
<body>
  <script>
    let count;     // 数値を入れられる箱を用意
    const name;    // 定数は必ず初期値が必要（実際はエラー）
  </script>
</body>
</html>

コード解説

let count; ：は数値や文字列を格納するための箱を用意
const は宣言と同時に初期化が必要（例では省略しているためエラーになる）

1.2. 複数同時宣言

ファイル名： lesson05-2.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>📦 複数宣言サンプル</title></head>
<body>
  <script>
    let x, y, z;  // カンマ区切りで複数の変数を一度に宣言
    const PI = 3.14, NAME = '太郎';
  </script>
</body>
</html>

コード解説

カンマで区切ることで複数の let や const を同時に宣言可能
const は初期値を各々指定する必要がある

２．変数への代入

変数を宣言したら、= を使って値を代入します。数値と文字列それぞれを見てみましょう。

2.1. 数値の代入

ファイル名： lesson05-3.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🔢 数値代入サンプル</title></head>
<body>
  <script>
    let a;      // 宣言
    a = 5;      // 数値を代入
    console.log(a); // 出力：5
  </script>
</body>
</html>

デバックコンソールの出力

2.2. 文字列の代入

ファイル名： lesson05-4.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🔤 文字列代入サンプル</title></head>
<body>
  <script>
    let greeting = 'こんにちは'; // 宣言と代入を同時に実行
    console.log(greeting);
  </script>
</body>
</html>

デバックコンソールの出力

こんにちは

３．変数の表示

　代入した値を利用するには、変数名をそのまま式に書きます。ここでは alert() と console.log() を使った表示例を見てみましょう。

3.1. alertで表示

ファイル名： lesson05-5.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>💡 alert表示</title></head>
<body>
  <h3>問題：15+32は？</h3>
  <button onclick="showAnswer();">→解答を見る</button>
  <script>
    function showAnswer() {
      let answer = 47;   // 変数宣言と代入
      alert(answer);      // アラートで数値を表示
    }
  </script>
</body>
</html>

操作結果

ボタンをクリックすると「47」がアラート表示される

3.2. alertで文字列表示

ファイル名： lesson05-6.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🏔️ 文字列表示</title></head>
<body>
  <h3>問題：世界一高い山は？</h3>
  <button onclick="showAnswer();">→解答を見る</button>
  <script>
    function showAnswer() {
      let answer = 'エベレスト';
      alert(answer);
    }
  </script>
</body>
</html>

操作結果

ボタンをクリックすると「エベレスト」がアラート表示される。

４．グローバル変数とローカル変数

変数の有効範囲（スコープ）は、宣言場所によって異なります。

種類	宣言場所	有効範囲
グローバル変数	関数外で `let`/`const`	スクリプト全体
ローカル変数	関数内部で `let`	その関数の中だけ

let globalValue = 100;  // グローバル変数

function testScope() {
  let localValue = 50;  // ローカル変数
  console.log(globalValue); // 100
  console.log(localValue);  // 50
}
testScope();
console.log(localValue);    // ReferenceError

解説

関数外で宣言した globalValue はどこからでも参照可能
関数内で宣言した localValue は testScope() の外では参照できずエラーになる

まとめ

　ここでは、変数の宣言（let/const）、値の代入（数値・文字列）、表示方法（alert/console.log）、およびスコープ（グローバル変数とローカル変数）を学びました。これらの基礎知識を活用し、演算子や型変換を学習して、より高度なデータ操作にチャレンジしましょう。