簡単に言うと、変数とはモンスターボールです。
モンスターボールに相棒を入れておき、必要な時にそれに応じた相棒を使います。
いくら相棒とはいえ、手持ち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>変数の宣言方法は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は再代入も際宣言もブロック外から呼び出すこともできるが、バグの温床となる
