diff --git a/src/pages/drafts/015-foundation-from-excel.mdx b/src/pages/drafts/015-foundation-from-excel.mdx
new file mode 100644
index 0000000..9877320
--- /dev/null
+++ b/src/pages/drafts/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/010-foundation.mdx b/src/pages/js/010-foundation.mdx
deleted file mode 100644
index 1b2c6f9..0000000
--- a/src/pages/js/010-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
-<div id="example">Hello, World!</div>
-
-<script>
-  const element = document.getElementById("example");
-  console.log(element.innerHTML); // "Hello, World!"
-</script>
-```
-
-### 変数の宣言
-
-`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
-<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-<script>
-console.log(typeof windiw.jQuery); // "function"
-console.log(jQuery.find("body")); // body要素を取得
-
-var jQuery = "This will overwrite jQuery!";
-console.log(typeof window.jQuery); // "string"
-console.log(jQuery.find("body")); // エラー
-</script>
-```
-
-## HTMLの操作
-
-### 要素を取得する
-
-#### IDで取得
-
-```html
-<div id="myElement">Hello, World!</div>
-
-<script>
-  const element = document.getElementById("myElement");
-  console.log(element.innerHTML); // "Hello, World!"
-</script>
-```
-
-#### class名で取得
-
-```html
-<div class="myClass">Item 1</div>
-<div class="myClass">Item 2</div>
-<div class="myClass">Item 3</div>
-
-<script>
-  const elements = document.getElementsByClassName("myClass");
-  console.log(elements.length); // 3
-  console.log(elements[0].innerHTML); // "Item 1"
-</script>
-```
-
-#### query Selectorで取得
-
-```html
-<div class="container">
-  <p class="text">Paragraph 1</p>
-  <p class="text">Paragraph 2</p>
-</div>
-
-<form>
-  <input type="text" />
-  <input type="password" />
-</form>
-
-<script>
-  const firstParagraph = document.querySelector(".container .text");
-  console.log(firstParagraph.innerHTML); // "Paragraph 1"
-
-  const allParagraphs = document.querySelectorAll(".container .text");
-  console.log(allParagraphs.length); // 2
-  console.log(allParagraphs[1].innerHTML); // "Paragraph 2"
-
-  const passwordInput = document.querySelector("form input[type='password']");
-  console.log(passwordInput.type); // "password"
-</script>
-```
-
-#### 要素を追加
-
-```html
-<ul id="myList">
-  <li>Item 1</li>
-  <li>Item 2</li>
-</ul>
-
-<script>
-  const list = document.getElementById("myList");
-
-  // 新しい要素を作成
-  const newItem = document.createElement("li");
-  newItem.innerHTML = "Item 3";
-
-  // 要素を追加
-  list.appendChild(newItem);
-  console.log(list.innerHTML);
-  // <li>Item 1</li><li>Item 2</li><li>Item 3</li>
-</script>
-```
-
-#### 要素を削除
-
-```html
-<ul id="myList">
-  <li>Item 1</li>
-  <li id="itemToRemove">Item 2</li>
-  <li>Item 3</li>
-</ul>
-
-<script>
-  const itemToRemove = document.getElementById("itemToRemove");
-
-  // 親要素を取得
-  const parent = itemToRemove.parentNode;
-  // 要素を削除
-  parent.removeChild(itemToRemove);
-  console.log(document.getElementById("myList").innerHTML);
-  // <li>Item 1</li><li>Item 3</li>
-</script>
-```
-
-## イベント
-
-### イベントの登録
-
-HTML属性で直接登録する方法もあります。
-
-```html
-<button onclick="alert('Button was clicked!')">Click Me!</button>
-```
-
-JavaScriptでイベントリスナーを登録する方法が一般的です。j
-
-```html
-<button id="myButton">Click Me!</button>
-
-<script>
-  const button = document.getElementById("myButton");
-
-  // クリックイベントを登録
-  button.addEventListener("click", () => {
-    alert("Button was clicked!");
-  });
-</script>
-```
-
-同時に複数のイベントリスナーを登録することも可能です。
-
-```html
-<button id="myButton">Click Me!</button>
-
-<script>
-  const button = document.getElementById("myButton");
-
-  function handleClick1() {
-    alert("Button was clicked!");
-  }
-
-  function handleClick2() {
-    console.log("Button click logged.");
-  }
-
-  button.addEventListener("click", handleClick1);
-  button.addEventListener("click", handleClick2);
-</script>
-```
-
-### イベントの削除
-
-`onRemoveEventListener`メソッドを使って、登録したイベントリスナーを削除できます。  
-例のように、1度だけ実行したい場合などに使えます。
-
-```html
-<button id="myButton">Click Me!</button>
-
-<script>
-  const button = document.getElementById("myButton");
-  function handleClick1() {
-    alert("alert only once!");
-    button.removeEventListener("click", handleClick);
-  }
-
-  function handleClick2() {
-    console.log("Button click logged.");
-  }
-
-  button.addEventListener("click", handleClick1);
-  button.addEventListener("click", handleClick2);
-</script>
-```''
diff --git a/src/pages/js/011-what-program-do.mdx b/src/pages/js/011-what-program-do.mdx
index 76e996f..e8bdf88 100644
--- a/src/pages/js/011-what-program-do.mdx
+++ b/src/pages/js/011-what-program-do.mdx
@@ -34,7 +34,7 @@
 */
 ```
 
