JavaScript超入門: ゼロからはじめるWebプログラミング

主なデータ型

JavaScriptでよく使うデータ型は以下の通りです。

• 数字 (Number)
  • 例: 10, 3.14
  • 計算やスコア、年齢など数値を扱うときに使います。
• 文字 (String)
  • 例: "こんにちは", 'Hello'
  • 名前やメッセージなど、文字を扱うときに使います。
• 真偽 (Boolean)
  • 例: true, false
  • 条件が「正しい」か「間違い」かを判定するときに使います。
• 未定義 (Undefined)
  • 例: 値が設定されていない変数
  • 変数がまだ値を持っていないときに表示されます。
• Null
  • 例: null
  • 意図的に「値がない」ことを示すために使います。

算術演算子（計算に使う演算子）

• + : 足し算
• - : 引き算
• * : 掛け算
• / : 割り算
• % : 剰余（割り算の余り）

let a = 10;
let b = 3;

console.log(a + b); // 13 (足し算)
console.log(a - b); // 7 (引き算)
console.log(a * b); // 30 (掛け算)
console.log(a / b); // 3.333... (割り算)
console.log(a % b); // 1 (余り)

複合代入演算子（便利な書き方）

複合代入演算子は、値を更新するときに便利な演算子です。たとえば、「x = x + 3」と書く代わりに、「x += 3」と短く書けます。長い計算式を省略して書けるため、コードがスッキリします。

• += : 加算して代入
  • 例: x += 3 は、x = x + 3 と同じ意味。
• -= : 減算して代入
  • 例: x -= 2 は、x = x - 2 と同じ意味。
• *= : 乗算して代入
  • 例: x *= 4 は、x = x * 4 と同じ意味。
• /= : 除算して代入
  • 例: x /= 5 は、x = x / 5 と同じ意味。
• %= : 剰余して代入
  • 例: x %= 2 は、x = x % 2 と同じ意味。

let x = 5;

x += 3; // x = x + 3 と同じ。結果は 8
console.log(x); // 8

x *= 2; // x = x * 2 と同じ。結果は 16
console.log(x); // 16

x -= 6; // x = x - 6 と同じ。結果は 10
console.log(x); // 10

if文の基本構文

if (条件) {
  // 条件がtrueのときに実行するコード
} else if (別の条件) {
  // 別の条件がtrueのときに実行するコード
} else {
  // どの条件もtrueでないときに実行するコード
}

比較演算子とは？

条件分岐では、「条件」を設定するために比較演算子を使います。比較演算子は、値を比較して結果をtrue（正しい）またはfalse（間違い）で返します。

• === : 等しい
  • 例: x === 5 は、xが5と等しい場合にtrueを返す。
• !== : 等しくない
  • 例: x !== 5 は、xが5と等しくない場合にtrueを返す。
• > : より大きい
  • 例: x > 5 は、xが5より大きい場合にtrueを返す。
• < : より小さい
  • 例: x < 5 は、xが5より小さい場合にtrueを返す。
• >= : 以上
  • 例: x >= 5 は、xが5以上の場合にtrueを返す。
• <= : 以下
  • 例: x <= 5 は、xが5以下の場合にtrueを返す。

//サンプルコード

let x = 10;

console.log(x > 5);  // true (xは5より大きい)
console.log(x === 10); // true (xは10と等しい)
console.log(x < 3);  // false (xは3より小さくない)

論理演算子とは？

複数の条件を組み合わせたい場合は、論理演算子を使います。

1. &&（AND）
   • 「両方の条件が正しい場合だけtrue」
   • 例: x > 5 && x < 10 → xが6から9の間ならtrue
2. ||（OR）
   • 「どちらか一方でも条件が正しければtrue」
   • 例: x < 5 || x > 10 → xが5未満または10より大きければtrue
3. !（NOT）
   • 条件を「反転」させる
   • 例: !x > 5 → x > 5がfalseならtrue

let score = 85;
let submitted = true;

// AND（両方の条件を満たす場合）
if (score >= 80 && submitted) {
  console.log("合格です！");
} else {
  console.log("条件を満たしていません");
}

// OR（どちらかの条件を満たす場合）
let isWeekend = true;
let hasHoliday = false;

if (isWeekend || hasHoliday) {
  console.log("お休みです！");
} else {
  console.log("仕事の日です");
}

// NOT（条件を反転）
let isRainy = false;

if (!isRainy) {
  console.log("今日は晴れています！");
} else {
  console.log("雨が降っています");
}

条件分岐が正しく動く仕組み

//点数による判定

let score = 75;

if (score >= 80) {
  console.log("合格です！");
} else if (score >= 60) {
  console.log("追試の可能性あり");
} else {
  console.log("不合格です");
}

1. score >= 80がチェックされます。75は80未満なのでfalse。
2. 次にscore >= 60がチェックされます。75は60以上なのでtrue。
3. 「追試の可能性あり」が表示され、終了します。

for…of文の基本構文

for (let 要素 of 配列) {
  // 繰り返したい処理
}

let fruits = ["Apple", "Banana", "Orange", "Grapes"];

for (let fruit of fruits) {
  console.log(`フルーツ: ${fruit}`);
}

出力例
フルーツ: Apple
フルーツ: Banana
フルーツ: Orange
フルーツ: Grapes

//for文（インデックスを使う）
let fruits = ["Apple", "Banana", "Orange", "Grapes"];

for (let i = 0; i < fruits.length; i++) {
  console.log(`フルーツ ${i + 1}: ${fruits[i]}`);
}

for (let fruit of fruits) {
  console.log(`フルーツ: ${fruit}`);
}

演習問題

let movies = ["Inception", "The Matrix", "Interstellar"];

for (let movie of movies) {
  console.log(`映画タイトル: ${movie}`);
}