変数は、文字列や数字などの値を入れる「箱」のようなもので、プログラミングの基本的な概念です。
基本ではありますが、いきなり「箱」といわれても、イメージしづらいですよね。
なぜ「箱」にたとえられるのか、どう便利なのかを理解してもらうために、まずは「変数のない世界」を見てみましょう。
アウトプット方法／DOM操作／基本文法 で学んだ console.log を使って、「Hello, world!」を 5 回コンソールに表示させます。

1
2
3
4
5

console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');

開発者ツールのコンソールを使用して JavaScript コードを書く際は、Enter キーを押すと入力したコードが即座に実行されます。
コードを実行せずに改行を挿入したい場合は Shift+Enter を押してください。

上記のコードを使えば、たしかに「Hello, world!'」を 5 回コンソールに表示させることができます。

しかしコードを書き終わった後で、「やはり『Hello, world!』ではなく『こんにちは！』を表示したい」と思ったら、どうなるでしょうか？
「Hello, world!」の部分を、すべて「こんにちは！」に変更しなければなりません。
今回の例では変更箇所は 5 箇所で済みますが、数十行、数百行のコードとなると、修正がとてもたいへんになります。
加えて、そもそも「Hello, world!」が登場しすぎて、読みにくいコードになってしまいます。

こうした問題を解決してくれるのが変数です。
先ほどのコードを変数を使って書き直してみます。

1
2
3
4
5
6
7

const hello = 'Hello, world!';

console.log(hello);
console.log(hello);
console.log(hello);
console.log(hello);
console.log(hello);

1 行目に変数に関する記述を追加しました。
この記述は「hello という箱、つまり変数に『Hello, world!』という文字列を入れてください」という意味です。
最初に値を変数へ代入しておくことで、後の処理では変数を使って値を呼び出せることがわかりますね。
「Hello, world!」を「こんにちは！」に変更したいときも、1 行目の値を変更するだけで済みます。

それでは、変数の重要性が理解できたところで、JavaScript の変数について学んでいきましょう。

変数を使うには、はじめに「値を入れる箱」を用意する必要があります。これを変数の宣言といいます。
変数の宣言と代入は、次のように行います。

1

const 変数名 = 変数に格納したい値;

const は、変数を宣言するときに記述するキーワードです。
たとえば、number という変数名に 10 を代入したい場合、次のように変数を宣言します。

1

const number = 10;

変数を宣言するときに記述するキーワードは、const のほかに let があります。
主な両者の違いは、「宣言した変数に、再び値を代入できるか」です。

const を利用した場合、変数に値を再代入できません。
たとえば、次のコードをコンソールで実行すると、エラーが発生します。

1
2
3
4

const number = 10;

// number に15を再代入しようとすると、エラーが発生する
number = 15;

対して、let を利用した場合、変数に値を再代入できます。
先ほどのコードの const を let に置き換えると、エラーは発生しなくなります。

1
2
3
4

let number = 10;

// number に15を再代入できる
number = 15;

一見、再代入できる let を常に使えば良さそうですが、同じ名前の変数を使い回すのは思わぬ不具合の原因になり得ます。
再代入が必要な変数以外では、const を利用するとよいでしょう。

補足

var

JavaScript の古いコードを読むと、var というキーワードを目にすることがあるかもしれません。
var は JavaScript の古いバージョンで使われていたキーワードです。現在は、さまざまな問題から非推奨とされています。
もし var に遭遇したら、「ここは const で書き換えられるな」などと考えながら、コードを読み進めるのをおすすめします。

「データ型」はその名のとおり、値となるデータの種類です。

Web サイトのアンケートフォームで「数字を入力してください」「32 文字で次の文字列を入力してください」というように、入力値の種類が指定されていることがありますよね。

JavaScript でも同じように、扱う値の種類を意識してプログラミングする必要があります。

ここでは、JavaScript で扱えるデータ型として代表的な「数値」「文字列」「真偽値」を説明します。
値の前に typeof をつけると、値のデータ型を調べることができます。

