JavaScriptでプログラミングを始める際、変数と定数の理解は避けて通れません。
これらはデータを扱う上で基本となる要素であり、正しく使い分けることでコードの可読性や保守性が向上します。
変数とは？
変数とは、データを一時的に保存しておくための「箱」のようなものです。
例えば、ゲームでプレイヤーの得点を保存したり、ウェブページでユーザーの入力した値を保存したりします。
var
古くから使われている宣言方法で、関数スコープを持ちます。
しかし、ブロックスコープを無視するため、意図しない挙動を引き起こすことがあります。
JS
function exampleVar() {
if (true) {
var message = "Hello, var!";
}
console.log(message); // 出力: Hello, var!
}let
ES6から導入された宣言方法で、ブロックスコープを持ちます。
varの欠点を補い、より直感的なコードを書くことができます。
JS
function exampleLet() {
if (true) {
let message = "Hello, let!";
}
console.log(message); // エラー: message is not defined
}定数とは
定数は、一度値を代入すると再代入ができない変数です。
const
「const」キーワードを使って宣言します。
JS
const PI = 3.14;
PI = 3.1415; // エラー: Assignment to constant variable.ただし、オブジェクトや配列の場合、そのプロパティや要素は変更可能です。
JS
const user = { name: "Alice" };
user.name = "Bob"; // 問題なく実行可能var、let、constの使い分け
- var：互換性のために残されていますが、基本的には使用を避けましょう。
- let：再代入が必要な変数に使用します。ブロックスコープを持つため、安全です。
- const：再代入が不要な変数に使用します。基本的にはこちらを優先しましょう。
変数名のルールとベストプラクティス
変数名の付け方
- 英数字、アンダースコア（_）、ドル記号（$）が使えます。
- 数字で始めることはできません。
- 大文字と小文字は区別されます。
JS
// 良い例：
let userName = "Alice";
let _count = 10;
let $price = 100;
// 悪い例：
let 1stPlayer = "Bob"; // エラー
let user-name = "Charlie"; // エラー
スコープについて
グローバルスコープ
どこからでもアクセス可能な変数。意図しない上書きを避けるため、必要最小限に留めましょう。
JS
var globalVar = "グローバル";
function test() {
console.log(globalVar); // 出力: グローバル
}関数スコープ
関数内でのみアクセス可能な変数。varで宣言された変数が該当します。
JS
function test() {
var localVar = "ローカル";
console.log(localVar); // 出力: ローカル
}
console.log(localVar); // エラー: localVar is not definedブロックスコープ
{}（ブロック）内でのみアクセス可能な変数。letとconstで宣言された変数が該当します。
JS
if (true) {
let blockVar = "ブロック内";
console.log(blockVar); // 出力: ブロック内
}
console.log(blockVar); // エラー: blockVar is not defined
ホイスティング
JavaScriptでは、変数宣言がスコープの先頭に「持ち上げ」られる現象があります。
JS
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: ホイスティングされますが、初期化前にアクセスするとエラーになります。
テンプレートリテラル
変数を文字列に埋め込む際に便利な記法です。バッククォート ` を使います。
JS
let name = "Roa";
console.log(`Hello, ${name}!`); // 出力: Hello, Roa!まとめ
変数と定数の正しい理解と使い分けは、質の高いコードを書くための第一歩です。
特にletとconstを積極的に活用し、スコープやホイスティングの挙動を把握しておきましょう。