JavaScriptプログラミングの基本概念

JavaScriptは、Webブラウザ上で動作するインタラクティブな機能を実現するための主要なプログラミング言語です。ここでは、その基本的な要素について解説します。

1. 変数と定数

変数とは、データを一時的に保存するために確保されるメモリ上の領域に付けられた名前です。JavaScriptは動的型付け言語であるため、変数の宣言時にデータ型を明示する必要はありません。

JavaScriptで変数や定数を宣言するには、主にvar、let、constのキーワードを使用します。

// var を使った変数宣言 (古い形式、広範囲なスコープ)
var itemPrice = 100;
console.log(itemPrice); // 100

// let を使った変数宣言 (ES2015以降推奨、ブロックスコープ)
let userName = "Alice";
console.log(userName); // Alice
userName = "Bob"; // 値の再代入が可能
console.log(userName); // Bob

// const を使った定数宣言 (ES2015以降推奨、ブロックスコープ、再代入不可)
const APP_VERSION = "1.0.0";
console.log(APP_VERSION); // 1.0.0
// APP_VERSION = "1.0.1"; // エラー: constは再代入できません

`var`, `let`, `const` の違い

スコープ: varは関数スコープまたはグローバルスコープを持ちます。letとconstはブロックスコープ（{}で囲まれた範囲）を持ちます。
ホイスティング (Hoisting): varで宣言された変数は、スコープの先頭に巻き上げられる（ホイスティングされる）ため、宣言前に参照するとundefinedになります。letとconstも概念的にはホイスティングされますが、宣言前に参照しようとすると「一時的デッドゾーン (Temporal Dead Zone)」に入り、ReferenceErrorが発生します。
再代入と再宣言: varは再代入も再宣言も可能です。letは再代入は可能ですが、同一スコープ内での再宣言はできません。constは宣言と同時に初期化が必要で、再代入も再宣言もできません。

// var のホイスティングの例
console.log(message); // undefined (宣言が巻き上げられるため)
var message = "Hello, var!";
console.log(message); // Hello, var!

// let の一時的デッドゾーンの例
// console.log(greeting); // ReferenceError: Cannot access 'greeting' before initialization
let greeting = "Hello, let!";
console.log(greeting); // Hello, let!

2. データ型

JavaScriptのデータ型は、大きく分けてプリミティブ型とオブジェクト型（参照型）の2種類があります。

プリミティブ型

Number (数値): 整数や浮動小数点数（例: 10, 3.14）
String (文字列): テキストデータ（例: "Hello", 'World'）
Boolean (論理値): 真偽（true または false）
Null (ヌル): 「値がない」ことを明示的に示す特別な値
Undefined (未定義): 値が割り当てられていない状態（例: 宣言済みだが初期化されていない変数）
Symbol (シンボル): ES2015で導入された、一意の識別子（例: Symbol('id')）
BigInt (ビッグイント): ES2020で導入された、任意精度の整数（例: 10n）

オブジェクト型（参照型）

Object (オブジェクト): プリミティブ型以外のすべてのデータ型（関数、配列、日付などを含む）

`typeof` 演算子

変数のデータ型を調べるには、typeof 演算子を使用します。結果は文字列で返されます。

console.log(typeof 123);      // "number"
console.log(typeof "text");   // "string"
console.log(typeof true);     // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof Symbol('foo')); // "symbol"
console.log(typeof 123n);     // "bigint"

console.log(typeof null);     // "object" (JavaScriptの歴史的な仕様によるもの)
console.log(typeof {});       // "object"
console.log(typeof []);       // "object"
console.log(typeof function(){}); // "function" (関数の特殊な分類)

3. 演算子

JavaScriptには様々な演算子があり、データの処理や比較に用いられます。

算術演算子: +, -, *, /, % (剰余)
代入演算子: =
比較演算子: ==, ===, !=, !==, <, >, <=, >=
論理演算子: && (AND), || (OR), ! (NOT)
単項演算子: ++ (インクリメント), -- (デクリメント)
条件（三項）演算子: 条件 ? trueの式 : falseの式
複合代入演算子: +=, -=, *=, /=, %=

インクリメント/デクリメント演算子

変数の値を1増減させます。前置（++変数）と後置（変数++）で評価のタイミングが異なります。

