【JavaScript入門】変数を深く知るためのリテラルについて徹底解説
この記事の要約 JavaScriptの変数のリテラルとは具体的な値の書き方のことで、プリミティブ型とはそのプログラミング言語が持つ最小単位のデータの種類です。インクリメントやデクリメントで変数を1だけ増減することができます。
プログラムで使うデータのことを「リテラル」と呼びます。簡単に言うと「変数に代入できる値の書き方（表記法）」と理解しておけば大丈夫です。
例えば、前の記事の
let x = 100; において、100 は「整数リテラル」です。
let x = 'あいうえお'; と書いたら、
'あいうえお' は「文字列リテラル」と呼んだりします。
少しややこしい部分ですが、値の書き方を「リテラル」、その値のデータの種類を「プリミティブ型（基本型）」と呼びます。「リテラルは値の書き方で、プリミティブ型はデータの種類」。最初は言葉が難しく感じるかもしれませんが、表で整理してみましょう。
JavaScriptで使う主なリテラルと型をまとめました。
プリミティブ型の解説
| リテラル例 | プリミティブ型 | 説明 |
|---|---|---|
| 100 | number | 整数。数値型です。 |
| 1.23 | number | 小数。数値型です。 |
| -1 | number | 負の数。数値型です。 |
| 1n | bigint | 整数。精度の高く桁数の制限がない数値型です。 |
| -1n | bigint | 負の数。精度の高く桁数の制限がない数値型です。 |
| "Hello" | string | ダブルクォーテーション(")で囲むと文字列となります。 |
| 'JavaScript' | string | シングルクォーテーション(')で囲むと文字列となります。 |
| `Programming` | string | バッククォート(`)で囲むと文字列となります（テンプレートリテラルとも呼びます）。 |
| true | boolean | 論理値と呼ばれる「正しい（真）」を意味する値です。 |
| false | boolean | 論理値と呼ばれる「正しくない（偽）」を意味する値です。 |
| null | null※ | 「何もない」ことを意味します。空（カラ）という意味とは少し異なります。 |
| 任意の値 | symbol | Symbol関数を使った絶対に被らない普遍な識別子です。 |
| undefined | undefined | 値が「未定義」の状態です。 |
※補足：null は意味としてはプリミティブな値ですが、歴史的な経緯で typeof を使うと object と表示されます。
ちなみに、データの型（プリミティブ型）を調べるには typeof という演算子を使うと便利です。
let i = 1;
alert(typeof i);
typeof を変数の前につけると、その変数の型を教えてくれます。上記の場合、i は 1 なので数値（整数リテラル）となり、結果は number と表示されます。
オブジェクト型(参照型)を簡単に説明
プリミティブ型は基本的(原始的)な型という説明をしました。では、プリミティブ型以外の型は何というのでしょう。答えはオブジェクト型です。
下記のようになりますが、後に詳しくオブジェクト型は解説します。
プリミティブ型：値そのものが変数に格納される。
オブジェクト型：値の場所(メモリのアドレス)が変数に格納される。
nullとundefinedの違い
nullとundefinedと空のサンプル
例えば、今はまだどんな値が入るか分からないけれど、「とりあえず今は空っぽである」ということを明確にしておきたい場合に null を代入します。値を存在させたくない時などに使うテクニックで、本格的なプログラミングではよく登場します。
let n = null;
一方、下記のように u という変数を宣言したのに、値を入れずに（初期化せずに） alert などで参照しようとすると undefined になります。これは「値が定義されていないよ」という意味です。意図せずこの状態になるとエラーやバグの原因になるので、undefined が出たら「あ、初期化を忘れているな」と考えるようにしましょう。
let u;
alert(u);
また、文字列として「空っぽ」であることを表すものを「空文字（からもじ）」と言います。null と似ていますが、こちらは「文字数0の文字列」が入っている状態です。ダブルクォーテーションやシングルクォーテーションを2回続けて記述します。
let k = '';
alert(k);
typeof で調べると、空文字は string （文字列）と判定されます。
計算に使う「算術演算子」
変数に入れた数値は、以下の記号を使って計算できます。
| 記号 | 意味 | 例 |
|---|---|---|
+ |
足し算 / 文字の結合 | 10 + 5 → 15 ※数値だけでなく文字列をつなげる際にも使います |
- |
引き算 | 10 - 5 → 5 |
* |
掛け算 | 10 * 5 → 50 |
/ |
割り算 | 10 / 2 → 5 |
% |
割り算の余り | 10 % 3 → 1 （10 ÷ 3 = 3 あまり 1） |
let x = 2;
let y = x + 3;
// 5が表示される
alert(y);
式の左辺と右辺
下記のコードを見てください。
let x = 100;
x = 200;
プログラミング用語では、イコールの左にある x を「左辺（さへん）」、右にある 200 を「右辺（うへん）」と呼びます。 値を受け取る側（箱）が左辺。代入する値や計算式を渡す側（中身）が右辺です。
解説などでは頻繁に「左辺」「右辺」という言葉を使うので、ぜひ覚えておいてください。
JavaScriptで変数を使う際に注意が必要なところ
JavaScriptなどの「動的型付け言語」と呼ばれるプログラミング言語では、状況に応じてリテラルの型が自動的に変換されることがあります。これを「型変換（キャスト）」と呼びます。
let x = '100';
let y = x + 200;
上記のコードを見てみましょう。1行目の x は、数値の100ではなく、文字列(string)の '100' です。 2行目で、その文字列の '100' と、数値(number)の 200 を足して y に代入しています。さて、y はいくつになるでしょうか？
正解は、「100200」という文字列になります。
JavaScriptの + 記号は、「数値の足し算」と「文字の連結」の2つの役割を持っています。式の中にひとつでも「文字列」が含まれていると、JavaScriptは気を利かせて「あ、これは文字をつなげたいんだな」と判断し、数値を自動的に文字列に変換して連結してしまいます。
もし 100200 という結果を「300（数値）」だと思って計算に使ってしまうと、大きなバグになります。
このように型が自動で変換されることは便利な反面、予期せぬトラブルの元にもなります。変数を使う際は「今、この変数には数値が入っているのか？ 文字列が入っているのか？」などプリミティブ型を常に意識することが大切です。
変数名で使えない単語(予約語)
プログラミング言語には「予約語」という、あらかじめ役割が決まっている単語があります。これらの予約語は、変数名として使うことができません。
変数名とは、下記のコードでいう x や y のこと、つまり箱の名前です。
let x = 100;
let y = 200;
プログラミングには if や for といった命令文がありますが、これらが予約語です。もし変数名に if を使ってしまうと、JavaScriptのエンジンは「これは変数なの？ それともif文の命令なの？」と判断できなくなり、エラーになってしまいます。
let if = 100;
let for = 200;
変数のインクリメントとデクリメント
下記が書いてもらったコードです。
let i = 1;
i + 1;
// 2が表示されることを期待する
alert(i)
実は上記のコードは1が表示されます。
下記のページで変数は箱のイメージと説明しました。箱はデータを保持するものです。箱にデータを保持するには通常は「=」を使わなければなりません。
つまり変数の値で1をプラスしたい場合、基本的には以下のように書きます。イコールが必要なのです！
let i = 1;
i = i + 1;
// 2が表示される
alert(i);
i に 1 を足したものを、再度 i に代入していますね。実はこれをもっと短く、スマートに書く方法があります。
インクリメント
let i = 1;
i++;
// 2が表示される
alert(i);
この ++ を「インクリメント」と呼び、「値を1増やす」という意味になります。上の i = i + 1 と結果は同じですが、コードがスッキリして読みやすくなるため、よく使われます。
デクリメント
逆に、1だけ減らす書き方もあります。
let i = 10;
i--;
// 9が表示される
alert(i);
この -- は「デクリメント」と呼び、「値を1減らす」コードです。上記の結果は、10から1減って9となります。
インクリメントやデクリメント以外で増減するスッキリした書き方
let i = 0;
i += 2;
// 2が表示される
alert(i);
この記事からみたよくある質問
- 変数のリテラルとは何ですか？
- プログラムの中に直接書かれた「値の書き方」のことです。文字列なら文字列リテラル、数値なら整数リテラルと呼びます。「リテラル」と聞いたら、変数に入る前の「具体的な値そのもの」とイメージしてください。
- 変数のプリミティブ型とは何ですか？
- JavaScriptで扱えるデータの中で、最も基本的で純粋な値（数値や文字列など）のことです。「プリミティブ（primitive）」には「原始的な・根源的な」という意味があり、最小単位の種類と覚えるとよいでしょう。
- 変数名で使えない予約語というのは何ですか？
- プログラミング言語の仕様であらかじめ役割（命令）が決められている単語のことです（例：ifやforなど）。これらを変数名として使ってしまうと、コンピュータが「変数なのか命令なのか」を区別できなくなり、エラーになります。
- インクリメントやデクリメントでイコール(=)が必要ないのはどうしてですか？
- ++や--という記号自体に「計算して、結果を元の変数に代入（保存）する」という機能が含まれているからです。単に(i + 1)と書くだけでは計算結果が出るだけで変数は更新されませんが、インクリメントは変数の「中身を書き換える」という点が異なります。