変数とは？

変数とは

データを保存しておくための箱

料理で例えると

肉、野菜、魚を使う <- お皿に入ってるよね
手順ごとに取り出して味付け、加工を行う
材料を置いておく場所、それが変数みたいなもの

ex

// 下に示すように値を取得することができるが記述が長く見にくくなってしまう
const fooArea = document.getElementByID("foo").offsetWidth * document.getElementByID("foo").offsetHeight;

// 次のように変数に分けたり、同じ記述を変数にまとめることで簡潔に見やすく書くことができる
const foo = document.getElementByID("foo") ;
const fooWidth = foo.offsetWidth;
const fooHeight = foo.offsetHeight;
const fooArea = fooWidth * fooHeight;

変数の宣言方法

宣言の種類

宣言の種類	再代入	再定義
const	不可能	不可能
let	可能	不可能
var	可能	可能

• const
  再代入できない、再定義できない。

//再代入できない
const var1 = 100;
var1 = 200;

//再定義はできない
const var2 = 100;
const var2 = 200;

//定数のように感じるが、以下の例ではプロパティの内容を変更することができるため定数ではない
const obj = {
  foo: 123
};

obj.foo = 456;

• let
  再代入できる、再定義できない

//再代入できる
let var1 = 100;
var1 = 200;

//再定義できない
let var2 = 100;
let var2 = 200;

• var
  再代入できる、再定義できる

//再代入できる
var var1 = 100;
var1 = 200;

//再定義できない
var var2 = 100;
var var2 = 200;

const, let, varの使い分けについて

ほとんどconstを使用、たまにlet, varを使ったら負けという気持ちでコーディングする

varを使用しない理由

varを使用すると

• ブロックスコープの無視
• 変数の巻き上げ(Hoisting)

といったバグの温床になる性質があるため使用しない。

varが存在する理由

const, letは最近使用できるようになり、後方互換性(古いプログラムを今の環境でも動くようにする)のためにvarがまだ使用できるようになっている。

変数名のルール

//変数名の先頭の文字は英文字、"_"(アンダースコア)、または$(ドル文字)にする必要がある
const foo = 100;
const _foo = 100;
const $foo = 100;

//次のような数字で始まる変数は宣言することができない
const 1foo = 100;

//先頭文字以降であれば数字を記述して宣言することが可能
const f1oo = 100;
const fo2o = 200;
const foo3 = 300;

変数名の記述種類

変数名の命名規則は主に以下の２つが使用されています

• キャメルケース(camelCase)
  変数名の単語のつなぎ目の先頭文字を大文字にする ラクダ(camel)のコブのようなのでキャメルケースと呼ばれています。

const fooWith = 100;

• スネークケース(snake_Case)

変数名の単語のつなぎ目に"_"(アンダースコア)をいれる 蛇のようなのでスネークケースと呼ばれています。

const foo_width