値・変数・データ型 — 名札を付けて値を扱う

1.値とデータ型 — 値にも種類がある

第1講ではconsole.logで数や文字を出力してみました。このようにプログラムが扱う一つひとつのデータを値といい、値の種類をデータ型といいます。人は「3」という文字と3という数を文脈で見分けますが、コンピューターは値ごとに種類を付けておき、その種類によってできることを決めます。数は足したり掛けたりでき、文字はつなげたり長さを数えたりできます。

JavaScriptでいちばんよく使う基本のデータ型は五つです。数値（number）は整数と小数を区別せず、すべて一つの種類として扱います。文字列（string）は引用符で囲んだ文字の並びです。真偽値（boolean）は真（true）と偽（false）の二つだけの値で、第3講の条件分岐で中心的な役割を果たします。undefinedは「まだ値が決まっていない」、nullは「値がないことをわざと示している」という意味です。このほかに、とても大きな整数のためのbigint、一意な目印であるsymbolもありますが、このコースではほとんど使いません。

値の種類はtypeof演算子で確かめられます。結果は種類の名前が入った文字列です。一つだけ古い例外があり、typeof nullは"null"ではなく"object"になります。JavaScriptの初期の設計の名残で、今さら変えると既存のWebページが壊れてしまうため、そのまま残っています。そのため、ある値がnullかどうかを確かめるときは、typeofではなく第3講で学ぶ=== nullの比較を使います。

console.log(typeof 42, typeof 3.14);
console.log(typeof "やあ", typeof "42");
console.log(typeof true, typeof undefined);
console.log(typeof null); // 古い例外

number number
string string
boolean undefined
object

2.変数 — `let`と`const`で名札を付ける

同じ値を何度も使ったり、計算結果をしばらく取っておいたりするには、値に名前を付ける必要があります。この名前を変数といいます。変数は箱というより、値に付ける名札に近いものです。const price = 1200;と書くと、1200という値にpriceという名札が付き、それ以降はpriceと書くだけで1200を指します。ここでの=は数学の「等しい」ではなく、「右の値を左の名前に入れる」という意味です。

変数の作り方は二つあります。constは一度決めたら別の値を入れ直せない変数で、letはあとで別の値に変えられる変数です。基本はconstで書き、値が変わる必要がある場合（合計を積み上げるときや個数を数えるときなど）だけletを使うのがよい習慣です。こうすると「この値は変わらない」ということがコードに表れて読む人が安心でき、うっかり上書きするとすぐにエラーで知らせてくれます。古いコードで見かけるvarは規則がわかりにくい昔のやり方なので、新しいコードでは使いません。

名前は、何が入っているかがわかるように付けます。aやx2より、priceやtotalCountのほうがずっと読みやすくなります。JavaScriptでは、複数の単語をつなげるとき、2つ目の単語から頭文字を大文字にする書き方（totalPrice）がよく使われます。名前は数字で始められず、空白も入れられず、letやifのような予約語も使えません。大文字と小文字を区別するので、priceとPriceは別の変数です。

const price = 1200;
const count = 3;
const total = price * count;
console.log("合計:", total);

let visits = 0;
visits = visits + 1;
visits = visits + 1;
console.log("訪問数:", visits);

合計: 3600
訪問数: 2

const rate = 0.05;
console.log("利率:", rate);
rate = 0.07;
console.log("変更後の利率:", rate);

利率: 0.05
TypeError: Assignment to constant variable.

let memo;
console.log(memo);
memo = "買い物";
console.log(memo);

undefined
買い物

3.演算子 — 計算して、つなげる

数値には四則演算の+、-、*、/のほかに、余りを求める%と、べき乗の**があります。%は思ったより頻繁に使います。ある数を2で割った余りが0なら偶数ですし、分単位の時間を60で割った商と余りから「何時間何分」を作れます。計算の順序は数学と同じで、掛け算・割り算が足し算・引き算より先です。迷うときは、かっこを付けて意図をはっきりさせるのがよいでしょう。

割り算の結果が整数でなくても、JavaScriptは小数で答えます。7 / 2は3.5です。商だけが必要ならMath.floorで小数点以下を切り捨て、四捨五入にはMath.round、切り上げにはMath.ceilを使います。0で割るとエラーになる代わりにInfinity（無限大）が出て、数値にできない計算をすると「数ではない」という意味のNaNが出ます。NaNは名前に反してtypeofが"number"になる特別な数値だということも覚えておきましょう。

+は文字列にも使えます。二つの文字列を+で足すと、つながります。"こん" + "にちは"は"こんにちは"になります。文字列の中に変数の値を入れるときは、バッククォート（日本語キーボードではシフトキーを押しながら＠キー）で囲み、その中にドル記号と波かっこで変数を入れる「テンプレートリテラル」が便利です。見た目は下のコード例で確かめてください。文字列は第7講で詳しく扱います。

console.log(7 + 2, 7 - 2, 7 * 2, 7 / 2);
console.log(7 % 2, 2 ** 10);
console.log(Math.floor(7 / 2), Math.round(2.5));
console.log(Math.ceil(2.1), 1 / 0);

9 5 14 3.5
1 1024
3 3
3 Infinity

const minutes = 135;
const h = Math.floor(minutes / 60);
const m = minutes % 60;
console.log(h + "時間" + m + "分");
console.log(`${h}時間${m}分`);

2時間15分
2時間15分

4.型変換の落とし穴 — `"1" + 2`はなぜ`"12"`なのか

