JavaScriptの変数と基本的な型

今回のゴール

• JavaScript の変数について理解する
• 基本的なデータの型（数値、文字列など）と操作方法を知る
• データをまとめる型（配列、オブジェクト）の特徴・操作方法を知る

変数の宣言: const と let（おさらい）

変数は、データを保管するための「入れ物」です。

// const: 値を再代入しない場合（推奨）
const userName = "田中";
// userName = "佐藤";  // エラー！const は再代入できない

// let: 値を後から変更する場合
let counter = 0;
counter = 1;  // OK！let は再代入できる
counter = 2;  // さらに変更も可能

基本的には const を使い、変更が必要な場合のみ let を使いましょう。

変数の宣言: var について

var というキーワードでも変数は宣言できますが、これは古い書き方で、現在は非推奨です。

// var でも変数は宣言できる
var message = "こんにちは";
var message = "さようなら";  // 同じ名前で再宣言できてしまう（危険！）

// let や const では再宣言はエラーになる
let greeting = "Hello";
let greeting = "Hi";  // エラー！同じ名前で宣言できない

var は古いコードや古いチュートリアルで見かけることがありますが、新しく書くコードでは const または let を使いましょう。

変数の名前付けのルール (1)

変数名には以下のルールがあります。

// OK な変数名
const age = 25;
const firstName = "太郎"; // キャメルケース (単語の区切りで大文字にする)
const user_name = "Taro";  // アンダースコアも使える
const $element = "要素";  // $も使える
const item1 = "アイテム";  // 数字も使える（先頭以外）

JavaScriptの変数名は慣例として キャメルケース（firstName, totalPrice のように単語の区切りを大文字にする）が使われます。

変数の名前付けのルール (2)

// NG な変数名（エラーになる）
const 1st = "最初";  // 数字で始まってはいけない
const my-name = "名前";  // ハイフンは使えない
const let = "値";  // 予約語（const, let, function など）は使えない

良い変数名とは

変数名はその中身が何かわかる名前をつけましょう。
わかりにくい名前や誤解しやすい名前が付けられていた場合、コードを読むことに時間がかかるのはもちろん、誤解によってバグが生じることもあります。

// 悪い例：何が入っているかわからない
const x = 150;
const d = "2024-01-15";

// 良い例：中身がわかりやすい
const orderPrice = 150;
const orderDate = "2024-01-15";

型とインスタンス (1)

JavaScriptでは、様々なデータの種類に対応する 型 があります。以下のようなデータの種類に対応する型があります (ここに挙げたデータの種類はプリミティブとも呼ばれ、JavaScriptで最も基本的なデータ型になります)

型とインスタンス (2)

データ型に実際の値が割り当てられたとき、その値のことをその型のインスタンス（実体）と呼びます。

const price = 1500;  // price は Number 型のインスタンスが入る
const name = "花子";  // name は String 型のインスタンスが入る
const isValid = true;  // isValid は Boolean 型のインスタンスが入る

同じ型のインスタンスでは、型が提供するプロパティやメソッドを使うことができます。後のスライドで個々の型が提供するプロパティ・メソッドの内容を見ていきます。

// すべての文字列は length プロパティを持つ
const word = "Hello";
word.length; // 5 となる
"こんにちは".length;  // これも 5

数値型 (Number)

数値型は整数と小数の両方を扱えます。

const quantity = 10;      // 整数
const temperature = 36.5; // 小数
const negative = -100;    // 負の数

特別な数値もあります。

const inf = Infinity;     // 無限大
const negInf = -Infinity; // 負の無限大
const notNum = NaN;       // 「数値ではない」を表す特殊な値

基本的な算術演算子 (1)

四則演算は以下の演算子を使います。

const a = 20;
const b = 8;

console.log(a + b);  // 28（加算）
console.log(a - b);  // 12（減算）
console.log(a * b);  // 160（乗算）
console.log(a / b);  // 2.5（除算）

基本的な算術演算子 (2)

計算の優先順位は数学と同じです。

// 掛け算・割り算が先に計算される
console.log(2 + 3 * 4);  // 14（3*4=12, 2+12=14）

// 括弧を使って優先順位を変える
console.log((2 + 3) * 4);  // 20（2+3=5, 5*4=20）

複雑な算術演算子

// 剰余（割り算の余り）
console.log(17 % 5);  // 2（17 ÷ 5 = 3 余り 2）
console.log(10 % 3);  // 1（10 ÷ 3 = 3 余り 1）

