JavaScriptの演算子と条件分岐（if, switch）

演算子の基本

JavaScriptの演算子は、値に対して操作を行うための記号です。主な演算子の種類を紹介します。

算術演算子

let a = 10, 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   剰余
console.log(a ** b); // 1000 べき乗（ES2016）
console.log(a++);    // 10  後置インクリメント
console.log(++a);    // 12  前置インクリメント

比較演算子

console.log(10 == '10');  // true  等価（型変換あり）
console.log(10 === '10'); // false 厳密等価
console.log(10 != '10');  // false 不等価
console.log(10 !== '10'); // true  厳密不等価
console.log(10 > 5);      // true  大なり
console.log(10 < 5);      // false 小なり
console.log(10 >= 10);    // true  以上
console.log(10 <= 5);     // false 以下

論理演算子

// 論理AND（両方がtrueならtrue）
console.log(true && true);   // true
console.log(true && false);  // false

// 論理OR（どちらかがtrueならtrue）
console.log(true || false);  // true
console.log(false || false); // false

// 論理NOT（真偽を反転）
console.log(!true);          // false
console.log(!false);         // true

三項演算子

let age = 20;
let status = age >= 18 ? '成人' : '未成年';
console.log(status); // '成人'

その他の演算子

// 代入演算子
let x = 10;
x += 5; // x = x + 5 と同じ

// Null合体演算子（ES2020）
let value = null ?? 'デフォルト値'; // 'デフォルト値'

// オプショナルチェーン（ES2020）
const user = { name: '太郎' };
console.log(user?.address?.city); // undefined（エラーにならない）

条件分岐（if文）

基本的なif文

let score = 85;

if (score >= 80) {
  console.log('優秀です');
}

if…else文

if (score >= 60) {
  console.log('合格');
} else {
  console.log('不合格');
}

if…else if…else文

if (score >= 90) {
  console.log('S評価');
} else if (score >= 80) {
  console.log('A評価');
} else if (score >= 70) {
  console.log('B評価');
} else {
  console.log('C評価');
}

ネストしたif文

let age = 20;
let hasLicense = true;

if (age >= 18) {
  if (hasLicense) {
    console.log('運転可能');
  } else {
    console.log('免許が必要');
  }
} else {
  console.log('18歳未満は運転不可');
}

条件分岐（switch文）

基本的なswitch文

let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = '月曜日';
    break;
  case 2:
    dayName = '火曜日';
    break;
  case 3:
    dayName = '水曜日';
    break;
  case 4:
    dayName = '木曜日';
    break;
  case 5:
    dayName = '金曜日';
    break;
  default:
    dayName = '週末';
}

console.log(dayName); // '水曜日'

breakを省略した場合

let fruit = 'りんご';
let message = '';

switch (fruit) {
  case 'りんご':
  case 'みかん':
  case 'ぶどう':
    message = 'フルーツです';
    break;
  case 'にんじん':
    message = '野菜です';
    break;
  default:
    message = '不明な食品';
}

console.log(message); // 'フルーツです'

式を使ったswitch文

let num = 15;

switch (true) {
  case num % 15 === 0:
    console.log('FizzBuzz');
    break;
  case num % 3 === 0:
    console.log('Fizz');
    break;
  case num % 5 === 0:
    console.log('Buzz');
    break;
  default:
    console.log(num);
}

条件分岐のベストプラクティス

1. 厳密等価演算子(===)を使用する

   // 👍 推奨
   if (value === 10) { ... }

   // 👎 非推奨
   if (value == 10) { ... }

2. 早期リターンを活用する

   function checkAge(age) {
     if (age < 0) return '無効な値';
     if (age < 18) return '未成年';
     return '成人';
   }

3. 複雑な条件は分解する

   // 👍 読みやすい
   const isWeekend = day === 6 || day === 0;
   const isWorkingHours = hour >= 9 && hour <= 17;

   if (isWeekend || !isWorkingHours) { ... }

4. switch文よりオブジェクトリテラルを検討

   const dayNames = {
     1: '月曜日',
     2: '火曜日',
     3: '水曜日',
     4: '木曜日',
     5: '金曜日'
   };

   console.log(dayNames[day] || '週末');

演習問題

初級問題（3問）

1. 次のコードの出力結果は？

   let x = 5;
   let y = '5';
   console.log(x == y);
   console.log(x === y);

2. 以下の条件を満たすif文を書きなさい。

• 変数ageが20以上なら「成人」
• 18以上20未満なら「青年」
• それ以外は「未成年」

3. 次のswitch文をif文に書き換えなさい。

   let color = 'red';

   switch (color) {
     case 'red':
       console.log('赤');
       break;
     case 'blue':
       console.log('青');
       break;
     default:
       console.log('不明');
   }

中級問題（6問）

4. 次のコードの出力を予想し、その理由を説明しなさい。

   console.log(0 == false);
   console.log(0 === false);
   console.log('' == false);
   console.log('' === false);

