【Javascript】初心者向けに変数の意味と3つ(var・let・const)の宣言の使い分け方法を解説！

※本ページはプロモーションが含まれています。

ハック君

編集長(・vv・) Javascriptで変数を実装する方法を教えて下さい(◎_◎) ﾝ?

UIHACK 編集長

こんにちわ！UIHACK編集長です！

以下に当てはまる方におすすめ！

・そもそも変数って何？
・どうやって変数を宣言するの？
・変数の型ってあるの？

今回は、JavaScriptで変数を使用する理由を知りたい方向けに、実装方法をご紹介します。

変数はデータを格納し、処理を行うための基本的なツールとなります。しかし、初心者にとっては変数の概念や実装方法がわかりにくいこともありますよね。そこで、この記事では「JavaScript変数の基礎から応用」までを詳しく解説していきます。

未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください！

JavaScriptの変数とは
JavaScript変数の宣言方法とその違い（var, let, const）
JavaScript変数の型とは
1. JavaScriptの変数の型プリミティブ型（基本型）
2. JavaScriptの変数の型オブジェクト（複合型）
JavaScript変数のスコープの種類
JavaScript変数のスコープチェーンとは
JavaScript変数のスコープとクロージャの関係性
JavaScript変数の配列とオブジェクトへの代入方法と注意点
1. 配列への代入方法と注意点
2. オブジェクトへの代入方法と注意点
結論とまとめ

JavaScriptの変数とは

JavaScriptの変数は、データを格納し、処理するためのコンテナです。変数は名前（識別子）を持ち、その名前を通じてデータにアクセスできます。

JavaScriptでは、変数を宣言することでメモリ上に領域を確保し、データを格納します。変数を使用することで、プログラムは値を保存し、後で参照したり変更したりすることができます。

変数はさまざまなデータ型の値を格納できます。文字列、数値、ブール値、オブジェクト、配列など、様々な種類のデータを変数に代入することができます。

変数の宣言は、キーワード（var、let、const）を使用して行われます。例えば、以下のように変数を宣言し、値を代入することができます。

var name = "John"; // 文字列型の変数nameを宣言し、値"John"を代入
let age = 25; // 数値型の変数ageを宣言し、値25を代入
const PI = 3.14; // 定数PIを宣言し、値3.14を代入

変数の値は後から変更することができます。例えば、name変数の値を変更する場合は、以下のように代入演算子（=）を使用します。

name = "Jane"; // 変数nameの値を"Jane"に変更

変数はプログラム内のあらゆる場所で使用され、データの保持や操作に重要な役割を果たします。変数はプログラムの柔軟性を高め、必要な情報を管理するための基本的な要素として不可欠です。

JavaScript変数の宣言方法とその違い（var, let, const）

JavaScriptにおける変数の宣言方法は、var、let、およびconstの3つがあります。これらのキーワードは変数を宣言する際に使用され、それぞれ異なる特性と挙動を持っています。以下にてお答えします。

変数宣言(var)

varの意味

varは古いバージョンのJavaScriptで使用されてきた変数宣言キーワードです。
varで宣言された変数は、関数スコープまたはグローバルスコープで有効です。
同じスコープ内で再宣言することが可能であり、変数の値を再代入することもできます。
ブロックスコープを持たず、ブロック内で宣言された場合でも関数またはグローバルスコープで有効です。

変数宣言(let)

varの意味

letはES6（ECMAScript 2015）で導入されたブロックスコープを持つ変数宣言キーワードです。
letで宣言された変数は、ブロックスコープ内で有効です。ブロックは中括弧（{}）で囲まれた範囲を指します。
同じスコープ内で再宣言はできないが、変数の値は再代入できます。

変数宣言(let)

constの意味

constもES6で導入されたブロックスコープを持つ変数宣言キーワードです。
constで宣言された変数は、ブロックスコープ内で有効です。
constで宣言された変数は、再代入が禁止されます。つまり、一度値を代入すると後から変更することができません。
constで宣言されたオブジェクトや配列などの参照型の変数の場合、その変数自体は再代入できませんが、オブジェクトや配列のプロパティの値を変更することは可能です。

UIHACK 編集長

解説

これらの宣言方法の違いを理解することで、変数のスコープや再代入の可否などを適切に制御できます。使用するキーワードは、その変数の特性や使用するコンテキストに応じて選択する必要があります。

JavaScript変数の型とは

JavaScript変数の型とは、変数が格納できるデータの種類を指します。JavaScriptでは動的型付け言語であり、変数の型は実行時に自動的に決定されます。

JavaScriptの変数の型には、プリミティブ型（基本型）とオブジェクト（複合型）の2つのカテゴリがあります。

JavaScriptの変数の型プリミティブ型（基本型）

主なプリミティブ型（基本型）