// べき乗
console.log(2 ** 3);  // 8（2の3乗 = 2*2*2）
console.log(5 ** 2);  // 25（5の2乗 = 5*5）

インクリメント演算子 (++)

値を 1 増やすには ++ を使います。

let count = 5;
count++;  // count = count + 1 と同じ
console.log(count);  // 6

count++;
console.log(count);  // 7

逆に 1 減らすには -- を使います。

let score = 10;
score--;  // score = score - 1 と同じ
console.log(score);  // 9

代入演算子 (+=, -= など)

計算と代入を同時に行う演算子があります。

let total = 100;

total += 50;  // total = total + 50 と同じ
console.log(total);  // 150

total -= 30;  // total = total - 30 と同じ
console.log(total);  // 120

total *= 2;   // total = total * 2 と同じ
console.log(total);  // 240

total /= 4;   // total = total / 4 と同じ
console.log(total);  // 60

Number という型について

MDNのWebサイト から、Number が持っているメソッド、プロパティについて確認できます。

• コンストラクター: Number のインスタンスを生成するためのメソッドです。
• 静的プロパティ、静的メソッド: (インスタンスではなく) Number 自身を使って利用できるプロパティ、メソッドです。
• インスタンスプロパティ、インスタンスメソッド: Number のインスタンスが利用できるプロパティ、メソッドです。

(参考) Number のコンストラクター

Number() コンストラクターを使って、文字列から数値 (Numberのインスタンス) を作ることができます。

// Number() で文字列を数値に変換
const input = "150";
const num = Number(input);
console.log(num);       // 150
console.log(num + 50);  // 200

// 変換できない文字列は NaN になる
const invalid = Number("abc");
console.log(invalid);  // NaN

(参考) Number の静的メソッド

Number 自身を使って利用できるメソッドです。

// 数値かどうかを確認
console.log(Number.isNaN(NaN));       // true
console.log(Number.isNaN(123));       // false

// 整数かどうかを確認
console.log(Number.isInteger(42));    // true
console.log(Number.isInteger(42.5));  // false

// 文字列を整数に変換
console.log(Number.parseInt("42"));      // 42
console.log(Number.parseInt("42.9"));    // 42（小数点以下は切り捨て）
console.log(Number.parseInt("100abc"));  // 100（数字以降は無視）

(参考) Number のインスタンスプロパティ、インスタンスメソッド

数値のインスタンスが持つメソッドです。

const price = 1500;

// toString() - 数値を文字列に変換
console.log(price.toString());  // "1500"

// toFixed() - 小数点以下の桁数を指定
const pi = 3.14159;
console.log(pi.toFixed(2));  // "3.14"
console.log(pi.toFixed(0));  // "3"

文字列型 (String)

文字列型は、テキストデータを表します。引用符で囲みます。

// シングルクォート
const single = 'こんにちは';

// ダブルクォート
const double = "こんにちは";

// バッククォート（テンプレートリテラル）
const template = `こんにちは`;

シングルクォートとダブルクォートのどちらで書いても同じです。
バッククォートはテンプレートリテラルという機能があります (後述)。

+ を用いた文字列の連結

+ 演算子で文字列を連結できます。

const firstName = "山田";
const lastName = "太郎";

const fullName = firstName + lastName;
console.log(fullName);  // "山田太郎"

// スペースを入れる
const fullNameWithSpace = firstName + " " + lastName;
console.log(fullNameWithSpace);  // "山田 太郎"

逆引用符（テンプレートリテラル）(1)

