【基本のき】JavaScriptの変数とは

はじめ

変数って何？

かみさま

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

はじめ

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

かみさま

名前をつけることによって色々なメリットが生まれるからだよ。

詳しくはこれからみていこう！

変数とは

変数とは文字列や数値などのデータを保存しておくための箱です。

箱に固有の名前をつけて、その中に文字列や数値などのデータが入っているイメージです。

もちろん取り出すことも可能で、取り出したことによって中身がなくなるわけではなく、繰り返し使うことができます。

変数の宣言と定義

変数を使うには、まずこの箱は変数であるということを宣言しないといけません。

JavaScriptの変数の宣言方法はconst, let, varの3種類です。

さらに宣言の後に箱の名前である変数名を書いて、=（代入演算子）で右辺の初期値を左辺の変数名に代入して変数を定義します。

つまり右辺の初期値を左辺の変数名で表すことができるようになります。

// constの場合
const name = 'suzuki';

// letの場合
let name = 'suzuki';

// varの場合
var name = 'suzuki';

3つとも同じような書き方をしますが、それぞれの変数の宣言によって特徴があります。

かみさま

const, let, varの違いは後で説明するよ。

変数名の決まり

変数名は比較的自由に決められますが、いくつか決まりがあります。

1文字目は、「英字」「_（アンダースコア）」「$（ドル記号）」のいずれか

2文字目以降は1文字目で使える文字と数字のいずれか

変数名に含まれる英字の大文字と小文字は区別される

JavaScriptで意味を持つ予約語ではないこと

かみさま

予約語とはすでにJavaScriptで割り当てられている単語のことだよ。

変数名の付け方

また決まりではないですが、変数名は後で見返したり使う時に中身に何が入っているかわかるようにしましょう。

名前を入れる変数だったらname、年齢を入れる変数だったらageなど。

もし複数の単語を使う場合は、先頭の単語は小文字で、それ以降の単語の頭文字は大文字で書くキャメルケース記法という記法を用いてください。

かみさま

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という変数を宣言した後、また同じ変数を宣言することができます。

変数宣言の違い一覧

かみさま

varが一番制限なく変数を定義できるよ。

文字列の確認

var name = 'suzuki';
var name = 'sato';  // OK

それぞれの使い道について

ここまでの説明だと、とりあえず制限もないvarを使っておけば便利で良いと思うかもしれません。

しかし実はむしろ逆で、varは使わずにconstを優先的に使い、for文の変数の中身が変化するようなconstでは対応しきれない部分をletを使うという形をとりましょう。

なぜならプログラミングというのは厳密な方がバグが少なくなり、可読性も上がるからです。

またvarを使うことによって、ここでは詳しくは説明しませんが、

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

が起こり、思いもよらないバグが発生する恐れもあります。

なので堅牢性があるconstを基本的に使うようにしましょう。

かみさま

varは色々なところに定義できるから便利だけど、バグが出やすくなるよ。

const obj = {
  name: 'suzuki',
  age: 25
}
console.log(obj.name) // suzuki

obj.name = 'sato';
console.log(obj.name) // sato

なぜvarがあるのか

プログラミング言語は年々アップデートしていくもので、JavaScriptにはバージョンがあります。そして昔は変数宣言がvarしかありませんでした。

constとletはES2015というバージョンから使えるようになり、そういった経緯から変数宣言方法が3種類になりました。

そして今varを無くしてしまうと、すでにvarで作られているプロジェクトや、ブラウザの対応状況によってconstやletが使えない場合があるので、使えるようになっています。

まとめ

最後にポイントをまとめておさらいをしましょう！