diff --git a/src/pages/js/030-if.mdx b/src/pages/js/030-if.mdx
index ebabdcd..8d1814e 100644
--- a/src/pages/js/030-if.mdx
+++ b/src/pages/js/030-if.mdx
@@ -9,4 +9,155 @@
 
 # {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("快適な気温ではありません");
+}
+```