JavaScriptは、種類の違う値を混ぜて計算すると、エラーを出す代わりに片方を自動で変えて計算します。これを暗黙の型変換といいます。便利なこともありますが、初心者のミスの大きな原因です。いちばん有名な例が"1" + 2です。+の片側が文字列だと、JavaScriptは「連結」と解釈して数値の2を文字列の"2"に変え、結果は"12"になります。

ところが"5" - 2は3です。-、*、/は文字列には使えない演算なので、今度は文字列を数値に変えて計算するからです。同じ文字列と数値なのに、演算子によって結果が文字列になったり数値になったりするのですから、混乱するのも無理はありません。この問題は実際によく起こります。入力欄、テキストファイル、CSVから読み込んだ値は、数に見えてもたいてい文字列なので、そのまま足すと合計ではなく、文字がずらずらとつながった結果になります（第9講）。

解決策は、計算する前に自分で数値に変えることです。これを明示的な型変換といいます。Number("12")は数値の12になり、Number("12ウォン")のように数として読めない文字が混ざるとNaNになります。逆に数値を文字列に変えるときはString(12)を使います。結果がおかしいときは、まずtypeofで値の種類を出力してみる習慣をつけましょう。第8講のデバッグも、このように「値が思ったとおりの種類か」を確かめるところから始まります。

console.log("1" + 2);
console.log(1 + 2 + "3");
console.log("5" - 2, "5" * "2");
console.log(typeof ("1" + 2));

12
33
3 10
string

const a = "3000";
const b = "4500";
console.log(a + b);
console.log(Number(a) + Number(b));
console.log(Number("12ウォン"), Number(""));
console.log(String(12) + String(3));

30004500
7500
NaN 0
123

• 足したのに結果が妙に長くなったら、文字列どうしがつながったのではないかと疑う
• 外から読み込んだ値（入力・ファイル・表）は、計算の前にNumberで変える
• Numberの結果がNaNなら、数でない文字（単位やカンマなど）が混ざっている
• 空文字列""はNumberで変えると0になることに注意する — 空欄を0と数えるのか、別に扱うのかを決めておく必要がある

5.`0.1 + 0.2`は`0.3`ではない

練習場で0.1 + 0.2を出力してみると、0.30000000000000004と出ます。JavaScriptが計算を間違えているわけではありません。コンピューターは数を2進法で保存しますが、10進法の0.1は2進法では終わりなく続く小数なので、決まった枠に収めるときにほんの少し切り捨てられます。10進法で1/3を0.333…と最後まで書けないのと同じ理屈です。この方式（浮動小数点数）は、ほとんどすべてのプログラミング言語が同じ標準に従っているので、他の言語でも同じことが起こります。

誤差はとても小さいので、たいていの計算では問題になりませんが、二つの場面では注意が必要です。一つ目は、等しいかどうかを比べるときです。0.1 + 0.2 === 0.3はfalseです。二つ目は、お金のように1単位も間違えてはいけない計算です。小数を何度も足したり掛けたりしているうちに、小さな誤差が積み重なって表示に出てしまうことがあります。

よく使われる解決策は三つです。ウォンやセントのようないちばん小さな単位の整数に直して計算すれば、整数どうしの足し算・引き算・掛け算をしているあいだは誤差が生じません（とても大きな数でない限り）。割り算が入る場合は、最後に一度だけ丸めます。画面に表示するときだけtoFixedで桁数をそろえるか、Math.roundで四捨五入します。比べるときは、二つの値の差がごく小さいかどうかを見る方法を使います。練習場の採点機も、小数の結果はごく小さな差なら等しいとみなします。ただし、toFixedの結果は数値ではなく文字列であることを忘れないでください。

console.log(0.1 + 0.2);
console.log(0.1 + 0.2 === 0.3);
console.log((0.1 + 0.2).toFixed(2));
console.log(typeof (0.1 + 0.2).toFixed(2));

0.30000000000000004
false
0.30
string

// 1.10ドル + 2.20ドルをセント（整数）で計算
const cents = 110 + 220;
console.log(cents / 100);
console.log(1.1 + 2.2);

3.3
3.3000000000000003

const total = 1200 * 3;
const pay = Math.round(total * 90 / 100);
console.log("支払い金額:", pay);

支払い金額: 3240

6.`null`と`undefined` — 「空」の二つの顔

JavaScriptには「値がない」ことを表す値が二つあります。undefinedはたいてい、JavaScriptが自分で入れる値です。変数を作って値を入れなかったとき、オブジェクトにない属性を読んだとき（第6講）、関数が何も返さないとき（第5講）に出てきます。nullは人がわざと入れる値で、「ここが空であることはわかっている」という印です。たとえば、まだ入力されていない電話番号の欄にnullを入れておく、といった使い方をします。

どちらも計算に使うとおかしな結果になります。nullは数値の計算では0のように扱われてnull + 1は1になり、undefinedは数値に変えられないのでundefined + 1はNaNになります。こうした結果はエラーメッセージなしに静かに広がっていくので、なおさら危険です。合計がNaNになったら、計算のどこかにundefinedが混ざっているという合図だと読み取りましょう。

もっと大きな問題は、空の値から何かを取り出そうとしたときです。nullやundefinedの属性を読もうとすると、TypeErrorで止まります。AIが書いたコードでもよく見かけるエラーで、「データが空のとき」を処理していないことが原因です。第3講で、こうしたケースを条件分岐であらかじめふるい落とす方法を学びます。

console.log(null + 1, undefined + 1);
let phone = null;
console.log("電話番号:", phone);
console.log(phone.length);

1 NaN
電話番号: null
TypeError: Cannot read properties of null (reading 'length')