10 や 1.41421356 といった値は、数値のデータ型に属します。
コード中では、「'」や「"」で囲まず、そのまま記述します。

1

console.log(typeof 10); // 「number」が実行結果

「Hello, world!」や「こんにちは！」といった値は、文字列のデータ型に属します。
コード中では、「'」や「"」で囲んで記述します。

1

console.log(typeof 'Hello, world!'); // 「string」が実行結果

true と false の 2 つの値は、真偽値と呼ばれるデータ型に属します。
真偽値は、プログラミングの条件分岐などで使用します。
コード中では、「'」や「"」で囲まず、そのまま記述します。

1

console.log(typeof true); // 「boolean」が実行結果

これまでは、ひとつの値を変数に入れる方法を説明してきましたが、JavaScript では、複数の値をまとめて変数に入れることもできます。
たとえば、「いろんな果物の名前を fruits 変数で管理する」ことも可能なのです。

複数のデータをひとつの変数で扱うには、配列やオブジェクトを利用します。

配列は、複数の値に順序をつけて格納できます。

配列に格納したそれぞれの値を要素と呼びます。
コード中では、要素をそれぞれ「,」で区切り、すべての要素をひとまとめにして「[]」で囲みます。
次のコードでは、配列の要素は「apple」「orange」「grape」となります。

1

const fruits = ['apple', 'orange', 'grape'];

それぞれの値の位置をインデックスと呼びます。
インデックスはゼロから始まり、1 ずつ増えていきます。
配列名[インデックス] と記述すると、要素を取り出すことができます。

1
2
3
4
5

const fruits = ['apple', 'orange', 'grape'];

console.log(fruits[0]); // 「apple」が実行結果
console.log(fruits[1]); // 「orange」が実行結果
console.log(fruits[2]); // 「grape」が実行結果

また、配列名.length と記述すると、配列の要素数を取得できます。

1
2
3

const fruits = ['apple', 'orange', 'grape'];

console.log(fruits.length); // 「3」が実行結果

オブジェクトは、複数の対となるデータをひとまとめにして管理できます。
通常の配列では難しい「いろんな果物の名前と説明を一緒に管理したい」といったことも可能になります。

オブジェクトでは、1 組のキーと値を、プロパティと呼びます。
プロパティは、キー: 値 の形で記述し、プロパティ全体を「{}」で囲みます。
複数のプロパティをひとつのオブジェクトに含めるときは、プロパティを「,」で区切ります。
次のコードでは、apple: 'バラ科リンゴ属の落葉高木' がプロパティのひとつにあたります。

1
2
3
4
5

const fruits = {
  apple: 'バラ科リンゴ属の落葉高木',
  orange: 'ミカン科ミカン属の常緑小高木',
  grape: 'ブドウ科のつる性落葉低木'
};

オブジェクト名.キー と記述すると、キーと対になる値を取得できます。

1
2
3
4
5
6
7

const fruits = {
  apple: 'バラ科リンゴ属の落葉高木',
  orange: 'ミカン科ミカン属の常緑小高木',
  grape: 'ブドウ科のつる性落葉低木'
};

console.log(fruits.apple); // 「バラ科リンゴ属の落葉高木」が実行結果

補足

ドット記法とブラケット記法

オブジェクトの値にアクセスする方法には、「ドット記法」と「ブラケット記法」があります。
ドット記法は、先ほどのサンプルコードで例示したような オブジェクト名.キー と記述する方法です。
ブラケット記法は、オブジェクト名['キー'] と記述する方法です。
どちらも同じように、オブジェクトの値にアクセスできます。

次のコードを実行すると、同じ結果が出力されます。

1 2 3 4 5 6 7

const company = { name: 'サイボウズ株式会社', established: '1997/08/08', }; console.log(company.name); // ドット記法：「サイボウズ株式会社」が実行結果 console.log(company['name']); // ブラケット記法：「サイボウズ株式会社」が実行結果

しかし、キー名を変数で指定したい場合はブラケット記法しか使用できません。 オブジェクト名[変数名] のように記述します。

1 2 3 4 5 6 7 8

