
変数って何?

固有の名前をつけてデータを保存しておくことだよ。

何で固有の名前をつけるの?

名前をつけることによって色々なメリットが生まれるからだよ。
詳しくはこれからみていこう!
- プログラミング初心者。
- これからJavaScriptを習得していきたい。
- 変数の必要性について知りたい。
目次
変数とは
変数とは文字列や数値などのデータを保存しておくための箱です。
箱に固有の名前をつけて、その中に文字列や数値などのデータが入っているイメージです。
もちろん取り出すことも可能で、取り出したことによって中身がなくなるわけではなく、繰り返し使うことができます。

変数の宣言と定義
変数を使うには、まずこの箱は変数であるということを宣言しないといけません。
JavaScriptの変数の宣言方法はconst
, let
, var
の3種類です。
さらに宣言の後に箱の名前である変数名を書いて、=
(代入演算子)で右辺の初期値を左辺の変数名に代入して変数を定義します。
つまり右辺の初期値を左辺の変数名で表すことができるようになります。
- const 変数名 = 初期値;
- let 変数名 = 初期値;
- var 変数名 = 初期値;
// constの場合
const name = 'suzuki';
// letの場合
let name = 'suzuki';
// varの場合
var name = 'suzuki';
3つとも同じような書き方をしますが、それぞれの変数の宣言によって特徴があります。

const, let, varの違いは後で説明するよ。
変数名の決まり
変数名は比較的自由に決められますが、いくつか決まりがあります。
1文字目は、「英字」「_(アンダースコア)」「$(ドル記号)」のいずれか
良い例 | name, _name, $name |
悪い例 | 123name, -name |
2文字目以降は1文字目で使える文字と数字のいずれか
良い例 | name123 |
悪い例 | n!ame, name-123 |
変数名に含まれる英字の大文字と小文字は区別される
例 | nameという変数とNameという変数は別物 |
JavaScriptで意味を持つ予約語ではないこと
悪い例 | if, for, switch |

予約語とはすでにJavaScriptで割り当てられている単語のことだよ。
変数名の付け方
また決まりではないですが、変数名は後で見返したり使う時に中身に何が入っているかわかるようにしましょう。
名前を入れる変数だったらname、年齢を入れる変数だったらageなど。
もし複数の単語を使う場合は、先頭の単語は小文字で、それ以降の単語の頭文字は大文字で書くキャメルケース記法という記法を用いてください。
キャメルケース記法の例 | bookTitle, currentPostData |

JavaScriptで変数名を書く時にはキャメルケース記法が慣例となっているんだ。
変数に入れる文字列や値について
文字列を入れる場合は「’ ‘(シングルクォーテーション)」または「” “(ダブルクォーテーション)」で囲み、数値の場合はそのまま入れます。
const name = 'suzuki'; // 文字列
const number = 1; // 数値

数値をクォーテーションで囲むと文字列として認識されるから注意してね。
変数の使い方
変数を定義した後。使いたいところに変数名を書いて出力します。
const name = 'suzuki' // 変数の宣言と定義
console.log(name); // suzukiと出力される
console.log(name)
のname
が変数に入っていたsuzukiに置き換わって出力されます。
console.logに書いた変数にクォーテーションで囲むと、文字列として認識されてしまうので、変数のの値を出力したい場合はそのまま書きましょう。
const name = 'suzuki';
console.log(name); // 変数に入っているsuzukiが出力される
console.log('name'); // nameという文字列が出力される
変数の特徴
変数は文字列や数値と同じように扱えます。
const name = 'suzuki';
const number = 1;
console.log(name + 'さん'); // suzukiさんと出力される
console.log(number + 2); // 3と出力される
「+
」で変数が文字列の場合は文字列連結され、数値であれば計算されます。
変数の必要性
変数の必要性について説明します。
同じ値や文字列をを使いまわせる
似たような処理を何度も書かなくて済み、変更する場合も対応箇所だけ修正できます。
const name = 'suzuki';
console.log('はじめまして' + name + 'さん'); // はじめましてsuzukiさん
console.log(name + 'さんの出身地は東京です'); // suzukiさんの出身地は東京です

どんな文章でもname
を書けばそこにsuzukiが入るから、コードを書くのが簡単になるよ。
また同じ文章をname
部分だけ変えたい場合も、定義しているname
のところを変更すれば全て変わるので修正漏れのミスを防げます。
const name = 'sato'; // suzukiをsatoに変更
console.log('はじめまして' + name + 'さん'); // はじめましてsatoさん
console.log(name + 'さんの出身地は東京です'); // satoさんの出身地は東京です

