PR

JavaScript:変数宣言(let/const/var)を3分で解説

JavaScript

JavaScriptでの変数宣言にはvar, let, constの3つのキーワードがあります。それぞれのキーワードには特定の特徴とルール・制限が存在しており、場面に応じた適切な使い分けが重要。

参考 プログラミングにおける「変数」とは?

超ザックリいえば、変数宣言するなら「let」。定数を宣言するなら「const」。「var」は古い宣言方法なので基本使わない!と覚えればOK。けど、古いコードでは「var」も使われているから一応理解しておきましょう!という内容です。

キーワードスコープ再代入可能巻き上げ(Hoisting)
var関数スコープ
letブロックスコープ×
constブロックスコープ××
表1:JavaScriptにおける変数宣言
  1. 関数スコープ
    • 宣言された変数が関数内でのみアクセス可能
  2. ブロックスコープ
    • 宣言された変数がブロック({}で囲まれた範囲)内でのみアクセス可能
  3. 再代入可能
    • 変数に値を再度割り当てることが可能
  4. 巻き上げ
    • 変数宣言がコード実行前にトップに移動されるJavaScriptの挙動

このページではvar, let, constがどのように使われるべきか、それぞれの選択がプログラミング上でどのような影響を与えるかについて深く掘り下げていきます。正しい変数宣言方法の選択は、エラーを減らし、コードの可読性を高める重要なステップです。それぞれの使い方・特徴・制限をしっかりおさえておきましょう!

それでは、各キーワードの詳細な解説を始めます。

参考 【JavaScript入門】基本文法/基礎文法を5分で復習

スポンサーリンク

JavaScriptの変数宣言:var

JavaScriptでは、varキーワードを使用して変数を宣言することができます。この変数には数値、文字列、オブジェクトなど、どのようなタイプの値も格納することが可能です。

冒頭でも述べた通り、varはJavaScriptで最も古い変数宣言のキーワードです。ちょっと厄介な性質を持つので今ではあまり利用されませんが、古いコードではvarが利用されているシーンもあるので一応冒頭で解説しておきます。

サンプルコード 基本的な宣言と使用

var message = 'こんにちは、世界!';
console.log(message); // 出力: こんにちは、世界!

↑のコードでは、messageという名前の変数を宣言し、文字列'こんにちは、世界!'を代入しています。次に、console.logを使ってこの変数の内容をコンソールに出力しています。

コンソール

コンソールは、開発者がプログラムの実行中にメッセージを表示したり、デバッグ情報を確認したりするためのツールです。ほとんどのブラウザには、開発者ツールとして組み込まれているコンソールがあり、JavaScriptコードからの出力を確認したり、JavaScriptを直接実行したりすることができます。

console.logはJavaScriptにおける最も基本的なデバッグツールの1つで、指定されたメッセージや変数の内容をブラウザのコンソールに出力するために使用されます。この関数を使用することで、開発者はプログラムの実行中に変数の値を確認したり、特定のコードが実行されたかどうかをチェックすることができます。これはプログラムの動作を理解したり、バグを特定するのに役立ちます。

console.log("Hello, world!"); // 文字列をコンソールに出力します。

var number = 5;
console.log(number); // 変数numberの値をコンソールに出力します。

var obj = { name: "John", age: 30 };
console.log(obj); // オブジェクトの内容をコンソールに出力します。

var:変数の再代入

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

これを「再代入」と呼びます。

サンプルコード 変数の再代入

var number = 10;
console.log(number); // 出力: 10

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

最初にnumber変数に10を代入し次に20に再代入しています。これにより、変数numberの値が更新。後述するconstキーワードではこの再代入ができないという特徴を持ちますので要チェック。

var:巻き上げ(Hoisting)

varで宣言された変数は「巻き上げ」されます。「巻き上げ(Hoisting)」は、JavaScriptでの変数宣言や関数宣言がコード実行前にそのスコープの最上部に移動されるように見える挙動を指します。

ザックリいえば、どこで変数宣言しても、コード(もしくはそのスコープ内)の1番上で実行されるということ。

サンプルコード 巻き上げの挙動

console.log(myVar); // 出力: undefined
var myVar = '変数は巻き上げられます。';
console.log(myVar); // 出力: 変数は巻き上げられます。

↑の例では、myVar変数が宣言される前にconsole.logで参照されています。通常のプログラミング言語の場合、宣言される前の変数が参照された場合エラーが発生しプログラムはストップします。

は、JavaScriptは変数myVarを巻き上げるため、最初のconsole.logundefinedを出力する形でエラーが発生しません。この「巻き上げ」が意図するものである場合は問題ありませんが、undefinedを出力するシーンというのは一般的には多くはない→つまり、コーディングミスであるにも関わらず、エラーが発生しないため、バグが多発してしまう・・・という欠点があります。

そのため「var」は現代ではあまり利用されず「const」が変数宣言としてポピュラーです。

var:関数スコープ

