JS初めてのJavaScript

Day 1変数と値 — データを入れる箱

値の種類 — 文字列・数値・真偽値

基本の値の種類を知り、数値と文字列を混同する事故の例を体感する。

よく使う3つの値の種類

箱に入れる中身、つまり値には種類があります。まずは基本の3つを押さえれば十分です。文字列(もじれつ)、数値(すうち)、真偽値(しんぎち)です。この種類のことを型(かた)とも呼びます。

  • 文字列(string): 文字のこと。ダブルクオート " " で囲む。例: "太郎"、"こんにちは"
  • 数値(number): 数のこと。囲まない。例: 123、0.1、-5
  • 真偽値(boolean): 正しいか正しくないか。true(真)か false(偽)の2つだけ
JAVASCRIPT
const name = "太郎";   // 文字列
const age = 20;        // 数値
const isMember = true; // 真偽値
文字はクオートで囲む、数はそのまま、真偽は true / false

typeof で種類を確かめられる

値がどの種類かを知りたいときは typeof を使います。typeof "太郎" は "string"、typeof 20 は "number"、typeof true は "boolean" を返します。今は「種類を調べる道具がある」とだけ知っておけば十分です。

数値と文字列を混同する事故

初心者がよくやる事故が、数値のつもりで文字列を使ってしまうことです。見た目は同じ「3」でも、3(数値)と "3"(文字列、クオート付き)はまったくの別物です。とくに足し算のように見える + を使うと、結果が変わってしまいます。

文字列の "3" を足すと連結される

JAVASCRIPT
const a = "3";
const result = a + 5;
console.log(result); // "35"(文字列としてくっつく)

数値の 3 なら計算される

JAVASCRIPT
const a = 3;
const result = a + 5;
console.log(result); // 8(数値として足される)

"35" になったら型を疑う

計算したはずなのに数字がくっついて "35" のようになったら、値が文字列になっている可能性が高いです。フォームから受け取った入力は文字列になりがちなので、計算する前に数値へ変換(例: Number(a))が要る、と覚えておきましょう。

つまり、同じ + でも「両側が数値なら足し算」「どちらかが文字列なら連結」になります。値の種類を意識するだけで、この手の事故はぐっと減ります。

AIにはこう聞く

「この計算結果が思った数字にならない。値の型が原因かどうか調べて、どこで文字列が混ざっているか教えて」と頼むと、型の混同を早く見つけられます。

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

理解度チェック

答えられれば、面接で説明できる状態に一歩近づきます。

Q1

console.log("3" + 5) の実行結果はどれですか。

Q2

値の種類(型)の説明として、正しくないものはどれですか。

Q3

3 + 5 と "3" + 5 で結果が変わる理由を説明してください。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。