文字列（String）
文字列は、文字のシーケンスを表すデータ型です。シングルクォート（”）またはダブルクォート（””）で囲まれたテキストを表現します。例えば、”Hello”や’JavaScript’などが文字列の例です。
数値（Number）
数値は数値データを表すデータ型です。整数や浮動小数点数を表現できます。例えば、10や3.14などが数値の例です。
真偽値（Boolean）
真偽値はtrue（真）またはfalse（偽）の2つの値を表すデータ型です。条件式の結果や論理演算の結果として使用されます。
undefined
値が未定義であることを意味するデータ型。
null
値が存在しないことを意味するデータ型。
シンボル（Symbol）
ES2015から追加された一意で不変な値のデータ型。

JavaScriptの変数の型オブジェクト（複合型）

JavaScriptにおいてプリミティブ型以外のデータを表すためのデータ型です。オブジェクトは複数の値や関数をグループ化し、1つのエンティティとして扱うことができます。

JavaScriptのオブジェクトは、中括弧（{}）で囲まれたキーと値のペアから成り立ちます。キーは文字列やシンボル、値は任意のデータ型（プリミティブ型または別のオブジェクト）が格納されます。オブジェクトは、プロパティとも呼ばれるキーと値のペアの集合です。

例を見てみましょう。

let person = {
  name: "John",
  age: 30,
  isStudent: false,
  hobbies: ["reading", "gaming", "cooking"],
  address: {
    city: "Tokyo",
    country: "Japan"
  },
  sayHello: function() {
    console.log("Hello!");
  }
};

UIHACK 編集長

解説

上記の例では、personというオブジェクトを定義しています。このオブジェクトは、name、age、isStudent、hobbies、address、sayHelloというキーを持ち、それぞれに対応する値が設定されています。

ハック君

オブジェクトってどんな用途で使われるんですか

UIHACK 編集長

例えば、ユーザーの情報を表現するためのオブジェクト、商品の詳細や属性を格納するためのオブジェクト、関数をオブジェクトのプロパティとして持つオブジェクトなどです。

オブジェクトは柔軟で拡張性のあるデータ構造であり、JavaScriptで非常に重要な役割を果たしています。プロパティの追加や変更、削除、オブジェクト間の相互作用など、さまざまな操作が可能です。

難しいから今度紹介するね。

メモ

オブジェクトのプロパティにアクセスするには、ドット記法（object.property）またはブラケット記法（object[“property”]）を使用します。例えば、person.nameは”John”を返し、person[“age”]は30を返します。

また、オブジェクトには組み込みのメソッド（関数）やプロトタイプを持つこともできます。上記の例では、sayHelloというメソッドが定義されています。このメソッドはpersonオブジェクトの振る舞いを定義し、person.sayHello()と呼び出すことで実行されます。

JavaScript変数のスコープの種類

スコープは変数の有効範囲を定義し、変数の衝突や名前の重複を防止する役割を果たします。適切なスコープの使用は、コードのメンテナンス性やバグの予防に重要です。スコープの理解を深めることで、変数の使用とアクセスの制御が容易になります。

スコープの種類

グローバルスコープ (Global Scope)
グローバルスコープは、プログラム全体でアクセス可能な最も外側のスコープです。グローバルスコープで宣言された変数や関数は、どのスコープからでも参照することができます。数値（Number）
数値は数値データを表すデータ型です。整数や浮動小数点数を表現できます。例えば、10や3.14などが数値の例です。
ローカルスコープ (Local Scope)
ローカルスコープは、関数内で宣言されたスコープです。関数内で宣言された変数や関数は、その関数内でのみアクセス可能です。他の関数やグローバルスコープからは直接アクセスできません。
ブロックスコープ (Block Scope)
ブロックスコープは、中括弧 {} で囲まれたブロック内で宣言されたスコープです。if文やforループ、whileループなどのブロック内で宣言された変数は、そのブロック内でのみアクセス可能です。

UIHACK 編集長

解説

ES6 (ECMAScript 2015) から導入された let と const は、ブロックスコープを持つ変数宣言に使用されます。これにより、ブロック内での変数のスコープが制限され、意図せぬ変数の汚染や衝突を防ぐことができます。

JavaScript変数のスコープチェーンとは

JavaScriptの変数のスコープチェーン（Scope Chain）は、変数のスコープ解決に関連する概念です。スコープチェーンは、変数がどのスコープから参照されるかを決定するメカニズムです。

JavaScriptでは、変数が使用されるときに、その変数を探すためにスコープチェーンが作成されます。変数のスコープチェーンは、変数が宣言されたスコープから外側のスコープまで、親スコープをたどる階層構造を持ちます。

具体的には、変数が使用された場所から最も近いスコープで変数が見つからない場合、スコープチェーンは親スコープに移動します。その親スコープでも変数が見つからない場合は、さらに外側のスコープを探索し続けます。この探索のプロセスは、グローバルスコープまで続きます。