varで宣言した変数は関数スコープを持ちます。→関数内で宣言された変数は、その関数内部からのみアクセス可能であるということ。

参考 関数とは?

サンプルコード 関数スコープの例

function sayHello() {
  var greeting = 'Hello World!';
  console.log(greeting); // 出力: Hello World!
}

sayHello();
console.log(greeting); // エラー: greeting is not defined

↑の例では、greeting変数はsayHello関数内で宣言されています。そのため、関数の外部からgreetingにアクセスしようとすると、エラーが発生します。

JavaScriptの変数宣言:let

JavaScriptでのletキーワードの使用は、varに比べてより現代的な変数宣言の方法を提供します。letによる変数宣言は、特にブロックスコープを利用することが大きな特徴。この章では、letの使い方について解説します。

サンプルコード 基本的な宣言と使用

let message = 'こんにちは、世界!';
console.log(message); // 出力: こんにちは、世界!

このコードでは、messageという名前の変数をletで宣言し、文字列'こんにちは、世界!'を代入しています。この変数は、宣言された場所からアクセス可能です。

宣言方法としては「var」と相違ありません。

let:ブロックスコープ

letで宣言された変数はブロックスコープを持ちます。→変数が{}で囲まれたブロック内でのみアクセス可能であることを意味します。varが持つ関数スコープ(変数はその変数が宣言された関数全体からアクセス可能)とは異なり、ブロックスコープではより限定的な範囲で変数を制限することができます。

サンプルコード ブロックスコープ内での使用

function testScope() {
  if (true) {
    let blockScopedVar = '私はこのブロック内でのみ存在します';
    console.log(blockScopedVar); // 出力: 私はこのブロック内でのみ存在します
  }
  // console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined
}

testScope();

↑の例では、blockScopedVar変数はif文のブロック内でletを使って宣言されています。この変数はブロック内部からのみアクセス可能であり、ブロックの外側からは参照することができません。もしブロックの外側でblockScopedVarにアクセスしようとすると、ReferenceErrorが発生します。

letのこの挙動は、プログラムの特定の部分でのみ変数を使用したい場合に有用であり、変数のスコープをより細かく管理することを可能にします。

参考 JavaScriptのif文

let:変数の再代入

letで宣言された変数は、再代入が可能です。しかし、同じスコープ内で同じ名前の変数を再宣言することはできません。

サンプルコード 再代入の例

let number = 10;
console.log(number); // 出力: 10

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

// let number = 30; // エラー: 'number' has already been declared

最初にnumber10を代入し次に20に再代入しています。再宣言しようとするとエラーが発生します。

ポイント letの使用時の注意点

  • letで宣言された変数はブロックスコープを持つため使用する際はスコープに注意。
  • 再宣言はできないため、同じ名前の変数を同一スコープ内で使用する際には注意が必要。
  • letはモダンなJavaScript開発においてvarの代替として推奨されている。

letを使用することで、コードの可読性と保守性が向上し、特に複雑なアプリケーションを開発する際にバグを減らすことができます。

varの再宣言

varキーワードを使用した場合、同じスコープ内で同じ名前の変数を複数回宣言することができます。これはJavaScriptがvar宣言を許容する柔軟性の一例なのですが、この挙動は予期しないバグの原因となることがあります。varによる再宣言が行われた場合、新しい宣言は無視され、変数の値は最後に代入された値によって決定されます。

var myVar = 1;
var myVar = 2; // 再宣言可能
console.log(myVar); // 出力: 2

JavaScriptの「定数」宣言:const

JavaScriptにおけるconstキーワードは「定数を宣言する」ために使用されます。constで宣言された変数は、再代入が不可能で、ブロックスコープのルールに従います。これは一度値が割り当てられると、その変数の値を変更することができないことを意味します。

constの使用は、プログラム内で変更されるべきではない値を扱う際に非常に便利です。

サンプルコード 基本的な宣言

const greeting = 'こんにちは、世界!';
console.log(greeting); // 出力: こんにちは、世界!

const greeting = 10;
// greeting = 20; // TypeError: Assignment to constant variable.

↑のコードでは、greetingという名前の定数をconstで宣言し、文字列'こんにちは、世界!'を代入しています。constで宣言された後は値を変更することはできません。無理やり変えようとしてもエラーが発生するだけです。

const:ブロックスコープ

constで宣言された変数もletと同様にブロックスコープを持ちます。→変数が定義されたブロック({}で囲まれた範囲)内でのみアクセス可能であるということです。

サンプルコード ブロックスコープの例

{
  const localMessage = 'ブロック内のメッセージ';
  console.log(localMessage); // 出力: ブロック内のメッセージ
}
// console.log(localMessage); // エラー: localMessage is not defined

↑の例では、localMessage定数はブロック内でconstによって宣言されています。ブロックの外からはアクセスできません。

const:再代入の禁止

先ほども解説した通りなので、再度ご説明。constで宣言された変数は、再代入することができません。試みると、エラーが発生します。

