初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
JavaScript

【JavaScript】 変数とは?変数の使い方と使い分け方法【let、const、var】

【JavaScript】変数とは 使い方から使い分けまで!

簡単に言うと、変数とはモンスターボールです。

モンスターボールに相棒を入れておき、必要な時にそれに応じた相棒を使います。
いくら相棒とはいえ、手持ち6匹全員をボールに入れずに、外に出しっぱなしでは管理が大変ですよね。知らんけど。

モンスターボールにはポケモンしか入りませんが、
変数には文字や数字、イベントそのものなど様々なものを入れることができます。

そして必要に応じて、必要な変数を繰り出します!
いけ!変数!

サンプルコードの使い方

コード右上のアイコンをクリックすることでコピーできます。
見出しが「サンプルコード」のコードは、空っぽのhtmlファイルにコピペするだけで結果を確認することができます!

それでは本文へ、レッツゴー!

変数とは?その役割と必要性について

変数とはモンスターボールと先ほど述べましたが、より具体的に見ていきましょう。

雰囲気としては、中学生の時に数学の授業で学んだ y = 10 的なやつと大体同じです。
ただ数学以上に、いろんなものを入れることができます。

例えば何度も使いまわしたい長い記述がある場合、変数がないとその都度記述しないといけません。

またその記述に変更があったとき、全てを書き換えなければいけませんよね。

えふぃ

修正や更新を繰り返すほど、誤字や脱字によるエラーが発生する確率があがっちゃいますよね!

そういった手間やエラーの回避に貢献してくれるのが変数です。

もはや生活必需品です。

変数の使い方!宣言と呼び出し方法

いきなり「y = 10」なんて書いても、残念ながら正しく認識してもらえません。

まずは「今から○○という名前で変数を使います!中身は●●です!」と、その変数を使うことを宣言しなければいけません。

一度宣言をすると、その変数を好きな場所で出したり、上書きしたり、自由に使うことができるようになります。

変数の宣言方法

変数の宣言はこのようにします。

// 変数宣言
let 変数名 = '文字';
let 変数名 = 数字;

注意する点は、文字を入れたい場合は”(クォーテーション)で囲むこと。
数字や関数、数式を入れる場合クォーテーションは不要です。

宣言した変数を呼び出す方法

使う時はそのまま変数名を記述するだけで使うことができます。
変数名にクオーテーションは不要です。

サンプルコード

変数を宣言して、使って、呼び出しています。
HTMLにコピペすると結果がconsoleに出力されています。

<script>
    // 商品の金額
    let price = 5000;
    // 商品購入数
    let num = 2;
    // 消費税
    let tax = 1.1;
    // 適当な文字
    let text = '円です。'

    // 合計金額
    let totalPrice = price * num * tax;

    // consoleに出力
    console.log(totalPrice + text);
</script>

console.log()について分からない方はこちら

変数の宣言方法は3種類!(let、const、var)

ここまでletを使って変数を宣言してきましたが、letの他にもconstとvarで変数を宣言することができます。

まず最初に、慣れないうちはletだけ使っておいて問題ないです。
とりあえずletを使っておけば、大きな問題も発生しません。

慣れないうちはとりあえずlet

letは変数を宣言したあと、再代入をすることが許されています。
再代入とは、最初に入れた値を、別の値で上書きするということです。

上書きする際、letの記述は不要です。

そしてconstは、再代入をすることができません。
実際に見てみましょう。

サンプルコード

letは再代入ができていますが、constは再代入ができないためエラーが発生しています。

<script>
    // letで宣言した変数を再代入する
    let sampleA = 10;
    sampleA = 10 + 1;
    console.log(sampleA);

    // constで宣言した変数を再代入する
    const sampleB = 10;
    sampleB = 10 + 1;
    console.log(sampleB);
</script>

なぜconstを使う必要があるのか

再代入ができないconstに対して、それが可能なlet。

ぱっと見、constはletの下位互換のような雰囲気を醸し出しています。

constを使う必要がどこにあるのでしょうか?

簡単に言うと、再代入を許さないことで不要なエラーや誤作動を回避します。

そのため慣れてきたら、優先的にconstを使っていくことを推奨します。

えふぃ

基本はconstを使って、再代入が必要な場面でだけletを使うのがベスト!

ただ挙動が変わるわけではないので慣れないうちはletだけでもOK!

変数には有効範囲がある

好きな場所で宣言して、いつでも好きな場所で使えるかというとそうではありません。
変数には、有効範囲があります。

letとconstは{}内(ブロック内)で宣言された場合、その外から呼び出すことはできません

サンプルコード

「hey is not defined(変数heyは定義されていません)」と、consoleにエラーが表示されます。

<script>
    {
        const hey = 'へい!'
    }
    console.log(hey);
</script>

varは存在だけ知っておけばいい

varは、letやconstが誕生する前から変数として活躍していました。
letやconstが登場した今、その役目は終えたと言っていいです。

ただ今でも、よそのサイトのサンプルコードなどで、varを使っていることが多々あるため、その存在だけ認知しておけば問題ありません

使い方も概ね同じです。

一応varの特徴を述べておくと、再代入もできて、際宣言(再び変数宣言をすること)もできて、{}外(ブロック外)から呼び出すことができます。

超絶万能な変数なのですが、エラーや誤作動の温床になる危険性を秘めています。

変数のまとめ

  • 変数の宣言方法は「let 変数名 = 値;」
  • 変数の宣言方法は、let、const、varの3種類ある。
  • とりあえずlet使っておけば間違いない。再代入もできる。
  • constは再代入ができないが、それによりエラーや誤作動から守ってくれる。
  • 慣れたらconstをメインに使っていく
  • letとconstは{}内(ブロック内)で宣言すると、その外から使うことができない。
  • varは再代入も際宣言もブロック外から呼び出すこともできるが、バグの温床となる