JavaScriptの変数とは？｜主要3種の特徴を徹底解説

（最終更新月：2023年11月）

✔当記事は以下のような疑問をお持ちの方へ向けた内容となっています

✔当記事でお伝えする内容

• JavaScriptにおける変数の概念
• 変数宣言の基本的な書き方
• 実践的な使用例

変数を使った効率的なプログラミングのコツを掴んでいただくために、理論だけでなく具体的なコード例も豊富に取り入れています。

ぜひ最後までご覧ください。

JavaScript変数の基本

こちらでは、JavaScriptにおける変数の基本についてご紹介します。

変数はデータを保存し、コード内で使用するための基礎であり、それらの使い方を理解することは、効率的なプログラミングへの第一歩です。

• const – 新しい定数宣言
• let – モダンな変数宣言
• varとその限界
• 変数宣言の選択基準

const – 新しい定数宣言

constキーワードは、値を再割り当てできない変数、つまり定数を宣言するために使用されます。

const pi = 3.14;

このコードでは、piという名前の定数を定義し、それに円の定数値を割り当てています。

constで宣言された変数は後で変更しようとするとエラーが発生するため、プログラムのどこかで意図せず値が変更されるのを防ぎます。

let – モダンな変数宣言

letキーワードは、ブロックスコープの局所変数を宣言するために用いられます。

let count = 0;

countという変数を作り、初期値0を設定できます。

letで宣言された変数は、宣言されたブロック内でのみ有効ですが、値は後から変更可能です。

従来のvarよりも制御された使用が可能になります。

varとその限界

varキーワードは歴史的な変数宣言方法で、関数スコープをもつ変数を宣言します。

var name = "Alice";

nameという名前の変数を宣言できます。

しかし、varには変数の再宣言が可能であるなどの問題点が存在するため、多くの場合letやconstの使用が推奨されています。

変数宣言の選択基準

変数宣言にはconst、let、varの3種類がありますが、選択にあたっては以下の基準を考慮すると良いでしょう。

• 値を変更する予定がない場合はconst
• 変更する可能性がある局所変数はlet

古いコードを扱う場合を除き、モダンなJavaScriptではvarの使用は避けるのが一般的です。

変数の正しい命名法

こちらでは、JavaScriptにおける変数の命名法について学びます。

良い命名法はコードの可読性を向上させるでしょう。

• 命名規則の基本
• キャメルケースとスネークケース
• 命名におけるベストプラクティス

命名規則の基本

JavaScriptでは変数名は、英数字、アンダースコア(_), またはドル記号($)で始られます。

気をつけることは以下のとおりです。

• 数字で始められない
• 予約語（例：if、forなど）は使用できない

シンプルで説明的な名前を使用することが推奨されます。

キャメルケースとスネークケース

キャメルケース(camelCase)とは、複数の単語を繋げて変数名を作る際に、最初の単語を小文字で始め、後続の単語の最初の文字を大文字にするスタイルです。

例えばnumberOfUsersです。

対してスネークケース(snake_case)は、単語の間にアンダースコアを挟んだスタイルで、number_of_usersのようになります。

JavaScriptでは一般にキャメルケースが優先されます。

命名におけるベストプラクティス

命名におけるベストプラクティスとして、以下を心がけると良いでしょう。

• 具体的かつ意味のある名前を選ぶ
• 省略形は避ける

変数のスコープや目的を考慮した名前をつけることで、あとでコードを読み返したときや、あるいは他人がコードを読む際にも理解しやすくなります。

例えば、ユーザーのリストを保存する変数であれば、userListといった名前が適切です。

スコープと宣言 – 変数の生存範囲

こちらでは、スコープの種類とその特性、また適切な変数の宣言方法について見ていきます。

変数には、「スコープ」と呼ばれる有効範囲が存在するのです。

• スコープの種類と変数の振る舞い
• グローバルスコープとローカルスコープ
• ブロックスコープの理解と活用
• スコープチェーンとクロージャ

スコープの種類と変数の振る舞い

スコープには大きく分けて2種類あります。

• グローバルスコープ: 宣言された変数は、プログラム全体で利用可能
• ローカルスコープ: 宣言された変数は、宣言された関数やブロック内でのみ使用できる