-## 関数
+## 関数とは
 
 足し算を考えてみましょう。
 
@@ -113,7 +113,7 @@
 // => 3 がコンソールに表示される
 ```
 
-## 変数
+## 変数とは
 
 変数とは、ある値に名前をつけて保存しておくためのものです。  
 初めてその変数を作るときに、以下のように書きます。
@@ -294,3 +294,70 @@
 
 students[0].name; // "もつに"
 students[0].age;  // 18
+
+```
+
+### 関数
+
+実は、JavaScriptでは3種類の関数の書き方があります。  
+変数の中身を関数にする書き方があるので、併せて覚えておきましょう。
+
+厳密な違いはありますが、いくつか書き方があるということだけ押さえておけば大丈夫です。
+
+```js
+// 通常の関数の書き方
+function 関数名(引数1, 引数2, ...) {
+  // 処理内容
+  return 戻り値;
+}
+
+// 無名関数方式
+let 関数名 = function(引数1, 引数2, ...) {
+  // 処理内容
+  return 戻り値;
+}
+
+// アロー関数方式
+let 関数名 = (引数1, 引数2, ...) => {
+  // 処理内容
+  return 戻り値;
+}
+```
+
+やっていることは結局、関数に対して別の名前をつけていることと同じです。
+
+```js
+function subtract(x, y) {
+  return x - y;
+}
+
+let sub = subtract;
+
+// 内部的には完全に同じもの
+sub(5, 3);      // 2
+subtract(5, 3); // 2
+```
+
+以下の3つは同じ動作をします。
+
+```js
+function add(x, y) {
+  return x + y;
+}
+```
+
+<br />
+
+```js
+let add = function(x, y) {
+  return x + y;
+};
+```
+
+<br />
+
+```js
+let add = (x, y) => {
+  return x + y;
+};
+```
diff --git a/src/pages/js/015-foundation-from-excel.mdx b/src/pages/js/015-foundation-from-excel.mdx
deleted file mode 100644
index 9877320..0000000
--- a/src/pages/js/015-foundation-from-excel.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-layout: "@/layouts/MarkdownLayout.astro"
----
-
-export const title = "Excelで学ぶプログラミング超基礎";
-
-# {title}
-
-プログラミングを学ぶのに、なぜExcel？と思うと思います。  
-実はExcelを含む表計算ソフトは、プログラミングの基礎を体験するという意味で非常に適しているツールなのです。
-
-このExcelから、どんなプログラミング言語にも共通する基礎的な概念を学んでいきましょう。
-
-## TOC
-
-## 変数
-
-| | A | B | C |
-| --: | :-- | :-: | -: |
-| 1 | もつに | | |
diff --git a/src/pages/js/020-js-with-html.mdx b/src/pages/js/020-js-with-html.mdx
index 996174f..1b24d4b 100644
--- a/src/pages/js/020-js-with-html.mdx
+++ b/src/pages/js/020-js-with-html.mdx
@@ -9,6 +9,8 @@
 
 # {title}
 
+## TOC
+
 ## とりあえず見てみよう
 
 ```html file=src/sample/js/button.html
@@ -18,13 +20,17 @@
 
 <RenderFile path="src/sample/js/button.html" />
 
-<br />
-
-1つずつ見ていきましょう。
+`クリック！`ボタンがありますね、これをクリックしてみましょう。  
+`ボタンがクリックされました！`とメッセージが表示されたと思います。
 
 <br />
 
-以下の箇所は`<button>`タグですね。これがボタンとして表示されています。
+動作がわかったところで、ソースコードを見ていきましょう。
+
+<br />
+
+以下の箇所は`<button>`タグですね。これがボタンとして表示されています。  
+これがクリックされたときに、先ほどのメッセージが表示されていました。
 
 ```html file=src/sample/js/button.html {1}
 src/sample/js/button.html