バッククォート ` で囲むと、テンプレートリテラルが使えます。

const name = "花子";
const age = 25;

// 従来の書き方（+ で連結）
const message1 = "私の名前は" + name + "、年齢は" + age + "歳です。";

// テンプレートリテラル（${} で変数を埋め込む）
const message2 = `私の名前は${name}、年齢は${age}歳です。`;

console.log(message2);  // "私の名前は花子、年齢は25歳です。"

逆引用符（テンプレートリテラル）(2)

${} の中には式（計算）も書けます。

const price = 1200;
const quantity = 3;

const receipt = `商品代金: ${price * quantity}円（税込: ${price * quantity * 1.1}円）`;
console.log(receipt);
// "商品代金: 3600円（税込: 3960円）"

複数行の文字列

テンプレートリテラルを使うと、複数行の文字列も簡単に書けます。

// テンプレートリテラルで複数行
const poem = `春はあけぼの
やうやう白くなりゆく
山ぎはすこしあかりて`;

console.log(poem);
// 春はあけぼの
// やうやう白くなりゆく
// 山ぎはすこしあかりて

通常の引用符では複数行を直接書けません。

エスケープシーケンス

特殊な文字を表すために、バックスラッシュ \ を使います。

// \n => 改行
const lines = "1行目\n2行目\n3行目";
console.log(lines);

// \t => タブ
const table = "名前\t年齢\t職業";
console.log(table);  // "名前	年齢	職業"

// 引用符 (" や ') 自体を含める
const quote = "彼は\"こんにちは\"と言った";
console.log(quote);  // 彼は"こんにちは"と言った

数値と文字列を組み合わせると

数値と文字列を + で組み合わせると、文字列として連結されます。

const num = 100;
const str = "円";

console.log(num + str);    // "100円"（文字列になる）
console.log("価格: " + num);  // "価格: 100"

// 注意：意図しない結果になることも
console.log("5" + 3);  // "53"（文字列として連結）
console.log(5 + 3);    // 8（数値として計算）

文字列を数値に変換したい場合は Number() を使いましょう。

String という型について

Number と同様に、MDNのWebサイト から String が持っているメソッド、プロパティについて確認できます。

• コンストラクター: String のインスタンスを生成するためのメソッドです。
• 静的プロパティ、静的メソッド: (インスタンスではなく) String 自身を使って利用できるプロパティ、メソッドです。
• インスタンスプロパティ、インスタンスメソッド: String のインスタンスが利用できるプロパティ、メソッドです。

(参考) String のコンストラクター

String() コンストラクターを使って、値を文字列 (Stringのインスタンス) に変換できます。

// String() で値を文字列に変換
const num = 150;
const str = String(num);
console.log(str);        // "150"
console.log(typeof str); // "string"

// 数値や真偽値も文字列に変換できる
console.log(String(true));   // "true"
console.log(String(false));  // "false"
console.log(String(null));   // "null"

(参考) String のインスタンスプロパティ、メソッド (1)

文字列のインスタンスが持つプロパティとメソッドです。

const text = "JavaScript";

// length - 文字列の長さ
console.log(text.length);  // 10

// toLowerCase(), toUpperCase() - 大文字・小文字の変換
console.log(text.toLowerCase());  // "javascript"
console.log(text.toUpperCase());  // "JAVASCRIPT"

// includes() - 対象のテキストが含まれるか確認する
const message = "今日は良い天気ですね";
console.log(message.includes("天気"));    // true

(参考) String のインスタンスプロパティ、メソッド (2)

// indexOf() - 対象のテキストの位置を探す
const sentence = "私の趣味は読書と映画鑑賞です";
console.log(sentence.indexOf("趣味"));  // 2
console.log(sentence.indexOf("音楽"));  // -1（見つからない）

// slice() - 部分文字列を取り出す
console.log(sentence.slice(5, 7));   // "読書"
console.log(sentence.slice(8, 12)); // "映画鑑賞"
console.log(sentence.slice(5));      // "読書と映画鑑賞です"（最後まで）

論理値 (Boolean)

Boolean は、 true もしくは false の値を持ちます。
比較演算子や条件分岐などと組み合わせて、 "特定の条件に当てはまるかどうか" といった情報を保持するのによく使います。
比較演算子や条件分岐の詳細は別のスライドで学習します。

// user.age が20以上なら `true` が、そうでなければ `false` が入る
const canDrinkAlcohol = (user.age >= 20);
if (canDrinkAlcohol) {
  // user.age が20以上の場合の処理を書く
}

undefined と null

undefined は、変数に値を代入していない場合や、関数の引数を渡さなかった場合に割り当てられる値です。

let a;
console.log(a); // undefined と出力される

function someFunction(someValue) {
  console.log(someValue);
}
someFunction(); // undefined と出力される

null は「値がない」ことを表す値です。明示的に この変数の値は無効である ことを示すときに代入します (通常、undefined の方は明示的に代入することはありません)

const invalidValue = null;

複数のデータをまとめる型: 配列とオブジェクト

複数のデータをまとめられるデータ型として、配列(Array) と オブジェクト(Object) があります。

配列 (Array)

配列は、複数の値を順序付きでまとめるデータ構造です。

// 配列の作成
const colors = ["赤", "青", "緑"];
// 空の配列
const empty = [];
// さまざまな型が一つの配列に入れられる
const mixed = [1, "二", true, null];

配列の項目を取得する

配列の要素にはインデックス (0から始まる順番) が割り当てられ、[index] のようにアクセスすることができます。

const seasons = ["春", "夏", "秋", "冬"];

console.log(seasons[0]);  // "春"（最初の要素）
console.log(seasons[2]);  // "秋"（3番目の要素）
console.log(seasons[3]);  // "冬"（最後の要素）

// 存在しないインデックスを指定すると undefined になる
console.log(seasons[10]);  // undefined

配列の階層構造

配列の中に配列を入れることで、階層構造（ネスト）を作ることができます。

const categories = [
  ["りんご", "バナナ", "オレンジ"],
  ["にんじん", "キャベツ", "トマト"],
  ["牛乳", "チーズ", "ヨーグルト"]
];

console.log(categories[0][1]);  // "バナナ"（果物カテゴリーの2番目）
console.log(categories[2][0]);  // "牛乳"（乳製品カテゴリーの最初）

それぞれの項目へのアクセス

for...of のようなループ処理で配列の各要素にアクセスすることができます

const scores = [85, 92, 78, 95];

// for...of を使った繰り返し
for (const score of scores) {
  console.log(score);
}

Array と String の共通点

String もインデックスによって文字にアクセスしたり、for...of によるループ処理を行うことができます

const text = "JavaScript";

// 配列と同じようにインデックスでアクセス
console.log(text[0]);  // "J"
console.log(text[4]);  // "S"

for (const char of text) {
  console.log(char); // 順に "J", "a", "v" ... と出力されていく
}

さまざまな配列の利用方法

配列を使って、一度に複数の変数に値を代入することができます (構造代入)

const numbers = [10, 20, 30];
const [a, b, c] = numbers; // 構造代入
console.log(a);  // 10
console.log(b);  // 20
console.log(c);  // 30

また、...配列 のように記載する（スプレッド構文）ことで、複数の引数を持つ関数に配列の値を渡すことができます。

function add(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
const result = add(...numbers); // スプレッド構文
console.log(result);  // 6

Array という型について

MDNのWebサイト から、Array が持っているメソッド、プロパティについて確認できます。

• コンストラクター: Array のインスタンスを生成するためのメソッドです。
• 静的プロパティ、静的メソッド: (インスタンスではなく) Array 自身を使って利用できるプロパティ、メソッドです。
• インスタンスプロパティ、インスタンスメソッド: Array のインスタンスが利用できるプロパティ、メソッドです。

(参考) Array のコンストラクター

Array() コンストラクターを使って、配列を作成できます。

// 要素を指定して作成
const arr1 = new Array("りんご", "バナナ", "オレンジ");
console.log(arr1);  // ["りんご", "バナナ", "オレンジ"]

// 通常の表記
const arr2 = ["りんご", "バナナ", "オレンジ"];

(参考) Array の静的メソッド

Array 自身を使って利用できるメソッドです。

// isArray() - 配列かどうかを確認
console.log(Array.isArray([1, 2, 3]));  // true
console.log(Array.isArray("文字列"));    // false
console.log(Array.isArray({}));          // false

// from() - 文字列など、配列に近い特性を持つオブジェクトから配列を作成
const str = "Hello";
console.log(Array.from(str));  // ["H", "e", "l", "l", "o"]

(参考) Array のインスタンスプロパティ、インスタンスメソッド (1)

配列のインスタンスが持つプロパティとメソッドです。

// push(), pop() - 要素の追加・削除
const tasks = [];
tasks.push("洗濯");
console.log(tasks);  // ["洗濯"]
const last = tasks.pop();
console.log(tasks);  // []

(参考) Array のインスタンスプロパティ、インスタンスメソッド (2)

以下のインスタンスプロパティ、メソッドはStringと同様のものです。

const fruits = ["りんご", "バナナ", "オレンジ", "ぶどう"];

// length - 配列の要素数
console.log(fruits.length);  // 4

// indexOf(), lastIndexOf() - 要素のインデックスを検索
const colors = ["赤", "青", "緑", "青", "黄"];
console.log(colors.indexOf("青"));      // 1
console.log(colors.indexOf("紫"));       // -1（見つからない）

// includes() - 要素が含まれているか
console.log(colors.includes("緑"));  // true
console.log(colors.includes("紫"));  // false

オブジェクト (Object)

オブジェクトは、キーと値のペアでデータをまとめます。ひとつのキーと値のペアをプロパティと呼びます。

// オブジェクトの作成
const student = {
  name: "山田太郎",
  age: 18,
  isActive: true,
};

// 値へのアクセス
console.log(student.name);  // "山田太郎"
console.log(student.age);   // 18

変数の値をオブジェクトの作成時に使う

オブジェクトを作成するとき、キー名と同じ名前を持つ変数があれば、以下のように省略して書くことができます。

const name = '佐藤花子';
const user = {
  name,        // これは name: name, と書いた場合と同じ
  age: 28,
};
console.log(user.name); // '佐藤花子'

また、他のオブジェクトの値とキーを ...変数名 により取得できます (スプレッド構文 と呼ばれます)。

const person = { name: '太郎', age: 20 };
const employee = { ...person, id: 123 };
// employee は { name: '太郎', age: 20, id: 123 } になる

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

オブジェクトの値にアクセスするには object.name と object["name"] の２通りの方法があります。
通常は object.name の記法をよく使います。

const user = {
  name: "佐藤花子",
  age: 28,
  city: "東京",
};

console.log(user.name);  // "佐藤花子"
console.log(user.age);   // 28

console.log(user["city"]);  // "東京"
// object["name"] 表記の場合、変数を入れられるメリットはある
const key = "name";
console.log(user[key]);  // "佐藤花子"

オブジェクトメンバーの設定

オブジェクトの値を代入することで、値を変更したり、新しいプロパティを追加できます。なお、const が禁止するのは変数に違う値を入れること (再代入すること) なので、const を使っていてもプロパティの追加・変更はできます。

const product = {
  name: "ノートPC",
  price: 80000,
};

// 値の変更
product.price = 75000;
console.log(product.price);  // 75000

// 値の追加 (存在しないキーに対して値を入れる)
product.stock = 50;
console.log(product.stock);  // 50
console.log(product);  // {name: "ノートPC", price: 75000, stock: 50}

オブジェクトにメソッドを持たせる

オブジェクトは関数もプロパティとして持てます。これをメソッドと呼びます。
メソッドは複数の書き方があります。

const mathUtils = {
  // キーがあるので、function の後の関数名はいらない
  add: function (a, b) {
    return a + b;
  },
  // こういう書き方もできる
  multiply(a, b) {
    return a * b;
  },
};

console.log(mathUtils.add(10, 5));      // 15
console.log(mathUtils.multiply(3, 4));  // 12

オブジェクトの階層構造

オブジェクトの中にオブジェクトを入れることで、階層構造（ネスト）を作ることができます。

// 実用的な例：商品情報
const product = {
  id: 1001,
  name: "ノートPC",
  price: 120000,
  details: {
    brand: "TechCorp",
    model: "TC-2024",
  },
};

console.log(product.name);                           // "ノートPC"
console.log(product.details.brand);                 // "TechCorp"

オブジェクトはあらゆる所で使われている

これまで使ってきた多くのものはオブジェクトの機能を使っています。

// `document` もオブジェクトであり、querySelectorで取得できる要素もオブジェクト
const image = document.querySelector("img");

// Array のインスタンスはオブジェクト
const arr = [1, 2, 3];
// オブジェクトなのでプロパティを追加できる
arr.hoge = 1;
console.log(arr.hoge); // 1

// 文字列などのプリミティブ値はオブジェクトではないが、
// 型が提供するプロパティやメソッドを使える
"hello".toUpperCase();
"hello".length;

まとめ (1)

• 変数: キャメルケースで変数名をつけ、中身がわかる名前にする
• プリミティブなデータ型: 数値、文字列、論理値（true/false）、undefined、null
• 数値 (Number)
  • 整数や小数を表現できる
  • 演算子: +, -, *, /, %, **, ++, += を利用できる
• 文字列 (String)
  • 引用符 (', ", `) で囲むことで作成できる
  • テンプレートリテラル ` で変数を埋め込める
  • インデックスで文字にアクセスできる（text[0] など）
• undefined は未定義の変数の値、null は値がないことを示す値

まとめ (2)

• 配列 (Array)
  • [] で作成し、インデックス（0から始まる）でアクセスできる
  • for...of によって配列の各要素に対する処理を書ける
  • 配列の中に配列を入れることができる (階層構造)
• オブジェクト (Object)
  • {} で作成、ドット記法（object.property）やブラケット記法（object["property"]）でアクセス
  • メソッドを持てる（関数をプロパティとして持つ）
  • オブジェクトの中にオブジェクトを入れることができる (階層構造)
• Number, String, Array はそれぞれコンストラクター、静的メソッド、インスタンスメソッドなどを持ち、MDNのWebサイトで調べられる

さらに学ぶには

• 必要な情報を保管する — 変数 (MDN)
• JavaScript での基本演算 — 数値と演算子 (MDN)
• テキストの扱い — JavaScript での文字列 (MDN)
• 便利な文字列メソッド (MDN)
• 配列 (MDN)
• JavaScript オブジェクトの基本 (MDN)