diff --git a/src/pages/js/00-introduction.mdx b/src/pages/js/00-introduction.mdx
deleted file mode 100644
index 9ce498a..0000000
--- a/src/pages/js/00-introduction.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-layout: "@/layouts/MarkdownLayout.astro"
----
-
-export const title = "JavaScriptとは？";
-
-# {title}
-
-JavaScriptは1995年、Netscape社によって開発されたプログラミング言語です。
-主にウェブブラウザ上で動作し、ウェブページに動的な機能を追加するために使用されます。
-
-今やJavaScriptはウェブページを超えて、パソコンそのものを操作できるようになりました。
-WindowやMac、iPhone、Androidなどを超えて、ありとあらゆるものがこのJavaScriptで動くように整備されつつあります。
-
-これらは根本的に、ウェブページを動かすための技術を応用して実現されています。
-ウェブページでJavaScriptを使うことは、あなたが思う以上に世界を広げる重要な知識となるでしょう。
diff --git a/src/pages/js/000-introduction.mdx b/src/pages/js/000-introduction.mdx
new file mode 100644
index 0000000..9ce498a
--- /dev/null
+++ b/src/pages/js/000-introduction.mdx
@@ -0,0 +1,16 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+export const title = "JavaScriptとは？";
+
+# {title}
+
+JavaScriptは1995年、Netscape社によって開発されたプログラミング言語です。
+主にウェブブラウザ上で動作し、ウェブページに動的な機能を追加するために使用されます。
+
+今やJavaScriptはウェブページを超えて、パソコンそのものを操作できるようになりました。
+WindowやMac、iPhone、Androidなどを超えて、ありとあらゆるものがこのJavaScriptで動くように整備されつつあります。
+
+これらは根本的に、ウェブページを動かすための技術を応用して実現されています。
+ウェブページでJavaScriptを使うことは、あなたが思う以上に世界を広げる重要な知識となるでしょう。
diff --git a/src/pages/js/01-foundation.mdx b/src/pages/js/01-foundation.mdx
deleted file mode 100644
index 1b2c6f9..0000000
--- a/src/pages/js/01-foundation.mdx
+++ /dev/null
@@ -1,448 +0,0 @@
----
-layout: "@/layouts/MarkdownLayout.astro"
----
-
-export const title = "わかっている人向けの基礎";
-
-# {title}
-
-## TOC
-
-## 型
-
-### プリミティブ型
-
-#### Number型
-
-```js
-// 整数
-console.log(typeof 123); // "number"
-console.log(typeof -123); // "number"
-
-console.log(typeof 0x1A); // "number" // 16進数
-console.log(typeof 0b0101); // "number" // 2進数
-console.log(typeof 0o755); // "number" // 8進数
-
-// IEEE 754 倍精度浮動小数点数
-console.log(typeof 3.14); // "number"
-```
-
-#### BigInt型
-
-```js
-const bigInt = 9007199254741991n; // 任意精度整数 ( BigInt )
-console.log(typeof bigInt); // "bigint"
-```
-
-#### Boolean型
-
-```js
-console.log(typeof true); // "boolean"
-console.log(typeof false); // "boolean"
-```
-
-#### String型
-
-```js
-console.log(typeof "Hello, World!"); // "string"
-console.log(typeof 'JavaScript'); // "string"
-
-const multiLine = `これは
-複数行の
-文字列です。`;
-console.log(typeof multiLine); // "string"
-
-// テンプレートリテラル
-const name = "Alice";
-const greeting = `Hello, ${name}!`;
-console.log(greeting); // "Hello, Alice!"
-console.log(typeof greeting); // "string"
-```
-
-#### Symbol型
-
-```js
-const sym = Symbol("uniqueIdentifier");
-console.log(typeof sym); // "symbol"
-```
-
-#### Null型
-
-```js
-const emptyValue = null;
-console.log(typeof emptyValue); // "object" (歴史的な理由による)
-```
-
-#### Undefined型
-
-```js
-const notAssigned = undefined;
-console.log(typeof notAssigned); // "undefined"
-```
-
-### オブジェクト型 (狭義)
-
-JavaScriptでは、プリミティブ型以外のすべての値はオブジェクト型に分類されます。
-この`Object型`セクションでは、代表的なオブジェクト型を紹介します。
-
-#### Object
-
-```js
-const obj = new Object();
-obj.name = "Bob";
-obj.age = 25;
-
-console.log(obj); // { name: "Bob", age: 25 }
-console.log(obj.name); // "Bob"
-console.log(obj["age"]); // 25
-console.log(obj.someField); // undefined
-
-
-const obj2 = {
- name: "Charlie",
- age: 28
-};
-
-console.log(obj2); // { name: "Charlie", age: 28 }
-```
-
-#### Class
-
-JavaScriptでは、他の言語でいうところの`public`や`private`などのアクセス修飾子は存在しません。
-
-```js
-class Person {
- constructor(name, age) {
- this.name = name;
- this.age = age;
-
- greet() {
- console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
- }
- }
-}
-
-const alice = new Person("Alice", 30);
-console.log(alice); // Person { name: "Alice", age: 30 }
-console.log(alice.name); // "Alice"
-console.log(alice.greet()); // "Hello, my name is Alice and I am 30 years old."
-```
-
-#### Array
-
-```js
-const list = [1, 2, 3, 4, 5];
-console.log(typeof list); // "object"
-
-const list2 = new Array(1, 2, 3, 4, 5);
-console.log(typeof list2); // "object"
-```
-
-#### RegExp
-
-```js
-const pattern = /ab+c/i;
-console.log(typeof pattern); // "object"
-
-const pattern2 = new RegExp("ab+c", "i");
-console.log(typeof pattern2); // "object"
-```
-
-## 関数
-
-宣言
-
-```js
-function add(a, b) {
- return a + b;
-}
-
-const sub = (a, b) => {
- return a - b;
-}
-```
-
-複数の型を返すことが可能
-
-```js
-function getValue(flag) {
- if (flag) {
- return 42; // Number型
- } else {
- return "Hello"; // String型
- }
-}
-```
-
-## コメント行
-
-JavaScriptでは、以下の3つの方法でコメントを記述できます。
-
-```js
-// これは1行コメントです。
-
-/*
-これは複数行に
-渡るコメントです。
-*/
-
-const value = 100;
-
-/**
- * これはドキュメンテーションコメントです。
- * @param {string} name - 挨拶する相手の名前
- */
-function greet(name) {
- // 挨拶を表示する
- console.log("Hello, " + name + "!");
-}
-```
-
-## 標準出力
-
-Developper Toolsなどのコンソールに出力します。
-
-```js
-console.log("Hello, World!");
-
-// エラーレベルを分けて出力することもできます。
-console.warn("This is a warning message.");
-console.error("This is an error message.");
-console.info("This is an informational message.");
-console.debug("This is a debug message.");
-
-// objectや配列を見やすく表示することもできます。
-console.table({
- name: "Alice",
- age: 30,
- city: "New York"
-});
-```
-
-## 変数
-
-### 特別な変数
-
-#### window
-
-`window`はブラウザの最上位オブジェクトで、グローバルスコープに存在します。
-ブラウザ環境でJavaScriptを実行すると、`window`オブジェクトにはブラウザが提供する多くの機能が含まれています。
-
-#### document
-
-ブラウザに表示されているHTMLの全体を表すオブジェクトです。
-ここからHTML要素を取得したり、操作したりできます。
-
-```html
-Hello, World!
-
-
-```
-
-### 変数の宣言
-
-`var`、`let`、`const`の3つのキーワードで変数を宣言できます。
-
-| キーワード | スコープ | 再代入 | 再宣言 |
-| :---------- | :------- | :----- | :----- |
-| `var` | 関数スコープ | 可能 | 可能 |
-| `let` | ブロックスコープ | 可能 | 不可 |
-| `const` | ブロックスコープ | 不可 | 不可 |
-
-`var`は関数の外側で宣言すると、その値は`window`オブジェクトのプロパティとして登録されます。
-
-```js
-var func = () => {
- return "Hello, Function!";
-}
-
-console.log(func()); // "Hello, Function!"
-console.log(window.func()); // "Hello, Function!"
-console.log(func === window.func); // true
-```
-
-`var`は外部のライブラリを登録するときなどに使われます。
-誤って同じ名前で変数を宣言すると、そのライブラリを上書きすることになるので注意が必要です。
-
-```html
-
-
-```
-
-## HTMLの操作
-
-### 要素を取得する
-
-#### IDで取得
-
-```html
-Hello, World!
-
-
-```
-
-#### class名で取得
-
-```html
-Item 1
-Item 2
-Item 3
-
-
-```
-
-#### query Selectorで取得
-
-```html
-
-
Paragraph 1
-
Paragraph 2
-
- - Item 1
- - Item 2
- - Item 3
-
-
-
-```
-
-## イベント
-
-### イベントの登録
-
-HTML属性で直接登録する方法もあります。
-
-```html
-
-```
-
-JavaScriptでイベントリスナーを登録する方法が一般的です。j
-
-```html
-
-
-
-```
-
-同時に複数のイベントリスナーを登録することも可能です。
-
-```html
-
-
-
-```
-
-### イベントの削除
-
-`onRemoveEventListener`メソッドを使って、登録したイベントリスナーを削除できます。
-例のように、1度だけ実行したい場合などに使えます。
-
-```html
-
-
-
-```''
diff --git a/src/pages/js/010-foundation.mdx b/src/pages/js/010-foundation.mdx
new file mode 100644
index 0000000..1b2c6f9
--- /dev/null
+++ b/src/pages/js/010-foundation.mdx
@@ -0,0 +1,448 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+export const title = "わかっている人向けの基礎";
+
+# {title}
+
+## TOC
+
+## 型
+
+### プリミティブ型
+
+#### Number型
+
+```js
+// 整数
+console.log(typeof 123); // "number"
+console.log(typeof -123); // "number"
+
+console.log(typeof 0x1A); // "number" // 16進数
+console.log(typeof 0b0101); // "number" // 2進数
+console.log(typeof 0o755); // "number" // 8進数
+
+// IEEE 754 倍精度浮動小数点数
+console.log(typeof 3.14); // "number"
+```
+
+#### BigInt型
+
+```js
+const bigInt = 9007199254741991n; // 任意精度整数 ( BigInt )
+console.log(typeof bigInt); // "bigint"
+```
+
+#### Boolean型
+
+```js
+console.log(typeof true); // "boolean"
+console.log(typeof false); // "boolean"
+```
+
+#### String型
+
+```js
+console.log(typeof "Hello, World!"); // "string"
+console.log(typeof 'JavaScript'); // "string"
+
+const multiLine = `これは
+複数行の
+文字列です。`;
+console.log(typeof multiLine); // "string"
+
+// テンプレートリテラル
+const name = "Alice";
+const greeting = `Hello, ${name}!`;
+console.log(greeting); // "Hello, Alice!"
+console.log(typeof greeting); // "string"
+```
+
+#### Symbol型
+
+```js
+const sym = Symbol("uniqueIdentifier");
+console.log(typeof sym); // "symbol"
+```
+
+#### Null型
+
+```js
+const emptyValue = null;
+console.log(typeof emptyValue); // "object" (歴史的な理由による)
+```
+
+#### Undefined型
+
+```js
+const notAssigned = undefined;
+console.log(typeof notAssigned); // "undefined"
+```
+
+### オブジェクト型 (狭義)
+
+JavaScriptでは、プリミティブ型以外のすべての値はオブジェクト型に分類されます。
+この`Object型`セクションでは、代表的なオブジェクト型を紹介します。
+
+#### Object
+
+```js
+const obj = new Object();
+obj.name = "Bob";
+obj.age = 25;
+
+console.log(obj); // { name: "Bob", age: 25 }
+console.log(obj.name); // "Bob"
+console.log(obj["age"]); // 25
+console.log(obj.someField); // undefined
+
+
+const obj2 = {
+ name: "Charlie",
+ age: 28
+};
+
+console.log(obj2); // { name: "Charlie", age: 28 }
+```
+
+#### Class
+
+JavaScriptでは、他の言語でいうところの`public`や`private`などのアクセス修飾子は存在しません。
+
+```js
+class Person {
+ constructor(name, age) {
+ this.name = name;
+ this.age = age;
+
+ greet() {
+ console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
+ }
+ }
+}
+
+const alice = new Person("Alice", 30);
+console.log(alice); // Person { name: "Alice", age: 30 }
+console.log(alice.name); // "Alice"
+console.log(alice.greet()); // "Hello, my name is Alice and I am 30 years old."
+```
+
+#### Array
+
+```js
+const list = [1, 2, 3, 4, 5];
+console.log(typeof list); // "object"
+
+const list2 = new Array(1, 2, 3, 4, 5);
+console.log(typeof list2); // "object"
+```
+
+#### RegExp
+
+```js
+const pattern = /ab+c/i;
+console.log(typeof pattern); // "object"
+
+const pattern2 = new RegExp("ab+c", "i");
+console.log(typeof pattern2); // "object"
+```
+
+## 関数
+
+宣言
+
+```js
+function add(a, b) {
+ return a + b;
+}
+
+const sub = (a, b) => {
+ return a - b;
+}
+```
+
+複数の型を返すことが可能
+
+```js
+function getValue(flag) {
+ if (flag) {
+ return 42; // Number型
+ } else {
+ return "Hello"; // String型
+ }
+}
+```
+
+## コメント行
+
+JavaScriptでは、以下の3つの方法でコメントを記述できます。
+
+```js
+// これは1行コメントです。
+
+/*
+これは複数行に
+渡るコメントです。
+*/
+
+const value = 100;
+
+/**
+ * これはドキュメンテーションコメントです。
+ * @param {string} name - 挨拶する相手の名前
+ */
+function greet(name) {
+ // 挨拶を表示する
+ console.log("Hello, " + name + "!");
+}
+```
+
+## 標準出力
+
+Developper Toolsなどのコンソールに出力します。
+
+```js
+console.log("Hello, World!");
+
+// エラーレベルを分けて出力することもできます。
+console.warn("This is a warning message.");
+console.error("This is an error message.");
+console.info("This is an informational message.");
+console.debug("This is a debug message.");
+
+// objectや配列を見やすく表示することもできます。
+console.table({
+ name: "Alice",
+ age: 30,
+ city: "New York"
+});
+```
+
+## 変数
+
+### 特別な変数
+
+#### window
+
+`window`はブラウザの最上位オブジェクトで、グローバルスコープに存在します。
+ブラウザ環境でJavaScriptを実行すると、`window`オブジェクトにはブラウザが提供する多くの機能が含まれています。
+
+#### document
+
+ブラウザに表示されているHTMLの全体を表すオブジェクトです。
+ここからHTML要素を取得したり、操作したりできます。
+
+```html
+Hello, World!
+
+
+```
+
+### 変数の宣言
+
+`var`、`let`、`const`の3つのキーワードで変数を宣言できます。
+
+| キーワード | スコープ | 再代入 | 再宣言 |
+| :---------- | :------- | :----- | :----- |
+| `var` | 関数スコープ | 可能 | 可能 |
+| `let` | ブロックスコープ | 可能 | 不可 |
+| `const` | ブロックスコープ | 不可 | 不可 |
+
+`var`は関数の外側で宣言すると、その値は`window`オブジェクトのプロパティとして登録されます。
+
+```js
+var func = () => {
+ return "Hello, Function!";
+}
+
+console.log(func()); // "Hello, Function!"
+console.log(window.func()); // "Hello, Function!"
+console.log(func === window.func); // true
+```
+
+`var`は外部のライブラリを登録するときなどに使われます。
+誤って同じ名前で変数を宣言すると、そのライブラリを上書きすることになるので注意が必要です。
+
+```html
+
+
+```
+
+## HTMLの操作
+
+### 要素を取得する
+
+#### IDで取得
+
+```html
+Hello, World!
+
+
+```
+
+#### class名で取得
+
+```html
+Item 1
+Item 2
+Item 3
+
+
+```
+
+#### query Selectorで取得
+
+```html
+
+
Paragraph 1
+
Paragraph 2
+
+ - Item 1
+ - Item 2
+ - Item 3
+
+
+
+```
+
+## イベント
+
+### イベントの登録
+
+HTML属性で直接登録する方法もあります。
+
+```html
+
+```
+
+JavaScriptでイベントリスナーを登録する方法が一般的です。j
+
+```html
+
+
+
+```
+
+同時に複数のイベントリスナーを登録することも可能です。
+
+```html
+
+
+
+```
+
+### イベントの削除
+
+`onRemoveEventListener`メソッドを使って、登録したイベントリスナーを削除できます。
+例のように、1度だけ実行したい場合などに使えます。
+
+```html
+
+
+
+```''
diff --git a/src/pages/js/011-what-program-do.mdx b/src/pages/js/011-what-program-do.mdx
new file mode 100644
index 0000000..a4ad73d
--- /dev/null
+++ b/src/pages/js/011-what-program-do.mdx
@@ -0,0 +1,154 @@
+---
+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;
+```
+
+一度変数を作ると、その名前を使って値を取り出したり、変更したりすることができます。
+
+```js
+// 変数nameの値を取り出して表示する
+console.log(name); // => もつに
+
+// 変数ageの値を変更する
+age = 20;
+
+// 誕生日を迎えて、年齢が1増えることを表現する
+age = age + 1; // -> age = 20 + 1 と解釈される
+```
+
+
+
+なお、`let`の他に`const`というキーワードもあります。
+これは日本語でいうところの「定数」を表し、一度値を設定したら変更できなくなります。
+
+```js
+const pi = 3.14;
+
+// pi から値を取り出すことはできる
+console.log(pi); // => 3.14
+
+// エラー: constで宣言された変数は値の変更ができない
+pi = 3.14159;
+```
diff --git a/src/pages/js/015-foundation-from-excel.mdx b/src/pages/js/015-foundation-from-excel.mdx
new file mode 100644
index 0000000..9877320
--- /dev/null
+++ b/src/pages/js/015-foundation-from-excel.mdx
@@ -0,0 +1,20 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+export const title = "Excelで学ぶプログラミング超基礎";
+
+# {title}
+
+プログラミングを学ぶのに、なぜExcel？と思うと思います。
+実はExcelを含む表計算ソフトは、プログラミングの基礎を体験するという意味で非常に適しているツールなのです。
+
+このExcelから、どんなプログラミング言語にも共通する基礎的な概念を学んでいきましょう。
+
+## TOC
+
+## 変数
+
+| | A | B | C |
+| --: | :-- | :-: | -: |
+| 1 | もつに | | |
diff --git a/src/pages/js/02-js-with-html.mdx b/src/pages/js/02-js-with-html.mdx
deleted file mode 100644
index 1bbae24..0000000
--- a/src/pages/js/02-js-with-html.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
----
-layout: "@/layouts/MarkdownLayout.astro"
----
-
-import RenderFile from "@/components/RenderFile";
-import RenderHtml from "@/components/RenderHtml";
-
-export const title = "HTMLとJavaScript";
-
-# {title}
-
-## とりあえず見てみよう
-
-```html file=src/sample/js/button.html
-内容を取得できませんでした
-```
-
-
-
-```html file=src/sample/js/button.html {3-8}
-内容を取得できませんでした
-```
diff --git a/src/pages/js/020-js-with-html.mdx b/src/pages/js/020-js-with-html.mdx
new file mode 100644
index 0000000..996174f
--- /dev/null
+++ b/src/pages/js/020-js-with-html.mdx
@@ -0,0 +1,48 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+import RenderFile from "@/components/RenderFile";
+import RenderHtml from "@/components/RenderHtml";
+
+export const title = "HTMLとJavaScript";
+
+# {title}
+
+## とりあえず見てみよう
+
+```html file=src/sample/js/button.html
+src/sample/js/button.html
+内容を取得できませんでした
+```
+
+
+
+
+
+1つずつ見ていきましょう。
+
+
+
+以下の箇所は`