JavaScriptでは変数を利用することで、値を保存して再利用することができます。変数はプログラミングの基本であり、JavaScriptを学ぶ上でも欠かせない要素です。
この記事ではJavaScriptでの変数の使い方を解説します。変数を宣言する方法や命名のルールなどをサンプルコードを用いて解説します。
完全なサンプルコードは以下のGithubリンクから確認することができます。
変数を宣言する方法
JavaScriptではvar・let・constというキーワードを使用することで変数を宣言することができます。今回はその中でもletとconstを使って変数を宣言する方法を見ていきましょう。なお、varは現在ほとんど使われていないため、今回の記事では紹介しません。
letとconstは以下のような構文で宣言することができます。
キーワード 変数名 = 値;キーワードと変数名の間には半角スペースが必須ですので注意して下さい。
それではそれぞれのキーワードを使って変数を宣言してみます。
「let」で宣言する方法
letキーワードを使用して変数を宣言する方法を見てみましょう。
let hoge = "ほげ";
hoge = "ホゲ"; // 再代入が可能です
// 「//」はコメントアウトを表していますこのように、
let 変数名 = 値;と、することで変数を宣言することができます。
このletで宣言した変数は再代入、つまり後から変数の値を変更することができます。
なお、再代入が可能という特性上、let hoge;というように値を代入しないで宣言することもできます。
再代入が可能という特性は長所でもあり短所でもあります。コードが長くなってくるとどの箇所で再代入しているのか把握が難しくなり、バグにつながる可能性があるためです。できるだけ後述するconstキーワードを使用するようにしましょう。
「const」で宣言する方法
続いて、constキーワードで変数を宣言する方法を見てみましょう。
const huga = "フガ";
// huga = "huga"; Uncaught TypeError: Assignment to constant variable.このように、
const 変数名 = 値;と、することで変数を宣言することができます。
このconstで宣言した変数は定数として扱われます。そのため、letのように値を再代入することはできません。サンプルコードの2行目ではconstで宣言した変数に再代入しようとしているため、TypeErrorが発生してしまいます。
再代入が不可能という特性は不便なようにも見えますが、その変数にどのような値が入っているのか一目で分かるようになるというメリットがあります。再代入している箇所を探さなくてもよくなるため、可能な限りconstキーワードで変数を宣言するようにしましょう。
変数の命名
JavaScriptでは、宣言した変数を再利用するには変数の名前を指定する必要があります。そのため、変数には適切な命名を行うことが求められます。また、変数の命名にはいくつかルールや注意点があるため、確認していきましょう。
変数名に使用できる文字について
JavaScriptの変数名では以下の文字を使用することができます。
- アルファベット
- 数字（2文字目以降のみ）
- $
- _
正確には日本語なども使用することができますが、実際に使っているコードを見たことがありません。
また変数の宣言時に登場したletやconstといったキーワードは予約語と呼ばれ、変数名として使用できないことに注意してください。
const hogeFuga = "ほげふが";
const hoge_fuga = "ほげふが";
const hoge1 = "ほげ1";
const $hoge = "ほげ";
// const 2hoge = "2ほげ"; Uncaught SyntaxError: Invalid or unexpected token
// const const = "予約語"; Uncaught SyntaxError: Unexpected token 'const'2hogeという変数名は先頭が数字で始まる変数名は使用できません。またconstは予約語のためこちらも変数名に使用できません。どちらの場合でも使用するとSyntaxErrorが発生してしまいます。
変数名の注意点
変数名にはいくつか注意点があります。
１つ目の注意点は大文字と小文字は区別して扱われるという点です。
const hogeFuga = "ほげふが";
// 大文字と小文字は区別されるため、以下のコードはエラーになります
// console.log(hogefuga); Uncaught ReferenceError: hogefuga is not definedconsole.log(hogefuga);のコメントアウトを外すとエラーが発生します。JavaScriptでは大文字と小文字が区別されるため、hogeFugaという変数とhogefugaという変数は別の変数として扱われます。
そのためhogefugaという変数が存在しないよ、という意味のReferenceErrorが発生してしまうのです。
2つ目の注意点は命名規則を統一しなければならないということです。
const hogeFuga_Piyo = "ほげふがぴよ";
const hoge_FugaPiyo = "ほげふがぴよ";
// どちらかに統一すること
const hogeFugaPiyo = "ほげふがぴよ"; // キャメルケース
const hoge_fuga_piyo = "ほげふがぴよ"; // スネークケースここでは「hoge」・「huga」・「piyo」という単語を「_」で繋げたり大文字にして繋げたりなど、統一感がない名前で宣言しています。
単語を繋げる場合はどちらかで統一するべきで、全ての変数名でその命名規則を守るべきです。なお、「_」で繋ぐ方法をキャメルケース、大文字にして繋ぐ方法をスネークケースと呼びます。
最後に、変数名は長すぎず短すぎず、意味が理解しやすい命名を行うように心がけましょう。
const i = 1; // 短すぎる
const id = 1; // 文脈によってはこれもありかも
const userId = 1;
const userIdentificationNumber = 1; // ID = Identification上記の変数はどれもユーザーIDのつもりで変数を宣言しました。
変数名が短すぎたり長すぎたりする場合はコードの読みやすさ（可読性）が損なわれてしまいます。変数名を見るだけでそれが何の値なのか推測しやすい名前を付けるようにしましょう。
なお今回の記事では登場しませんが、制御構文と呼ばれる構文の中で使用する場合はiやjといった短い変数名で宣言することがあります。これはその制御構文内という小さな領域（スコープと呼びます）でしか利用しないためです。
変数のデータ型について
JavaScriptではデータ型をプリミティブ型とオブジェクト（型）の2つに分けることができます。プリミティブ型には文字列や数値などが含まれます。オブジェクトには、今回共に未登場ですが、配列や関数などが含まれます。
typeof演算子を使うことでプリミティブ型またはオブジェクトの型を示す文字列を取得することができます。
const str = "文字列";
const num = 1;
const bool = true;
const bigInt = 123n;
const symbol = Symbol("シンボル");
const nullValue = null;
const obj = {
name: "オブジェクト",
age: 1,
};
const array = [1, 2, 3];
function func() {
console.log("func関数");
}
console.log(typeof undefinedVariable); // undefined
console.log(typeof str); // string
console.log(typeof num); // number
console.log(typeof bool); // boolean
console.log(typeof bigInt); // bigint
console.log(typeof symbol); // symbol
console.log(typeof nullValue); // object
console.log(typeof obj); // object
console.log(typeof array); // object
console.log(typeof func); // functionJavaScript は型の決定を実行時に行う言語（動的型付け言語と呼びます）で、変数に値を代入する際にもデータ型を指定する必要がありません。そのため変数にはどのような型でも代入することができます。
let hello;
console.log(typeof hello); // undefined
hello = "こんにちは";
console.log(typeof hello); // string上記の例ではhello変数の宣言時に値を初期化しなかったため、最初のtypeof演算子ではundefined型として評価されています。その後、文字列を再代入後にtypedef演算子で確認してみると文字列型に変換（キャスト）されていることが確認できると思います。
まとめ
今回の記事ではJavaScriptの変数について解説を行いました。
この記事でJavaScript には変数というものが存在し、letやconstキーワードで宣言することができる、ということだけでも覚えてくだされば幸いです。
