変数とは - コーディング

変数

変化するもの（値が変化する器）
値を直接書かずに抽象化して扱う
変数はプログラム中のメモリ領域に付けた名前です
さまざまな値を一時的に記憶しておくために使われます
言葉（文字列）や数字（数値）を一時的に保存する「箱」
繰り返し使う言葉は「変数」として使う
１回だけ書いてコピーするという発想

変数の定義および変数の呼び出し

変数には「変数の定義」と「変数の呼び出し」という行為が存在しま

変数の定義

変数を作成する行為を「変数の定義」といいます

変数の名前付けルール

const、let、var で変数宣言
変数名の先頭は英文字かアンダースコアであること
変数名は、先頭の数字・ハイフン・予約語は使用不可
変数名の２文字目以降は、英数字かアンダースコアであること（「- ハイフン」は不可）
変数名の大文字・小文字は区別される

let name;

予約語について

変数名のルールとしてもうひとつ、「予約語は使えない」というものがあります。予約語とはJavaScriptの言語自体に使われているさまざまな語句です。
詳細は以下にまとまっていますのでざっと眺めておくと良いでしょう。

読みやすいコードのための名前付け

変数の中身を理解しやすい
長すぎたり、省略し過ぎたりしない
似たような名前を付けない
基本的には英単語
決められた記法で統一する（キャメルケース記法、アンダースコア記法）
JavaScriptでは、変数名に（-）を使った、ケバブ記法は注意が必要

変数宣言

「宣言」とは、変数に名前をつけて利用するための準備をすることです
宣言は一度だけおこないます

「const」と「let」の違い

基本的には「const」を使って、変数であることを宣言します
再代入が必要な場合には「let」を使用します
「let」で宣言した変数は、どこで再代入されたかを予測する必要があります

変数名の前に「半角スペース」を入れる

複数の変数を宣言する場合は「カンマ」で区切る

const 変数名1, 変数名2, 変数名3, … ;

let

letを使用すると、宣言した変数の値を、もう一度代入することができます

let 変数名 = 値;

const

constは、宣言した変数の再代入や再定義ができなくなります

const 変数名 = 値 ;

var

varを使用すると、以下のコードのようにlet同様宣言した変数の値をもう一度代入することができます
意図せずに同じ名前で変数を定義してもエラーが表示されないため、予期せぬプログラムエラーが発生する恐れがあります。このような現象を「二重定義」といいます
変数を再定義する機会はあまりないので、varは現在ではあまり使用されません

var 変数名 = 値 ;

宣言	再代入	再定義	使用頻度
var	○	○	✕
let	○	✕	○
const	✕	✕	◎

変数の利用

値を代入して使う

代入

「=」の右辺のデータを左辺に格納すること

;（セミコロン）

ここまでが１つの文であることを表す記号です

変数への値の代入

変数の中に値を入れることを代入と呼びます
変数が持つことができる値は１つだけなので、代入をするたびに上書きされます
右辺を左辺に入れる

変数名 = 値 ;

《変数への値の代入》

aという名前の変数がメモリに作られる
変数aの中に10が代入される
変数aの中身が20に上書きされる（再代入されるため、letで宣言）

変数名はシングルクォートまたはダブルクォートで囲まない！

  let a;
  a = 10;
  a = 20;

《変数への文字の代入》

文字をシングルクォート（またはダブルクォート）で囲む

  let name = '鈴木です。';

変数の初期化

宣言時に値を代入することを「初期化」と呼びます
変数宣言のみで初期化を行わない場合、変数の中には初期値として「undefined」という特殊な値が入ります
変数を計算などに利用する場合は、必ず先に値を入れておきます

変数の表示

変数の中身を表示するには、「console.log」や「alert」の丸括弧（）内に変数名を指定します
変数名をシングルクォートまたはダブルクォートで囲むと、囲まれた範囲は単純な文字列となり、変数名がそのまま表示されてしまいます

《変数の中身の表示》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>変数の中身の表示</title>
<script>
  const a = 10;
  console.log(a);
</script>
</head>
<body>
</body>
</html>