グローバルスコープとローカルスコープ

グローバルスコープで定義された変数はどこからでもアクセス可能です。

var globalVar = "accessible everywhere";

反対に、関数内で宣言された変数はローカルスコープを持ち、関数外からはアクセスできません。

function myFunction() { 
  var localVar = "accessible only inside this function"; 
}

ブロックスコープの理解と活用

letとconstはブロックスコープを持ちます。

つまり、これらは{}で囲まれたブロック内でのみ有効で、ブロックの外からはアクセスできません。

{ 
  let blockVar = "visible inside this block"; 
}

ブロックスコープを活用することで、変数の影響範囲を限定し、コードの保守性を高めることができます。

スコープチェーンとクロージャ

スコープチェーンは、変数が宣言された場所に基づいて、どの変数にアクセスできるかの階層を形成します。

関数の場合、自身のスコープに変数がない場合は外側のスコープを検索します。

クロージャは、外側の関数のスコープから変数を参照する内側の関数です。

これにより、特定の変数を保持し続けることが可能です。

データ型を理解しよう

こちらでは、JavaScriptにおける異なるデータ型を学び、それらがどのように機能するのかを理解します。

データ型はプログラミング言語の根幹となる概念で、変数がどのような種類のデータを保持できるかを定義します。

• データ型の概要
• プリミティブ型とリファレンス型
• データ型の変換
• 型変換のベストプラクティス

データ型の概要

JavaScriptにはいくつかの基本的なデータ型があります。

• Number
• String
• Boolean
• Object
• null
• undefined

これらのデータ型を知ることで、データをより正確に操作し、予期せぬエラーを避けられます。

プリミティブ型とリファレンス型

プリミティブ型は最も基本的なデータ型であり、以下が含まれます。

• Number
• String
• Boolean
• undefined
• null
• Symbol

それに対してリファレンス型は、データ構造（例：Object、Array、Function）を参照して使用されます。

プリミティブ型は値そのものが変数に格納されるのに対し、リファレンス型はメモリ上の場所への参照が格納されます。

データ型の変換

異なるデータ型間での変換は、プログラムにおいてよくおこなわれる操作です。

自動（暗黙）変換が行われることもありますが、明示的に型変換することでバグを防げます。

//文字列の"123"を数字に変換
Number("123")
//数字の123を文字列に変換
String(123)

型変換のベストプラクティス

型変換の際は、常に明示的な変換を目指しましょう。

• Number(value)やString(value)のようなコンストラクタ関数を使う
• value.toString()メソッドを利用する

これにより、コードの読み手に意図が明確に伝わり、エラーや意図しない挙動を避けられるのです。

リテラルとは

こちらでは、リテラルの種類と用途について掘り下げましょう。

リテラルはプログラムに直接記述される値のことで、変数に格納されるデータの原型を形成します。

• リテラルの定義と用途
• 配列リテラルとオブジェクトリテラル
• 文字列リテラルと数値リテラル

リテラルの定義と用途

リテラルは、ソースコード内に直接書かれる固定値のことを指します。

例えば以下はリテラルです。

• 100
• “Hello World”
• true

リテラルはハードコーディングされたデータをプログラム内で使う際に利用され、変数や定数に割り当てる値として使われます。

配列リテラルとオブジェクトリテラル

配列リテラルは[]を使って作られます。

例えば以下の記述は1, 2, 3という3つの要素を持つ配列です。

[1, 2, 3]

オブジェクトリテラルは{}を使って表され、プロパティ名と値の組み合わせを含みます。

{name: "Alice", age: 25}

nameとageという二つのプロパティを持つオブジェクトを作成します。

文字列リテラルと数値リテラル

文字列リテラルは、シングルクオート'やダブルクオート"で囲まれた任意のテキストを指します。

"Hello"
'World'

数値リテラルは単に数字そのもので、小数点を含みます。

3.14
100

これらはそれぞれ文字列と数値データを作成する際に直接使用されます。

コメントの正しい書き方

ここでは、効果的なコメントの書き方とその重要性について学びましょう。

