diff --git a/src/pages/js/010-what-program-do.mdx b/src/pages/js/010-what-program-do.mdx
new file mode 100644
index 0000000..02bdc7b
--- /dev/null
+++ b/src/pages/js/010-what-program-do.mdx
@@ -0,0 +1,373 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+export const title = "プログラミングで扱うもの";
+
+# {title}
+
+このページはプログラミング初学者に向けた内容です。
+不要な方は読み飛ばしてください。
+
+このページで紹介しているソースコードは全てJavaScriptで書かれています。
+
+## TOC
+
+## コメント
+
+ソースコードを書いていくわけですが、そこに書くすべてのものがプログラムの動作に関係するわけではありません。
+誰であってもメモくらい書き残したいものです。
+
+JavaScriptでは、以下のようにコメントを書くことができます。
+
+```js
+// パターン1のコメント
+// ← この後ろは、その行の終わりまでがコメントです
+
+/* パターン2のコメント */
+/* ← この2つの間は、全てコメントです → */
+/*
+パターン1で
+できなかった
+改行も
+できます
+*/
+```
+
+## 関数とは
+
+足し算を考えてみましょう。
+
+`1 + 2`
+
+これの答えは、もちろん`3`ですね。
+
+この行為を、ちょっと日本語にしてみましょう。
+日本語だといろいろな表現ができますが、プログラミング的なには以下のように言えます。
+
+`足すという行為を、1と2に対して行う`
+
+この`足すという行為`の部分が、プログラミングでいうところの**関数**です。
+この関数に、`1`と`2`という対象(=**引数**)を渡すと、`3`という結果(=**戻り値**)が返ってきます。
+
+具体的に、2つの数を足すと関数をJavaScriptで書くと、以下のようになります。
+
+```js
+function add(a, b) {
+ return a + b;
+}
+```
+
+これを日本語で説明すると、以下のようになります。
+
+`足すという行為`に対して、`add`という名前をつけた。
+この`add`は2つの数字を受け取り、各々とりあえず`a`と`b`という名前をつける。
+その結果は、この2つを使った`a + b`をしたものだ。
+
+ちなみに人が手で計算をするとき、筆算をすることがあります。
+数学的な意味での関数はこの計算結果だけを考えますが、プログラミングにおける関数は**その計算過程も含めて**定義することができます
+
+極端に言えば、計算するために紙とペンを用意することも、関数のなかで行って良いのです。
+`1 + 2`を計算するのであれば、結果が`3`であればなんでも良いのです。
+
+```js
+function add(a, b) {
+ // ペンと紙を用意して・・・
+ // 1の位から順に足して・・・
+ // 繰り上がりを考慮して・・・
+
+ return 計算結果
+}
+```
+
+
+
+
+実際に`add`を使った`足すという行為`は、以下のように書きます。
+
+```js
+add(1, 2); // 結果: 3
+```
+
+
+今回自分でこの`add`という関数を定義してみました。
+
+ところで冷静に考えて、こういった関数を全て自分で定義するのは大変です。
+ですがあなたがやりたいことは、**基本的にすでに誰かがそのための関数を用意してくれています。**
+
+実際にプログラミングするということは、**すでにあるものをどのように組み合わせて、やりたいことを実現するか**ということです。
+
+今の`add(1, 2)`も、実行しただけでは本当に`3`になったのかが確認できません。
+この確認のために、例えばJavaScriptが最初から用意してくれている`alert`という関数を使って、結果を目に見えるようにしてみましょう。
+
+```js
+alert(add(1, 2)); // 3とメッセージが表示される
+```
+
+`add(1, 2)`の結果である`3`が`alert`関数に渡されて、メッセージとして表示されます。
+
+目に見えるようにするという意味では、`console.log`という関数もあります。
+
+```js
+console.log(add(1, 2));
+// => 3 がコンソールに表示される
+```
+
+## 変数とは
+
+変数とは、ある値に名前をつけて保存しておくためのものです。
+初めてその変数を作るときに、以下のように書きます。
+
+```js
+// let 値につける名前 = 値;
+
+let name = "もつに";
+let age = 18;
+let wallet_amount = 1500;
+```
+
+一度変数を作ると、その名前を使って値を取り出したり、変更したりすることができます。
+
+```js
+// 変数nameの値を取り出して表示する
+console.log(name); // => もつに
+
+// 変数ageの値を変更する (再代入)
+age = 20;
+
+// 誕生日を迎えて、年齢が1増えることを表現する
+age = age + 1; // -> age = 20 + 1 と解釈される
+
+// 別の方法で、変数wallet_amountの値を変更する
+wallet_amount += 300; // -> wallet_amount = wallet_amount + 300 と解釈される
+wallet_amount -= 500; // -> wallet_amount = wallet_amount - 500 と解釈される
+```
+
+
+
+変数を宣言するキーワードには、`let`の他に`const`もあります。
+これは日本語でいうところの「定数」を表し、一度値を設定したら、その変数の値を変更できなくなります。
+
+```js
+const pi = 3.14;
+
+// pi から値を取り出すことはできる
+console.log(pi); // => 3.14
+
+// エラー: constで宣言された変数は値の変更ができない
+pi = 3.14159;
+```
+
+`let`に比べて`const`は制約が多いですが、値が変わらないことが保証されるためソースコードを読みやすくなるという利点があります。
+
+実は変数に再度代入しなければいけないパターンはほとんどありません。
+最初のうちは`let`を使い、慣れてきたら`const`を使うようにすると良いでしょう。
+
+## 変数の値
+
+変数に入れられる値には、いくつか種類があります。
+値がどんな種類なのかということを、**データ型**と呼びます。
+
+このデータ型によって、どのようなプログラムを書くことができるのかが決まります。
+
+### 数字 (Number型)
+
+数字を扱うデータ型です。
+
+```js
+const age = 18; // 整数
+const tax_rate = 0.1; // 小数
+const golf_score = -5; // 負の数
+```
+
+### 文字列 (String型)
+
+文字の並びを扱うデータ型です。
+
+シングルクォート(`'`)や、ダブルクォート(`"`)などで囲むことで表現します。
+
+```js
+const name = "もつに"; // ダブルクォートで囲む
+const greeting = 'こんにちは'; // シングルクォートで囲む
+```
+
+
+
+余談ですが、`も`、`つ`、`に`と、それぞれの文字を`もつに`と1つにまとめるような書き方を採用しています。
+これは文字を1列に並べていることから、**文字列**と呼ばれています。
+
+### 構造 (Object型)
+
+なにかを管理しようとしたときに、人の目にはある程度まとまりがあったほうが便利です。
+これをプログラミング的に表現したものが、**オブジェクト**です。
+
+これは、`{` と `}`で囲まれた中に、`キー: 値`の組み合わせを並べて表現します。
+
+```js
+const 変数名 = {
+ [キー名1]: 値,
+ [キー名2]: 値,
+ [キー名3]: 値,
+ ...
+}
+```
+
+```js
+const person = {
+ // 文字列
+ name: "もつに",
+
+ // 数字
+ age: 18,
+
+ // 関数を値として持つこともできる
+ greeting: function() {
+ console.log("こんにちは！");
+ }
+};
+```
+
+値を取り出すときは、以下のように書きます。
+
+```js
+// 変数名.キー名
+
+person.name; // "もつに"
+person.age; // 18
+
+// 関数なので、末尾に()をつけて実行することもできる
+person.greeting(); // => こんにちは！
+```
+
+
+
+他の変数と同様、別の値を代入して変更することもできます。
+
+```js
+// nameの値を"たろう"に変更
+person.name = "たろう";
+
+// ageの値を20に変更する
+person.age = 20;
+
+// addressという新しいキーを追加して値を設定
+person.address = "東京都";
+```
+
+### 配列
+
+数字の連番や、例えばクラスの生徒リストなど、同じ種類のものをまとめて扱いたいことがあります。
+このようなときに使うのが、**配列**です。
+
+配列は、`[` と `]`で囲まれた中に、値をカンマ(`,`)で区切って並べて表現します。
+
+```js
+const 変数名 = [値1, 値2, 値3, ...];
+```
+
+
+
+```js
+const numbers = [10, 20, 30, 40, 50];
+
+const names = ["もつに", "たかし", "なおき"];
+
+const students = [
+ { name: "もつに", age: 18 },
+ { name: "たかし", age: 20 },
+ { name: "なおき", age: 19 },
+];
+```
+
+
+
+この配列には、先頭から順に`0`、`1`、`2`、...という番号(=**index、添字**)が自動的に振られます。
+値を取り出す方法の1つとして、このインデックスを使う方法があります。
+
+```js
+const names = [
+ "もつに", // 0番
+ "たかし", // 1番
+ "なおき", // 2番
+];
+
+names[0]; // "もつに"
+names[1]; // "たかし"
+names[2]; // "なおき"
+
+
+const students = [
+ { name: "もつに", age: 18 }, // 0番
+ { name: "たかし", age: 20 }, // 1番
+ { name: "なおき", age: 19 }, // 2番
+];
+
+students[0].name; // "もつに"
+students[0].age; // 18
+
+```
+
+### 関数
+
+実は、JavaScriptでは3種類の関数の書き方があります。
+変数の中身を関数にする書き方があるので、併せて覚えておきましょう。
+
+厳密な違いはありますが、いくつか書き方があるということだけ押さえておけば大丈夫です。
+
+```js
+// 通常の関数の書き方
+function 関数名(引数1, 引数2, ...) {
+ // 処理内容
+ return 戻り値;
+}
+
+// 無名関数方式
+const 関数名 = function(引数1, 引数2, ...) {
+ // 処理内容
+ return 戻り値;
+}
+
+// アロー関数方式
+const 関数名 = (引数1, 引数2, ...) => {
+ // 処理内容
+ return 戻り値;
+}
+```
+
+やっていることは結局、関数に対して別の名前をつけていることと同じです。
+
+```js
+function subtract(x, y) {
+ return x - y;
+}
+
+const sub = subtract;
+
+// 内部的には完全に同じもの
+sub(5, 3); // 2
+subtract(5, 3); // 2
+```
+
+以下の3つは同じ動作をします。
+
+```js
+function add(x, y) {
+ return x + y;
+}
+```
+
+
+
+```js
+const add = function(x, y) {
+ return x + y;
+};
+```
+
+
+
+```js
+const add = (x, y) => {
+ return x + y;
+};
+```
diff --git a/src/pages/js/011-what-program-do.mdx b/src/pages/js/011-what-program-do.mdx
deleted file mode 100644
index 02bdc7b..0000000
--- a/src/pages/js/011-what-program-do.mdx
+++ /dev/null
@@ -1,373 +0,0 @@
----
-layout: "@/layouts/MarkdownLayout.astro"
----
-
-export const title = "プログラミングで扱うもの";
-
-# {title}
-
-このページはプログラミング初学者に向けた内容です。
-不要な方は読み飛ばしてください。
-
-このページで紹介しているソースコードは全てJavaScriptで書かれています。
-
-## TOC
-
-## コメント
-
-ソースコードを書いていくわけですが、そこに書くすべてのものがプログラムの動作に関係するわけではありません。
-誰であってもメモくらい書き残したいものです。
-
-JavaScriptでは、以下のようにコメントを書くことができます。
-
-```js
-// パターン1のコメント
-// ← この後ろは、その行の終わりまでがコメントです
-
-/* パターン2のコメント */
-/* ← この2つの間は、全てコメントです → */
-/*
-パターン1で
-できなかった
-改行も
-できます
-*/
-```
-
-## 関数とは
-
-足し算を考えてみましょう。
-
-`1 + 2`
-
-これの答えは、もちろん`3`ですね。
-
-この行為を、ちょっと日本語にしてみましょう。
-日本語だといろいろな表現ができますが、プログラミング的なには以下のように言えます。
-
-`足すという行為を、1と2に対して行う`
-
-この`足すという行為`の部分が、プログラミングでいうところの**関数**です。
-この関数に、`1`と`2`という対象(=**引数**)を渡すと、`3`という結果(=**戻り値**)が返ってきます。
-
-具体的に、2つの数を足すと関数をJavaScriptで書くと、以下のようになります。
-
-```js
-function add(a, b) {
- return a + b;
-}
-```
-
-これを日本語で説明すると、以下のようになります。
-
-`足すという行為`に対して、`add`という名前をつけた。
-この`add`は2つの数字を受け取り、各々とりあえず`a`と`b`という名前をつける。
-その結果は、この2つを使った`a + b`をしたものだ。
-
-ちなみに人が手で計算をするとき、筆算をすることがあります。
-数学的な意味での関数はこの計算結果だけを考えますが、プログラミングにおける関数は**その計算過程も含めて**定義することができます
-
-極端に言えば、計算するために紙とペンを用意することも、関数のなかで行って良いのです。
-`1 + 2`を計算するのであれば、結果が`3`であればなんでも良いのです。
-
-```js
-function add(a, b) {
- // ペンと紙を用意して・・・
- // 1の位から順に足して・・・
- // 繰り上がりを考慮して・・・
-
- return 計算結果
-}
-```
-
-
-
-
-実際に`add`を使った`足すという行為`は、以下のように書きます。
-
-```js
-add(1, 2); // 結果: 3
-```
-
-
-今回自分でこの`add`という関数を定義してみました。
-
-ところで冷静に考えて、こういった関数を全て自分で定義するのは大変です。
-ですがあなたがやりたいことは、**基本的にすでに誰かがそのための関数を用意してくれています。**
-
-実際にプログラミングするということは、**すでにあるものをどのように組み合わせて、やりたいことを実現するか**ということです。
-
-今の`add(1, 2)`も、実行しただけでは本当に`3`になったのかが確認できません。
-この確認のために、例えばJavaScriptが最初から用意してくれている`alert`という関数を使って、結果を目に見えるようにしてみましょう。
-
-```js
-alert(add(1, 2)); // 3とメッセージが表示される
-```
-
-`add(1, 2)`の結果である`3`が`alert`関数に渡されて、メッセージとして表示されます。
-
-目に見えるようにするという意味では、`console.log`という関数もあります。
-
-```js
-console.log(add(1, 2));
-// => 3 がコンソールに表示される
-```
-
-## 変数とは
-
-変数とは、ある値に名前をつけて保存しておくためのものです。
-初めてその変数を作るときに、以下のように書きます。
-
-```js
-// let 値につける名前 = 値;
-
-let name = "もつに";
-let age = 18;
-let wallet_amount = 1500;
-```
-
-一度変数を作ると、その名前を使って値を取り出したり、変更したりすることができます。
-
-```js
-// 変数nameの値を取り出して表示する
-console.log(name); // => もつに
-
-// 変数ageの値を変更する (再代入)
-age = 20;
-
-// 誕生日を迎えて、年齢が1増えることを表現する
-age = age + 1; // -> age = 20 + 1 と解釈される
-
-// 別の方法で、変数wallet_amountの値を変更する
-wallet_amount += 300; // -> wallet_amount = wallet_amount + 300 と解釈される
-wallet_amount -= 500; // -> wallet_amount = wallet_amount - 500 と解釈される
-```
-
-
-
-変数を宣言するキーワードには、`let`の他に`const`もあります。
-これは日本語でいうところの「定数」を表し、一度値を設定したら、その変数の値を変更できなくなります。
-
-```js
-const pi = 3.14;
-
-// pi から値を取り出すことはできる
-console.log(pi); // => 3.14
-
-// エラー: constで宣言された変数は値の変更ができない
-pi = 3.14159;
-```
-
-`let`に比べて`const`は制約が多いですが、値が変わらないことが保証されるためソースコードを読みやすくなるという利点があります。
-
-実は変数に再度代入しなければいけないパターンはほとんどありません。
-最初のうちは`let`を使い、慣れてきたら`const`を使うようにすると良いでしょう。
-
-## 変数の値
-
-変数に入れられる値には、いくつか種類があります。
-値がどんな種類なのかということを、**データ型**と呼びます。
-
-このデータ型によって、どのようなプログラムを書くことができるのかが決まります。
-
-### 数字 (Number型)
-
-数字を扱うデータ型です。
-
-```js
-const age = 18; // 整数
-const tax_rate = 0.1; // 小数
-const golf_score = -5; // 負の数
-```
-
-### 文字列 (String型)
-
-文字の並びを扱うデータ型です。
-
-シングルクォート(`'`)や、ダブルクォート(`"`)などで囲むことで表現します。
-
-```js
-const name = "もつに"; // ダブルクォートで囲む
-const greeting = 'こんにちは'; // シングルクォートで囲む
-```
-
-
-
-余談ですが、`も`、`つ`、`に`と、それぞれの文字を`もつに`と1つにまとめるような書き方を採用しています。
-これは文字を1列に並べていることから、**文字列**と呼ばれています。
-
-### 構造 (Object型)
-
-なにかを管理しようとしたときに、人の目にはある程度まとまりがあったほうが便利です。
-これをプログラミング的に表現したものが、**オブジェクト**です。
-
-これは、`{` と `}`で囲まれた中に、`キー: 値`の組み合わせを並べて表現します。
-
-```js
-const 変数名 = {
- [キー名1]: 値,
- [キー名2]: 値,
- [キー名3]: 値,
- ...
-}
-```
-
-```js
-const person = {
- // 文字列
- name: "もつに",
-
- // 数字
- age: 18,
-
- // 関数を値として持つこともできる
- greeting: function() {
- console.log("こんにちは！");
- }
-};
-```
-
-値を取り出すときは、以下のように書きます。
-
-```js
-// 変数名.キー名
-
-person.name; // "もつに"
-person.age; // 18
-
-// 関数なので、末尾に()をつけて実行することもできる
-person.greeting(); // => こんにちは！
-```
-
-
-
-他の変数と同様、別の値を代入して変更することもできます。
-
-```js
-// nameの値を"たろう"に変更
-person.name = "たろう";
-
-// ageの値を20に変更する
-person.age = 20;
-
-// addressという新しいキーを追加して値を設定
-person.address = "東京都";
-```
-
-### 配列
-
-数字の連番や、例えばクラスの生徒リストなど、同じ種類のものをまとめて扱いたいことがあります。
-このようなときに使うのが、**配列**です。
-
-配列は、`[` と `]`で囲まれた中に、値をカンマ(`,`)で区切って並べて表現します。
-
-```js
-const 変数名 = [値1, 値2, 値3, ...];
-```
-
-
-
-```js
-const numbers = [10, 20, 30, 40, 50];
-
-const names = ["もつに", "たかし", "なおき"];
-
-const students = [
- { name: "もつに", age: 18 },
- { name: "たかし", age: 20 },
- { name: "なおき", age: 19 },
-];
-```
-
-
-
-この配列には、先頭から順に`0`、`1`、`2`、...という番号(=**index、添字**)が自動的に振られます。
-値を取り出す方法の1つとして、このインデックスを使う方法があります。
-
-```js
-const names = [
- "もつに", // 0番
- "たかし", // 1番
- "なおき", // 2番
-];
-
-names[0]; // "もつに"
-names[1]; // "たかし"
-names[2]; // "なおき"
-
-
-const students = [
- { name: "もつに", age: 18 }, // 0番
- { name: "たかし", age: 20 }, // 1番
- { name: "なおき", age: 19 }, // 2番
-];
-
-students[0].name; // "もつに"
-students[0].age; // 18
-
-```
-
-### 関数
-
-実は、JavaScriptでは3種類の関数の書き方があります。
-変数の中身を関数にする書き方があるので、併せて覚えておきましょう。
-
-厳密な違いはありますが、いくつか書き方があるということだけ押さえておけば大丈夫です。
-
-```js
-// 通常の関数の書き方
-function 関数名(引数1, 引数2, ...) {
- // 処理内容
- return 戻り値;
-}
-
-// 無名関数方式
-const 関数名 = function(引数1, 引数2, ...) {
- // 処理内容
- return 戻り値;
-}
-
-// アロー関数方式
-const 関数名 = (引数1, 引数2, ...) => {
- // 処理内容
- return 戻り値;
-}
-```
-
-やっていることは結局、関数に対して別の名前をつけていることと同じです。
-
-```js
-function subtract(x, y) {
- return x - y;
-}
-
-const sub = subtract;
-
-// 内部的には完全に同じもの
-sub(5, 3); // 2
-subtract(5, 3); // 2
-```
-
-以下の3つは同じ動作をします。
-
-```js
-function add(x, y) {
- return x + y;
-}
-```
-
-
-
-```js
-const add = function(x, y) {
- return x + y;
-};
-```
-
-
-
-```js
-const add = (x, y) => {
- return x + y;
-};
-```
diff --git a/src/pages/js/020-if.mdx b/src/pages/js/020-if.mdx
new file mode 100644
index 0000000..8d1814e
--- /dev/null
+++ b/src/pages/js/020-if.mdx
@@ -0,0 +1,163 @@
+---
+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("快適な気温ではありません");
+}
+```
diff --git a/src/pages/js/020-js-with-html.mdx b/src/pages/js/020-js-with-html.mdx
deleted file mode 100644
index 0a246ad..0000000
--- a/src/pages/js/020-js-with-html.mdx
+++ /dev/null
@@ -1,173 +0,0 @@
----
-layout: "@/layouts/MarkdownLayout.astro"
----
-
-import RenderFile from "@/components/RenderFile";
-import RenderHtml from "@/components/RenderHtml";
-
-export const title = "ボタンをクリックしたら処理する";
-
-# {title}
-
-## TOC
-
-## とりあえず見てみよう
-
-```html file=src/sample/js/button.html
-src/sample/js/button.html
-内容を取得できませんでした
-```
-
-
-
-`クリック！`ボタンがありますね、これをクリックしてみましょう。
-`ボタンがクリックされました！`とメッセージが表示されたと思います。
-
-
-
-動作がわかったところで、ソースコードを見ていきましょう。
-
-
-
-以下の箇所は`