let count = 5;
let result1 = count++; // 後置: result1に5が代入された後、countが6になる
console.log(`count: ${count}, result1: ${result1}`); // count: 6, result1: 5

let anotherCount = 5;
let result2 = ++anotherCount; // 前置: anotherCountが6になった後、result2に6が代入される
console.log(`anotherCount: ${anotherCount}, result2: ${result2}`); // anotherCount: 6, result2: 6

厳密な比較（`===`, `!==`）と緩い比較（`==`, `!=`）

== と != は、比較する値の型が異なる場合、型変換を試みてから比較します。一方、=== と !== は、型変換を行わずに、値と型の両方が厳密に一致するかどうかを比較します。

console.log(1 == '1');    // true (型変換が行われる)
console.log(1 === '1');   // false (型が異なるため)

console.log(null == undefined); // true
console.log(null === undefined); // false

console.log(0 == false);  // true
console.log(0 === false); // false

論理演算子と短絡評価

&& (AND) や || (OR) 演算子は、評価の結果が確定した時点で残りの式を評価しない「短絡評価」を行います。

let value = 0;
// && は最初のfalsyな値、または最後の値を返す
let resultAnd = value && "Hello"; // valueが0（falsy）なので、"Hello"は評価されず、resultAndは0になる
console.log(resultAnd); // 0

let anotherValue = 10;
// || は最初のtruthyな値、または最後の値を返す
let resultOr = anotherValue || "Default"; // anotherValueが10（truthy）なので、"Default"は評価されず、resultOrは10になる
console.log(resultOr); // 10

// 変数にデフォルト値を設定する際によく使われる
let userName = "";
let displayName = userName || "ゲスト"; // userNameがfalsyなので、displayNameは"ゲスト"になる
console.log(displayName); // ゲスト

4. 制御フロー文

プログラムの実行順序を制御するための構文を「制御フロー文」と呼びます。主に条件分岐と繰り返し（ループ）の2種類があります。

1. 条件分岐

特定の条件に基づいて処理を分岐させます。

`if` / `else if` / `else` 文

let score = 75;

if (score >= 90) {
  console.log("評価: 優");
} else if (score >= 70) {
  console.log("評価: 良");
} else if (score >= 50) {
  console.log("評価: 可");
} else {
  console.log("評価: 不可");
}

`switch` 文

式の結果が複数の特定の値のいずれかに一致するかどうかで処理を分岐させます。厳密な比較（===）を行います。breakがない場合、次のcaseブロックに処理が流れ込む（フォールスルー）ので注意が必要です。

let dayOfWeek = "火曜";
let message;

switch (dayOfWeek) {
  case "月曜":
  case "火曜":
  case "水曜":
    message = "平日です。";
    break;
  case "土曜":
  case "日曜":
    message = "週末です！";
    break;
  default:
    message = "不明な曜日です。";
    break;
}
console.log(message); // 平日です。

2. 繰り返し（ループ）

特定の処理を繰り返し実行します。

`while` 文

条件が真である限り、ブロック内の処理を繰り返し実行します。ループに入る前に条件を評価します。

let counter = 0;
while (counter < 3) {
  console.log(`Whileループ: ${counter}`);
  counter++;
}

`do...while` 文

while文と似ていますが、ブロック内の処理を少なくとも1回は実行し、その後で条件を評価します。

let i = 0;
do {
  console.log(`Do-Whileループ: ${i}`);
  i++;
} while (i < 3);

let j = 5;
do {
  console.log(`Do-Whileは少なくとも1回実行: ${j}`);
  j++;
} while (j < 3); // 条件はfalseだが、1回は実行される

`for` 文

特定の回数だけ処理を繰り返す場合に便利です。初期化、条件、更新の3つの式で構成されます。

for (let k = 0; k < 3; k++) {
  console.log(`Forループ: ${k}`);
}

`for...in` 文

オブジェクトの列挙可能なプロパティ名を反復処理します。配列に使用するとインデックスを返しますが、順序が保証されない場合があるため、配列にはfor...ofまたは通常のforを使用することが推奨されます。

const user = { name: "Alice", age: 30, city: "Tokyo" };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

`for...of` 文

