変数名のルールとよく使われる命名記法

JavaScript ではひとつのプログラムの中で複数の変数を使用することができ、それぞれの変数には異なる値を格納することができます。複数の変数を識別するため、それぞれの変数には変数名を付けます。ここでは JavaScript における変数名の付け方について解説します。

(Last modified: )

変数名のルール

JavaScript で変数名で使用できる文字やルールについて解説します。なお JavaScript では変数名や関数名などの名前のことを識別子と呼びます。

・使用できる文字は Unicode文字、アンダーバー(_)、ドル記号($)
・大文字と小文字は区別されます
・1文字目には数字(0から9)は使用できません
・変数名にはJavaScriptの予約語は使用できません

それぞれ確認していきます。

変数名には Unicode 文字の他にアンダーバー(_)とドル記号($)が使用できます。例えば次のような変数名を使用できます。

num
sales2020
user_id
$count

大文字と小文字は区別されるので、次の 4 つの変数は別の変数として扱われます。

myname
MyName
myName
MYNAME

Unicode 文字には日本語などの文字も含まれるので、変数名に日本語を使用することはできます。ただ一般的には半角英数のみを使用されているのがほとんどだと思います。

let 身長 = 180;
console.log(身長);
>> 180

変数名には数字も利用できますが、 1 文字目を数字にするとエラーとなります。

let 5box = 10;
>> Uncaught SyntaxError: Invalid or unexpected token

変数名には JavaScript の予約語は使用することができません。予約語とは JavaScript であらかじめ特別な意味を持つ単語として登録されているもので do や switch などです。予約語の一覧については「JavaScriptの予約語」を参照されてください。

let switch = 'red';
>> Uncaught SyntaxError: Unexpected token 'switch'

変数名の命名記法

変数名は先ほど解説した変数名のルールに従っていれば自由に付けることができますが、プログラムの中では変数名の名まえの付け方が統一されているとわかりやすくなります。そこで一般的に使われている変数名や関数名などの命名記法について 3 つご紹介します。

キャメルケース(ローワーキャメルケース)

キャメルケースとは最初の単語はすべて小文字として、 2 つ目以降の単語は先頭の文字を大文字にしてそれ以外は小文字で記述する方法です。

let userName;
let totalScore;

パスカルケース(アッパーキャメルケース)

パスカルケースとはすべての単語の先頭文字を大文字にしてそれ以外は小文字で記述する方法です。

let UserName;
let TotalScore;

スネークケース

スネークケースとはすべての単語を小文字にして、単語と単語をアンダーバー(_)でつなげて記述する方法です。

let user_name;
let total_score;

定数

定数名ではすべての文字を大文字にして、単語と単語をアンダーバー(_)でつなげて記述する方法がよくつかわれています。

const MAX_SIZE = 10;

他にも単語と単語をハイフン(-)でつなげるケバブケースと呼ばれる方法がありますが、 JavaScript では変数名にハイフン(-)は使用できないので使いません。

いずれの記述方法がいいということはありませんが、同じプログラムの中では統一した記述方法を使用されるとあとから読みやすく分かりやすいコードになるかと思います。

-- --

JavaScript における変数名の付け方について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。