〈PR〉プロが選ぶ!2023年最新!おすすめプログラミングスクール比較ガイド

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

ハック君
ハック君

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

UIHACK
編集長
UIHACK 編集長

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

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

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

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

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

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

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

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、およびconst3つがあります。これらのキーワードは変数を宣言する際に使用され、それぞれ異なる特性と挙動を持っています。以下にてお答えします。

変数宣言(var)

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

変数宣言(let)

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

変数宣言(let)

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

解説

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

JavaScript変数の型とは

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

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

JavaScriptの変数の型 プリミティブ型(基本型)

主なプリミティブ型(基本型
  1. 文字列(String)
    文字列は、文字のシーケンスを表すデータ型です。シングルクォート(”)またはダブルクォート(””)で囲まれたテキストを表現します。例えば、”Hello”や’JavaScript’などが文字列の例です。
  2. 数値(Number)
    数値は数値データを表すデータ型です。整数や浮動小数点数を表現できます。例えば、10や3.14などが数値の例です。
  3. 真偽値(Boolean)
    真偽値はtrue(真)またはfalse(偽)の2つの値を表すデータ型です。条件式の結果や論理演算の結果として使用されます。
  4. undefined
    値が未定義であることを意味するデータ型。
  5. null
    値が存在しないことを意味するデータ型。
  6. シンボル(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
編集長
UIHACK 編集長

解説

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

ハック君
ハック君

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

UIHACK
編集長
UIHACK 編集長

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

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

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

メモ

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

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

JavaScript変数のスコープの種類

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

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

解説

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

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

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

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

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

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

UIHACK
編集長
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
編集長
UIHACK 編集長

解説

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

メモ

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

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

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

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

UIHACK
編集長
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
編集長
UIHACK 編集長

解説

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

ハック君
ハック君

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

UIHACK
編集長
UIHACK 編集長

解説

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

結論とまとめ

UIHACK
編集長
UIHACK 編集長

今回は、JavaScriptでの変数宣言についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。

本記事のまとめ
  • JavaScriptの変数とは
  • JavaScript変数の宣言方法とその違い(var, let, const)
  • JavaScript変数の型とは
  • JavaScript変数のスコープの種類
  • JavaScript変数のスコープチェーンとは
  • JavaScript変数のスコープとクロージャの関係性
  • JavaScript変数の配列とオブジェクトへの代入方法と注意点

本記事でご紹介した、変数の宣言方法には「var」、「let」、「const」の3つがあります。それぞれのキーワードはスコープや再代入の可否に関わる特性を持ちます。適切なキーワードの選択が重要です。

JavaScript変数は、プログラムの構築やデータ処理において不可欠な要素です。適切な宣言方法やデータ型の選択、スコープとクロージャの理解は、効果的なコーディングとバグの予防につながります。しっかりと基礎を学び、JavaScript変数を活用しましょう。

JavaScriptを使用した、スクロールアニメーション方法はこちらをご覧ください。

また、ECサイトやコーポレートサイトによく利用するモーダルウィンドウに興味がある方はこちら。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です