反復可能オブジェクト（配列、文字列、Map、Setなど）の要素の値を反復処理します。

const colors = ["Red", "Green", "Blue"];
for (const color of colors) {
  console.log(color);
}

const messageString = "Hello";
for (const char of messageString) {
  console.log(char);
}

5. 関数

関数は、特定のタスクを実行するための一連の命令をまとめた再利用可能なコードブロックです。

関数の定義方法

1. 関数宣言 (Function Declaration)

最も一般的な方法です。関数名が必須で、定義前に呼び出すことができます（ホイスティングされます）。

// 関数宣言の例
function calculateSum(a, b) {
  return a + b;
}
console.log(calculateSum(5, 3)); // 8

2. 関数式 (Function Expression)

関数を変数に代入する方法です。多くの場合、匿名関数が使用されます。変数に代入されるため、定義前に呼び出すことはできません（ホイスティングされません）。

// 関数式の例
const multiply = function(x, y) {
  return x * y;
};
console.log(multiply(4, 2)); // 8

3. アロー関数 (Arrow Function) - ES2015以降

関数式をより簡潔に記述できる構文です。特にコールバック関数としてよく用いられます。

// アロー関数の例
const subtract = (num1, num2) => {
  return num1 - num2;
};
console.log(subtract(10, 4)); // 6

// 1つの式のみの場合、波括弧とreturnを省略可能
const square = num => num * num;
console.log(square(7)); // 49

関数の引数と戻り値

引数 (Parameters): 関数が外部からデータを受け取るためのプレースホルダー（仮引数）です。関数が呼び出される際に渡される実際の値は「実引数 (Arguments)」と呼ばれます。
戻り値 (Return Value): 関数の処理結果を呼び出し元に返す値です。return文を使用して指定します。return文が省略された場合、またはreturnの後に値が指定されない場合、関数はundefinedを返します。

function greet(name, age) { // name, ageは仮引数
  if (age < 0) {
    return "年齢は正の値を指定してください。"; // 早期リターン
  }
  return `こんにちは、${name}さん。${age}歳ですね。`;
}

let greetingMessage = greet("太郎", 25); // "太郎", 25は実引数
console.log(greetingMessage); // こんにちは、太郎さん。25歳ですね。

console.log(greet("次郎", -5)); // 年齢は正の値を指定してください。

タグ: javascript 変数データ型演算子制御フロー

10月7日 10:25 投稿

異端開発室

JavaScriptプログラミングの基本概念

1. 変数と定数

`var`, `let`, `const` の違い

2. データ型

プリミティブ型

オブジェクト型（参照型）

`typeof` 演算子

3. 演算子

インクリメント/デクリメント演算子

厳密な比較（`===`, `!==`）と緩い比較（`==`, `!=`）

論理演算子と短絡評価

4. 制御フロー文

1. 条件分岐

`if` / `else if` / `else` 文

`switch` 文

2. 繰り返し（ループ）

`while` 文

`do...while` 文

`for` 文

`for...in` 文

`for...of` 文

5. 関数

関数の定義方法

1. 関数宣言 (Function Declaration)

2. 関数式 (Function Expression)

3. アロー関数 (Arrow Function) - ES2015以降

関数の引数と戻り値

ホットタグ

異端開発室

JavaScriptプログラミングの基本概念

1. 変数と定数

var, let, const の違い

2. データ型

プリミティブ型

オブジェクト型（参照型）

typeof 演算子

3. 演算子

インクリメント/デクリメント演算子

厳密な比較（===, !==）と緩い比較（==, !=）

論理演算子と短絡評価

4. 制御フロー文

1. 条件分岐

if / else if / else 文

switch 文

2. 繰り返し（ループ）

while 文

do...while 文

for 文

for...in 文

for...of 文

5. 関数

関数の定義方法

1. 関数宣言 (Function Declaration)

2. 関数式 (Function Expression)

3. アロー関数 (Arrow Function) - ES2015以降

関数の引数と戻り値

ホットタグ

`var`, `let`, `const` の違い

`typeof` 演算子

厳密な比較（`===`, `!==`）と緩い比較（`==`, `!=`）

`if` / `else if` / `else` 文

`switch` 文

`while` 文

`do...while` 文

`for` 文

`for...in` 文

`for...of` 文