JavaScriptでの変数名の付け方とは？わかりやすくエラーの起きにくい命名規則を紹介

1. 変数とは？JavaScriptでの基本的な意味

1. 変数とは？JavaScriptでの基本的な意味

まず「変数（へんすう）」とは、値（データ）を一時的に保存しておく「入れ物」のようなものです。たとえば、数字や文字、名前などをプログラムの中で使いたいときに変数を使います。

JavaScriptでは次のように変数を作ります。

let age = 25;
const name = "たろう";

letやconstは変数を作るためのキーワードで、それぞれ意味がありますが、今回は名前の付け方に注目します。

2. JavaScriptの変数名で使える文字と使えない文字

2. JavaScriptの変数名で使える文字と使えない文字

変数名には、使える文字と使えない文字があります。以下のルールに従いましょう。

• アルファベット（a〜z、A〜Z）
• 数字（0〜9）※ただし変数名の最初に数字は使えません
• アンダースコア（_）とドルマーク（$）はOK

たとえば次のような名前はOKです。

let userName = "たろう";
let user_age = 30;
let $balance = 5000;

逆に、次のような変数名はエラーになります。

let 1user = "だめ";   // 数字で始まっている
let my-name = "NG";  // ハイフン（-）は使えない

3. わかりやすい変数名を付けるためのコツ

3. わかりやすい変数名を付けるためのコツ

変数名は、自分や他の人が見てすぐに意味がわかるようにするのが大事です。以下のポイントを意識しましょう。

• 名前から中身が想像できるようにする
• 短すぎず長すぎないようにする
• 単語の区切りはキャメルケースを使う（後述）

たとえば、年齢を入れるなら age や userAge などが良いです。

let score = 85;
let studentName = "ゆうき";

逆に、x や data1 などのような意味のない名前は避けたほうが安全です。

4. キャメルケースとは？初心者が覚えたい命名スタイル

4. キャメルケースとは？初心者が覚えたい命名スタイル

JavaScriptでは「キャメルケース（camelCase）」というスタイルで名前を付けるのが一般的です。

これは、単語をつなぐときに最初の単語は小文字、2番目以降の単語の頭を大文字にする方法です。

• userName
• totalScore
• maxHeight

見た目がラクダ（camel）のコブのように見えることからこの名前がついています。

5. JavaScriptの予約語には注意しよう

5. JavaScriptの予約語には注意しよう

JavaScriptには、あらかじめ決められた「特別な単語」があり、これを「予約語（よやくご）」といいます。予約語は変数名として使うとエラーになります。

たとえば次のような単語は予約語です。

• var
• function
• if
• let
• return

予約語はJavaScriptが特別な意味で使うため、変数名には使えません。

6. わかりやすい名前を考える練習をしよう

6. わかりやすい名前を考える練習をしよう

変数名を考えるのは、慣れてくると楽しくなります。次のように「何を入れるのか？」をイメージしながら名付けてみましょう。

• 「ユーザーの名前を入れる変数」→ userName
• 「商品の金額を入れる変数」→ productPrice
• 「合計点数を入れる変数」→ totalScore

最初のうちは英語が苦手でも構いません。日本語ローマ字でもOKです。

let namae = "はなこ";
let shohinKazu = 3;

ただし、将来的に他の人が読んでもわかりやすいように、英単語を使う習慣も少しずつ取り入れましょう。

まとめ

まとめ

JavaScriptでの変数名の付け方について全体を振り返ると、単純に好きな文字列を付ければよいというものではなく、エラーを避けて読みやすく整理されたコードを書くための工夫が随所に必要であることが分かります。変数はプログラムの中で値を保存して利用する重要な役割を持つため、わかりにくい名前や誤ったルールで記述した名前を使ってしまうと、後から自分自身が困ったり、他の人がコードを読んだときに理解しづらくなってしまう危険があります。特に、変数名には使える文字・使えない文字がはっきりと決まっており、数字で始めてはいけない、ハイフンは使えない、そしてJavaScriptの予約語は変数名にしてはいけない、といった基本的なルールが存在します。これらのルールに注意しながら命名することで、エラーを事前に防ぐことができ、安心してコードを書くことができます。 また、わかりやすい変数名を付けるためには、変数の役割を簡潔に示すことが大切です。「score」「studentName」「userAge」など、読み手がすぐに「何が入っている変数なのか」を想像できるようにすると、コードの可読性が一気に高まります。プログラムは一度書いて終わりではなく、あとから見返したり修正したりすることがよくあるので、こうした工夫は確実に後の作業を楽にしてくれます。さらにJavaScriptではキャメルケースという命名スタイルが一般的であり、単語の頭文字を大文字にすることで見やすさが向上します。このスタイルは多くの開発者に使われているため、慣れておくと他の人が書いたコードを読むときにも非常に役立ちます。 記事の内容を踏まえつつ、以下では実際のサンプルプログラムを参考にしながら、変数名の付け方・キャメルケース・使える文字と使えない文字といった基本ルールがどのように使われるのかを確認できるようにしています。命名規則は一度身につけてしまえばずっと使える知識なので、繰り返し練習しながら自然に身につけていきましょう。

サンプルプログラムで確認する命名ルール

// 正しい変数名
let userName = "たろう";      // キャメルケースを使った一般的な書き方
let totalScore = 95;           // 複数単語の変数名も見やすくなる
let $itemCount = 3;            // 特殊文字のドル記号は使用可能
let _secretCode = "XYZ";       // アンダースコアで始めることもできる

// 間違った変数名（エラーになる例）
/*
let 1name = "だめ";    // 数字ではじまっている
let my-name = "NG";    // ハイフンは使えない
let function = "不可"; // 予約語は変数名にできない
*/

// 変数を実際に使ってみる
console.log("ユーザー名：" + userName);
console.log("合計点数：" + totalScore);

このサンプルでは、変数名のルールが実際のコードにどのように反映されているかがよく分かります。キャメルケースの使い方、使用できる文字、エラーになる命名例などを確認すると、JavaScriptの命名規則が体系的に理解できます。特に、function や return などの予約語は構文上重要な役割を持つため、変数名として使えません。これはJavaScript内部でこれらの単語が既に特別な意味を持っており、変数名として使用すると混乱を招くためです。 また、変数名を考える際には「何を表している変数なのか」を短く明確に表現することが重要です。他の人が読んでも一目で内容が分かる変数名は、保守性の高いコードを実現し、長期間の開発でも品質を保ちやすくします。キャメルケースは単語のつながりを分かりやすく示すため、読みやすさと管理しやすさを同時に実現する便利なスタイルです。 プログラミングの学習初期では、変数名の命名が難しく感じることもありますが、毎回意識して名前を付けていくことで、自然とわかりやすい命名の習慣が身についていきます。さらに、変数名を工夫することで自分だけでなく他の人にも読みやすいコードとなり、エラーの防止にもつながるため、プログラム全体の質を高める重要なポイントです。日常的に使うデータや処理を英単語で整理する練習をしておくと、より的確な命名ができるようになるでしょう。