JavaScriptの変数・定数について詳しく解説【基本】

●目次

JavaScriptでプログラミングを始める際、変数と定数の理解は避けて通れません。これらはデータを扱う上で基本となる要素であり、正しく使い分けることでコードの可読性や保守性が向上します。本記事では、JavaScriptの変数・定数について、その違いや使い方、注意点を詳しく解説します。

変数とは？

変数とは、データを一時的に保存しておくための「箱」のようなものです。

例えば、ゲームでプレイヤーの得点を保存したり、ウェブページでユーザーの入力した値を保存したりします。

var

古くから使われている宣言方法で、関数スコープを持ちます。

しかし、ブロックスコープを無視するため、意図しない挙動を引き起こすことがあります。

function exampleVar() {
  if (true) {
    var message = "Hello, var!";
  }
  console.log(message); // 出力: Hello, var!
}

let

ES6から導入された宣言方法で、ブロックスコープを持ちます。

varの欠点を補い、より直感的なコードを書くことができます。

function exampleLet() {
  if (true) {
    let message = "Hello, let!";
  }
  console.log(message); 　// エラー: message is not defined
}

定数とは

定数は、一度値を代入すると再代入ができない変数です。

const

「const」キーワードを使って宣言します。

const PI = 3.14;
PI = 3.1415; 　　　　　　　　　　// エラー: Assignment to constant variable.

ただし、オブジェクトや配列の場合、そのプロパティや要素は変更可能です。

const user = { name: "Alice" };
user.name = "Bob"; 　　　　　　　// 問題なく実行可能

var、let、constの使い分け

var：互換性のために残されていますが、基本的には使用を避けましょう。
let：再代入が必要な変数に使用します。ブロックスコープを持つため、安全です。
const：再代入が不要な変数に使用します。基本的にはこちらを優先しましょう。

変数名のルールとベストプラクティス

変数名の付け方

英数字、アンダースコア（_）、ドル記号（$）が使えます。
数字で始めることはできません。
大文字と小文字は区別されます。

// 良い例：

let userName = "Alice";
let _count = 10;
let $price = 100;


//　悪い例：

let 1stPlayer = "Bob"; // エラー
let user-name = "Charlie"; // エラー

スコープについて

グローバルスコープ

どこからでもアクセス可能な変数。意図しない上書きを避けるため、必要最小限に留めましょう。

var globalVar = "グローバル";
function test() {
  console.log(globalVar); // 出力: グローバル
}

関数スコープ

関数内でのみアクセス可能な変数。varで宣言された変数が該当します。

function test() {
  var localVar = "ローカル";
  console.log(localVar); 　　　// 出力: ローカル
}
console.log(localVar); 　　　　// エラー: localVar is not defined

ブロックスコープ

{}（ブロック）内でのみアクセス可能な変数。letとconstで宣言された変数が該当します。

if (true) {
  let blockVar = "ブロック内";
  console.log(blockVar);        // 出力: ブロック内
}
console.log(blockVar);          // エラー: blockVar is not defined

ホイスティング

JavaScriptでは、変数宣言がスコープの先頭に「持ち上げ」られる現象があります。

console.log(hoistedVar); 　// 出力: undefined
var hoistedVar = "This is hoisted";


console.log(notHoistedLet); 　// エラー: Cannot access 'notHoistedLet' before initialization
let notHoistedLet = "This is not hoisted";

var: 宣言と初期化が分離され、宣言のみがホイスティングされます。
let/const: ホイスティングされますが、初期化前にアクセスするとエラーになります。

テンプレートリテラル

変数を文字列に埋め込む際に便利な記法です。バッククォート ` を使います。

let name = "Roa";
console.log(`Hello, ${name}!`); 　　　// 出力: Hello, Roa!

まとめ

変数と定数の正しい理解と使い分けは、質の高いコードを書くための第一歩です。特にletとconstを積極的に活用し、スコープやホイスティングの挙動を把握しておきましょう。