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

はじめ
はじめ

変数って何?

かみさま
かみさま

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

はじめ
はじめ

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

かみさま
かみさま

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

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

この記事はこんな方にオススメ!
  • プログラミング初心者。
  • これからJavaScriptを習得していきたい。
  • 変数の必要性について知りたい。

変数とは

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

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

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

変数のイメージ

変数の宣言と定義

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

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

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

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

JavaScriptの変数の宣言と定義
  • const 変数名 = 初期値;
  • let 変数名 = 初期値;
  • var 変数名 = 初期値;
JavaScript
// constの場合
const name = 'suzuki';
JavaScript
// letの場合
let name = 'suzuki';
JavaScript
// 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で変数名を書く時にはキャメルケース記法が慣例となっているんだ。

変数に入れる文字列や値について

文字列を入れる場合は「’ ‘(シングルクォーテーション)」または「” “(ダブルクォーテーション)」で囲み、数値の場合はそのまま入れます。

JavaScript
const name = 'suzuki';  // 文字列
const number = 1; // 数値
かみさま
かみさま

数値をクォーテーションで囲むと文字列として認識されるから注意してね。

変数の使い方

変数を定義した後。使いたいところに変数名を書いて出力します。

JavaScript
const name = 'suzuki' // 変数の宣言と定義
console.log(name);  // suzukiと出力される

console.log(name)nameが変数に入っていたsuzukiに置き換わって出力されます。

console.logに書いた変数にクォーテーションで囲むと、文字列として認識されてしまうので、変数のの値を出力したい場合はそのまま書きましょう。

JavaScript
 const name = 'suzuki';
 console.log(name); // 変数に入っているsuzukiが出力される
 console.log('name'); // nameという文字列が出力される

変数の特徴

変数は文字列や数値と同じように扱えます。

JavaScript
const name = 'suzuki';
const number = 1;
console.log(name + 'さん'); // suzukiさんと出力される
console.log(number + 2);  // 3と出力される

+」で変数が文字列の場合は文字列連結され、数値であれば計算されます。

変数の必要性

変数の必要性について説明します。

同じ値や文字列をを使いまわせる

似たような処理を何度も書かなくて済み、変更する場合も対応箇所だけ修正できます。

JavaScript
const name = 'suzuki';
console.log('はじめまして' + name + 'さん');  // はじめましてsuzukiさん
console.log(name + 'さんの出身地は東京です');   // suzukiさんの出身地は東京です
かみさま
かみさま

どんな文章でもnameを書けばそこにsuzukiが入るから、コードを書くのが簡単になるよ。

また同じ文章をname部分だけ変えたい場合も、定義しているnameのところを変更すれば全て変わるので修正漏れのミスを防げます。

JavaScript
const name = 'sato';  // suzukiをsatoに変更
console.log('はじめまして' + name + 'さん');  // はじめましてsatoさん
console.log(name + 'さんの出身地は東京です');   // satoさんの出身地は東京です
かみさま
かみさま

変数に入れていることで、修正箇所が1箇所ですむね。

変数によってどんな処理が行われているのか明確化できる

JavaScript
const price = 100;
console.log(price * 1.1); // 110

上記のコードは価格priceの変数に消費税の10%を加味した価格を求める例です。

このぐらいシンプルであれば推測しやすいですが、例えば1.1という数値は何を意味しているか考えた場合、全員が消費税とかわかるわけではありません。

かみさま
かみさま

もしかしたら値上げ率を表すのか、サービス料を表すのか、と思う人もいるかもしれないよね。

次に消費税の10%を加味した値1.1を変数に入れてみます。

JavaScript
const price = 100;
const tax = 1.1
console.log(price * tax); // 110

消費税を加味した値を変数に入れたことによって、結果が同じでもどう言った処理を行っているか一目でわかります。

さらに消費税が変われば、処理部分に手を加えることなくtaxの値を変更でき、書いている場所が複数あっても、一箇所を変えれば良いので、手間もミスも少なくなります。

可読性が良くなる

JavaScript
const appWidth = document.getElementById('app').offsetWidth

上記のコードはHTMLのidがappである要素の幅の値を取得する例です。

もし変数に入れてない場合、必要な時に同じコードを何回も書かなくてはなりません。

しかし変数に入れていれば、必要な時にappWidthを書けば良いので、可読性も良くなり開発効率も上がります。

かみさま
かみさま

変数をうまく使えることが、コードが見やすくなりプログラマーとしての評価にも繋がるよ。

最後にconst, let, varについて説明します。

const, let, varの違い

それぞれの変数宣言でどう変数に違いが出てくるのか見ていきましょう。

constについて

constは再代入、再宣言ができません。

再代入の例

JavaScript
const name = 'suzuki';
name = 'sato';  // NG

nameという変数を定義した後、その変数に違うデータを入れることはできません。

再宣言の例

JavaScript
const name = 'suzuki';
const name = 'sato';  // NG

nameという変数を宣言した後、また同じ変数を宣言することはできません。

letについて

letは再代入はできますが、再宣言できません。

再代入の例

JavaScript
let name = 'suzuki';
name = 'sato';  // OK

nameという変数を定義した後、その変数に違うデータを入れることができます。

再宣言の例

JavaScript
let name = 'suzuki';
let name = 'sato';  // NG

nameという変数を宣言した後、また同じ変数を宣言することはできません。

varについて

varは再代入、再宣言ができます。

再代入の例

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

nameという変数を定義した後、その変数に違うデータを入れることができます。

再宣言の例

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

nameという変数を宣言した後、また同じ変数を宣言することができます。

変数宣言の違い一覧

宣言方法再代入再宣言
const××
let×
var
変数宣言の違い一覧
かみさま
かみさま

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

文字列の確認

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

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

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

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

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

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

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

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

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

かみさま
かみさま

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

MEMO

実はconstも再代入ができないだけで、値を変更することができます。

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

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

上記の例のように、オブジェクトの場合は値を変更することが可能になります。

まだどういうことかわからない方も、constでも場合によっては値が変更できるということを頭の片隅においてもらえればと思います。

なぜvarがあるのか

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

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

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

まとめ

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

JavaScripの変数とは
  • 変数とは文字列や数値のデータを保存しておくための箱。
  • 変数名はキャメルケース記法で書く。
  • 変数宣言はconst, let,varの3種類がある。
  • 基本的に変数はconstを使い、constで対応できない部分をletを使う。
  • varは極力使わない。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です