コメントはソースコードに直接書かれた説明やメモであり、プログラム実行時には無視されます。

• コメントの基本ルール
• コードの可読性を高めるコメント
• コメントの適切な使用

コメントの基本ルール

コメントには一行コメントと複数行コメントがあります。

一行コメントは//の後に続けて書きます。

例: // これは一行コメントです

複数行コメントは/*と*/で囲むことでおこないます。

/*
これは
複数行にわたる
コメントです
*/

コメントはコードの機能についての説明、意図、やるべき仕事（TODO）のメモなどに使用されます。

コードの可読性を高めるコメント

コメントは、ほかの開発者や将来の自分がコードを理解するのを助けるために使います。

そのためには、コードに対する洞察を提供し、複雑なロジックや意図が明確でない部分を明示することが効果的です。

コード自体が明白な場合は、不必要にコメントを追加することは避け、可読性を損なわないようにしましょう。

コメントの適切な使用

コメントを使う際は、コードの何を、なぜ説明しているのかを明確にし、現在のコード内容に合致していることが重要です。

コメントが古い情報を参照していることはないか定期的に確認し、必要に応じて更新するのが望ましいです。

また、コメントはコードの上に直接書く方が、関連するコードとの対応がわかりやすくなります。

ES2015の変化について

ES2015（またはES6）は、JavaScriptの重要なアップデートであり、言語の機能性と使いやすさを大幅に向上させました。

ここでは、その変更点の概要と、どのように開発に影響を与えるかを説明します。

• ES2015での主な変更点
• letとconstの導入の影響
• 現代的なJavaScriptの書き方

ES2015での主な変更点

ES2015では、以下のような開発効率を上げる多くの機能が追加されました。

• letとconstの変数宣言
• アロー関数
• デフォルトパラメータ
• テンプレートリテラル
• クラス構文
• プロミス
• モジュールの導入

これらの新機能は、JavaScriptコードをより簡潔で読みやすくするためのものです。

letとconstの導入の影響

letとconstは、ES2015で導入された変数宣言方法です。

より安全で可読性の高いコードの作成が可能になりました。

varの問題点を解決するこれらのキーワードは、変数のスコープを明確にし、コードの誤った振る舞いを減らします。

現代的なJavaScriptの書き方

ES2015以降のJavaScriptは、「モダンJavaScript」とも呼ばれ、より宣言的で機能的な書き方が推奨されています。

• より効率的なイテレーションのためのfor...ofループ
• 破壊的代入
• スプレッド構文

これらの機能を積極的に使うことで、既存のJavaScriptより洗練されたコードを書けるようになります。

constの誤解を解く

こちらでは、constが何を意味し、どのように使われるべきかについて説明します。

constはJavaScriptにおいて誤解されがちなキーワードのひとつです。

• constの真の意味
• constと不変性
• constの使用ケース

constの真の意味

constは「constant」の略であり、一般に「定数」と訳されます。

JavaScriptでは再代入不可能な変数を宣言するために使用されます。

これは、一度constで宣言された変数の値を変更できないという意味ですが、オブジェクトや配列の場合はその内容を変更することは可能です。

constと不変性

constで宣言されたプリミティブ値（数値や文字列など）は不変ですが、オブジェクトや配列のようなリファレンス型の場合、変数が指すメモリアドレスは変えられないものの、その内容は変更できます。

不変性を保証するためには、オブジェクトの凍結（Object.freeze）など、追加的な手段を取る必要があります。

constの使用ケース

constは、変数が再代入されるべきでない場合に使用します。

これは、値が一度設定された後は不変であることを意図した時に役立ちます。

たとえば、アプリケーション全体の設定値や、関数内で一度だけ計算される結果などが該当します。

これにより、プログラムの振る舞いを予見しやすくなり、デバッグを楽にする助けになります。

まとめ

当記事でご説明した変数についての内容をまとめます。

• const: 値を再割り当てできない変数
• let: ブロックスコープの局所変数
• var: 関数スコープを持つ変数

JavaScriptでは、適切な場所で、適切な変数を宣言することが大切です。

いろいろと使いながら、各変数の特徴を覚えていきましょう。