@@ -45,4 +51,123 @@
 <br />
 <br />
 
-見慣れないものが多いとは思いますが、まずざっくりとどのようなことが行われているのかを見てみましょう。
+最初の行には、`const button = document.querySelector("button");`とありますね。  
+今のこれが何なのかよくわからないかもしれませんが、どうやら上に書いてあったボタンを取得しているようですね。  
+そのボタンが、`button`という変数に入れられています。
+
+```html file=src/sample/js/button.html {4} '<button type="button">クリック！</button>'
+src/sample/js/button.html
+内容を取得できませんでした
+```
+
+<br />
+<br />
+
+その次を見てみると、`button`から`addEventListener`が伸びていますね。  
+その直後に、メッセージの文章になっていた`ボタンがクリックされました！`という記述があります。
+
+```html file=src/sample/js/button.html {5-7}
+src/sample/js/button.html
+内容を取得できませんでした
+```
+
+<br />
+
+## 解説
+
+### documemnt.querySelector() とは
+
+例として以下のHTMLを提示していました。  
+そこでは、`button`という変数を新たに作成し、`document.querySelector("button")`の結果を代入していました。
+
+```html file=src/sample/js/button.html {4} "document"
+src/sample/js/button.html
+内容を取得できませんでした
+```
+
+この記述の動作を日本語で説明すると、  
+**ブラウザで表示中のHTMLの中から`button`タグを探して、その最初の要素を取得しなさい。**  
+となります。  
+
+`document`は**ブラウザで表示中のHTML全体**を管理している、ブラウザが提供している特別なオブジェクトです。  
+その中の`querySelector`という機能を使うことで、HTMLの中から特定の要素を探し出し、JavaScriptからその要素を操作できるようにしています。
+
+<br />
+<br />
+
+ところで、`querySelector`の名前にもなっているセレクターとは何でしょうか？  
+同じ呼ばれ方をしているものが、[HTMLを装飾するCSS](../html/02-css) でも登場していました。
+
+実は、CSSで使われているセレクターと、JavaScriptで使われているセレクターは同じものです。
+
+今回の例では`document.querySelector("button")`と書かれていました。  
+この括弧の中に書かれている`button`こそが、HTMLの`<button>`タグを指し示すセレクターです。
+
+CSSと同様に、class属性やid属性を使って要素を指定することもできます。
+
+```html
+<button>クリック！</button>
+<script>
+  const button = document.querySelector("button");
+</script>
+```
+
+<br />
+
+```html
+<button class="btn">クリック！</button>
+<script>
+  const button = document.querySelector(".btn");
+</script>
+```
+
+<br />
+
+```html
+<button id="special-button">クリック！</button>
+<script>
+  const button = document.querySelector("#special-button");
+</script>
+```
+
+### addEventListener() とは
+
+以下のソースコードは、ボタンをクリックしたときにメッセージを表示するという例でした。  
+このクリックしたときの動作を実現していたのが、`addEventListener`という機能です。
+
+```html file=src/sample/js/button.html {5-7}
+src/sample/js/button.html
+内容を取得できませんでした
+```
+
+先に第2引数を見てみましょう。  
+そこには実際に表示されていたメッセージ、`ボタンがクリックされました！`が書かれていましたね。  
+どうやらそこに、クリックされたときの動作が書かれているようです。
+
+注意して欲しいのは、第2引数に渡しているものは、**関数そのもの**であるということです。
+
+```js
+const button = document.querySelector("button");
+
+function handleClick() {
+  alert("ボタンがクリックされました！");
+}
+
+// handleClickという関数そのものを第2引数に渡している
+// handleClick() として実行してはいない
+button.addEventListener("click", handleClick);
+```
+
+<br />
+
+そして第1引数を見てみましょう。
+
+第1引数は、**どんなときに第2引数の動作(=イベント)を実行するのかを決めるためのもの**です。
+
+第2引数は、**クリックされたときの動作**を定義しているものでした。  
+このクリックしたときの動作(=clickイベント)を表す`"click"`が、今回第1引数に指定されているというわけです。
+
+イベントには様々な種類があります。  
+こんなものがあるんだな程度でいくつか把握しておくと良いでしょう。
+
+[【javascript】addEventListenerイベントまとめ](https://qiita.com/whw3312/items/94a2bdf632ef77555579)
diff --git a/src/pages/refarence/010-foundation.mdx b/src/pages/refarence/010-foundation.mdx
new file mode 100644
index 0000000..1b2c6f9
--- /dev/null
+++ b/src/pages/refarence/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
+<div id="example">Hello, World!</div>
+
+<script>
+  const element = document.getElementById("example");
+  console.log(element.innerHTML); // "Hello, World!"
+</script>
+```
+
+### 変数の宣言
+
+`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
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script>
+console.log(typeof windiw.jQuery); // "function"
+console.log(jQuery.find("body")); // body要素を取得
+
+var jQuery = "This will overwrite jQuery!";
+console.log(typeof window.jQuery); // "string"
+console.log(jQuery.find("body")); // エラー
+</script>
+```
+
+## HTMLの操作
+
+### 要素を取得する
+
+#### IDで取得
+
+```html
+<div id="myElement">Hello, World!</div>
+
+<script>
+  const element = document.getElementById("myElement");
+  console.log(element.innerHTML); // "Hello, World!"
+</script>
+```
+
+#### class名で取得
+
+```html
+<div class="myClass">Item 1</div>
+<div class="myClass">Item 2</div>
+<div class="myClass">Item 3</div>
+
+<script>
+  const elements = document.getElementsByClassName("myClass");
+  console.log(elements.length); // 3
+  console.log(elements[0].innerHTML); // "Item 1"
+</script>
+```
+
+#### query Selectorで取得
+
+```html
+<div class="container">
+  <p class="text">Paragraph 1</p>
+  <p class="text">Paragraph 2</p>
+</div>
+
+<form>
+  <input type="text" />
+  <input type="password" />
+</form>
+
+<script>
+  const firstParagraph = document.querySelector(".container .text");
+  console.log(firstParagraph.innerHTML); // "Paragraph 1"
+
+  const allParagraphs = document.querySelectorAll(".container .text");
+  console.log(allParagraphs.length); // 2
+  console.log(allParagraphs[1].innerHTML); // "Paragraph 2"
+
+  const passwordInput = document.querySelector("form input[type='password']");
+  console.log(passwordInput.type); // "password"
+</script>
+```
+
+#### 要素を追加
+
+```html
+<ul id="myList">
+  <li>Item 1</li>
+  <li>Item 2</li>
+</ul>
+
+<script>
+  const list = document.getElementById("myList");
+
+  // 新しい要素を作成
+  const newItem = document.createElement("li");
+  newItem.innerHTML = "Item 3";
+
+  // 要素を追加
+  list.appendChild(newItem);
+  console.log(list.innerHTML);
+  // <li>Item 1</li><li>Item 2</li><li>Item 3</li>
+</script>
+```
+
+#### 要素を削除
+
+```html
+<ul id="myList">
+  <li>Item 1</li>
+  <li id="itemToRemove">Item 2</li>
+  <li>Item 3</li>
+</ul>
+
+<script>
+  const itemToRemove = document.getElementById("itemToRemove");
+
+  // 親要素を取得
+  const parent = itemToRemove.parentNode;
+  // 要素を削除
+  parent.removeChild(itemToRemove);
+  console.log(document.getElementById("myList").innerHTML);
+  // <li>Item 1</li><li>Item 3</li>
+</script>
+```
+
+## イベント
+
+### イベントの登録
+
+HTML属性で直接登録する方法もあります。
+
+```html
+<button onclick="alert('Button was clicked!')">Click Me!</button>
+```
+
+JavaScriptでイベントリスナーを登録する方法が一般的です。j
+
+```html
+<button id="myButton">Click Me!</button>
+
+<script>
+  const button = document.getElementById("myButton");
+
+  // クリックイベントを登録
+  button.addEventListener("click", () => {
+    alert("Button was clicked!");
+  });
+</script>
+```
+
+同時に複数のイベントリスナーを登録することも可能です。
+
+```html
+<button id="myButton">Click Me!</button>
+
+<script>
+  const button = document.getElementById("myButton");
+
+  function handleClick1() {
+    alert("Button was clicked!");
+  }
+
+  function handleClick2() {
+    console.log("Button click logged.");
+  }
+
+  button.addEventListener("click", handleClick1);
+  button.addEventListener("click", handleClick2);
+</script>
+```
+
+### イベントの削除
+
+`onRemoveEventListener`メソッドを使って、登録したイベントリスナーを削除できます。  
+例のように、1度だけ実行したい場合などに使えます。
+
+```html
+<button id="myButton">Click Me!</button>
+
+<script>
+  const button = document.getElementById("myButton");
+  function handleClick1() {
+    alert("alert only once!");
+    button.removeEventListener("click", handleClick);
+  }
+
+  function handleClick2() {
+    console.log("Button click logged.");
+  }
+
+  button.addEventListener("click", handleClick1);
+  button.addEventListener("click", handleClick2);
+</script>
+```''