5. 次の条件を三項演算子で書き換えなさい。

   let score = 75;
   let result;

   if (score >= 60) {
     result = '合格';
   } else {
     result = '不合格';
   }

6. 以下のコードの間違いを指摘し、修正しなさい。

   let num = 10;

   if (num > 5)
     console.log('5より大きい');
     console.log('確かに大きい');
   else
     console.log('5以下');

7. 次のコードをNull合体演算子(??)を使って書き換えなさい。

   let username = null;
   let displayName = username !== null && username !== undefined ? username : 'ゲスト';

8. 次のswitch文でfruitが'apple'の場合の出力を答えなさい。

   let fruit = 'apple';

   switch (fruit) {
     case 'banana':
       console.log('バナナ');
     case 'apple':
       console.log('りんご');
     case 'orange':
       console.log('オレンジ');
       break;
     default:
       console.log('不明');
   }

9. 次のコードの出力結果とその理由を説明しなさい。

   console.log(1 + '2' - 3);

上級問題（3問）

10. FizzBuzzのプログラムを作りなさい。

1から100までの数字を出力するプログラムを書きなさい。ただし：3の倍数なら「Fizz」、5の倍数なら「Buzz」、3と5の倍数なら「FizzBuzz」、それ以外は数字を出力する。

11. 次のコードをオプショナルチェーンを使って書き換えなさい。

const user = {
    profile: {
        name: '太郎',
        address: null
    } 
}; 
let city; 
if (user && user.profile && user.profile.address && user.profile.address.city) {
    city = user.profile.address.city;
} else { city = '不明'; }

12. 以下の条件を満たす関数getSeasonを作成しなさい。

引数に月(1-12)を受け取る。3-5月は「春」、6-8月は「夏」、9-11月は「秋」、12-2月は「冬」、範囲外の数値は「無効な月」を返す。switch文を使用すること。

解答例

初級問題解答

1. コードの出力結果

   let x = 5;
   let y = '5';
   console.log(x == y);     // true 型変換が行われる
   console.log(x === y);    // false 型も含めて比較

2. 以下の条件を満たすif文

• 変数ageが20以上なら「成人」
• 18以上20未満なら「青年」
• それ以外は「未成年」

   if (age >= 20) {
     console.log('成人');
   } else if (age >= 18) {
     console.log('青年');
   } else {
     console.log('未成年');
   }

もしくは

if (age < 18) console.log('未成年');
    else if (age < 20) console.log('青年');
    else console.log('成人');

3. if文に書き換え

   if (color === 'red') {
     console.log('赤');
   } else if (color === 'blue') {
     console.log('青');
   } else {
     console.log('不明');
   }

中級問題解答

4. 出力結果と理由

   true   // 0はfalsyな値でfalseと等価とみなされる
   false  // 型が異なる
   true   // 空文字列はfalsyな値
   false  // 型が異なる

5. 三項演算子

   let result = score >= 60 ? '合格' : '不合格';

6. 間違いと修正

   // 中括弧{}を省略しているが、複数行書いているためelseがifに対応しない
   // 修正例：
   if (num > 5) {
     console.log('5より大きい');
     console.log('確かに大きい');
   } else {
     console.log('5以下');
   }

7. Null合体演算子で表現すると

   let displayName = username ?? 'ゲスト';

8. switch文でfruitが'apple'の場合の出力結果

りんご
オレンジ

   let fruit = 'apple';

   switch (fruit) {
     case 'banana':
       console.log('バナナ');
     case 'apple':  // appleが指定される
       console.log('りんご');   // ここでりんごの表示が実行される
     case 'orange': // breakがないため実行される
       console.log('オレンジ'); // ここでオレンジの表示が実行される
       break;   // breakでwitch文を抜ける
     default:
       console.log('不明');
   }

9. 出力結果と理由

    console.log(1 + '2' - 3);
// 1 + '2'  => +演算子は文字列結合演算になり文字列'12'となる
// '12' - 3 => 文字列'12'が数値12に変換され、12-3=9

上級問題解答

10. FizzBuzz解答

for (let i = 1; i <= 100; i++) { 
    let output = ''; 
    if (i % 3 === 0) output += 'Fizz'; 
    if (i % 5 === 0) output += 'Buzz'; 
    console.log(output || i); 
}

11. オプショナルチェーン

JavaScriptのオプショナルチェーンはnullやundefinedのプロパティを誤って参照しないようにしつつ、記述量を抑えられる書き方です。オプショナルチェーンは ?. 演算子を用いて書きます。

let city = user?.profile?.address?.city ?? '不明';

12. getSeason関数

javascript function getSeason(month) { 
    switch (month) { 
        case 3: case 4: case 5: return '春'; 
        case 6: case 7: case 8: return '夏'; 
        case 9: case 10: case 11: return '秋'; 
        case 12: case 1: case 2: return '冬'; 
        default: return '無効な月'; 
    } 
}