サンプルコード 再代入の試み

const number = 10;
console.log(number); // 出力: 10

// number = 20; // エラー: Assignment to constant variable.

number定数に10を代入した後、20に値を変更しようとすると、JavaScriptエンジンはエラーを投げます。

ポイント constの使用時の注意点

  • constで宣言された変数は再代入が不可能ですが、オブジェクトや配列のプロパティは変更できます。
  • 初期化時に値を割り当てる必要があります。宣言のみで初期化を行わないとエラーになります。
const settings = { volume: 10, brightness: 70 };
settings.volume = 20; // これは可能
console.log(settings); // 出力: { volume: 20, brightness: 70 }

constはプログラム内の固定値を扱う際に非常に役立ち、コードの意図を明確にすることができます。値が変更されることを期待しない変数にconstを使用することで、プログラムの安全性と可読性を高めることができます。

まとめ JavaScriptにおける変数宣言(var)

  • 関数スコープ: varで宣言された変数は、その変数が含まれる関数内でのみアクセス可能。
  • 再代入可能: 一度宣言された変数に対して、新たな値を代入することができる。
  • 巻き上げあり: 宣言前に変数を参照してもエラーにはならず、undefinedが返される。
  • 再宣言可能: 同じスコープ内であれば、同名の変数を再度宣言できる。
function testVar() {
  var x = 1;
  if (true) {
    var x = 2; // 同じ変数xを再宣言しています
    console.log(x); // 出力: 2
  }
  console.log(x); // 出力: 2 (関数スコープのため、ifブロック外でも値は2)
}

testVar();

まとめ JavaScriptにおける変数宣言(let)

  • ブロックスコープ: letで宣言された変数は、その変数が含まれるブロック({}で囲まれた範囲)内でのみアクセス可能。
  • 再代入可能: 一度宣言された変数に対して、新たな値を代入することが可能。
  • 巻き上げなし: 変数は宣言されるまで参照できない(実際には巻き上げは発生するが、Temporal Dead Zoneのため参照不可)。
  • 再宣言不可: 同じスコープ内で同名の変数をletで再宣言することはできない。
function testLet() {
  let y = 1;
  if (true) {
    let y = 2; // ブロックスコープ内で新たにyを宣言
    console.log(y); // 出力: 2
  }
  console.log(y); // 出力: 1 (ブロックスコープのため、元のyの値は変わらない)
}

testLet();

まとめ JavaScriptにおける変数宣言(const)

  • ブロックスコープ: constlet同様にブロックスコープを持ち、変数は宣言されたブロック内でのみアクセス可能。
  • 再代入不可: 一度constで宣言された変数は、新たな値を代入することができない。
  • 巻き上げなし: letと同じく、宣言前に変数を参照しようとするとエラーが発生する。
  • 再宣言不可: letと同様に、同じスコープ内で同名の変数をconstで再宣言することはできない。
  • 初期化必須: constで変数を宣言する際は、宣言と同時に初期値を指定する必要がある。
function testConst() {
  const z = 1;
  console.log(z); // 出力: 1

  // z = 2; // エラー: "z" is read-only

  if (true) {
    const z = 2; // ブロックスコープ内で新たにzを宣言
    console.log(z); // 出力: 2
  }
  console.log(z); // 出力: 1 (ブロックスコープのため、元のzの値は変わらない)
}

testConst();


const obj = { key: 'value' };
console.log(obj.key); // 出力: value

obj.key = 'newValue'; // オブジェクトのプロパティは変更可能
console.log(obj.key); // 出力: newValue

// obj = {}; // エラー: "obj" is read-only

スキルアップを手軽に!
話題のサブスク型プログラミングスクールをご紹介。

SAMURAI TERAKOYAblank
月額2,980円から始める-入会金不要/途中解約自由。無料体験プランからスタート可能!​
飲み会1回分以下の料金で継続的なスキルアップを。

Freeks(フリークス)
blank
月額10,780円でJavaScript、Pythonなどのカリキュラムが
学び放題
質問し放題転職サポート制度あり。

ウズウズカレッジ/CCNAコース用
月額33,000円(税込)〜インフラエンジニアの登竜門「CCNA」取得を目指す。
コース受講→転職成功で【実質全額無料】(最大240,000円)

このWebサイトは現役のエンジニアが以下3点を目的として運営しています。

  1. 勉強:一度理解した内容を忘れないように。
    → アウトプットは「最強のインプット」である! 
  2. 備忘:忘れたとしても後から見返せるように。
    → 未来の自分への「お手紙」を書いています。 
  3. 共有:〇〇ってこうだったんだ!の感動をシェアできるように。
    → あなたの知識は誰かにとっての「価値ある情報」です。 

副業ブログの始め方はこちらから

スポンサーリンク
JavaScriptWEBデザイン
シェアする
ビズドットオンラインをフォローする
blank
ビズドットオンライン
タイトルとURLをコピーしました