JavaScriptの変数を完全ガイド！初心者でもわかる基本

新人と先輩の会話形式で理解しよう

新人

「JavaScriptの変数ってどうやって使うんですか？変数の使い方がわからないんです。」

先輩

「JavaScriptの変数は、データを保存するために使います。例えば、計算した結果やユーザーの入力を保存して、後で利用することができます。」

新人

「なるほど！具体的にはどうやって使うんですか？」

先輩

「それでは、変数の使い方と、いくつかのルールを説明していきますね。」

1. JavaScriptの変数とは？

JavaScriptの変数は、データを格納するための入れ物のようなものです。変数に数値、文字列、配列、オブジェクトなどのデータを格納し、それを後で参照したり変更したりできます。

変数を使うことで、プログラム内でデータを簡単に操作できます。例えば、計算結果やテキストの保存などです。

JavaScriptでは、変数を宣言する際にletや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を代入しています。

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は変更できない値に使用します。

JavaScriptでは、document.write()を使って変数の内容をWebページに表示することができます。

次の例では、変数に格納された値をページに表示してみます。


<script>
    let greeting = "こんにちは！";
    document.write(greeting);  // 変数greetingの内容をページに表示
</script>

ブラウザ表示

上記のコードでは、変数greetingに格納された文字列をdocument.write()でページに表示しています。ページに"こんにちは！"が表示されます。

JavaScriptでは、変数を宣言するためにvarというキーワードも使うことができます。ですが、varには少し特殊な挙動があり、現在はletやconstの方が推奨されています。

例えば、次のコードではvarを使って変数を宣言していますが、ブロック内でも外でもその変数にアクセスできてしまいます。


<script>
    if (true) {
        var testVar = "varで宣言された変数";
    }
    document.write(testVar);  // 関数外でもアクセス可能
</script>

ブラウザ表示

上記のコードでは、varで宣言したtestVarがifブロック外でもアクセス可能になっています。これは予期せぬバグの原因になることがあります。

そのため、現在ではletやconstが推奨されています。