変数は、プログラムの中でデータを保存し、操作するための基本的な単位です。
適切な変数の使い方を理解することは、効率的で保守性の高いコードを書くために重要です。
この記事では初心者から中級者までの開発者が、JavaScriptの変数を正しく理解し、活用できるようになることを目指します。
学習を進めることで、より洗練されたウェブアプリケーションを作成するためのスキルを身に付けましょう。
変数
変数は、データを格納するための名前付きの記憶領域です。
プログラムが実行される間にデータを格納し、そのデータを操作するために使用されます。
変数を使用することで、再利用可能で読みやすいコードを書くことができます。
JavaScriptでは、変数を宣言するために var, let, const の3つのキーワードを使用します。
varの特徴と使い方
var は、JavaScriptでの変数宣言において最も古くから使われているキーワードですが、古い書き方となったため、現在はあまり使用を推奨されておりません。
letの特徴と使い方
let は、ES6（ECMAScript 2015）で導入されたキーワードで、ブロックスコープを持ちます。
letで宣言された変数は、ブロックスコープを持ちます。
これは、変数がブロック（中括弧 {}）内でのみ有効であることを意味します。
function example() {
let x = 10;
if (true) {
let y = 20;
console.log(y); // 20
}
console.log(x); // 10
console.log(y); // エラー (yはブロックスコープ内でのみ有効)
}
example();
letは同じスコープ内で、letを使って同じ変数名を再宣言することはできません。
let x = 10;
let x = 20; // エラー: 'x' has already been declared
ただし、letで宣言された変数は再代入が可能で、新しい値を割り当てることができます。
let b = 70;
b = 80; // 再代入
console.log(b); // 80
constの特徴と使い方
constもES6で導入された変数宣言の方法で、主に定数の宣言に使用されます。
constにはletと同様の特徴に加えて、一度値が割り当てられると、再代入することはできません。
function example() {
let x = 10;
if (true) {
let y = 20;
console.log(y); // 20
}
console.log(x); // 10
console.log(y); // エラー (yはブロックスコープ内でのみ有効)
}
example();
constもletと同様にブロックスコープを持ちます。
let x = 10;
let x = 20; // エラー: 'x' has already been declared
constで宣言された変数は再代入ができないため、一度値を設定すると、その値を変更することはできません。
const d = 110;
d = 120; // エラー: Assignment to constant variable.
constで宣言されたオブジェクトや配列の内部プロパティや要素は変更可能です。
これは、変数自体の再代入が禁止される一方で、その内容の変更が可能であることを意味します。
const person = { name: "John" };
person.name = "Doe"; // OK
console.log(person.name); // "Doe"
person = { name: "Jane" }; // エラー: Assignment to constant variable.変数の初期化
JavaScriptで変数を初期化することは、変数に初期値を設定することを意味します。
変数の初期化は、プログラムが予期せぬ動作をしないようにするために非常に重要です。
変数は宣言と同時に初期化することができます。
以下は、var、let、constを使用した変数の初期化の例です。
varの初期化
var x = 10;
var a;
a = 40;varは宣言後に初期化することも可能です。
letの初期化
let y = 20;
let b;
b = 50;letは宣言後に初期化することも可能です。
constの初期化
const z = 30;constは宣言と同時に初期化しなければなりません。
初期化の重要性
変数を初期化せずに使用すると、予測できない動作を引き起こす可能性があります。
未初期化の変数はデフォルトでundefinedという値を持ちます。
let c;
console.log(c); // undefined
undefinedの変数に対して操作を行うと、エラーや予期せぬ結果を生じることがあります。
そのため、変数を宣言すると同時に初期化することが推奨されます。
初期化時の注意点
1.意図した初期化であること
変数を適切に初期化し、意図した値がセットされていることを確認します。
これは特に、未初期化の変数がデフォルトでundefinedを持つ場合に重要です。
2.型の確認
JavaScriptは動的型付け言語であるため、初期化時に変数の型を確認し、一貫性を保つことが重要です。
3.constの使用
変更されることがないと分かっている値には、constを使用して不変性を確保します。
スコープ
スコープとは、プログラム内で変数や関数が有効な範囲のことを指します。
スコープの概念を理解することで、変数がどこでアクセス可能か、そしてそのライフタイム（有効期間）がどうなるかを理解することができます。
JavaScriptには、グローバルスコープ、ローカルスコープ、ブロックスコープ、関数スコープの主に4つのスコープがあります。
グローバルスコープ
グローバルスコープは、スクリプト全体からアクセス可能な変数や関数を指します。
グローバルスコープに宣言された変数は、どの関数やブロックからも参照でき、スクリプトの開始から終了まで有効です。
var globalVar = "I'm global";
function example() {
console.log(globalVar); // "I'm global"
}
example();
console.log(globalVar); // "I'm global"
ローカルスコープ
ローカルスコープは、関数やブロック内でのみアクセス可能な変数や関数を指します。
関数スコープとブロックスコープに分類されます。
ローカルスコープに宣言された変数は、その変数が宣言された関数またはブロックが終了するまで有効です。
関数スコープ
関数スコープは、関数内で宣言された変数がその関数内でのみ有効であることを意味します。
varで宣言された変数は関数スコープを持ちます。
function exampleFunction() {
var localVar = "I'm local";
console.log(localVar); // "I'm local"
}
exampleFunction();
console.log(localVar); // エラー: localVar is not defined
この例では、localVarは関数exampleFunction内でのみアクセス可能であり、関数外からは参照できません。
ブロックスコープ
ブロックスコープは、中括弧 {} で囲まれたブロック内で宣言された変数がそのブロック内でのみ有効であることを意味します。
letとconstで宣言された変数はブロックスコープを持ちます。
if (true) {
let blockVar = "I'm block scoped";
console.log(blockVar); // "I'm block scoped"
}
console.log(blockVar); // エラー: blockVar is not defined
この例では、blockVarはifブロック内でのみアクセス可能であり、ブロック外からは参照できません。
変数のホスティング
変数のホスティングとは、JavaScriptの実行時に変数宣言がコードの実行前に処理される仕組みのことです。
ただし、var、let、constではその挙動が異なります。
具体的には、変数の宣言部分がスコープの最初に「見なされる」だけで、値の初期化は元の位置で行われます。
ホスティングは、コードの実行順序に影響を与え、予期しない動作を引き起こすことがあるため、理解しておくことが重要です。
varのホスティング
varで宣言された変数は、その宣言がスコープの先頭に移動したかのように扱われますが、値の初期化は実際のコードの位置で行われます。
このため、変数が宣言される前に参照するとundefinedとなります。
console.log(x); // undefined
var x = 5;
console.log(x); // 5
この例では、変数xがvarで宣言されているため、コード実行時にxはスコープの先頭で宣言されたとみなされますが、初期化は行われていないためundefinedが出力されます。
その後、5に初期化されます。
letとconstのホスティング
letおよびconstで宣言された変数も宣言部分はスコープの先頭に移動しますが、実際の宣言が行われる位置まで初期化されません。
このため、その間の期間は「Temporal Dead Zone（TDZ）」と呼ばれ、変数にアクセスするとReferenceErrorが発生します。
console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;
console.log(y); // 10
console.log(z); // ReferenceError: Cannot access 'z' before initialization
const z = 15;
console.log(z); // 15
この例では、変数yとzがletとconstで宣言されているため、TDZ期間中にアクセスするとReferenceErrorが発生します。
変数の命名規則
JavaScriptにおける変数名は、コードの可読性と保守性を向上させるために重要です。
適切な名前付けのルールを守ることで、誰が見ても理解しやすいコードを作成することができます。
JavaScriptの変数のルール
JavaScriptでは、変数名にいくつかの具体的なルールがあります。
これらのルールに従うことで、コードのエラーを防ぎ、標準的なコーディングスタイルを保つことができます。
1. 変数名は文字、アンダースコア(_)、またはドル記号($)で始める
変数名は必ず文字（a-z、A-Z）、アンダースコア(_)、またはドル記号($)で始めなければなりません。数字で始めることはできません。
let name; // 有効
let _private; // 有効
let $dollar; // 有効
let 1number; // 無効
2. 変数名にはアルファベット、数字、アンダースコア(_)、ドル記号($)を使用できる
変数名の2文字目以降には、アルファベット（a-z、A-Z）、数字（0-9）、アンダースコア(_)、ドル記号($)を使用することができます。
let variable1; // 有効
let _var2; // 有効
let $var3; // 有効
let var!name; // 無効
3. 予約語を変数名として使用しない
JavaScriptの予約語は変数名として使用することができません。予約語には、制御フロー、宣言、および一般的なキーワードが含まれます。
let let; // 無効
let const; // 無効
let return; // 無効
let function; // 無効
4. 大文字と小文字を区別する
JavaScriptでは、変数名は大文字と小文字を区別します。したがって、同じ名前でも大文字と小文字の違いがあると別の変数として扱われます。
let myVariable = "Hello";
let myvariable = "World";
console.log(myVariable); // "Hello"
console.log(myvariable); // "World"
5. 特殊文字を避ける
変数名には特殊文字を使用しないようにします。特殊文字を使用すると、コードの読みやすさと保守性が低下します。
let myVar!able; // 無効
let my@variable; // 無効
let my#variable; // 無効
6. 意味のある名前を使用する
変数名は、その変数が何を表しているかを明確にするために意味のある名前を使用します。これはコードの可読性と保守性を向上させます。
let totalItems = 10; // 意味のある名前
let x = 10; // 意味が不明瞭
JavaScriptの命名規則
以下はJavaScriptの変数に特化した命名規則について説明します。
1. キャメルケース（camelCase）の使用
JavaScriptでは、一般的にキャメルケース（camelCase）が使用されます。これは、最初の単語は小文字で始まり、次の単語の最初の文字を大文字にする方法です。
let totalItems = 5;
let userName = "Alice";
let isActive = true;
2. 意味のある名前を付ける
変数名はその役割や内容を明確に示すものにしましょう。短くても意味が通じるようにすることがポイントです。
let userAge = 30;
let totalPrice = 100;
let userFirstName = "John";
3. ブール値にはis、has、canを使う
ブール値を表す変数には、is、has、canなどのプレフィックスを使用することで、変数が真偽値であることを明確に示します。
let isLoggedIn = true;
let hasItems = false;
let canEdit = true;
4. 数値には意味のあるプレフィックスを付ける
数値を表す変数には、num、count、totalなどのプレフィックスを付けることで、変数が数値であることを示します。
let numItems = 10;
let itemCount = 15;
let totalAmount = 200;
5. 定数には大文字とアンダースコアを使用する
定数は変更されない値を保持するため、他の変数と区別するために全て大文字で書き、単語の区切りにアンダースコアを使用します。
const MAX_USERS = 100;
const DEFAULT_TIMEOUT = 3000;
const API_URL = "https://api.example.com";
6. 一貫性を保つ
プロジェクト全体で一貫した命名規則を使用することが重要です。例えば、チームで決めた命名規則に従うことで、コードの可読性と理解が向上します。
// 良い例: 一貫した命名規則
let userFirstName = "Alice";
let userLastName = "Smith";
let userAge = 25;
// 悪い例: 一貫していない命名規則
let userFirstName = "Alice";
let UserLastName = "Smith";
let ageOfUser = 25;
7. コンテキストに依存する名前を避ける
変数名にコンテキストに依存する情報を含めないようにしましょう。
変数名はその役割を独立して明確にするべきです。
// 良い例
let productName = "Laptop";
let productPrice = 1500;
// 悪い例: コンテキストに依存する名前
let name = "Laptop"; // 何の名前か不明
let price = 1500; // 何の価格か不明
まとめ
JavaScriptの変数はプログラムの基礎であり、適切な変数管理はコードの可読性と保守性を高めます。
var、let、constの違いや、ホスティングの概念を理解することで、変数のスコープとライフタイムを正しく扱えるようになります。
変数の命名規則を守ることで、他の開発者や将来の自分にとって分かりやすいコードを書くことができます。
総じて、変数の適切な使用は、より安全で効率的なプログラム開発に寄与します。
