【初心者向け】変数と定数の名前の付け方ルール(JavaScript)

コーディング

駆け出しWEBデザイナーの頃、JavaScriptを使いたい時はネットで拾ってきた物をコピペして、見よう見まねで一部を書き換えて使っていました。

var? let? const?
この変数名っててきとうに付けていいのかな?
あれ、なんかエラーが出るぞ…
などなど。

変数や定数の名前は、半角英数字と「_」と「$」を使って自分で自由に付けられます。

ただ、その変数が何を表しているのか、見ただけでパッとわかるような名前にしておかないと、あとで見た自分や他の人が困ってしまいます。
ソースコードを書いた本人しかわからないような略し方をするのも避けるべし。

「この変数はなんだ…?」と無駄に時間を取られないように、英単語をうまく使ってソースコードの可読性を上げましょう。

複数の単語のつなげ方(変数の場合)

単語1つじゃ無理! 複数の単語を組み合わせるぞ! という場合、2つのやり方があります。

スネーク記法

スネーク記法は、アンダースコア記法とも言われます。
そのまんまですが、単語同士を「_」アンダースコアでつなげます。

(例)first_name

変数名で「-」ハイフンは使えません。

キャメル記法

キャメル記法は、単語の頭文字を大文字にするつなげ方です。
(先頭の単語は小文字)

(例)firstName

大文字と小文字は区別されます。name と Name は別の変数扱い。

複数の単語のつなげ方(定数の場合)

変数と区別をつけるために、定数は全て大文字で記述します。
そうすると、キャメル記法は使えないのでスネーク記法で単語をつなげます。

(例)FIRST_NAME

NGな名前のつけ方

  • 先頭の文字に、0〜9の数字は使用できない … (例)01name
  • 予約語を単体で使用できない … (例)delete や new など
  • 「 」スペースや「,」コンマ、「.」ピリオドは使用できない
  • 長い名前はつけない … 可読性が下がり、打ち間違いも起きる

参考になれば幸いです。

簡単でわかりやすく、JavaScript初心者の方にオススメ