const company = { name: 'サイボウズ株式会社', established: '1997/08/08', }; const key = 'name'; console.log(company.key); // ドット記法：エラーになる console.log(company[key]); // ブラケット記法：「サイボウズ株式会社」が実行結果

つまずきやすいところなので、違いを理解して使い分けましょう。

JavaScript では演算に使えるさまざまな演算子が用意されています。
ここでは、四則演算に使う二項演算子と、値の比較に使う比較演算子を説明します。

「足す／引く／掛ける／割る」の四則演算に使う演算子は、次のとおりです。

• +：足す。
• -：引く。
• *：掛ける。
• /：割る。

使い方は一般的な計算と同じです。ただし、+ 演算子は文字列も結合できる点が特徴です。

1
2
3
4
5

console.log(1 + 1); // 「2」が実行結果
console.log('今日の天気は' + '晴れです'); // 「今日の天気は晴れです」が実行結果
console.log(2 - 1); // 「1」が実行結果
console.log(2 * 3); // 「6」が実行結果
console.log(6 / 2); // 「3」が実行結果

+ 演算子は文字列を結合できますが、変数の値を文字列に含んだり、改行をしたりする場合はコードが見づらくなってしまいます。

1
2
3
4

const weather = '晴れ';
const temperature = 25;

const text = '今日の天気は' + weather + 'です。\n降水確率は' + temperature + '%です。';

文字列をスマートに扱うには、テンプレートリテラルと呼ばれる記述方法が便利です。
「`」で囲んだ範囲は文字列となり、複数行の文字列を変数に代入したり、${変数名} と記述して変数の値を挿入したりできます。

1
2
3
4
5
6

const weather = '晴れ';
const temperature = 25;

const text =
`今日の天気は${weather}です。
降水確率は${temperature}%です。`;

++ や -- 演算子を使うと、値を 1 増やしたり減らしたりできます。
こうした値の操作は、インクリメント／デクリメントと呼ばれます。

1
2
3

let x = 1;
console.log(++x); // 「2」が実行結果
console.log(--x); // 「1」が実行結果

2 つの値を比較し、値が同じかどうかや数値の大小を判定する演算子は、次のとおりです。
比較が正しければ true、誤りなら false となります。

• ===：等価
• !==：不等価
• >：より大きい。
• <：より小さい。
• >=：以上
• <=：以下

次のコードのように、比較演算子の両側に比較したい値を記述します。
比較演算子は 条件分岐 でよく利用するので、今は具体的な用途がイメージできなくても大丈夫です。

1
2
3
4

console.log('Hello!' === 'Hello!'); // `true` が実行結果
console.log('Hello!' === 'HELLO!'); // `false` が実行結果
console.log(1 === 1); // `true` が実行結果
console.log(1 < 0); // `false` が実行結果

補足

1 + 5 = イチゴ

「1 + 5 はなんでしょう？」というなぞかけを、一度は聞いたことがあると思います。

「なぞかけならイチゴだけど、普通の計算なら 6 だよね」という答えが聞こえてきますね。
しかし、JavaScript では「イチゴ」が計算の答えになってしまうことがあるのです！
実際に例を見てみましょう。文字列の「1」と数値の 5 を足し合わせ、コンソールに表示してみます。

1	console.log('1' + 5);

このコードを実行すると、結果は「15」になります。
数値の 5 が勝手に文字列に変換されてしまったのです。

このように、異なる型を比較、演算したとき、JavaScript の演算過程で、暗黙的な型変換が行われることがあります。

値がどのデータ型なのかを意識しないと、暗黙的な型変換によるバグを生み出す可能性があります。

「イチゴ」のなぞかけを聞いたときは、「その数字のデータ型は文字列？数字？」と聞くようにしましょう。

コードが長くなればなるほど、読みやすいコードを書いていくことが重要です。
そのためには、変数やデータ型を正しく理解し、適切な場所で使っていく必要があります。
変数・データ型の基礎を抑えて、読みやすいコードを書けるようになりましょう。
次回は 条件分岐／繰り返し処理 について学習しましょう。