スコープチェーンによって、内側のスコープから外側のスコープにアクセスすることができます。これにより、変数のスコープ解決が行われます。内側のスコープで変数が見つからない場合でも、外側のスコープで同じ名前の変数が見つかれば、その変数を参照することができます。

UIHACK 編集長

以下の例を見てみましょう。

var x = 10; // グローバルスコープで変数xを宣言

function outer() {
  var y = 20; // outerスコープで変数yを宣言
  
  function inner() {
    var z = 30; // innerスコープで変数zを宣言
    console.log(x + y + z); // x, y, zにアクセス
  }
  
  inner(); // inner関数を呼び出し
}

outer(); // outer関数を呼び出し

ハック君

編集長(・vv・) たくさん変数があって意味不明です^^;

UIHACK 編集長

解説

この例では、inner関数内で変数x、y、zにアクセスしています。変数zは直接のスコープ内で見つかりますが、変数xとyは内側のスコープで見つからないため、外側のスコープ（outer関数スコープおよびグローバルスコープ）を探索します。最終的に、スコープチェーンによって変数xとyが見つかり、計算が行われます。

メモ

スコープチェーンは、変数のスコープ解決において重要な役割を果たします。正しいスコープチェーンの理解は、変数の参照や衝突の解決に役立ちます。

JavaScript変数のスコープとクロージャの関係性

JavaScriptの変数のスコープとクロージャには密接な関係があります。クロージャは、スコープ内の変数を保持し、外部からのアクセスや使用を可能にする機構です。

クロージャは、関数が自身の外部スコープにアクセスできるときに形成されます。具体的には、関数が別の関数の内部で定義され、内部関数が外部関数のスコープ内の変数を参照する場合にクロージャが形成されます。

UIHACK 編集長

以下の例を見てみましょう。

function outer() {
  var x = 10; // outerスコープで変数xを宣言

  function inner() {
    console.log(x); // inner関数が外部スコープの変数xにアクセス
  }

  return inner; // inner関数を返す
}

var closure = outer(); // outer関数を呼び出し、inner関数を返す
closure(); // クロージャ内のinner関数を実行

UIHACK 編集長

解説

この例では、outer関数内で変数xが宣言されています。そして、inner関数がouter関数の内部で定義され、外部スコープの変数xを参照しています。outer関数はinner関数を返しており、その返り値をclosure変数に代入しています。

ハック君

closure();って何をしているんですか

UIHACK 編集長

解説

closure変数には、outer関数の実行結果であるinner関数が格納されています。この時、inner関数は自身が定義されたスコープ（outer関数のスコープ）の変数xへの参照を保持しています。そのため、closure()を実行することで、クロージャが形成され、inner関数が外部スコープの変数xを参照し、結果として10がコンソールに出力されます。

JavaScript変数の配列とオブジェクトへの代入方法と注意点

JavaScriptにおける変数の配列への代入方法とオブジェクトへの代入方法、および注意点について説明します。

配列への代入方法と注意点

配列

配列への代入は、=演算子を使用して行います。
配列の要素には、順番にアクセスするためのインデックス（0から始まる番号）があります。
配列の要素に値を代入するには、インデックスを指定して代入します。
注意点として、配列のサイズを超えるインデックスに直接代入すると、配列のサイズが自動的に拡張され、間の要素はundefinedで埋められます。

以下のサンプルコードを見てみましょう。

var array = []; // 空の配列を宣言

array[0] = "apple"; // インデックス0の要素に値を代入
array[1] = "banana"; // インデックス1の要素に値を代入

console.log(array); // ["apple", "banana"] と表示される

オブジェクトへの代入方法と注意点

オブジェクト

オブジェクトへの代入は、=演算子を使用して行います。
オブジェクトのプロパティには、名前（キー）と値が対になっています。
プロパティに値を代入するには、オブジェクト名.プロパティ名 = 値の形式で代入します。
注意点として、オブジェクトに未定義のプロパティに直接代入すると、新しいプロパティが作成されます。

以下のサンプルコードを見てみましょう。

var person = {}; // 空のオブジェクトを宣言

person.name = "John"; // プロパティnameに値を代入
person.age = 30; // プロパティageに値を代入

console.log(person); // { name: "John", age: 30 } と表示される

注意点

・配列やオブジェクトへの代入時に、既存の要素やプロパティを上書きすることもできます。

・配列やオブジェクトは参照型であるため、代入されるのはデータそのものではなく、メモリ上での参照です。したがって、別の変数に代入した場合でも、同じオブジェクトや配列を参照していることに注意が必要です。

・オブジェクトへのプロパティの代入時には、ドット記法（オブジェクト名.プロパティ名）やブラケット記法（オブジェクト名[プロパティ名]）のどちらを使用しても構いません。