JavaScriptの変数を完全ガイド！初心者でもわかる基本
新人
「JavaScriptの変数ってどうやって使うんですか？変数の使い方がわからないんです。」
先輩
「JavaScriptの変数は、データを保存するために使います。例えば、計算した結果やユーザーの入力を保存して、後で利用することができます。」
新人
「なるほど！具体的にはどうやって使うんですか？」
先輩
「それでは、変数の使い方と、いくつかのルールを説明していきますね。」
1. JavaScriptの変数とは？
JavaScriptの変数は、データを格納するための入れ物のようなものです。変数に数値、文字列、配列、オブジェクトなどのデータを格納し、それを後で参照したり変更したりできます。
変数を使うことで、プログラム内でデータを簡単に操作できます。例えば、計算結果やテキストの保存などです。
2. JavaScriptの変数の宣言方法
JavaScriptでは、変数を宣言する際にletやconstを使います。
- let：再代入が可能な変数を宣言する場合に使います。一般的にはこちらを使うことが多いです。
- const：再代入ができない定数を宣言する場合に使います。値を変更する必要がない場合は
constを使いましょう。
一方で、varというキーワードもありますが、これは古い方法で、現在はあまり使われていません。varはスコープが関数単位であるため、予期しない挙動を引き起こすことがあります。現在はletとconstが推奨されています。
次のコードでは、letとconstを使って変数を宣言する例を示します。
<script>
let name = "John"; // nameという変数に"John"を代入
const age = 30; // ageという定数に30を代入
</script>
このコードでは、letを使ってnameという変数を宣言し、"John"を代入しています。また、constを使ってageという定数を宣言し、30を代入しています。
3. 変数の再代入と定数
letで宣言した変数は、後で値を再代入することができます。例えば、次のように変数に新しい値を代入することが可能です。
<script>
let greeting = "こんにちは！";
greeting = "こんばんは！"; // greetingの値を変更
document.write(greeting); // 変更後のgreetingを表示
</script>
上記のコードでは、letで宣言したgreetingという変数に新しい値"こんばんは！"を代入しています。結果として、ページには"こんばんは！"と表示されます。
一方、constで宣言した変数は値を変更することができません。例えば、次のように定数に再代入を試みるとエラーが発生します：
<script>
const pi = 3.14;
pi = 3.14159; // エラー！定数は再代入できません
</script>
上記のコードでは、constで宣言したpiという定数に再代入をしようとしていますが、これはエラーになります。constは変更できない値に使用します。
4. document.write()を使って変数の内容を出力する
JavaScriptでは、document.write()を使って変数の内容をWebページに表示することができます。
次の例では、変数に格納された値をページに表示してみます。
<script>
let greeting = "こんにちは！";
document.write(greeting); // 変数greetingの内容をページに表示
</script>
上記のコードでは、変数greetingに格納された文字列をdocument.write()でページに表示しています。ページに"こんにちは！"が表示されます。
5. varの解説とその違い
JavaScriptでは、変数を宣言するためにvarというキーワードも使うことができます。ですが、varには少し特殊な挙動があり、現在はletやconstの方が推奨されています。
- var：関数スコープを持つため、関数内で宣言された
varは、関数外でもアクセスできてしまうことがあります。この挙動はバグの原因になりやすいです。 - let：ブロックスコープを持ち、ブロック内でのみ有効です。再代入も可能で、
varよりも安全に使えます。
例えば、次のコードではvarを使って変数を宣言していますが、ブロック内でも外でもその変数にアクセスできてしまいます。
<script>
if (true) {
var testVar = "varで宣言された変数";
}
document.write(testVar); // 関数外でもアクセス可能
</script>
上記のコードでは、varで宣言したtestVarがifブロック外でもアクセス可能になっています。これは予期せぬバグの原因になることがあります。
そのため、現在ではletやconstが推奨されています。
6. 変数の命名ルールと注意点
JavaScriptで変数を使う際には、わかりやすく適切な名前をつけることが重要です。変数名の付け方にはいくつかのルールがあります。
- 英数字・アンダースコア・ドル記号が使用可能：ただし先頭に数字は使えません。
- 予約語は使えない：
letやconstなどのキーワードは変数名にできません。 - 意味のある名前をつける：内容がわかる名前にすることで、コードの可読性が向上します。
例えば、次のように意味のある変数名をつけることで、コードが理解しやすくなります。
<script>
let userName = "Taro";
let totalPrice = 500;
</script>
このように、変数の役割が一目でわかる名前をつけることが大切です。
7. データ型と変数の関係
JavaScriptの変数には、さまざまなデータ型の値を格納することができます。主なデータ型には次のようなものがあります。
- 文字列（String）："こんにちは" などのテキスト
- 数値（Number）：100 や 3.14 などの数値
- 真偽値（Boolean）：true や false
- 配列（Array）：複数の値をまとめて管理
- オブジェクト（Object）：複雑なデータ構造
次のコードでは、さまざまなデータ型を変数に格納しています。
<script>
let message = "こんにちは";
let score = 80;
let isActive = true;
</script>
JavaScriptは動的型付け言語のため、変数に異なる型の値を代入することも可能です。
8. 変数のスコープ（有効範囲）を理解しよう
変数には「スコープ」と呼ばれる有効範囲があります。スコープを理解することで、バグを防ぎやすくなります。
- グローバルスコープ：どこからでもアクセスできる変数
- ローカルスコープ：特定のブロック内でのみ有効な変数
letやconstはブロックスコープを持つため、安全に変数を管理できます。
<script>
let globalVar = "グローバル";
if (true) {
let localVar = "ローカル";
document.write(localVar);
}
// document.write(localVar); // エラー：ブロック外では使えない
</script>
このように、スコープを意識して変数を使うことで、意図しない動作を防ぐことができます。
