---
layout: "@/layouts/MarkdownLayout.astro"
---

import RenderFile from "@/components/RenderFile";
import RenderHtml from "@/components/RenderHtml";

export const title = "if文で条件分岐する";

# {title}

条件分岐とは、**ある条件を満たすときだけ処理を実行する**、または**条件によって実行する処理を変える**といった制御のことです。

プログラムは基本的に上から下へ順番に実行されますが、条件分岐を使うことで、状況に応じた柔軟な動きを作ることができます。

## TOC

## 真と偽 (Boolean型)

`if`文の説明に入る前に、新しいデータ型を紹介します。  
それが **Boolean (ブーリアン)** 型です。

数字(Number型)には `1`, `100`, `-5` など無数の値がありましたが、Boolean型には以下の2つの値しかありません。

- `true` (正しい / 真)
- `false` (正しくない / 偽)

コンピュータの世界では、この「YesかNoか」や「ONかOFFか」という白黒ハッキリした情報が非常に重要になります。

## 比較とif文

### 値の大小を比較

例えばテストの点数によって、合格か不合格かを判定したいとします。  
80点以上なら合格、ということにしましょう。

これをプログラムで書くと、以下のようになります。

```js
const score = 85;

if (score >= 80) {
  console.log("合格！");
}
```

`if (...)` の丸括弧の中に**条件**を書きます。  
この条件が満たされている(正しい)場合だけ、`{ ... }` の波括弧の中の処理が実行されます。

今回の場合、`score >= 80` が条件です。  
数学の不等号と同じような意味で、`>=` は「左辺が右辺**以上**である」ときに正しい(True)となります。

比較に使う記号(演算子)には、以下のようなものがあります。

| 記号 | 意味 |
|:--|:--|
| `>` | より大きい |
| `<` | より小さい |
| `>=` | 以上 |
| `<=` | 以下 |

### 値が同じかどうかを比較

今度は「パスワードが正しいかどうか」を判定してみましょう。

```js
const password = "my_secret_password";

if (password == "my_secret_password") {
  console.log("ログイン成功！");
}
```

`==` は左右の値が**等しい**ときに正しい(True)となります。  
逆に、等しくないことを確認したい場合は `!=` を使います。

## 厳密な比較

先ほど `==` を紹介しましたが、実はJavaScriptにはもうひとつ、等しいことを確認する `===` があります。

```js
// 数値の 1
const numberOne = 1;
// 文字列の "1"
const stringOne = "1";

// == だと、なんとこれらは「等しい」と判定されます
if (numberOne == stringOne) {
  console.log("== だと等しいです");
}

// === だと、これらは「等しくない」と判定されます
if (numberOne === stringOne) {
  // こちらは実行されません
  console.log("=== だと等しいです");
}
```

`==` は、左右の値の型(数値や文字列など)が違っていても、**なんとなく内容が同じなら等しい**と判定してしまいます。  
これは便利な場合もありますが、思わぬバグの原因になることが多いです。

そのため、型まで厳密にチェックしてくれる **`===` (イコール3つ)を使うことを強くおすすめします**。  
(「等しくない」場合も同様に `!==` を使いましょう)

## 条件の組み合わせ

複数の条件を組み合わせたい場合もあります。  
例えば「80点以上、かつ、100点以下」のような場合です。

### AND (かつ)

`&&` を使うことで、「左右の条件が**両方とも正しい**」場合を表せます。

```js
const score = 85;

// scoreが80以上、かつ、scoreが100以下
if (score >= 80 && score <= 100) {
  console.log("見事な成績です！");
}
```

### OR (または)

`||` を使うことで、「左右の条件の**どちらか片方でも正しい**」場合を表せます。

```js
const weather = "rainy";
const hasUmbrella = false;

// 天気が雨、または、傘を持っていない (どちらかなら濡れちゃう)
if (weather === "rainy" || hasUmbrella === false) {
  console.log("注意して外出しましょう");
}
```

### NOT (否定)

`!` を使うことで、条件の意味を**逆**にすることができます。

```js
const isTired = false;

// 疲れていない (!isTired) なら勉強する
if (!isTired) {
  console.log("勉強しましょう！");
}
```

これは `isTired === false` と書くのと同じ意味になりますが、`!` を使うと「～でない」というニュアンスがコードで表現しやすくなります。

条件式は組み合わせると、理解が難しい場合があります。  
`そうでない場合`を表現するときなどに、`!` を使うとコードが読みやすくなることがあります。

```js

const temperature = 25;

// 快適な気温を18度以上25度以下として、そうではない場合を判定
if (!(temprature >= 18 && temperature <= 25)) {
  console.log("快適な気温ではありません");
}
```