varを卒業しよう！JavaScript初心者向けconstとletの活用ガイド🧐

公開日 : 2023.10.23 最終更新日 : 2023.12.01

コーディング

こんにちは、AndHAコーディング部です。

JavaScriptを学ぶ上で、変数の宣言に使用するvar、let、constの違いは非常に基本的でありその理解がコードの品質に直結します。
この記事では、古くからあるvarの卒業を提案し、constとletの利点とその使用方法について詳しく解説していきます。

1. varの問題点とは？

JavaScriptのプログラミングにおいて、変数の宣言は基本中の基本です。
しかし、varでの変数宣言は現代のJavaScriptのスタンダードからは外れてきています。
では、具体的にvarにはどのような問題点があるのでしょうか。

ブロックスコープを持たない

varはブロックスコープを持たないため、if文やfor文などの{}で囲まれたブロック内で変数を宣言しても、ブロックの外からその変数にアクセスすることができます。
これにより、意図しない変数の上書きや参照が生じ、バグの原因となります。

function testVarScope() {
    if (true) {
        var x = 10;  // varで宣言された変数
        console.log("Inside block:", x);  // 出力: Inside block: 10
    }
    console.log("Outside block:", x);  // 出力: Outside block: 10
}

testVarScope();

再宣言を許容

varは同じ変数名での再宣言を許容してしまいます。
この特性は、大きなプロジェクトや複数人での開発時に、変数名の衝突や意図しない変数の上書きを引き起こすリスクがあります。

var y = 20;
console.log(y);  // 出力: 20

var y = 30;  // 同じ変数名で再宣言
console.log(y);  // 出力: 30

2. constとletの導入

JavaScriptの進化は絶え間なく、その中でES6（ECMAScript 2015）というバージョンは特に注目されるものでした。
このバージョンでは、新しい変数宣言の方法としてconstとletが導入され、JavaScriptのコードの書き方に革命をもたらしました。

varにはいくつかの問題点がありましたが、constとletの導入により、これらの問題を効果的に解消することができるようになりました。
これらは、変数の再代入やスコープの扱い方に大きな違いを持っています。
const: このキーワードで宣言された変数は、再代入が不可能です。
これにより、特定の値が変更されることなく保持されることを保証します。
例えば、変更されることがない設定値や定数を保持するのに適しています。
let: このキーワードで宣言された変数は、再代入が可能です。
しかし、varとは異なり、ブロックスコープを持っています。
これにより、forループやif文などのブロック内で変数を制限することが容易になりました。

ES6の導入により、開発者は変数の振る舞いをより正確にコントロールできるようになりました。
変数のスコープや再代入の振る舞いを理解し、適切な変数宣言方法を選択することで、バグを減少させ、コードの可読性を向上させることができます。

constやletについては次のセクションで詳しく解説していきます。

3. constの正しい使い方

constは、ES6から導入された変数宣言のキーワードの一つで、再代入が不可能な変数を宣言する際に使用します。
これにより、安全なコードを書くための助けとなります。

再代入が不可能

constで宣言された変数は、後から値を変更することができません。

const pi = 3.14;
// pi = 3.14159;  // エラー: Assignment to constant variable.

中身の変更は可能

しかし、constで宣言された配列やオブジェクトの場合、その中身（要素やプロパティ）は変更可能です。

const colors = ["red", "blue", "green"];
colors.push("yellow");  // 追加は可能
console.log(colors);  // 出力: ["red", "blue", "green", "yellow"]

const person = { name: "Alice", age: 25 };
person.age = 26;  // プロパティの変更は可能
console.log(person);  // 出力: { name: "Alice", age: 26 }

安全性の向上

constを積極的に使用することで、コードの安全性を向上させることができます。
変数が意図せず再代入されることなく、一貫してその値を利用する場面ではconstを使用することをおすすめします。

4. letの活用例

JavaScriptのES6から導入されたletは、varの代替として登場しました。
letの最も重要な特性は、再代入が可能であることと、ブロックスコープを持っていることです。

再代入が可能

変数の値を後から変更する必要がある場合、letを使用することで簡単に再代入を行うことができます。

let count = 1;
count = 2; // 再代入が可能
console.log(count);  // 出力: 2

ブロックスコープを持つ

letはブロックスコープを持っているため、if文やfor文などの{}で囲まれたブロック内で宣言された変数は、そのブロックの外からアクセスすることができません。

if (true) {
    let blockScoped = "I'm block-scoped!";
    console.log("Inside block:", blockScoped);  // 出力: Inside block: I'm block-scoped!
}

// console.log("Outside block:", blockScoped);  // エラー: blockScoped is not defined

一時的な変数に最適

letは、for文のカウンターや一時的に使用する変数に適しています。
特にループ内で変数の値を更新する場合や、短いスコープで変数を利用する場合には、letの使用が推奨されます。

for (let i = 0; i < 5; i++) {
    console.log(i);  // 0から4までの数字を順番に出力
}

5. const、letの比較デモ

以下のデモを通じて、それぞれの変数宣言の特性を実感してみましょう。

letの使用例

let exampleLet = "I am let";
exampleLet = "I can be reassigned";

console.log(exampleLet);  // 出力: "I can be reassigned"

// letの再宣言
let exampleLetRedeclare = "Initial let";
let exampleLetRedeclare = "This will cause an error";  // エラー: Identifier 'exampleLetRedeclare' has already been declared

constの使用例

const exampleConst = "I am const";
// exampleConst = "I cannot be reassigned"; // これはエラーを引き起こします

console.log(exampleConst);  // 出力: "I am const"

constとオブジェクトや配列の組み合わせ

const arr = [1, 2, 3];
arr.push(4);  // 中身の変更は可能
console.log(arr);  // 出力: [1, 2, 3, 4]

const obj = { key: "value" };
obj.key = "newValue";  // プロパティの変更は可能
console.log(obj);  // 出力: { key: "newValue" }

まとめ

JavaScriptの変数宣言には、それぞれの特性と適切な使用方法があります。
varの使用は本日で卒業し、新しいconstとletを適切に使い分けることでより質の高いコードを書くことができます。
初心者エンジニアの皆さんも、これを機にconstとletの利用をマスターしましょう！

次回は、JavaScriptのデータ型とリテラルについて解説をしています。

それでは、また。

制作のご相談・ご依頼はこちらから！