変数に入れていることで、修正箇所が1箇所ですむね。
変数によってどんな処理が行われているのか明確化できる
const price = 100;
console.log(price * 1.1); // 110
上記のコードは価格price
の変数に消費税の10%を加味した価格を求める例です。
このぐらいシンプルであれば推測しやすいですが、例えば1.1という数値は何を意味しているか考えた場合、全員が消費税とかわかるわけではありません。

もしかしたら値上げ率を表すのか、サービス料を表すのか、と思う人もいるかもしれないよね。
次に消費税の10%を加味した値1.1
を変数に入れてみます。
const price = 100;
const tax = 1.1
console.log(price * tax); // 110
消費税を加味した値を変数に入れたことによって、結果が同じでもどう言った処理を行っているか一目でわかります。
さらに消費税が変われば、処理部分に手を加えることなくtaxの値を変更でき、書いている場所が複数あっても、一箇所を変えれば良いので、手間もミスも少なくなります。
可読性が良くなる
const appWidth = document.getElementById('app').offsetWidth
上記のコードはHTMLのidがappである要素の幅の値を取得する例です。
もし変数に入れてない場合、必要な時に同じコードを何回も書かなくてはなりません。
しかし変数に入れていれば、必要な時にappWidth
を書けば良いので、可読性も良くなり開発効率も上がります。

変数をうまく使えることが、コードが見やすくなりプログラマーとしての評価にも繋がるよ。
最後にconst, let, varについて説明します。
const, let, varの違い
それぞれの変数宣言でどう変数に違いが出てくるのか見ていきましょう。
constについて
constは再代入、再宣言ができません。
再代入の例
const name = 'suzuki';
name = 'sato'; // NG
name
という変数を定義した後、その変数に違うデータを入れることはできません。
再宣言の例
const name = 'suzuki';
const name = 'sato'; // NG
name
という変数を宣言した後、また同じ変数を宣言することはできません。
letについて
letは再代入はできますが、再宣言できません。
再代入の例
let name = 'suzuki';
name = 'sato'; // OK
name
という変数を定義した後、その変数に違うデータを入れることができます。
再宣言の例
let name = 'suzuki';
let name = 'sato'; // NG
name
という変数を宣言した後、また同じ変数を宣言することはできません。
varについて
varは再代入、再宣言ができます。
再代入の例
var name = 'suzuki';
name = 'sato'; // OK
name
という変数を定義した後、その変数に違うデータを入れることができます。
再宣言の例
var name = 'suzuki';
var name = 'sato'; // OK
name
という変数を宣言した後、また同じ変数を宣言することができます。
変数宣言の違い一覧
宣言方法 | 再代入 | 再宣言 |
---|---|---|
const | × | × |
let | ○ | × |
var | ○ | ○ |

varが一番制限なく変数を定義できるよ。
文字列の確認
var name = 'suzuki';
var name = 'sato'; // OK
それぞれの使い道について
ここまでの説明だと、とりあえず制限もないvar
を使っておけば便利で良いと思うかもしれません。
しかし実はむしろ逆で、var
は使わずにconst
を優先的に使い、for
文の変数の中身が変化するようなconst
では対応しきれない部分をlet
を使うという形をとりましょう。
なぜならプログラミングというのは厳密な方がバグが少なくなり、可読性も上がるからです。
またvar
を使うことによって、ここでは詳しくは説明しませんが、
- ブロックスコープの無視
- 変数の巻き上げ(Hoisting)
が起こり、思いもよらないバグが発生する恐れもあります。
なので堅牢性があるconstを基本的に使うようにしましょう。

varは色々なところに定義できるから便利だけど、バグが出やすくなるよ。
実はconstも再代入ができないだけで、値を変更することができます。
const obj = {
name: 'suzuki',
age: 25
}
console.log(obj.name) // suzuki
obj.name = 'sato';
console.log(obj.name) // sato
上記の例のように、オブジェクトの場合は値を変更することが可能になります。
まだどういうことかわからない方も、const
でも場合によっては値が変更できるということを頭の片隅においてもらえればと思います。
なぜvarがあるのか
プログラミング言語は年々アップデートしていくもので、JavaScriptにはバージョンがあります。そして昔は変数宣言がvar
しかありませんでした。
const
とlet
はES2015というバージョンから使えるようになり、そういった経緯から変数宣言方法が3種類になりました。
そして今varを無くしてしまうと、すでにvar
で作られているプロジェクトや、ブラウザの対応状況によってconst
やlet
が使えない場合があるので、使えるようになっています。
まとめ
最後にポイントをまとめておさらいをしましょう!
- 変数とは文字列や数値のデータを保存しておくための箱。
- 変数名はキャメルケース記法で書く。
- 変数宣言はconst, let,varの3種類がある。
- 基本的に変数はconstを使い、constで対応できない部分をletを使う。
- varは極力使わない。
コメントを残す