From 51436d511c0ce94b2b8b90c52a9875b0fea67039 Mon Sep 17 00:00:00 2001
From: chvmvd <104971044+chvmvd@users.noreply.github.com>
Date: Sat, 20 Jul 2024 12:59:58 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=83=A9=E3=82=A4=E3=83=B3?=
 =?UTF-8?q?=E3=82=B3=E3=83=BC=E3=83=89=E3=81=AE=E5=89=8D=E5=BE=8C=E3=81=AE?=
 =?UTF-8?q?=E5=8D=8A=E8=A7=92=E3=82=B9=E3=83=9A=E3=83=BC=E3=82=B9=E3=82=92?=
 =?UTF-8?q?=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/1-trial-session/01-get-started/index.mdx |  10 +-
 docs/1-trial-session/02-html/index.mdx        |  36 +++---
 docs/1-trial-session/03-javascript/index.mdx  |  18 +--
 docs/1-trial-session/04-expressions/index.mdx |  32 ++---
 docs/1-trial-session/05-variables/index.mdx   |  26 ++--
 docs/1-trial-session/06-boolean/index.mdx     |  50 ++++----
 .../1-trial-session/07-if-statement/index.mdx |  18 +--
 docs/1-trial-session/08-functions/index.mdx   |  30 ++---
 docs/1-trial-session/09-loop/index.mdx        |  30 ++---
 docs/1-trial-session/10-array/index.mdx       |  34 ++---
 docs/1-trial-session/11-object/index.mdx      |   6 +-
 docs/1-trial-session/12-css/index.mdx         |  70 +++++-----
 docs/1-trial-session/13-dom/index.mdx         |  32 ++---
 docs/1-trial-session/14-events/index.mdx      |  22 ++--
 docs/1-trial-session/15-project/index.mdx     |  22 ++--
 docs/2-browser-apps/01-inspector/index.mdx    |  22 ++--
 docs/2-browser-apps/02-reference/index.mdx    |  14 +-
 docs/2-browser-apps/03-class/index.mdx        |  70 +++++-----
 .../04-anonymous-function/index.mdx           |  26 ++--
 .../05-css-arrangement/index.mdx              |  68 +++++-----
 docs/2-browser-apps/06-project/index.mdx      |  22 ++--
 docs/3-web-servers/01-wsl-setup/index.mdx     |  22 ++--
 .../3-web-servers/02-linux-commands/index.mdx |  28 ++--
 docs/3-web-servers/03-node-js/index.mdx       |  18 +--
 docs/3-web-servers/04-module/index.mdx        |  40 +++---
 docs/3-web-servers/05-server/index.mdx        | 120 +++++++++---------
 docs/3-web-servers/06-form/index.mdx          |  32 ++---
 docs/3-web-servers/07-get-post/index.mdx      |  24 ++--
 docs/3-web-servers/08-database/index.mdx      |  64 +++++-----
 docs/3-web-servers/09-cookie/index.mdx        |  12 +-
 .../10-git-github-init/index.mdx              |  24 ++--
 docs/3-web-servers/11-git/index.mdx           |  60 ++++-----
 docs/3-web-servers/12-github/index.mdx        |  56 ++++----
 .../13-deploy-on-render/index.mdx             |  22 ++--
 docs/4-advanced/01-fetch-api/index.mdx        |  34 ++---
 docs/4-advanced/02-bundler/index.mdx          |  30 ++---
 docs/4-advanced/03-typescript/index.mdx       |  64 +++++-----
 docs/4-advanced/04-react/index.mdx            | 116 ++++++++---------
 src/components/Term/definitions.js            |   4 +-
 src/components/Term/type-map.js               |   4 +-
 40 files changed, 716 insertions(+), 716 deletions(-)

diff --git a/docs/1-trial-session/01-get-started/index.mdx b/docs/1-trial-session/01-get-started/index.mdx
index e2d70e0d1..1b40615c7 100644
--- a/docs/1-trial-session/01-get-started/index.mdx
+++ b/docs/1-trial-session/01-get-started/index.mdx
@@ -43,9 +43,9 @@ Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)から
 
 ## プロジェクトを格納するフォルダを作成する
 
-これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中に `projects` という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の場所については次の動画をご確認ください。
+これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中に`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の場所については次の動画をご確認ください。
 
-次の例では、`hello-world` の名前でプロジェクト用のフォルダを作成しています。
+次の例では、`hello-world`の名前でプロジェクト用のフォルダを作成しています。
 
 <Tabs groupId="os">
   <TabItem value="mac" label="macOS">
@@ -58,13 +58,13 @@ Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)から
 
 :::info
 
-これから作成するプログラムは、さきほど作成したホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中の `projects` フォルダの中に保存するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、Visual Studio Codeなどの開発ツールが期待通りに動作しなくなってしまうことがあるからです。
+これから作成するプログラムは、さきほど作成したホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中の`projects`フォルダの中に保存するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、Visual Studio Codeなどの開発ツールが期待通りに動作しなくなってしまうことがあるからです。
 
 :::
 
 ## Visual Studio Codeでプロジェクトフォルダを開く
 
-`File` メニューから `Open Folder...` をクリックして、先ほど作成したフォルダをVS Codeで開きます。
+`File`メニューから`Open Folder...`をクリックして、先ほど作成したフォルダをVS Codeで開きます。
 
 <Tabs groupId="os">
   <TabItem value="mac" label="macOS">
@@ -77,6 +77,6 @@ Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)から
 
 :::info
 
-最初にフォルダを開いたとき、`Do you trust the authors of the files in this folder?` と聞かれるのは、インターネットからダウンロードした悪意のあるフォルダをVS Codeで開いたとき、VS Codeによって勝手に実行されてしまうのを防ぐためです。自分で作成したフォルダの場合は問題ありません。
+最初にフォルダを開いたとき、`Do you trust the authors of the files in this folder?`と聞かれるのは、インターネットからダウンロードした悪意のあるフォルダをVS Codeで開いたとき、VS Codeによって勝手に実行されてしまうのを防ぐためです。自分で作成したフォルダの場合は問題ありません。
 
 :::
diff --git a/docs/1-trial-session/02-html/index.mdx b/docs/1-trial-session/02-html/index.mdx
index 706fa7a3e..c14808a99 100644
--- a/docs/1-trial-session/02-html/index.mdx
+++ b/docs/1-trial-session/02-html/index.mdx
@@ -13,7 +13,7 @@ Web開発に必ず用いられる言語があります。<Term>**HTML**</Term>
 
 ## <Term>HTML</Term>を書き始める
 
-VS Codeの画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html` と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー (<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) ) を用いてください。
+VS Codeの画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html`と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー (<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) ) を用いてください。
 
 ```html title="index.html"
 <!doctype html>
@@ -32,15 +32,15 @@ VS Codeの画面左端には、ファイル一覧が表示されています。
 
 ## ブラウザで<Term>HTML</Term>ファイルを開く
 
-前頁で作成したフォルダを開き、`index.html` が作成されていることを確認しましょう。このファイルをダブルクリックして開きます。`Hello World!` (`World` の部分だけ太字) が表示されましたか？
+前頁で作成したフォルダを開き、`index.html`が作成されていることを確認しましょう。このファイルをダブルクリックして開きます。`Hello World!` (`World`の部分だけ太字) が表示されましたか？
 
 <video src={openInBrowserVideo} controls />
 
 :::info[拡張子]
 
-VS Code上で作成したファイルは `index.html` でした。しかしながら、Windowsでフォルダの中身を見ると `index` しか表示されません (macOSの場合は正しく表示されます)。なぜでしょうか？
+VS Code上で作成したファイルは`index.html`でした。しかしながら、Windowsでフォルダの中身を見ると`index`しか表示されません (macOSの場合は正しく表示されます)。なぜでしょうか？
 
-ファイル名の `.` (ピリオド) 以降の部分は<Term>**拡張子**</Term>と呼ばれ、ファイルの種類を識別するために用いられることが多いです。先ほど `index.html` という名前のファイルを作成したのは、<Term>HTML</Term>ファイルであることを明示するためです。
+ファイル名の`.` (ピリオド) 以降の部分は<Term>**拡張子**</Term>と呼ばれ、ファイルの種類を識別するために用いられることが多いです。先ほど`index.html`という名前のファイルを作成したのは、<Term>HTML</Term>ファイルであることを明示するためです。
 
 実はWindowsでは、拡張子は標準で表示されません。下の動画を参考に、拡張子を表示する設定に変更しておきましょう。
 
@@ -52,15 +52,15 @@ VS Code上で作成したファイルは `index.html` でした。しかしな
 
 それでは、先ほどのファイルの中身を見ていきましょう。
 
-`<strong>World</strong>` の部分に注目してください。
+`<strong>World</strong>`の部分に注目してください。
 
-<Term>HTML</Term>ファイルは、文書に意味を持たせるために、<Term>**タグ**</Term>と呼ばれる構造を持つことができます。<Term>タグ</Term>は、`<tag>` のような、`<` と `>` で囲まれた英数字のまとまりです。
+<Term>HTML</Term>ファイルは、文書に意味を持たせるために、<Term>**タグ**</Term>と呼ばれる構造を持つことができます。<Term>タグ</Term>は、`<tag>`のような、`<`と`>`で囲まれた英数字のまとまりです。
 
 {/* prettier-ignore */}
-<Term>タグ</Term>は、`<tag>内容</tag>` のように、<Term>タグ</Term>名の先頭にスラッシュを付けるか否かの区別により<Term>**開始タグ**</Term>と<Term>**終了タグ**</Term>に分かれ、内部にテキストや別のタグを挟み込むことができます。
+<Term>タグ</Term>は、`<tag>内容</tag>`のように、<Term>タグ</Term>名の先頭にスラッシュを付けるか否かの区別により<Term>**開始タグ**</Term>と<Term>**終了タグ**</Term>に分かれ、内部にテキストや別のタグを挟み込むことができます。
 <Term>開始タグ</Term>から<Term>終了タグ</Term>までのまとまりを<Term>**要素**</Term>といいます。
 
-`body` 要素の中身を書き換え、次のようにしてみましょう。
+`body`要素の中身を書き換え、次のようにしてみましょう。
 
 {/* prettier-ignore */}
 ```html title="index.html"
@@ -92,9 +92,9 @@ VS Code上で作成したファイルは `index.html` でした。しかしな
 
 <video src={reloadBrowserVideo} muted controls />
 
-`<a href="https://www.google.com/">～</a>` は **`a` <Term>要素</Term>** です。<Term>開始タグ</Term>の中に `href="https://www.google.com/"` という部分があります。これが<Term>**属性**</Term>です。<Term>属性</Term>は、<Term>開始タグ</Term> の中に `属性名="値"` のように記述され、<Term>要素</Term>の特徴を表します。`a` <Term>要素</Term>の **`href` <Term>属性</Term>** は、ハイパーリンクのリンク先を表す<Term>属性</Term>です。
+`<a href="https://www.google.com/">～</a>`は **`a`<Term>要素</Term>** です。<Term>開始タグ</Term>の中に`href="https://www.google.com/"`という部分があります。これが<Term>**属性**</Term>です。<Term>属性</Term>は、<Term>開始タグ</Term> の中に`属性名="値"`のように記述され、<Term>要素</Term>の特徴を表します。`a`<Term>要素</Term>の **`href`<Term>属性</Term>** は、ハイパーリンクのリンク先を表す<Term>属性</Term>です。
 
-これにより、ハイパーリンクが設定されます。この例では `a` <Term>要素</Term>の中に `strong` <Term>要素</Term>が含まれています。このように、HTMLタグは<Term type="htmlNest">**ネスト**</Term>させることにより、効果を重ね掛けすることができます。
+これにより、ハイパーリンクが設定されます。この例では`a`<Term>要素</Term>の中に`strong`<Term>要素</Term>が含まれています。このように、HTMLタグは<Term type="htmlNest">**ネスト**</Term>させることにより、効果を重ね掛けすることができます。
 
 ![ネストされた要素](./nested-elements.png)
 
@@ -110,15 +110,15 @@ VS Code上で作成したファイルは `index.html` でした。しかしな
 
 という、「このファイルは<Term>HTML</Term>ファイルだ！」と宣言する定型句から始まります。
 
-続けて記述されるのは `<html lang="ja">`、つまり **`html` <Term>要素</Term>** です。<Term>HTML</Term>は、この `html` <Term>要素</Term>を根とした木構造になっています。このため、`html` <Term>タグ</Term>の閉じ<Term>タグ</Term>はファイルの末尾に現れます。
+続けて記述されるのは`<html lang="ja">`、つまり **`html`<Term>要素</Term>** です。<Term>HTML</Term>は、この`html`<Term>要素</Term>を根とした木構造になっています。このため、`html`<Term>タグ</Term>の閉じ<Term>タグ</Term>はファイルの末尾に現れます。
 
-`html` <Term>要素</Term>の直属の子<Term>要素</Term>は、 **`head` <Term>要素</Term>** と **`body` <Term>要素</Term>** の二つだけです。このうち、後者 (`body` <Term>要素</Term>) が実際にブラウザの表示領域上に表示されることになります。
+`html`<Term>要素</Term>の直属の子<Term>要素</Term>は、 **`head`<Term>要素</Term>** と **`body`<Term>要素</Term>** の二つだけです。このうち、後者 (`body`<Term>要素</Term>) が実際にブラウザの表示領域上に表示されることになります。
 
 ![HTMLの構造](./html-structure.drawio.svg)
 
 :::info
 
-ブラウザの画面内に表示される情報を表すのは `body` <Term>要素</Term>中だけなので、<Term>HTML</Term>ファイルの編集は通常 `body` <Term>要素</Term>内部が中心となります。このドキュメントでも、これ以降掲載する<Term>HTML</Term>のサンプルコードは `body` <Term>要素</Term>内部のみを記述することとします。
+ブラウザの画面内に表示される情報を表すのは `body`<Term>要素</Term>中だけなので、<Term>HTML</Term>ファイルの編集は通常 `body`<Term>要素</Term>内部が中心となります。このドキュメントでも、これ以降掲載する<Term>HTML</Term>のサンプルコードは `body`<Term>要素</Term>内部のみを記述することとします。
 
 :::
 
@@ -132,8 +132,8 @@ VS Code上で作成したファイルは `index.html` でした。しかしな
 
 :::info[ヒント]
 
-- 「遠足の持ち物」という見出しがあります。`h1` タグについて調べてみてください。
-- 箇条書きを表現するには、単に先頭に「・」と書くのではなく箇条書きを表すタグを用います。`ul` タグと `li` タグについて調べてみてください。
+- 「遠足の持ち物」という見出しがあります。`h1`タグについて調べてみてください。
+- 箇条書きを表現するには、単に先頭に「・」と書くのではなく箇条書きを表すタグを用います。`ul`タグと`li`タグについて調べてみてください。
 
 :::
 
@@ -170,9 +170,9 @@ VS Code上で作成したファイルは `index.html` でした。しかしな
 
 :::info[ヒント]
 
-- `ID` や `パスワード` といった文字が表形式に並んでいます。`table` タグで実現できます。
-- テキストボックスは `input` タグで作成できます。
-- 最後の箇条書きには `ul` タグや `li` タグを使用しています。
+- `ID`や`パスワード`といった文字が表形式に並んでいます。`table`タグで実現できます。
+- テキストボックスは`input`タグで作成できます。
+- 最後の箇条書きには`ul`タグや`li`タグを使用しています。
 
 :::
 
diff --git a/docs/1-trial-session/03-javascript/index.mdx b/docs/1-trial-session/03-javascript/index.mdx
index e05944e49..d7d40737d 100644
--- a/docs/1-trial-session/03-javascript/index.mdx
+++ b/docs/1-trial-session/03-javascript/index.mdx
@@ -13,9 +13,9 @@ import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4";
 
 ## <Term>JavaScript</Term>でHello World!
 
-プログラミングの世界では、まず画面に `Hello World!` と表示させることが慣例になっています。<Term>JavaScript</Term>を用いて画面に `Hello World!` を表示してみましょう。
+プログラミングの世界では、まず画面に`Hello World!`と表示させることが慣例になっています。<Term>JavaScript</Term>を用いて画面に`Hello World!`を表示してみましょう。
 
-まずは、`index.html` を次のように書き換えます。
+まずは、`index.html`を次のように書き換えます。
 
 ```html title="index.html"
 <!doctype html>
@@ -30,13 +30,13 @@ import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4";
 </html>
 ```
 
-続いて、`script.js` を作成し、内容として次の通りに保存します。
+続いて、`script.js`を作成し、内容として次の通りに保存します。
 
 ```javascript title="script.js"
 document.write("Hello World!");
 ```
 
-**`index.html`** をダブルクリックして開いてください。`Hello World!` と表示されましたか？開くのは、`script.js` ではなく `index.html` なので、気をつけてください。
+**`index.html`** をダブルクリックして開いてください。`Hello World!`と表示されましたか？開くのは、`script.js`ではなく`index.html`なので、気をつけてください。
 
 <video src={helloWorldByJavascriptVideo} controls />
 
@@ -48,11 +48,11 @@ document.write("Hello World!");
 <script src="./script.js"></script>
 ```
 
-まず、この記述によって、`script.js` ファイルがブラウザによって読み込まれます。この `script.js` に記述されているのが<Term>JavaScript</Term>です。
+まず、この記述によって、`script.js`ファイルがブラウザによって読み込まれます。この`script.js`に記述されているのが<Term>JavaScript</Term>です。
 
 :::info
 
-この講座の中では、`script` <Term>要素</Term>を常に **`body` <Term>要素</Term>の末尾**に記述するようにします。これは、<Term>JavaScript</Term>が読み込まれるタイミングで他のすべての<Term>HTML要素</Term>がすでに表示されていることを保証するためです。
+この講座の中では、`script`<Term>要素</Term>を常に **`body`<Term>要素</Term>の末尾** に記述するようにします。これは、<Term>JavaScript</Term>が読み込まれるタイミングで他のすべての<Term>HTML要素</Term>がすでに表示されていることを保証するためです。
 
 :::
 
@@ -61,7 +61,7 @@ document.write("Hello World!");
 {/* prettier-ignore */}
 <Term>JavaScript</Term>のプログラムで、セミコロンで区切られた部分を<Term>文</Term>と呼びます。
 <Term>JavaScript</Term>の実行環境は、プログラム中に含まれる<Term>文</Term>を上から下に向けて順番に実行していきます。
-`document.write` はブラウザの画面に出力するための命令です。
+`document.write`はブラウザの画面に出力するための命令です。
 
 ```javascript title="script.js"
 document.write("Hello World1");
@@ -71,13 +71,13 @@ document.write("Hello World3");
 
 :::tip
 
-改行が表示されず困っていますか？`document.write` で出力したテキストは、HTMLとして解釈されます。`br` 要素や `p` 要素を使いましょう。
+改行が表示されず困っていますか？`document.write`で出力したテキストは、HTMLとして解釈されます。`br`要素や`p`要素を使いましょう。
 
 :::
 
 ## コメント
 
-`//` から行末までの部分や、`/*` から `*/` で囲まれた部分は**コメント**とみなされ、プログラムの実行に影響を与えません。この講座内でもプログラムの意味を説明するのに利用していきます。
+`//`から行末までの部分や、`/*`から`*/`で囲まれた部分は**コメント**とみなされ、プログラムの実行に影響を与えません。この講座内でもプログラムの意味を説明するのに利用していきます。
 
 ```javascript title="script.js"
 // この部分はコメントです
diff --git a/docs/1-trial-session/04-expressions/index.mdx b/docs/1-trial-session/04-expressions/index.mdx
index b7e11c0ba..4a1932f99 100644
--- a/docs/1-trial-session/04-expressions/index.mdx
+++ b/docs/1-trial-session/04-expressions/index.mdx
@@ -4,13 +4,13 @@ title: 値と式と演算子
 
 ## <Term>値</Term>
 
-次のコードを実行すると、`Hello World` が画面に表示されました。
+次のコードを実行すると、`Hello World`が画面に表示されました。
 
 ```javascript title="script.js"
 document.write("Hello World");
 ```
 
-`"Hello World"` のように `"`（ダブルクォーテーション）で囲まれた<Term>**値**</Term>を、<Term>**文字列**</Term>と呼びます。
+`"Hello World"`のように`"`（ダブルクォーテーション）で囲まれた<Term>**値**</Term>を、<Term>**文字列**</Term>と呼びます。
 
 {/* prettier-ignore */}
 <Term>文字列</Term>は<Term>値</Term>の一種です。
@@ -24,7 +24,7 @@ document.write(3);
 
 {/* prettier-ignore */}
 <Term>**演算子**</Term>を用いると、<Term>値</Term>を用いて計算をすることができます。
-例えば `+`（加算<Term>演算子</Term>）で、足し算の計算を行うことができます。
+例えば`+`（加算<Term>演算子</Term>）で、足し算の計算を行うことができます。
 
 ```javascript title="script.js"
 document.write(3 + 4);
@@ -39,24 +39,24 @@ document.write(3 + 4);
 document.write(3 + 4 * 5);
 ```
 
-`*`（乗算<Term>演算子</Term>）は `+` より<Term type="javascriptOperatorPriority">優先順位</Term>が高く設定されているため、上記のコードの実行結果は `23` となります。
+`*`（乗算<Term>演算子</Term>）は`+`より<Term type="javascriptOperatorPriority">優先順位</Term>が高く設定されているため、上記のコードの実行結果は`23`となります。
 
-このコードにおいて、`3 + 4 * 5` や、`4 * 5`、`4` を<Term>**式**</Term>と呼びます。また、<Term>式</Term>が計算され、その結果としての<Term>値</Term>が確定することを式が<Term>**評価**</Term>されるといいます。
+このコードにおいて、`3 + 4 * 5`や、`4 * 5`、`4`を<Term>**式**</Term>と呼びます。また、<Term>式</Term>が計算され、その結果としての<Term>値</Term>が確定することを式が<Term>**評価**</Term>されるといいます。
 
-`3 + 4 * 5` の<Term>評価</Term>は、先に `4 * 5` が<Term>評価</Term>されて `20` になり、次に `3 + 20` が<Term>評価</Term>されることにより、`23` という<Term>値</Term>となると考えることができます。
+`3 + 4 * 5`の<Term>評価</Term>は、先に`4 * 5`が<Term>評価</Term>されて`20`になり、次に`3 + 20`が<Term>評価</Term>されることにより、`23`という<Term>値</Term>となると考えることができます。
 
 ## いろいろな<Term>演算子</Term>
 
 {/* prettier-ignore */}
 <Term>演算子</Term>が適用できるのは、何も<Term>数値</Term>だけではありません。
 <Term>文字列</Term>に適用できる<Term>演算子</Term>もあります。 
-先ほどの `+`（加算<Term>演算子</Term>）は、<Term>文字列</Term>同士で使用された場合は、<Term>文字列</Term>結合<Term>演算子</Term>となります。
+先ほどの`+`（加算<Term>演算子</Term>）は、<Term>文字列</Term>同士で使用された場合は、<Term>文字列</Term>結合<Term>演算子</Term>となります。
 
 ```javascript title="script.js"
 document.write("Hello" + "World");
 ```
 
-画面には `HelloWorld` と表示されるはずです。
+画面には`HelloWorld`と表示されるはずです。
 
 もう少し複雑な例を見てみましょう。
 
@@ -67,15 +67,15 @@ document.write("Hello" + 1 + 2);
 
 このような場合、<Term>演算子</Term>の**結合規則**を考える必要があります。
 
-`+` の結合規則は左から右なので、`3 + 4 + "Hello"` は `(3 + 4) + "Hello"`、`"Hello" + 1 + 2` は `("Hello" + 1) + 2` と解釈されることになります。
+`+`の結合規則は左から右なので、`3 + 4 + "Hello"`は`(3 + 4) + "Hello"`、`"Hello" + 1 + 2`は`("Hello" + 1) + 2`と解釈されることになります。
 
-`+` は、両辺が<Term>数値</Term>の場合のみ加算<Term>演算子</Term>として振る舞い、片方が<Term>数値</Term>で片方が<Term>文字列</Term>の場合は<Term>数値</Term>を<Term>文字列</Term>に変換してから<Term>文字列</Term>結合<Term>演算子</Term>として機能します。このため、最終的な<Term>式</Term>全体の<Term>評価</Term>結果は前者が `"7Hello"`、後者が `"Hello12"` となるのです。
+`+`は、両辺が<Term>数値</Term>の場合のみ加算<Term>演算子</Term>として振る舞い、片方が<Term>数値</Term>で片方が<Term>文字列</Term>の場合は<Term>数値</Term>を<Term>文字列</Term>に変換してから<Term>文字列</Term>結合<Term>演算子</Term>として機能します。このため、最終的な<Term>式</Term>全体の<Term>評価</Term>結果は前者が`"7Hello"`、後者が`"Hello12"`となるのです。
 
 ### 代表的な演算子
 
-| 演算子 | 意味   | 例                                    |
-| ------ | ------ | ------------------------------------- |
-| `+`    | 足す   | `1 + 1` は `2`、`"A" + "B"` は `"AB"` |
-| `-`    | 引く   | `2 - 1` は `1`                        |
-| `*`    | 掛ける | `2 * 2` は `4`                        |
-| `/`    | 割る   | `4 / 2` は `2`                        |
+| 演算子 | 意味   | 例                                |
+| ------ | ------ | --------------------------------- |
+| `+`    | 足す   | `1 + 1`は`2`、`"A" + "B"`は`"AB"` |
+| `-`    | 引く   | `2 - 1`は`1`                      |
+| `*`    | 掛ける | `2 * 2`は`4`                      |
+| `/`    | 割る   | `4 / 2`は`2`                      |
diff --git a/docs/1-trial-session/05-variables/index.mdx b/docs/1-trial-session/05-variables/index.mdx
index 092134f68..346c6ec95 100644
--- a/docs/1-trial-session/05-variables/index.mdx
+++ b/docs/1-trial-session/05-variables/index.mdx
@@ -18,13 +18,13 @@ let myName = "John Doe";
 document.write(myName);
 ```
 
-`let` は、<Term>変数</Term>を<Term>宣言</Term>するためのキーワードです。1行目では、`myName` という名前の<Term>変数</Term>を<Term>宣言</Term>し、そこに文字列 `"John Doe"` を<Term>**代入**</Term>しています。`=` は<Term>代入</Term>を表し、左側に指定した<Term>変数</Term>に対し、右側に指定された<Term>値</Term>を<Term>代入</Term>します。
+`let`は、<Term>変数</Term>を<Term>宣言</Term>するためのキーワードです。1行目では、`myName`という名前の<Term>変数</Term>を<Term>宣言</Term>し、そこに文字列`"John Doe"`を<Term>**代入**</Term>しています。`=`は<Term>代入</Term>を表し、左側に指定した<Term>変数</Term>に対し、右側に指定された<Term>値</Term>を<Term>代入</Term>します。
 
-2行目では、<Term>変数</Term> `myName` が<Term>評価</Term>され、<Term>代入</Term>されていた<Term>文字列</Term><Term>値</Term> `"John Doe"` が画面に表示されます。
+2行目では、<Term>変数</Term>`myName`が<Term>評価</Term>され、<Term>代入</Term>されていた<Term>文字列</Term><Term>値</Term>`"John Doe"`が画面に表示されます。
 
 {/* prettier-ignore */}
-<Term>変数</Term>を<Term>宣言</Term>するキーワードには、`let` 以外にも `const` があります。
-記法自体は `let` と同様ですが、少し違いがあります。
+<Term>変数</Term>を<Term>宣言</Term>するキーワードには、`let`以外にも`const`があります。
+記法自体は`let`と同様ですが、少し違いがあります。
 違いについては、次の節で説明します。
 
 ```javascript title="script.js"
@@ -32,7 +32,7 @@ const myName = "John Doe";
 document.write(myName);
 ```
 
-ここまでの例では、`my name` というフレーズを、`myName` のように記述しています。
+ここまでの例では、`my name`というフレーズを、`myName`のように記述しています。
 
 このように、複数の単語にわたるフレーズを、2語目以降の先頭の文字を大文字にして結合する命名規則を、<Term>**キャメルケース**</Term>と呼びます。
 
@@ -63,13 +63,13 @@ const totalPrice = itemPrice * itemCount;
 document.write(totalPrice);
 ```
 
-前者と後者のコードは、同じ計算を行っています。しかし、前者のコードでは `a` や `b`、`c` という変数名が何を表しているのかがわかりません。一方、後者のコードでは、`itemPrice` や `itemCount`、`totalPrice` という変数名から、どのような計算を行っているのかがすぐに分かります。共同で開発を行うときや、後からコードを読み返すときに、変数名が適切に付けられていると、コードの理解が容易になります。
+前者と後者のコードは、同じ計算を行っています。しかし、前者のコードでは`a`や`b`、`c`という変数名が何を表しているのかがわかりません。一方、後者のコードでは、`itemPrice`や`itemCount`、`totalPrice`という変数名から、どのような計算を行っているのかがすぐに分かります。共同で開発を行うときや、後からコードを読み返すときに、変数名が適切に付けられていると、コードの理解が容易になります。
 
 :::
 
 ## <Term>変数</Term>への再<Term>代入</Term>
 
-`let` と `const` の大きな違いは、再<Term>代入</Term>が可能かどうかです。`let` で<Term>宣言</Term>された<Term>変数</Term>には再<Term>代入</Term>が可能ですが、`const` で<Term>宣言</Term>された<Term>変数</Term>にはできません。次の例を見てみましょう。
+`let`と`const`の大きな違いは、再<Term>代入</Term>が可能かどうかです。`let`で<Term>宣言</Term>された<Term>変数</Term>には再<Term>代入</Term>が可能ですが、`const`で<Term>宣言</Term>された<Term>変数</Term>にはできません。次の例を見てみましょう。
 
 ```javascript title="script.js"
 let mysteriousNumber = 0;
@@ -80,9 +80,9 @@ document.write(mysteriousNumber); // 2
 
 {/* prettier-ignore */}
 <Term>変数</Term>には、最後に<Term>代入</Term>された<Term>値</Term>のみを保持する性質があります。
-そのため、<Term>変数</Term> `mysteriousNumber` は3回<Term>代入</Term>が行われていますが、最後に<Term>代入</Term>された `2` が表示されます。
+そのため、<Term>変数</Term>`mysteriousNumber`は3回<Term>代入</Term>が行われていますが、最後に<Term>代入</Term>された`2`が表示されます。
 
-一方、`const` で<Term>宣言</Term>された<Term>変数</Term>には、再<Term>代入</Term>ができません。そのため、上記のコードの `let` を `const` に置き換えることはできません。
+一方、`const`で<Term>宣言</Term>された<Term>変数</Term>には、再<Term>代入</Term>ができません。そのため、上記のコードの`let`を`const`に置き換えることはできません。
 
 さらに、再<Term>代入</Term>について詳しく見てみましょう。それでは、以下の場合はどうでしょうか。
 
@@ -96,15 +96,15 @@ document.write(price);
 
 {/* prettier-ignore */}
 <Term>代入</Term><Term>演算子</Term>は、まず右辺の<Term>式</Term>を<Term>評価</Term>します。
-これにより、右辺は `100 / 2` となります。
-よって、最終的に<Term>変数</Term> `price` の<Term>値</Term>は `50` となり、これは `price` を半分にする操作に対応します。
+これにより、右辺は`100 / 2`となります。
+よって、最終的に<Term>変数</Term>`price`の<Term>値</Term>は`50`となり、これは`price`を半分にする操作に対応します。
 
 ![変数の再代入](./reassignment-evaluation.png)
 
 ## 確認問題
 
-`counter` という名前の変数を作成し初期値を `0` としてください。
-その後、`counter` に `1` を加え、その結果を表示してください。
+`counter`という名前の変数を作成し初期値を`0`としてください。
+その後、`counter`に`1`を加え、その結果を表示してください。
 
 <Answer title="カウンター">
 
diff --git a/docs/1-trial-session/06-boolean/index.mdx b/docs/1-trial-session/06-boolean/index.mdx
index 838b61d32..b91050f61 100644
--- a/docs/1-trial-session/06-boolean/index.mdx
+++ b/docs/1-trial-session/06-boolean/index.mdx
@@ -9,7 +9,7 @@ title: 論理値と論理演算子
 JavaScriptではこの他に、<Term>**論理値**</Term>と呼ばれる、「正しいか、正しくないか」を表すための<Term>値</Term>が存在します。
 
 {/* prettier-ignore */}
-<Term>論理値</Term>は、`true`（真）または `false`（偽）の2つだけです。ダブルクォーテーション `"` は必要ありません。通常の<Term>値</Term>ですので、<Term>変数</Term>に<Term>代入</Term>したり、計算に使ったりすることができます。
+<Term>論理値</Term>は、`true`（真）または`false`（偽）の2つだけです。ダブルクォーテーション`"`は必要ありません。通常の<Term>値</Term>ですので、<Term>変数</Term>に<Term>代入</Term>したり、計算に使ったりすることができます。
 
 ![値の種類・論理値付き](./value-types-with-boolean.drawio.svg)
 
@@ -25,17 +25,17 @@ document.write(true && false); // false
 document.write(true || false); // true
 ```
 
-各<Term>演算子</Term>の意味は次の通りです。`!` のみが作用する対象を1つしかとらないことに注意してください。
+各<Term>演算子</Term>の意味は次の通りです。`!`のみが作用する対象を1つしかとらないことに注意してください。
 
-| 演算子 | 意味       | 詳細                                                              |
-| ------ | ---------- | ----------------------------------------------------------------- |
-| `!`    | ～ではない | `true` ならば `false`、`false` ならば `true`                      |
-| `&&`   | かつ       | 両方 `true` ならば `true`、どちらか1つでも `false` ならば `false` |
-| `\|\|` | または     | 両方 `false` ならば `false`、どちらか1つでも `true` ならば `true` |
+| 演算子 | 意味       | 詳細                                                        |
+| ------ | ---------- | ----------------------------------------------------------- |
+| `!`    | ～ではない | `true`ならば`false`、`false`ならば`true`                    |
+| `&&`   | かつ       | 両方`true`ならば`true`、どちらか1つでも`false`ならば`false` |
+| `\|\|` | または     | 両方`false`ならば`false`、どちらか1つでも`true`ならば`true` |
 
 具体的な使用例を考えてみましょう。
 
-モンスターが大きいかどうかを表す<Term>変数</Term> `isMonsterBig` と、ハンターが強いかどうかを表す<Term>変数</Term> `isHunterStrong` が用意されています。このとき、ハンターがモンスターと戦うべきかどうかを表す<Term>変数</Term> `shouldFight` を作りたいとします。ハンターは自分が強いときかモンスターが小さいときに戦うべきだとしたら、<Term>変数</Term> `shouldFight` は次のようになるでしょう。
+モンスターが大きいかどうかを表す<Term>変数</Term>`isMonsterBig`と、ハンターが強いかどうかを表す<Term>変数</Term>`isHunterStrong`が用意されています。このとき、ハンターがモンスターと戦うべきかどうかを表す<Term>変数</Term>`shouldFight`を作りたいとします。ハンターは自分が強いときかモンスターが小さいときに戦うべきだとしたら、<Term>変数</Term>`shouldFight`は次のようになるでしょう。
 
 ```javascript
 const isMonsterBig = true;
@@ -55,23 +55,23 @@ document.write(age === 15); // false
 document.write(age === 14); // true
 ```
 
-`===` は左辺と右辺が等しいかどうか判定する比較<Term>演算子</Term>です。
-2行目では `age` と15とは等しくないので `false` が、3行目では `age` と14とは等しいので `true` が表示されます。
+`===`は左辺と右辺が等しいかどうか判定する比較<Term>演算子</Term>です。
+2行目では`age`と15とは等しくないので`false`が、3行目では`age`と14とは等しいので`true`が表示されます。
 
 各<Term>演算子</Term>の意味は次の通りです。
 
-| 演算子 | 意味       | 詳細                            |
-| ------ | ---------- | ------------------------------- |
-| `===`  | 等しい     | 左辺と右辺が等しければ `true`   |
-| `!==`  | 等しくない | 左辺と右辺が等しければ `false`  |
-| `<`    | 小なり     | 左辺が右辺より小さければ `true` |
-| `<=`   | 以下       | 左辺が右辺以下ならば `true`     |
-| `>`    | 大なり     | 左辺が右辺より大きければ `true` |
-| `>=`   | 以上       | 左辺が右辺以上ならば `true`     |
+| 演算子 | 意味       | 詳細                           |
+| ------ | ---------- | ------------------------------ |
+| `===`  | 等しい     | 左辺と右辺が等しければ`true`   |
+| `!==`  | 等しくない | 左辺と右辺が等しければ`false`  |
+| `<`    | 小なり     | 左辺が右辺より小さければ`true` |
+| `<=`   | 以下       | 左辺が右辺以下ならば`true`     |
+| `>`    | 大なり     | 左辺が右辺より大きければ`true` |
+| `>=`   | 以上       | 左辺が右辺以上ならば`true`     |
 
 さらに具体的な使用例を考えてみましょう。
 
-ジェットコースターに乗れるかどうかを表す変数 `canRideRollerCoasters` を考えます。年齢を表す変数 `age` と身長を表す変数 `height` が与えられたとして、10歳以上かつ身長が120cm以上でないと乗れないとしたら以下のようになるでしょう。
+ジェットコースターに乗れるかどうかを表す変数`canRideRollerCoasters`を考えます。年齢を表す変数`age`と身長を表す変数`height`が与えられたとして、10歳以上かつ身長が120cm以上でないと乗れないとしたら以下のようになるでしょう。
 
 ```javascript
 const age = 15;
@@ -79,7 +79,7 @@ const height = 155;
 const canRideRollerCoasters = age >= 10 && height >= 120; // true
 ```
 
-`&&` や `||` よりも比較<Term>演算子</Term>の方が<Term type="javascriptOperatorPriority">優先順位</Term>が高いため、複数の条件を「かつ」「または」などで組み合わせることは容易です。
+`&&`や`||`よりも比較<Term>演算子</Term>の方が<Term type="javascriptOperatorPriority">優先順位</Term>が高いため、複数の条件を「かつ」「または」などで組み合わせることは容易です。
 
 :::info
 
@@ -96,18 +96,18 @@ document.write(takaoHeight = everestHeight);
 
 <ViewSource url={import.meta.url} path="_samples/weird-comparison" />
 
-- JavaScript で、数値と論理値に比較<Term>演算子</Term>を適用すると、`true` は `1` として、`false` は `0` として比較されます。
-- `=` は代入演算子です。代入<Term>演算子</Term>の<Term>式</Term>が<Term>評価</Term>されると、右辺の<Term>値</Term>になります。
+- JavaScript で、数値と論理値に比較<Term>演算子</Term>を適用すると、`true`は`1`として、`false`は`0`として比較されます。
+- `=`は代入演算子です。代入<Term>演算子</Term>の<Term>式</Term>が<Term>評価</Term>されると、右辺の<Term>値</Term>になります。
 
 :::
 
 ## 演習
 
 クイズ番組で田中さんと佐藤さんが戦っています。
-田中さんの点数が `tanakaScore` で、佐藤さんの点数が `satoScore` で用意されています。
+田中さんの点数が`tanakaScore`で、佐藤さんの点数が`satoScore`で用意されています。
 
 点数が100点以上で、かつ相手より20点以上高い点数の場合に勝ちとします。
-田中さんが勝ちかどうかを表す変数 `isTanakaWinner` を作成してください。
+田中さんが勝ちかどうかを表す変数`isTanakaWinner`を作成してください。
 
 ```javascript
 const tanakaScore = 120;
@@ -118,7 +118,7 @@ document.write(isTanakaWinner); // true
 
 :::tip
 
-`+`, `-`, `*`, `/` などの算術演算子は、比較演算子よりも<Term type="javascriptOperatorPriority">優先順位</Term>が高いです。
+`+`, `-`, `*`, `/`などの算術演算子は、比較演算子よりも<Term type="javascriptOperatorPriority">優先順位</Term>が高いです。
 
 ```javascript
 const isBig = 10 + 5 > 10 - 3; // 15 > 7 なので true
diff --git a/docs/1-trial-session/07-if-statement/index.mdx b/docs/1-trial-session/07-if-statement/index.mdx
index 7fa1ef38c..1fe248498 100644
--- a/docs/1-trial-session/07-if-statement/index.mdx
+++ b/docs/1-trial-session/07-if-statement/index.mdx
@@ -15,9 +15,9 @@ if (age < 20) {
 }
 ```
 
-このプログラムは、`未成年者の場合は法定代理人の同意が必要です。` と表示しますが、1行目を `const age = 20;` に変更すると何も表示されなくなります。
+このプログラムは、`未成年者の場合は法定代理人の同意が必要です。`と表示しますが、1行目を`const age = 20;`に変更すると何も表示されなくなります。
 
-2行目の `if (age < 20) {` 部分がポイントです。ここに差し掛かると、括弧内の<Term>式</Term> `age < 20` が<Term>評価</Term>され、`true` になります。このため、直後の波括弧内の処理が実行されます。
+2行目の`if (age < 20) {`部分がポイントです。ここに差し掛かると、括弧内の<Term>式</Term>`age < 20`が<Term>評価</Term>され、`true`になります。このため、直後の波括弧内の処理が実行されます。
 
 if文の基本構造は
 
@@ -27,7 +27,7 @@ if (式) {
 }
 ```
 
-で、<Term>式</Term>の<Term>評価</Term>結果が `true` であれば処理が実行されます。
+で、<Term>式</Term>の<Term>評価</Term>結果が`true`であれば処理が実行されます。
 
 ## if～else
 
@@ -42,7 +42,7 @@ if (式) {
 ```
 
 {/* prettier-ignore */}
-<Term>式</Term>の<Term>評価</Term>結果が `true` であれば処理1が、`false` であれば処理2が実行されます。
+<Term>式</Term>の<Term>評価</Term>結果が`true`であれば処理1が、`false`であれば処理2が実行されます。
 
 ```javascript
 const age = 18;
@@ -53,7 +53,7 @@ if (age >= 20) {
 }
 ```
 
-この例では、`age >= 20` の<Term>評価</Term>が `false` となるので、`子供です` が表示されます。
+この例では、`age >= 20`の<Term>評価</Term>が`false`となるので、`子供です`が表示されます。
 
 ## if～else if～else
 
@@ -81,9 +81,9 @@ const age = 20;
 
 下を満たすプログラムを作成してください。
 
-- 18歳未満なら `選挙権はありません` と表示する
-- 18歳以上～25歳未満なら `投票に行けます` と表示する
-- 25歳以上なら `衆議院議員に立候補できます` と表示する
+- 18歳未満なら`選挙権はありません`と表示する
+- 18歳以上～25歳未満なら`投票に行けます`と表示する
+- 25歳以上なら`衆議院議員に立候補できます`と表示する
 
 <Answer title="選挙権">
 
@@ -102,6 +102,6 @@ if (age < 18) {
 
 <ViewSource url={import.meta.url} path="_samples/the-right-to-vote" />
 
-4行目の式は `age >= 18 && age < 25` ではないかと思うかもしれませんが、上のように `age < 25` としても同じ結果になります。これは、if～else if～else構文では、一つ目の条件が満たされた場合、二つ目の条件は実行されないためです。
+4行目の式は`age >= 18 && age < 25`ではないかと思うかもしれませんが、上のように`age < 25`としても同じ結果になります。これは、if～else if～else構文では、一つ目の条件が満たされた場合、二つ目の条件は実行されないためです。
 
 </Answer>
diff --git a/docs/1-trial-session/08-functions/index.mdx b/docs/1-trial-session/08-functions/index.mdx
index 8eb26ed49..b840f616a 100644
--- a/docs/1-trial-session/08-functions/index.mdx
+++ b/docs/1-trial-session/08-functions/index.mdx
@@ -19,12 +19,12 @@ greet();
 greet();
 ```
 
-上のプログラムにおいて、`function` キーワードから始まる部分は<Term>関数</Term>を定義するための<Term>制御構文</Term>です。<Term>関数</Term>定義では、 `function` キーワードに続けて<Term>関数</Term>名、かっこを記述します。この後、<Term>関数</Term>内で実行したい処理を波かっこの中に記述していきます。
+上のプログラムにおいて、`function`キーワードから始まる部分は<Term>関数</Term>を定義するための<Term>制御構文</Term>です。<Term>関数</Term>定義では、`function`キーワードに続けて<Term>関数</Term>名、かっこを記述します。この後、<Term>関数</Term>内で実行したい処理を波かっこの中に記述していきます。
 
 {/* prettier-ignore */}
 <Term>関数</Term>を定義すると、<Term>関数</Term>名に続けてかっこを記述することにより、その<Term>関数</Term>を実行できるようになります。
 
-このプログラムでは、`greet` <Term>関数</Term>が2回呼び出されているので、ブラウザに `Hello World!` が2つ表示されます。
+このプログラムでは、`greet`<Term>関数</Term>が2回呼び出されているので、ブラウザに`Hello World!`が2つ表示されます。
 
 ## <Term>**引数**</Term>
 
@@ -42,10 +42,10 @@ greet("morning", "佐藤");
 
 {/* prettier-ignore */}
 <Term>関数</Term>定義では、<Term>関数</Term>名直後のかっこ内に<Term>引数</Term>名をコンマ区切りで設定できます。
-上のプログラムで `greet` <Term>関数</Term>は、`greetingType` や `myName` という名前の<Term>引数</Term>をとります。
+上のプログラムで`greet`<Term>関数</Term>は、`greetingType`や`myName`という名前の<Term>引数</Term>をとります。
 <Term>関数</Term>定義の中では、これらは<Term>変数</Term>のように振舞います。
 
-呼び出し側では、括弧の中に<Term>関数</Term>に<Term>渡す</Term><Term>引数</Term>を指定します。このプログラムを実行すると、ブラウザに `Good morning, 佐藤!` が表示されるでしょう。
+呼び出し側では、括弧の中に<Term>関数</Term>に<Term>渡す</Term><Term>引数</Term>を指定します。このプログラムを実行すると、ブラウザに`Good morning, 佐藤!`が表示されるでしょう。
 
 ![引数](arguments.png)
 
@@ -66,9 +66,9 @@ function add(a, b) {
 document.write(add(3, 4));
 ```
 
-上の例の6行目で、<Term>式</Term> `add(3, 4)` が<Term>評価</Term>されると、`a = 3, b = 4` として `add` <Term>関数</Term>が実行されます。`add` <Term>関数</Term>の中で<Term>文</Term> `const sum = a + b;` が実行されると、<Term>式</Term> `a + b` が<Term>評価</Term>され、`7` になります。これにより、`sum` に `7` が代入されます。
-次の行 `return sum;` で `add` <Term>関数</Term>は<Term>変数</Term> `sum` を<Term>評価</Term>した結果である、`7` を<Term>返し</Term>ます。
-そして<Term>式</Term> `add(3, 4)` の<Term>評価</Term>結果が `7` となります。
+上の例の6行目で、<Term>式</Term>`add(3, 4)`が<Term>評価</Term>されると、`a = 3, b = 4`として`add`<Term>関数</Term>が実行されます。`add`<Term>関数</Term>の中で<Term>文</Term>`const sum = a + b;`が実行されると、<Term>式</Term>`a + b`が<Term>評価</Term>され、`7`になります。これにより、`sum`に`7`が代入されます。
+次の行`return sum;`で`add`<Term>関数</Term>は<Term>変数</Term>`sum`を<Term>評価</Term>した結果である、`7`を<Term>返し</Term>ます。
+そして<Term>式</Term>`add(3, 4)`の<Term>評価</Term>結果が`7`となります。
 
 <video src={returnValueVideo} controls muted />
 
@@ -92,7 +92,7 @@ function tryToDrive() {
 
 ### 確認問題
 
-引数を2つとり、その積を<Term>戻り値</Term>として<Term>返す</Term><Term>関数</Term> `multiply` を定義してください。
+引数を2つとり、その積を<Term>戻り値</Term>として<Term>返す</Term><Term>関数</Term>`multiply`を定義してください。
 
 <Answer title="2つの積">
 
@@ -130,13 +130,13 @@ greet(); // あなたは1人目のお客様です。
 greet(); // あなたは2人目のお客様です。
 ```
 
-この例における、`greet` <Term>関数</Term>は、呼び出されるたびに `guestCount` に1を加えています。
+この例における、`greet`<Term>関数</Term>は、呼び出されるたびに`guestCount`に1を加えています。
 
 :::tip[複合代入演算子]
 
 [**複合代入演算子**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E4%BB%A3%E5%85%A5%E6%BC%94%E7%AE%97%E5%AD%90) は、計算と代入を同時に行うことができる演算子です。
 
-`x += y` は、`x = x + y` という意味になります。他にも `-=` や `*=` などの演算子が定義されています。`x -= y` は `x = x - y`、`x *= y` は `x = x * y` という意味になります。
+`x += y`は、`x = x + y`という意味になります。他にも`-=`や`*=`などの演算子が定義されています。`x -= y`は`x = x - y`、`x *= y`は`x = x * y`という意味になります。
 
 ```javascript
 guestCount += 1;
@@ -183,7 +183,7 @@ increment();
 - パーツごとにテストができるので、デバッグがしやすい
 - パーツの使いまわしができる
 
-次の例は、`totalTicketCount` 枚のうち `hitTicketCount` 枚の当たりがあるくじから `drawnTicketCount` 枚を引いたときに、当たりが少なくとも1枚出る確率 `winningProbability` を、`■■■□□□□□□□` のようなグラフ形式で表示するプログラムです。
+次の例は、`totalTicketCount`枚のうち`hitTicketCount`枚の当たりがあるくじから`drawnTicketCount`枚を引いたときに、当たりが少なくとも1枚出る確率`winningProbability`を、`■■■□□□□□□□`のようなグラフ形式で表示するプログラムです。
 
 ```javascript
 const totalTicketCount = 10;
@@ -252,12 +252,12 @@ function showProbabilityAsGraph(probability) {
 ### 最大値
 
 {/* prettier-ignore */}
-<Term>引数</Term>を2つとり、そのうち大きい数を<Term>返す</Term><Term>関数</Term> `max` を定義してください。
+<Term>引数</Term>を2つとり、そのうち大きい数を<Term>返す</Term><Term>関数</Term>`max`を定義してください。
 
 :::tip
 
 {/* prettier-ignore */}
-<Term>if文</Term>を使って、`a` が大きい場合と `b` が大きい場合で処理を書き分けます。
+<Term>if文</Term>を使って、`a`が大きい場合と`b`が大きい場合で処理を書き分けます。
 
 :::
 
@@ -277,7 +277,7 @@ function max(a, b) {
 
 :::note
 
-`a > b` が `true` の場合、if文内部の `return` で関数実行が中断されるため、`else` キーワードは必ずしも必要ではありません。そのため、次のように書くこともできます。
+`a > b`が`true`の場合、if文内部の`return`で関数実行が中断されるため、`else`キーワードは必ずしも必要ではありません。そのため、次のように書くこともできます。
 
 ```javascript
 function max(a, b) {
@@ -308,7 +308,7 @@ function calculateCost(monthlyDataUsage) {
 document.write(calculateCost(3.5));
 ```
 
-`calculateCost` は、<Term>引数</Term>に月間転送量 `monthlyDataUsage` を取り、その月の携帯電話料金を<Term>戻り値</Term>として<Term>返す</Term><Term>関数</Term>です。携帯電話料金は、下のルールで決定されるとします。
+`calculateCost`は、<Term>引数</Term>に月間転送量`monthlyDataUsage`を取り、その月の携帯電話料金を<Term>戻り値</Term>として<Term>返す</Term><Term>関数</Term>です。携帯電話料金は、下のルールで決定されるとします。
 
 > - 月間転送量 < 5.0 (GB) のとき、携帯電話料金は 月間転送量 × 600 (円 / GB)
 > - 月間転送量 >= 5.0 (GB) のとき、携帯電話料金は 3000 (円)
diff --git a/docs/1-trial-session/09-loop/index.mdx b/docs/1-trial-session/09-loop/index.mdx
index fcdb85de9..17d1d267b 100644
--- a/docs/1-trial-session/09-loop/index.mdx
+++ b/docs/1-trial-session/09-loop/index.mdx
@@ -6,7 +6,7 @@ import whileLoopVideo from "./while-loop.mp4";
 
 ## while文
 
-while文を用いると、ある条件が満たされている間実行され続けるプログラムを記述することができます。次のプログラムを実行すると、画面には `01234` のように表示されます。
+while文を用いると、ある条件が満たされている間実行され続けるプログラムを記述することができます。次のプログラムを実行すると、画面には`01234`のように表示されます。
 
 ```javascript
 let i = 0;
@@ -29,7 +29,7 @@ while (条件式) {
 }
 ```
 
-`while` 文の実行に差し掛かると、まずは条件式が評価されます。この結果が `true` であれば、波括弧内の処理が実行され、`false` であれば終了します。波括弧内の処理が終わると、再び条件式が評価されます。以上の繰り返しです。
+`while`文の実行に差し掛かると、まずは条件式が評価されます。この結果が`true`であれば、波括弧内の処理が実行され、`false`であれば終了します。波括弧内の処理が終わると、再び条件式が評価されます。以上の繰り返しです。
 
 これをフローチャートの形式で表すと、次のようになります。
 
@@ -41,7 +41,7 @@ while (条件式) {
 
 :::tip
 
-`1` から `10` まで順番に増えていく変数 `i` と、合計値を保存しておく変数 `sum` を用意しましょう。
+`1`から`10`まで順番に増えていく変数`i`と、合計値を保存しておく変数`sum`を用意しましょう。
 
 :::
 
@@ -63,9 +63,9 @@ document.write(sum);
 
 ## for 文
 
-`for` 文は、`while` 文にほんの少しだけ機能を追加したものになります。
+`for`文は、`while`文にほんの少しだけ機能を追加したものになります。
 
-先ほどのプログラムは、 `for` 文によって次のように書き換えられます。
+先ほどのプログラムは、`for`文によって次のように書き換えられます。
 
 ```javascript
 for (let i = 0; i < 5; i += 1) {
@@ -74,7 +74,7 @@ for (let i = 0; i < 5; i += 1) {
 document.write("終了");
 ```
 
-`for` 文の文法は次の通りです。
+`for`文の文法は次の通りです。
 
 ```javascript
 for (初期化; 条件式; 更新式) {
@@ -82,9 +82,9 @@ for (初期化; 条件式; 更新式) {
 }
 ```
 
-`while` 文と構造が似ていますが、`条件式`のほかに`初期化`と`更新式`が加えられています。通常、繰り返しを扱うプログラムでは、`while` 文の例における変数 `i` のように、一番はじめに現在の繰り返し回数を表す変数を用意し、ループの終わりでその変数を更新します。
+`while`文と構造が似ていますが、`条件式`のほかに`初期化`と`更新式`が加えられています。通常、繰り返しを扱うプログラムでは、`while`文の例における変数`i`のように、一番はじめに現在の繰り返し回数を表す変数を用意し、ループの終わりでその変数を更新します。
 
-これらをより便利に記述できるのが `for` 文、というわけです。
+これらをより便利に記述できるのが`for`文、というわけです。
 
 ![for文の構造](./for-statement.drawio.svg)
 
@@ -108,7 +108,7 @@ document.write(sum);
 
 ## ネストされたループ
 
-`for` 文や `while` 文は、ネストして使用することができます。次のプログラムは、`(x, y) = (0, 0)` から始まって `(x, y) = (4, 4)` まで画面に表示します。
+`for`文や`while`文は、ネストして使用することができます。次のプログラムは、`(x, y) = (0, 0)`から始まって`(x, y) = (4, 4)`まで画面に表示します。
 
 ```javascript
 for (let x = 0; x < 5; x += 1) {
@@ -129,7 +129,7 @@ const string1 = "10から2を引くと" + (10 - 2) + "です。";
 const string2 = `10から2を引くと${10 - 2}です。`;
 ```
 
-通常の文字列は `"` (ダブルクォーテーション) で囲って記述するのに対し、テンプレートリテラルでは <code>`</code> (バッククォーテーション) を用います。
+通常の文字列は`"` (ダブルクォーテーション) で囲って記述するのに対し、テンプレートリテラルでは <code>`</code> (バッククォーテーション) を用います。
 
 ![バッククォーテーション](./backquote.drawio.svg)
 
@@ -141,7 +141,7 @@ const string2 = `10から2を引くと${10 - 2}です。`;
 
 ### 1~10の積
 
-`1` から `10` までの数の積を求めて画面に表示する、 `for` 文を含むコードを書いてみましょう。
+`1`から`10`までの数の積を求めて画面に表示する、`for`文を含むコードを書いてみましょう。
 
 <Answer title="10の階乗">
 
@@ -175,21 +175,21 @@ document.write(product);
 
 ### 素数判定
 
-ある整数の変数 `n` が与えられたとき、その値が素数であるかどうか判定するプログラムを作成してください。
+ある整数の変数`n`が与えられたとき、その値が素数であるかどうか判定するプログラムを作成してください。
 
 :::info
 素数の定義は「1より大きい自然数のうち、1とその数以外で割り切れないもの」でしたね。
 
-`範囲内の全ての自然数iに対して〇〇である` はどうやって評価すればよいでしょうか？
+`範囲内の全ての自然数iに対して〇〇である`はどうやって評価すればよいでしょうか？
 :::
 
 :::tip[豆知識]
-自然数`n`を`i`で割ったあまりは `n % i`で求められます。
+自然数`n`を`i`で割ったあまりは`n % i`で求められます。
 :::
 
 <Answer title="素数判定">
 
-関数の、`return` 文が実行されたときに終了する性質を利用します。
+関数の、`return`文が実行されたときに終了する性質を利用します。
 
 ```js
 function checkPrime(n) {
diff --git a/docs/1-trial-session/10-array/index.mdx b/docs/1-trial-session/10-array/index.mdx
index c1a109d9b..98fc6055a 100644
--- a/docs/1-trial-session/10-array/index.mdx
+++ b/docs/1-trial-session/10-array/index.mdx
@@ -4,15 +4,15 @@ title: 配列
 
 ## 配列
 
-JavaScriptにおける配列は、複数の値を並べて一つにまとめた値です。`[` から `]` で囲まれた部分は配列を生成する式になります。
+JavaScriptにおける配列は、複数の値を並べて一つにまとめた値です。`[`から`]`で囲まれた部分は配列を生成する式になります。
 
 ```javascript
 const studentNames = ["田中", "佐藤", "鈴木"];
 ```
 
-これで、3つの文字列値 `"田中"`, `"佐藤"`, `"鈴木"` が順番に並んで格納された配列が作成され、変数 `studentNames` に格納されました。
+これで、3つの文字列値`"田中"`, `"佐藤"`, `"鈴木"`が順番に並んで格納された配列が作成され、変数`studentNames`に格納されました。
 
-配列を使用するには、配列を生成する際と同じく `[`, `]` 記号を用います。この括弧に囲まれた部分に数値（**インデックス**）を指定すると、配列の要素にアクセスできます。
+配列を使用するには、配列を生成する際と同じく`[`, `]`記号を用います。この括弧に囲まれた部分に数値（**インデックス**）を指定すると、配列の要素にアクセスできます。
 
 ```javascript
 document.write(studentNames[0]); // 田中
@@ -22,13 +22,13 @@ studentNames[1] = "内藤";
 
 :::warning[配列のインデックス]
 
-配列のインデックスは `0` から始まります。このため、`2` 番目の要素のインデックスは `1` で、`n` 番目の要素のインデックスは `n - 1` になります。
+配列のインデックスは`0`から始まります。このため、`2`番目の要素のインデックスは`1`で、`n`番目の要素のインデックスは`n - 1`になります。
 
-また、長さが `N` の配列の最後の要素のインデックスは `N - 1` になります。
+また、長さが`N`の配列の最後の要素のインデックスは`N - 1`になります。
 
 :::
 
-`[` 〜 `]` の中には非負整数値になる任意の式を記述できます。変数や関数呼び出しも式なので使用することが可能です。
+`[`〜`]`の中には非負整数値になる任意の式を記述できます。変数や関数呼び出しも式なので使用することが可能です。
 
 ```javascript
 const six = 6;
@@ -45,7 +45,7 @@ document.write([3, 2, 1][0]);
 
 <Answer>
 
-`[3, 2, 1]` で配列が生成され、`[0]` で0番目の要素が指定されているので、`3` と表示されます。
+`[3, 2, 1]`で配列が生成され、`[0]`で0番目の要素が指定されているので、`3`と表示されます。
 
 <ViewSource url={import.meta.url} path="_samples/array" />
 
@@ -53,7 +53,7 @@ document.write([3, 2, 1][0]);
 
 ## for〜of文
 
-`for〜of` 文を用いると、配列の要素を順番に取り出す処理を簡単に記述できます。
+`for〜of`文を用いると、配列の要素を順番に取り出す処理を簡単に記述できます。
 
 ```javascript
 const studentNames = ["田中", "佐藤", "鈴木"];
@@ -62,9 +62,9 @@ for (const studentName of studentNames) {
 }
 ```
 
-このプログラムを実行すると、`田中佐藤鈴木` と表示されます。
+このプログラムを実行すると、`田中佐藤鈴木`と表示されます。
 
-`for〜of` 文の構造は次の通りです。
+`for〜of`文の構造は次の通りです。
 
 ```javascript
 for (変数の宣言/変数名 of 配列) {
@@ -72,7 +72,7 @@ for (変数の宣言/変数名 of 配列) {
 }
 ```
 
-配列の要素を順番に取り出し、`of` の左側に指定された変数に設定してから、内部の処理を実行していきます。
+配列の要素を順番に取り出し、`of`の左側に指定された変数に設定してから、内部の処理を実行していきます。
 
 ## 配列の便利な機能
 
@@ -80,7 +80,7 @@ JavaScriptの配列には、便利な変数や関数のようなものが定義
 
 ### `配列.length`
 
-[`配列.length`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/length) という変数には、指定した配列の長さが自動的に反映されます。
+[`配列.length`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/length)という変数には、指定した配列の長さが自動的に反映されます。
 
 ```javascript
 const studentNames = ["田中", "佐藤", "鈴木"];
@@ -89,9 +89,9 @@ const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 document.write(numbers.length); // 10
 ```
 
-### `配列.push` 関数
+### `配列.push`関数
 
-[`配列.push` 関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push)は、指定した配列の末尾に新しい値を追加する関数です。
+[`配列.push`関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push)は、指定した配列の末尾に新しい値を追加する関数です。
 
 ```javascript
 const studentNames = ["田中", "佐藤", "鈴木"];
@@ -108,7 +108,7 @@ document.write(studentNames); // 田中,佐藤,鈴木,内藤
 - 配列があります。その配列の要素の和を求めてみましょう。
 
 :::tip
-`for〜of` 文を使って、配列のそれぞれの要素に対して操作を実行します。
+`for〜of`文を使って、配列のそれぞれの要素に対して操作を実行します。
 :::
 
 :::note
@@ -137,7 +137,7 @@ document.write(`配列の合計値は ${sum} です。`);
 
 ### 別解
 
-`for〜of` 文を使わず、次のように書くこともできます。
+`for〜of`文を使わず、次のように書くこともできます。
 
 ```javascript
 const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
@@ -158,7 +158,7 @@ document.write(`配列の合計値は ${sum} です。`);
 
 ### 配列の最大値
 
-引数に配列を一つ取り、その配列の最大値を求める関数 `findMaxNumber` を作成しましょう。
+引数に配列を一つ取り、その配列の最大値を求める関数`findMaxNumber`を作成しましょう。
 
 :::note
 
diff --git a/docs/1-trial-session/11-object/index.mdx b/docs/1-trial-session/11-object/index.mdx
index c1c28d370..752485a86 100644
--- a/docs/1-trial-session/11-object/index.mdx
+++ b/docs/1-trial-session/11-object/index.mdx
@@ -86,7 +86,7 @@ document.write(`${subject} の点数は ${scores[subject]} です。`); // math
 
 :::tip[オブジェクトのプロパティ名]
 
-オブジェクトのプロパティ名に数値は使用できません。それではなぜ、配列の場合は `studentNames[2]` のように記述できるのでしょうか。
+オブジェクトのプロパティ名に数値は使用できません。それではなぜ、配列の場合は`studentNames[2]`のように記述できるのでしょうか。
 
 答えは単純で、文字列に変換されているからです。このため、次のプログラムは全く問題なく動作します。
 
@@ -112,7 +112,7 @@ const tanaka = {
 
 1. 田中さんの算数の点数を表示してみましょう。
 
-2. `scores` に国語の点数を追加して、表示してみましょう。
+2. `scores`に国語の点数を追加して、表示してみましょう。
 
 <Answer title="成績表示">
 
@@ -138,7 +138,7 @@ document.write(tanaka.scores.japanese);
 {/* prettier-ignore */}
 <Term>オブジェクト</Term>も<Term>値</Term>の一種なので、<Term>関数</Term>の<Term>引数</Term>や<Term>戻り値</Term>として使用できます。
 
-`age` <Term>プロパティ</Term>に1を加えた<Term>オブジェクト</Term>を返す関数 `incrementAge` を定義してみましょう。
+`age`<Term>プロパティ</Term>に1を加えた<Term>オブジェクト</Term>を返す関数`incrementAge`を定義してみましょう。
 
 ```javascript
 function incrementAge(person) {
diff --git a/docs/1-trial-session/12-css/index.mdx b/docs/1-trial-session/12-css/index.mdx
index 1936b9407..ce2eeccf7 100644
--- a/docs/1-trial-session/12-css/index.mdx
+++ b/docs/1-trial-session/12-css/index.mdx
@@ -12,11 +12,11 @@ CSSの書き方を学び、「Hello World!」の文字を赤くしてみまし
 
 ## <Term>CSS</Term>ファイルを作成する
 
-CSSファイルの拡張子は通常 `.css` です。今回は `index.html` と併せて `style.css` を作成しました。
+CSSファイルの拡張子は通常`.css`です。今回は`index.html`と併せて`style.css`を作成しました。
 
 ![CSSを書き始める](./begin-css.png)
 
-次の例では、`Hello World!` を赤色にしています。
+次の例では、`Hello World!`を赤色にしています。
 
 ```html title="index.html"
 <!doctype html>
@@ -40,47 +40,47 @@ CSSファイルの拡張子は通常 `.css` です。今回は `index.html` と
 
 <ViewSource url={import.meta.url} path="_samples/red-hello-world" />
 
-:::tip[`div` 要素]
+:::tip[`div`要素]
 
-[`div` 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/div)はそれ単体では特に意味を持たず、囲った範囲を要素としてまとめるために使われます。
+[`div`要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/div)はそれ単体では特に意味を持たず、囲った範囲を要素としてまとめるために使われます。
 
 :::
 
-## `link` 要素
+## `link`要素
 
 ```html title="index.html"
 <link rel="stylesheet" href="./style.css" />
 ```
 
-まず注目すべきは `link` 要素です。HTMLで、`link` 要素を用いることにより、外部のCSSファイルを読み込ませることができます。
+まず注目すべきは`link`要素です。HTMLで、`link`要素を用いることにより、外部のCSSファイルを読み込ませることができます。
 
 ## セレクタとID
 
-CSSを記述する際には、まずスタイルを適用する対象となるHTML要素を指定する必要があります。このために用いることができるのが、HTML要素の `id` 属性です。(上の例では、`index.html` の9行目)
+CSSを記述する際には、まずスタイルを適用する対象となるHTML要素を指定する必要があります。このために用いることができるのが、HTML要素の`id`属性です。(上の例では、`index.html`の9行目)
 
 ![セレクタ](selector.drawio.svg)
 
-そして、CSS側に書くのが**セレクタ**です。上の例では、`style.css` の1行目の `#greeting` がセレクタで、「`id` 属性が `greeting` である要素」を示します。
+そして、CSS側に書くのが**セレクタ**です。上の例では、`style.css`の1行目の`#greeting`がセレクタで、「`id`属性が`greeting`である要素」を示します。
 
-`id` 属性は、全てのHTML要素に対して開発者が自由に設定できますが、ひとつのHTML内に同じ `id` 属性を持つ要素が複数存在してはならない、というルールがあります。
+`id`属性は、全てのHTML要素に対して開発者が自由に設定できますが、ひとつのHTML内に同じ`id`属性を持つ要素が複数存在してはならない、というルールがあります。
 
-また、`id` 属性と似た使い方ができる属性として、`class` 属性があります。この属性は、開発者が好きな値を設定できるのは同じですが、複数の要素が同じ値を持つことが許されています。また、スペース区切りで複数の値を設定することもできます。
+また、`id`属性と似た使い方ができる属性として、`class`属性があります。この属性は、開発者が好きな値を設定できるのは同じですが、複数の要素が同じ値を持つことが許されています。また、スペース区切りで複数の値を設定することもできます。
 
-| セレクタ   | 意味                                    |
-| ---------- | --------------------------------------- |
-| `#element` | `id` 属性が `element` である要素        |
-| `.element` | `class` 属性に `element` が含まれる要素 |
-| `element`  | タグ名が `element` である要素           |
+| セレクタ   | 意味                                 |
+| ---------- | ------------------------------------ |
+| `#element` | `id`属性が`element`である要素        |
+| `.element` | `class`属性に`element`が含まれる要素 |
+| `element`  | タグ名が`element`である要素          |
 
 :::info[高度なセレクタ]
 
-また、セレクタをスペースで区切ると子孫要素、`>` で区切ると直属の子要素を表すことができます。そのまま繋げばand条件とみなされます。
+また、セレクタをスペースで区切ると子孫要素、`>`で区切ると直属の子要素を表すことができます。そのまま繋げばand条件とみなされます。
 
-| セレクタ         | 意味                                                                           |
-| ---------------- | ------------------------------------------------------------------------------ |
-| `div.element`    | `class` 属性に `element` が含まれる `div` 要素                                 |
-| `#parent .child` | `id` 属性が `parent` である要素の子孫の、`class` 属性に `child` が含まれる要素 |
-| `#parent > div`  | `id` 属性が `parent` である要素の直属の子の `div` 要素                         |
+| セレクタ         | 意味                                                                     |
+| ---------------- | ------------------------------------------------------------------------ |
+| `div.element`    | `class`属性に`element`が含まれる`div`要素                                |
+| `#parent .child` | `id`属性が`parent`である要素の子孫の、`class`属性に`child`が含まれる要素 |
+| `#parent > div`  | `id`属性が`parent`である要素の直属の子の`div`要素                        |
 
 セレクタを上手に活用すると、変更に強くて柔軟なCSSを作成することができます。
 
@@ -96,11 +96,11 @@ CSSを記述する際には、まずスタイルを適用する対象となるHT
 }
 ```
 
-CSSの `{` から `}` で囲まれたブロックの中に、<Term type="cssProperty">**プロパティ**</Term>と呼ばれるスタイルの種類と、「プロパティ値」と呼ばれるプロパティに指定できる外観を、コロン記号で区切って記述します。
+CSSの`{`から`}`で囲まれたブロックの中に、<Term type="cssProperty">**プロパティ**</Term>と呼ばれるスタイルの種類と、「プロパティ値」と呼ばれるプロパティに指定できる外観を、コロン記号で区切って記述します。
 
-上の例では、`color` という<Term type="cssProperty">プロパティ</Term>に、`red` というプロパティ値を設定することで、文字色を赤色に設定するよう指示しています。
+上の例では、`color`という<Term type="cssProperty">プロパティ</Term>に、`red`というプロパティ値を設定することで、文字色を赤色に設定するよう指示しています。
 
-これで、`Hello World!` の文字が赤くなりました。
+これで、`Hello World!`の文字が赤くなりました。
 
 :::note
 
@@ -109,8 +109,8 @@ CSSの `{` から `}` で囲まれたブロックの中に、<Term type="cssProp
 
 :::
 
-:::tip[HTMLの <Term>`style` 属性</Term>]
-`style.css` を作らずとも、HTML内に直接CSSを指定することもできます。例えば、`div` <Term>要素</Term> の <Term>`style` 属性</Term>に `color: red;` を指定するとどうなるでしょうか。
+:::tip[HTMLの <Term>`style`属性</Term>]
+`style.css`を作らずとも、HTML内に直接CSSを指定することもできます。例えば、`div`<Term>要素</Term> の<Term>`style`属性</Term>に`color: red;`を指定するとどうなるでしょうか。
 
 ```html title="index.html"
 <div style="color: red">Hello World!</div>
@@ -118,9 +118,9 @@ CSSの `{` から `}` で囲まれたブロックの中に、<Term type="cssProp
 
 <ViewSource url={import.meta.url} path="_samples/first-css" />
 
-このプログラムを実行すると、<Term>`style` 属性</Term>を指定した<Term>要素</Term>内のテキストが赤色で表示されます。
+このプログラムを実行すると、<Term>`style`属性</Term>を指定した<Term>要素</Term>内のテキストが赤色で表示されます。
 
-しかし、`style` 属性を用いてHTMLとCSSを1つのファイルに混合するよりも、「構造」のファイル (HTML)、「スタイル」のファイル (CSS) と役割をはっきり分離させたほうが、コードの可読性が上がり、後から修正するのも簡単です。このため、通常CSSファイルはHTMLファイルとは別に用意されます。
+しかし、`style`属性を用いてHTMLとCSSを1つのファイルに混合するよりも、「構造」のファイル (HTML)、「スタイル」のファイル (CSS) と役割をはっきり分離させたほうが、コードの可読性が上がり、後から修正するのも簡単です。このため、通常CSSファイルはHTMLファイルとは別に用意されます。
 :::
 
 ## 複数のプロパティ
@@ -132,9 +132,9 @@ CSSの `{` から `}` で囲まれたブロックの中に、<Term type="cssProp
 }
 ```
 
-複数の<Term type="cssProperty">プロパティ</Term>を指定する場合には、上のように `プロパティ: プロパティ値;` の組を並べて記述します。セミコロンの指定が必要であることに注意してください。
+複数の<Term type="cssProperty">プロパティ</Term>を指定する場合には、上のように`プロパティ: プロパティ値;`の組を並べて記述します。セミコロンの指定が必要であることに注意してください。
 
-CSSの<Term type="cssProperty">プロパティ</Term>には `color` (文字色) や `font-size` (文字サイズ) だけでなく、`background-color` (背景色)、`text-decoration` (文字装飾) 等、数えきれないほどの種類が定義されています。
+CSSの<Term type="cssProperty">プロパティ</Term>には`color` (文字色) や`font-size` (文字サイズ) だけでなく、`background-color` (背景色)、`text-decoration` (文字装飾) 等、数えきれないほどの種類が定義されています。
 
 :::tip[どうやって調べたらいいの？]
 
@@ -150,7 +150,7 @@ CSSの<Term type="cssProperty">プロパティ</Term>には `color` (文字色)
 
 #### 3. 周辺知識を信頼できる情報源で調べる
 
-見つかったウェブサイトに掲載されているコードをもとに、信頼できる情報源を読みなおします。HTML、CSS、JavaScriptの場合は、[MDN](https://developer.mozilla.org/ja/)が便利でしょう。例えば「CSS 文字色」と調べて紹介されるのは `color` <Term type="cssProperty">プロパティ</Term>なので、MDNでこの<Term type="cssProperty">プロパティ</Term>について調べておきましょう。
+見つかったウェブサイトに掲載されているコードをもとに、信頼できる情報源を読みなおします。HTML、CSS、JavaScriptの場合は、[MDN](https://developer.mozilla.org/ja/)が便利でしょう。例えば「CSS 文字色」と調べて紹介されるのは`color`<Term type="cssProperty">プロパティ</Term>なので、MDNでこの<Term type="cssProperty">プロパティ</Term>について調べておきましょう。
 
 :::
 
@@ -160,8 +160,8 @@ CSSの<Term type="cssProperty">プロパティ</Term>には `color` (文字色)
 
 次のような条件を満たす要素を選択するセレクタは何でしょうか。
 
-1. `id` 属性が `foo` の要素
-2. `class` 属性に `bar` が含まれる要素の子孫の要素のうち、`button` 要素であるもの
+1. `id`属性が`foo`の要素
+2. `class`属性に`bar`が含まれる要素の子孫の要素のうち、`button`要素であるもの
 
 <Answer title="セレクタ">
 
@@ -172,11 +172,11 @@ CSSの<Term type="cssProperty">プロパティ</Term>には `color` (文字色)
 
 ### 基礎演習2 (Hello CSS!)
 
-下のような、文字色が黄色、背景色が好きな色 (この例では黒) の `Hello CSS!` をブラウザで表示してみましょう。
+下のような、文字色が黄色、背景色が好きな色 (この例では黒) の`Hello CSS!`をブラウザで表示してみましょう。
 
 ![Hello CSS!](yellow-hello-css.png)
 
-使用するプロパティは `color`、`background-color` です。
+使用するプロパティは`color`、`background-color`です。
 
 <Answer title="Hello CSS!">
 
diff --git a/docs/1-trial-session/13-dom/index.mdx b/docs/1-trial-session/13-dom/index.mdx
index 46e8f7d93..ebe10685b 100644
--- a/docs/1-trial-session/13-dom/index.mdx
+++ b/docs/1-trial-session/13-dom/index.mdx
@@ -8,7 +8,7 @@ title: DOM
 <Term>**DOM**</Term> (Document Object Model) は、<Term>HTML</Term>構造を <Term>JavaScript</Term>の<Term>オブジェクト</Term>として扱うための枠組みです。
 <Term>HTML</Term>と<Term>CSS</Term>のほとんどの機能は<Term>JavaScript</Term>から制御することができます。
 
-`document.getElementById` <Term>関数</Term>は、<Term>引数</Term>として<Term>HTML要素</Term>の `id` <Term>属性</Term>に指定された値を<Term>文字列</Term>として<Term>渡す</Term>ことで、その<Term>要素</Term>を表す<Term>オブジェクト</Term>を<Term>返し</Term>ます。
+`document.getElementById`<Term>関数</Term>は、<Term>引数</Term>として<Term>HTML要素</Term>の`id`<Term>属性</Term>に指定された値を<Term>文字列</Term>として<Term>渡す</Term>ことで、その<Term>要素</Term>を表す<Term>オブジェクト</Term>を<Term>返し</Term>ます。
 
 ```html title="index.html"
 <!doctype html>
@@ -32,11 +32,11 @@ greetingElement.textContent = "Hello DOM";
 <ViewSource url={import.meta.url} path="_samples/get-element-by-id" />
 
 {/* prettier-ignore */}
-<Term>変数</Term> `greetingElement` には、`index.html` に記述された `div` <Term>要素</Term>に対応する<Term>オブジェクト</Term>が<Term>代入</Term>されています。
+<Term>変数</Term>`greetingElement`には、`index.html`に記述された`div`<Term>要素</Term>に対応する<Term>オブジェクト</Term>が<Term>代入</Term>されています。
 
 ![DOM](./dom.png)
 
-`document.getElementById` が<Term>返す</Term><Term>オブジェクト</Term>には、取得したHTML<Term>要素</Term>の特徴を表す、たくさんの<Term>プロパティ</Term>が含まれています。下はその一部分です。
+`document.getElementById`が<Term>返す</Term><Term>オブジェクト</Term>には、取得したHTML<Term>要素</Term>の特徴を表す、たくさんの<Term>プロパティ</Term>が含まれています。下はその一部分です。
 
 | プロパティ    | 説明                                  |
 | ------------- | ------------------------------------- |
@@ -45,7 +45,7 @@ greetingElement.textContent = "Hello DOM";
 | `tagName`     | <Term>タグ</Term>の名前               |
 | `style`       | <Term>要素</Term>に設定されたスタイル |
 
-`textContent` <Term>プロパティ</Term>は、<Term>HTML要素</Term>の内部のテキストを表します。<Term>オブジェクト</Term>の<Term>プロパティ</Term>は通常の<Term>変数</Term>のように取得や<Term>代入</Term>が可能で、上の例では `textContent` <Term>プロパティ</Term>に対して `"Hello DOM"` という<Term>文字列</Term>を代入することで、`div` <Term>要素</Term>の内部のテキストを変更しています。
+`textContent`<Term>プロパティ</Term>は、<Term>HTML要素</Term>の内部のテキストを表します。<Term>オブジェクト</Term>の<Term>プロパティ</Term>は通常の<Term>変数</Term>のように取得や<Term>代入</Term>が可能で、上の例では`textContent`<Term>プロパティ</Term>に対して`"Hello DOM"`という<Term>文字列</Term>を代入することで、`div`<Term>要素</Term>の内部のテキストを変更しています。
 
 ### 確認問題
 
@@ -55,7 +55,7 @@ greetingElement.textContent = "Hello DOM";
 <div>Good <strong id="greeting-type">morning</strong>!</div>
 ```
 
-JavaScriptを使って、`morning` を `evening` にしてください。
+JavaScriptを使って、`morning`を`evening`にしてください。
 
 <Answer>
 
@@ -70,7 +70,7 @@ greetingType.textContent = "evening";
 
 ## <Term>HTML要素</Term>のスタイルを変更する
 
-`document.getElementById` <Term>関数</Term>が返す<Term>オブジェクト</Term>の `style` <Term>プロパティ</Term>は、その要素の <Term>`style` 属性</Term>と対応します。 **`style` <Term>プロパティ</Term>に格納されている<Term>値</Term>自体も<Term>オブジェクト</Term>** となっており、その各<Term>プロパティ</Term>がCSSの<Term type="cssProperty">プロパティ</Term>に対応します。
+`document.getElementById`<Term>関数</Term>が返す<Term>オブジェクト</Term>の`style`<Term>プロパティ</Term>は、その要素の <Term>`style`属性</Term>と対応します。 **`style`<Term>プロパティ</Term>に格納されている<Term>値</Term>自体も<Term>オブジェクト</Term>** となっており、その各<Term>プロパティ</Term>がCSSの<Term type="cssProperty">プロパティ</Term>に対応します。
 
 ```js title="script.js"
 element.style.backgroundColor = "red";
@@ -81,8 +81,8 @@ element.style.backgroundColor = "red";
 ![JavaScriptからスタイルを操作する](./change-styles.png)
 
 {/* prettier-ignore */}
-<Term>CSS</Term>の<Term type="cssProperty">プロパティ</Term>名である `background-color` は、内部にハイフンが含まれているため、`element.style.background-color` のように指定してしまうと、ハイフンが減算<Term>演算子</Term>として解釈されてしまいます。
-`style` <Term>プロパティ</Term>では、<Term>CSS</Term>の<Term type="cssProperty">プロパティ</Term>名は<Term>キャメルケース</Term>として指定する必要があることに注意してください。
+<Term>CSS</Term>の<Term type="cssProperty">プロパティ</Term>名である`background-color`は、内部にハイフンが含まれているため、`element.style.background-color`のように指定してしまうと、ハイフンが減算<Term>演算子</Term>として解釈されてしまいます。
+`style`<Term>プロパティ</Term>では、<Term>CSS</Term>の<Term type="cssProperty">プロパティ</Term>名は<Term>キャメルケース</Term>として指定する必要があることに注意してください。
 
 ### 確認問題
 
@@ -92,7 +92,7 @@ element.style.backgroundColor = "red";
 <div id="greeting">Hello World!</div>
 ```
 
-文字色が黄色、背景色が黒色で `Hello World!` と表示されるようにしてください。
+文字色が黄色、背景色が黒色で`Hello World!`と表示されるようにしてください。
 
 ここではCSSファイルを作成するのではなく、JavaScriptを使ってスタイルを操作してください。
 
@@ -112,18 +112,18 @@ greetingElement.style.backgroundColor = "black";
 
 ## DOMを用いて要素を追加する
 
-`document.createElement` 関数は、引数に要素の種類を表す文字列を取り、その種類の新しいHTML要素を作る関数です。
-`document.createElement` 関数の戻り値は、新しく作ったHTML要素に対応するオブジェクトです。
-下の例では、新しい `li` 要素を作っています。
+`document.createElement`関数は、引数に要素の種類を表す文字列を取り、その種類の新しいHTML要素を作る関数です。
+`document.createElement`関数の戻り値は、新しく作ったHTML要素に対応するオブジェクトです。
+下の例では、新しい`li`要素を作っています。
 
-中身のない空の要素が作成されるので、`textContent` を `おやつ` に設定してみましょう。
+中身のない空の要素が作成されるので、`textContent`を`おやつ`に設定してみましょう。
 
 ```js title="script.js"
 const snackElement = document.createElement("li");
 snackElement.textContent = "おやつ";
 ```
 
-そして、`要素1.appendChild(要素2)` とすることで、要素1の子要素に要素2を追加し、画面に表示することができます。
+そして、`要素1.appendChild(要素2)`とすることで、要素1の子要素に要素2を追加し、画面に表示することができます。
 今回は、遠足の持ち物リストに新しい項目を追加してみましょう。
 
 ```html title="index.html"
@@ -142,7 +142,7 @@ snackElement.textContent = "おやつ";
 packingList.appendChild(snackElement);
 ```
 
-これで、既存の `ul` 要素の子要素に新しい `li` 要素が追加され、「おやつ」が加わった持ち物リストが表示されます。
+これで、既存の`ul`要素の子要素に新しい`li`要素が追加され、「おやつ」が加わった持ち物リストが表示されます。
 
 ### 確認問題
 
@@ -204,7 +204,7 @@ targetItem.textContent = "レモン";
 const fruits = ["イチゴ", "スイカ", "バナナ"];
 ```
 
-`createElement` 関数や `appendChild` 関数を用い、`ul` 要素の中に各果物に対応する `li` 要素を作成することで、箇条書きを完成させましょう。
+`createElement`関数や`appendChild`関数を用い、`ul`要素の中に各果物に対応する`li`要素を作成することで、箇条書きを完成させましょう。
 ただし、HTMLファイルには次のように記述されているものとします。
 
 ```html title="index.html"
diff --git a/docs/1-trial-session/14-events/index.mdx b/docs/1-trial-session/14-events/index.mdx
index cbaa6b33f..21d6f80cb 100644
--- a/docs/1-trial-session/14-events/index.mdx
+++ b/docs/1-trial-session/14-events/index.mdx
@@ -20,16 +20,16 @@ const func = greet;
 func();
 ```
 
-上の例では、`const func = greet;` の行で<Term>変数</Term> `func` に<Term>関数</Term> `greet` を<Term>代入</Term>しています。<Term>関数</Term>を<Term>値</Term>として扱うときは、<Term>関数</Term>呼び出し<Term>式</Term>の括弧は使用しません。これにより、<Term>関数</Term>が<Term>代入</Term>された<Term>変数</Term>を経由してその<Term>関数</Term>を実行できます。
+上の例では、`const func = greet;`の行で<Term>変数</Term>`func`に<Term>関数</Term>`greet`を<Term>代入</Term>しています。<Term>関数</Term>を<Term>値</Term>として扱うときは、<Term>関数</Term>呼び出し<Term>式</Term>の括弧は使用しません。これにより、<Term>関数</Term>が<Term>代入</Term>された<Term>変数</Term>を経由してその<Term>関数</Term>を実行できます。
 
 ## <Term>イベントハンドラ</Term>
 
 {/* prettier-ignore */}
 <Term>オブジェクト</Term>の<Term>プロパティ</Term>として<Term>関数</Term>を利用することもできます。
-`document.getElementById` が返す<Term>オブジェクト</Term>の `onclick` <Term>プロパティ</Term>には、<Term>要素</Term>がクリックされたときに実行される<Term>関数</Term>を指定できます。
+`document.getElementById`が返す<Term>オブジェクト</Term>の`onclick`<Term>プロパティ</Term>には、<Term>要素</Term>がクリックされたときに実行される<Term>関数</Term>を指定できます。
 
 ボタンのクリック、フォームへの入力、ページの読み込みなど、Webページ上で発生するあらゆるアクションを総称して<Term>イベント</Term>と呼びます。
-このような<Term>イベント</Term>の処理を行うのが<Term>イベントハンドラ</Term>で、`onclick` 関数はその一例です。
+このような<Term>イベント</Term>の処理を行うのが<Term>イベントハンドラ</Term>で、`onclick`関数はその一例です。
 
 ```html title="index.html"
 <button id="greet-button" type="button">クリック</button>
@@ -44,7 +44,7 @@ const greetButton = document.getElementById("greet-button");
 greetButton.onclick = clicked;
 ```
 
-この例では、<Term>HTML要素</Term>の `id` <Term>属性</Term>に `greet-button` が指定されている <Term>HTML要素</Term>を表す<Term>オブジェクト</Term>の `onclick` <Term>プロパティ</Term>に対し、<Term>関数</Term> `clicked` を<Term>代入</Term>しています。これにより、ボタンがクリックされたとき、`clicked` <Term>関数</Term>が実行されるようになります。
+この例では、<Term>HTML要素</Term>の`id`<Term>属性</Term>に`greet-button`が指定されている <Term>HTML要素</Term>を表す<Term>オブジェクト</Term>の`onclick`<Term>プロパティ</Term>に対し、<Term>関数</Term>`clicked`を<Term>代入</Term>しています。これにより、ボタンがクリックされたとき、`clicked`<Term>関数</Term>が実行されるようになります。
 
 <video src={handleClickVideo} muted controls />
 
@@ -61,19 +61,19 @@ const greetButton = document.getElementById("greet-button");
 greetButton.onclick = clicked();
 ```
 
-答えは、最後の行が `clicked` から `clicked()` に変わってしまっていることです。<Term>関数</Term>は、カッコをつけた<Term>式</Term>が<Term>評価</Term>されるタイミングで実行されます。このため、
+答えは、最後の行が`clicked`から`clicked()`に変わってしまっていることです。<Term>関数</Term>は、カッコをつけた<Term>式</Term>が<Term>評価</Term>されるタイミングで実行されます。このため、
 
 ```javascript
 greetButton.onclick = clicked();
 ```
 
-では<Term>代入</Term>より前、<Term>式</Term> `clicked()` が<Term>評価</Term>されたタイミングで `clicked` <Term>関数</Term>が実行されてしまいます。
+では<Term>代入</Term>より前、<Term>式</Term>`clicked()`が<Term>評価</Term>されたタイミングで`clicked`<Term>関数</Term>が実行されてしまいます。
 
 :::
 
 :::warning
 
-上の例では、画面上にはじめから表示されていたボタンが、ボタンをクリックしたときに削除されています。これは、`document.write` をすべての<Term>要素</Term>の表示が終わった後に実行すると、画面上のすべての<Term>要素</Term>を一度削除するという挙動をとるためです。このため、現代の<Term>JavaScript</Term>において、`document.write` <Term>関数</Term>が使用されることはほとんどありません。
+上の例では、画面上にはじめから表示されていたボタンが、ボタンをクリックしたときに削除されています。これは、`document.write`をすべての<Term>要素</Term>の表示が終わった後に実行すると、画面上のすべての<Term>要素</Term>を一度削除するという挙動をとるためです。このため、現代の<Term>JavaScript</Term>において、`document.write`<Term>関数</Term>が使用されることはほとんどありません。
 
 :::
 
@@ -85,15 +85,15 @@ greetButton.onclick = clicked();
 
 :::info[文字列の表示]
 
-`document.write` 関数を使うと、画面上にあったボタンが消えてしまいます。また、文字色や文字サイズを変えることも困難です。
+`document.write`関数を使うと、画面上にあったボタンが消えてしまいます。また、文字色や文字サイズを変えることも困難です。
 
-`document.write` 関数の代わりに、先ほどのDOMの章で扱った方法を使ってHTML要素をJavaScriptで操作するとよいでしょう。
+`document.write`関数の代わりに、先ほどのDOMの章で扱った方法を使ってHTML要素をJavaScriptで操作するとよいでしょう。
 
 :::
 
-:::info[`Hello World!` を表示する場所]
+:::info[`Hello World!`を表示する場所]
 
-`document.write` 関数を使わずに「`Hello World!` を表示する」という挙動を実現するためには、あらかじめ中身のないHTML要素を置いておき、その要素の `textContent` プロパティを操作するとよいでしょう。
+`document.write`関数を使わずに「`Hello World!`を表示する」という挙動を実現するためには、あらかじめ中身のないHTML要素を置いておき、その要素の`textContent`プロパティを操作するとよいでしょう。
 
 ```html
 <div id="greeting"></div>
diff --git a/docs/1-trial-session/15-project/index.mdx b/docs/1-trial-session/15-project/index.mdx
index 519efeef8..769ac2ed8 100644
--- a/docs/1-trial-session/15-project/index.mdx
+++ b/docs/1-trial-session/15-project/index.mdx
@@ -13,21 +13,21 @@ import stopwatchVideo from "./stopwatch.mp4";
 
 ### ルール
 
-- 20%の確率で `大吉` と表示し、文字色を赤色にします
-- 50%の確率で `吉` と表示し、文字色を黒色にします
-- 30%の確率で `凶` と表示し、文字色を青色にします
+- 20%の確率で`大吉`と表示し、文字色を赤色にします
+- 50%の確率で`吉`と表示し、文字色を黒色にします
+- 30%の確率で`凶`と表示し、文字色を青色にします
 
 <video src={omikujiVideo} controls />
 
 ### ヒント
 
-- `Math.random` <Term>関数</Term>は、呼び出すたびに変わる0以上1未満の一様乱数を<Term>返し</Term>ます。
+- `Math.random`<Term>関数</Term>は、呼び出すたびに変わる0以上1未満の一様乱数を<Term>返し</Term>ます。
 
 ```javascript
 document.write(Math.random()); // 0.8924949384481442
 ```
 
-- 発生させた乱数を<Term>変数</Term>に保存しておきましょう。この乱数は `[0, 1)` の一様分布に従うので、例えば `[0, 0.2)` に含まれる確率は20%になります。
+- 発生させた乱数を<Term>変数</Term>に保存しておきましょう。この乱数は`[0, 1)`の一様分布に従うので、例えば`[0, 0.2)`に含まれる確率は20%になります。
 
 ```javascript
 const r = Math.random();
@@ -40,7 +40,7 @@ if (r < 0.2) {
 }
 ```
 
-- クリックするためのボタンと、テキストを表示して色を変えるための `div` <Term>要素</Term>の両方を<Term>JavaScript</Term>から取得してみましょう。
+- クリックするためのボタンと、テキストを表示して色を変えるための`div`<Term>要素</Term>の両方を<Term>JavaScript</Term>から取得してみましょう。
 
 ```html title="index.html"
 <button id="omikuji-button" type="button">おみくじを引く</button>
@@ -67,14 +67,14 @@ omikujiButton.onclick = omikuji;
 
 ### ルール
 
-- `スタート` ボタンをクリックすると、時刻の数え上げが開始されます
+- `スタート`ボタンをクリックすると、時刻の数え上げが開始されます
 - 1秒ごとに表示される数値が更新されます
 
 <video src={stopwatchVideo} controls />
 
 ### ヒント
 
-- `setInterval` <Term>関数</Term>は<Term>引数</Term>をふたつ (`func`, `delay`) とり、`func` は<Term>値</Term>としての<Term>関数</Term>、`delay` は整数です。`setInterval` は、`func` に指定された<Term>関数</Term>を `delay` ミリ秒の間隔で定期的に実行します。
+- `setInterval`<Term>関数</Term>は<Term>引数</Term>をふたつ (`func`, `delay`) とり、`func`は<Term>値</Term>としての<Term>関数</Term>、`delay`は整数です。`setInterval`は、`func`に指定された<Term>関数</Term>を`delay`ミリ秒の間隔で定期的に実行します。
 
 ```javascript
 function greet() {
@@ -84,9 +84,9 @@ function greet() {
 setInterval(greet, 1000);
 ```
 
-このコードを実行すると、1秒ずつ画面に `<p>Hello World</p>` が書き加えられていきます。
+このコードを実行すると、1秒ずつ画面に`<p>Hello World</p>`が書き加えられていきます。
 
-- ボタン<Term>要素</Term>がクリックされたら `setInterval` <Term>関数</Term>を実行し、タイマーを開始しましょう。
+- ボタン<Term>要素</Term>がクリックされたら`setInterval`<Term>関数</Term>を実行し、タイマーを開始しましょう。
 
 ```javascript
 function start() {
@@ -107,7 +107,7 @@ function tick() {
 }
 ```
 
-- (発展) ストップボタンを作りたい場合は、`setInterval` <Term>関数</Term>の<Term>戻り値</Term>を利用しましょう。`setInterval` の<Term>戻り値</Term>は整数で、`clearInterval` にこの<Term>値</Term>を<Term>渡す</Term>と、動作中のタイマーを解除することができます。
+- (発展) ストップボタンを作りたい場合は、`setInterval`<Term>関数</Term>の<Term>戻り値</Term>を利用しましょう。`setInterval`の<Term>戻り値</Term>は整数で、`clearInterval`にこの<Term>値</Term>を<Term>渡す</Term>と、動作中のタイマーを解除することができます。
 
 ```javascript
 let timerId;
diff --git a/docs/2-browser-apps/01-inspector/index.mdx b/docs/2-browser-apps/01-inspector/index.mdx
index 617e9db17..2939e4b86 100644
--- a/docs/2-browser-apps/01-inspector/index.mdx
+++ b/docs/2-browser-apps/01-inspector/index.mdx
@@ -26,15 +26,15 @@ Google Chrome以外のブラウザにも開発者ツールは搭載されてい
 
 ## HTMLやCSSの構造の確認
 
-`Elements` タブを用いると、ウェブサイト上に現在表示されているHTMLの構造や、各HTML要素に適用されているCSSの状態を確認したり、その場で値を書き換えて、表示が変化する様子を確認したりすることができます。
+`Elements`タブを用いると、ウェブサイト上に現在表示されているHTMLの構造や、各HTML要素に適用されているCSSの状態を確認したり、その場で値を書き換えて、表示が変化する様子を確認したりすることができます。
 
-また、表示中のHTML要素を右クリックして `検証` メニューをクリックするか、開発者ツールの中のインスペクトボタン (<GrSelect style={{ verticalAlign: "middle" }} />) をクリックすることにより、要素を直接選択することができます。この方法を用いることで、HTMLの木構造を根から辿る必要がなくなります。
+また、表示中のHTML要素を右クリックして`検証`メニューをクリックするか、開発者ツールの中のインスペクトボタン (<GrSelect style={{ verticalAlign: "middle" }} />) をクリックすることにより、要素を直接選択することができます。この方法を用いることで、HTMLの木構造を根から辿る必要がなくなります。
 
 <video src={inspectElementsVideo} muted controls />
 
 ### 確認問題
 
-あなたのお気に入りのニュースサイトの記事をひとつ選び、その中に現れる人物名を、 `Elements` タブの機能を用いて自分の名前に変えてみましょう。悪用厳禁です！
+あなたのお気に入りのニュースサイトの記事をひとつ選び、その中に現れる人物名を、`Elements`タブの機能を用いて自分の名前に変えてみましょう。悪用厳禁です！
 
 ## デバッガ
 
@@ -84,7 +84,7 @@ const sum = add(3, 4);
 resultElement.textContent = sum;
 ```
 
-JavaScriptのデバッガは主に `Sources` タブから用います。まずはこのタブを開き、サイドパネルに表示された `script.js` を開きましょう。
+JavaScriptのデバッガは主に`Sources`タブから用います。まずはこのタブを開き、サイドパネルに表示された`script.js`を開きましょう。
 
 ![デバッガでファイルを開く](./open-file-in-debugger.png)
 
@@ -110,25 +110,25 @@ JavaScriptの実行がブレークポイントを設定した地点に差し掛
 
 ![ステップ オーバー](./step-over.png)
 
-この状態で、`resultElement` の部分にマウスカーソルを乗せてみましょう。`resultElement` 変数の中身が表示されます。変数の値がオブジェクトの場合は、その内部を見ることもできます。下にスクロールするとおなじみの `textContent` プロパティなども存在していることが分かりますね。
+この状態で、`resultElement`の部分にマウスカーソルを乗せてみましょう。`resultElement`変数の中身が表示されます。変数の値がオブジェクトの場合は、その内部を見ることもできます。下にスクロールするとおなじみの`textContent`プロパティなども存在していることが分かりますね。
 
 ![オブジェクトの中身を見る](./inspect-object.png)
 
-今度はブレークポイントを6行目に設置してみましょう。ページを更新して、次は、**ステップ イン**ボタンを押してみましょう。実行が `add` 関数の中に移ります。
+今度はブレークポイントを6行目に設置してみましょう。ページを更新して、次は、**ステップ イン**ボタンを押してみましょう。実行が`add`関数の中に移ります。
 
 ![ステップ イン](./step-in.png)
 
-右側のパネルの `Call Stack` (**コール スタック**) 部分を見てみてください。ここには、現在実行されている関数が、どの順番で実行されているのかが表示されています。この場合は、`script.js` というファイルの6行目から `add` 関数が呼び出されていることが分かります。
+右側のパネルの`Call Stack` (**コール スタック**) 部分を見てみてください。ここには、現在実行されている関数が、どの順番で実行されているのかが表示されています。この場合は、`script.js`というファイルの6行目から`add`関数が呼び出されていることが分かります。
 
 ![コール スタック](./call-stack.png)
 
-次に、**ステップ アウト**ボタンを押しましょう。このボタンにより、現在実行されている関数が最後まで実行され、実行が `add` 関数の外に出て、7行目の先頭で処理が止まっているのが分かると思います。
+次に、**ステップ アウト**ボタンを押しましょう。このボタンにより、現在実行されている関数が最後まで実行され、実行が`add`関数の外に出て、7行目の先頭で処理が止まっているのが分かると思います。
 
 ![ステップ アウト](./step-out.png)
 
-:::tip[`console.log` 関数]
+:::tip[`console.log`関数]
 
-`console.log` 関数は、メッセージをブラウザの開発者ツールの `Console` に出力します。`console.log` 関数を使ってプログラムの実行中に値の変化を確認したり、問題が発生した時に原因を特定したりすることができます。
+`console.log`関数は、メッセージをブラウザの開発者ツールの`Console`に出力します。`console.log`関数を使ってプログラムの実行中に値の変化を確認したり、問題が発生した時に原因を特定したりすることができます。
 
 ```javascript title="script.js"
 const x = 5;
@@ -141,7 +141,7 @@ console.log("x + y は、", sum);
 
 ### 確認問題
 
-次のプログラムの5行目では、`add` 関数は3回実行されます。どのような順番で関数が呼び出されているか、デバッガを用いて確認してみてください。
+次のプログラムの5行目では、`add`関数は3回実行されます。どのような順番で関数が呼び出されているか、デバッガを用いて確認してみてください。
 
 ```javascript title="script.js"
 function add(a, b) {
diff --git a/docs/2-browser-apps/02-reference/index.mdx b/docs/2-browser-apps/02-reference/index.mdx
index f50d44a52..3254a362b 100644
--- a/docs/2-browser-apps/02-reference/index.mdx
+++ b/docs/2-browser-apps/02-reference/index.mdx
@@ -19,22 +19,22 @@ document.write(object1.age);
 
 <ViewSource url={import.meta.url} path="_samples/reference" />
 
-このプログラムの実行結果は `19` になります。なぜでしょうか。
+このプログラムの実行結果は`19`になります。なぜでしょうか。
 
-実は、オブジェクトを生成する式 `{ name: "田中", age: 18 }` は、オブジェクトを生成こそするものの、**式自体の評価結果は、オブジェクトそのものでなく、コンピューターのメモリ上のどこかに存在するオブジェクトの本体の場所を指し示す値になります**。
+実は、オブジェクトを生成する式`{ name: "田中", age: 18 }`は、オブジェクトを生成こそするものの、**式自体の評価結果は、オブジェクトそのものでなく、コンピューターのメモリ上のどこかに存在するオブジェクトの本体の場所を指し示す値になります**。
 
 言い換えれば、JavaScriptにおいて、**オブジェクトそのものは値ではありません**。JavaScriptの**値として有効なのは、オブジェクトへの参照**なのです。
 
 ![参照](./reference.drawio.svg)
 
-これを踏まえて先ほどのコードを見直してみましょう。JavaScriptで値として扱えるのは参照のみなので、1行目で `object1` に代入されるのは、その本体への参照です。
+これを踏まえて先ほどのコードを見直してみましょう。JavaScriptで値として扱えるのは参照のみなので、1行目で`object1`に代入されるのは、その本体への参照です。
 
-2行目では、変数 `object1` に代入されている参照が `object2` にコピーされます。これにより、同じオブジェクトを参照する変数が2つできます。よって、`object1.age` と `object2.age` は同じものになるのです。
+2行目では、変数`object1`に代入されている参照が`object2`にコピーされます。これにより、同じオブジェクトを参照する変数が2つできます。よって、`object1.age`と`object2.age`は同じものになるのです。
 
 :::tip
 上で説明したように、オブジェクトを変数に代入するとき、実際に代入されているのはオブジェクトの**参照**です。
 
-`const` による宣言で禁止されるのはその変数への再代入だけであり、オブジェクトのプロパティの変更は参照を変えないためこれにあたりません。
+`const`による宣言で禁止されるのはその変数への再代入だけであり、オブジェクトのプロパティの変更は参照を変えないためこれにあたりません。
 そのため、`const`で宣言しても、そのプロパティを書き換えることができてしまうので注意しましょう。
 
 ```js
@@ -80,9 +80,9 @@ document.write(tanaka.age); // 19 と表示されてしまう
 
 <ViewSource url={import.meta.url} path="_samples/object-mutated-by-function" />
 
-このコードは、[オブジェクト](/docs/trial-session/object/)の項で扱った演習でした。実はこのコードには問題があり、`tanaka` に対して `incrementAge` を適用すると、関数が適用された `tanaka` にも影響が及んでしまいます。これは、関数に渡される値はオブジェクトへの参照で、このオブジェクトは呼び出し元の変数が参照するものと同一のものだからです。
+このコードは、[オブジェクト](/docs/trial-session/object/)の項で扱った演習でした。実はこのコードには問題があり、`tanaka`に対して`incrementAge`を適用すると、関数が適用された`tanaka`にも影響が及んでしまいます。これは、関数に渡される値はオブジェクトへの参照で、このオブジェクトは呼び出し元の変数が参照するものと同一のものだからです。
 
-`incrementAge` 関数の実装を変更し、関数に渡したオブジェクトが書き換えられないようにしてください。
+`incrementAge`関数の実装を変更し、関数に渡したオブジェクトが書き換えられないようにしてください。
 
 :::tip
 
diff --git a/docs/2-browser-apps/03-class/index.mdx b/docs/2-browser-apps/03-class/index.mdx
index b2d658092..9eddf6f40 100644
--- a/docs/2-browser-apps/03-class/index.mdx
+++ b/docs/2-browser-apps/03-class/index.mdx
@@ -4,7 +4,7 @@ title: クラス
 
 ## <Term>クラス</Term>と<Term>インスタンス</Term>
 
-オブジェクトを使うと、複数の値をひとまとまりに扱うことができました。実世界においては、同じ<Term>プロパティ</Term> (属性) を持つ<Term>オブジェクト</Term>を多く扱う場合が多いです。例えば、学生を<Term>オブジェクト</Term>として表すことを考えてみましょう。学生には必ず名前と年齢という属性があるはずなので、ひとまず `name` と `age` を<Term>プロパティ</Term>に持つとしましょう。
+オブジェクトを使うと、複数の値をひとまとまりに扱うことができました。実世界においては、同じ<Term>プロパティ</Term> (属性) を持つ<Term>オブジェクト</Term>を多く扱う場合が多いです。例えば、学生を<Term>オブジェクト</Term>として表すことを考えてみましょう。学生には必ず名前と年齢という属性があるはずなので、ひとまず`name`と`age`を<Term>プロパティ</Term>に持つとしましょう。
 
 ```javascript
 const tanaka = {
@@ -15,12 +15,12 @@ const tanaka = {
 
 同じ属性を持つ<Term>オブジェクト</Term>を複数生成するときに役立つのが<Term>**クラス**</Term>です。<Term>クラス</Term>では、<Term>オブジェクト</Term>の<Term>プロパティ</Term>を予め設定しておくだけでなく、下の<Term>メソッド</Term>の節で説明するように、<Term>プロパティ</Term>を引数にもつような関数も設定しておくことができます。これにより、同じコードを何度も書く必要がなくなるというメリットがあります。<Term>クラス</Term>は、同じ<Term>プロパティ</Term>を持つ<Term>オブジェクト</Term>を統一的に扱うための仕組みであり、<Term>オブジェクト</Term>の設計図と言えます。
 
-次のコードでは、先ほど作った `tanaka` のように `name` や `age` という<Term>プロパティ</Term>を持つ<Term>オブジェクト</Term>の設計図として、<Term>クラス</Term> `Student` を定義しています。<Term>クラス</Term>では、この例の `age` <Term>プロパティ</Term>のように、デフォルトの値を設定することができます。
+次のコードでは、先ほど作った`tanaka`のように`name`や`age`という<Term>プロパティ</Term>を持つ<Term>オブジェクト</Term>の設計図として、<Term>クラス</Term>`Student`を定義しています。<Term>クラス</Term>では、この例の`age`<Term>プロパティ</Term>のように、デフォルトの値を設定することができます。
 
 ```javascript
 class Student {
   name; // nameプロパティを作成する
-  age = 18; // ageプロパティのデフォルト値として `18` を使用する
+  age = 18; // ageプロパティのデフォルト値として`18`を使用する
 }
 ```
 
@@ -31,7 +31,7 @@ class Student {
 
 :::
 
-`new` 演算子を<Term>クラス</Term>に対して適用すると、設計図に基づいて<Term>オブジェクト</Term>が作成されます。こうしてできた<Term>オブジェクト</Term>を、もとになった<Term>クラス</Term>の<Term>**インスタンス**</Term>と呼びます。今回の `age` <Term>プロパティ</Term>のように、<Term>クラス</Term>の<Term>プロパティ</Term>にデフォルトの値が設定されている場合、新たな値を代入するまではデフォルト値が入ります。もちろん、<Term>プロパティ</Term>に新たな値を代入してデフォルト値を書き換えることもできます。
+`new`演算子を<Term>クラス</Term>に対して適用すると、設計図に基づいて<Term>オブジェクト</Term>が作成されます。こうしてできた<Term>オブジェクト</Term>を、もとになった<Term>クラス</Term>の<Term>**インスタンス**</Term>と呼びます。今回の`age`<Term>プロパティ</Term>のように、<Term>クラス</Term>の<Term>プロパティ</Term>にデフォルトの値が設定されている場合、新たな値を代入するまではデフォルト値が入ります。もちろん、<Term>プロパティ</Term>に新たな値を代入してデフォルト値を書き換えることもできます。
 
 ```javascript
 const tanaka = new Student(); // Studentクラスをもとにオブジェクトを作成する
@@ -42,13 +42,13 @@ document.write(tanaka.age); // ageプロパティのデフォルト値は18
 
 ![クラスとインスタンス](./class-instance.png)
 
-:::tip[`undefined` という値]
+:::tip[`undefined`という値]
 
-上で定義した `Student` <Term>クラス</Term>には、デフォルト値の指定されていない<Term>プロパティ</Term> `name` が存在します。`new Student` をした直後の<Term>オブジェクト</Term>の `name` <Term>プロパティ</Term>の値はどうなっているのでしょうか。
+上で定義した`Student`<Term>クラス</Term>には、デフォルト値の指定されていない<Term>プロパティ</Term>`name`が存在します。`new Student`をした直後の<Term>オブジェクト</Term>の`name`<Term>プロパティ</Term>の値はどうなっているのでしょうか。
 
-実は、JavaScriptには、未定義であることを表す特殊な値 `undefined` が存在しています。これまで、JavaScriptの値には数値、文字列、論理値、<Term>オブジェクト</Term>があるとしてきましたが、これらとはまた別の値です。
+実は、JavaScriptには、未定義であることを表す特殊な値`undefined`が存在しています。これまで、JavaScriptの値には数値、文字列、論理値、<Term>オブジェクト</Term>があるとしてきましたが、これらとはまた別の値です。
 
-存在しない<Term>プロパティ</Term>の値、値を返さない関数の戻り値などは、すべて `undefined` となります。
+存在しない<Term>プロパティ</Term>の値、値を返さない関数の戻り値などは、すべて`undefined`となります。
 
 ```javascript
 const emptyObject = {};
@@ -62,7 +62,7 @@ document.write(emptyFunction()); // 値を返さない関数の戻り値はundef
 
 ### 確認問題
 
-`weightInTons` と `cost` をプロパティとして持ち、 `weightInTons` のデフォルト値が `1` であるクラス `Car` を作成し、 `cost` に好きな値を代入してみましょう。
+`weightInTons`と`cost`をプロパティとして持ち、`weightInTons`のデフォルト値が`1`であるクラス`Car`を作成し、`cost`に好きな値を代入してみましょう。
 
 <Answer title="Carクラスの定義">
 
@@ -86,9 +86,9 @@ document.write(
 
 ## <Term>メソッド</Term>
 
-同じ<Term>プロパティ</Term>を持つ<Term>オブジェクト</Term>に対しては、同じような処理を行うことが多いです。例えば、学生はたいてい最初の授業で自己紹介をします。そこで、`Student` <Term>クラス</Term>に、自己紹介をする関数 `introduceSelf` を設定してみましょう。
+同じ<Term>プロパティ</Term>を持つ<Term>オブジェクト</Term>に対しては、同じような処理を行うことが多いです。例えば、学生はたいてい最初の授業で自己紹介をします。そこで、`Student`<Term>クラス</Term>に、自己紹介をする関数`introduceSelf`を設定してみましょう。
 
-オブジェクトに対して定義されている関数を<Term>**メソッド**</Term>と呼びます。<Term>メソッド</Term>の定義は<Term>クラス</Term>定義の中で行われますが、関数と異なり、`function` キーワードを必要としません。
+オブジェクトに対して定義されている関数を<Term>**メソッド**</Term>と呼びます。<Term>メソッド</Term>の定義は<Term>クラス</Term>定義の中で行われますが、関数と異なり、`function`キーワードを必要としません。
 
 ```javascript
 class Student {
@@ -105,10 +105,10 @@ class Student {
 
 {/* prettier-ignore */}
 <Term>クラス</Term>自体は単なる設計図でしかないため、実際の<Term>オブジェクト</Term>が存在するわけではありません。
-そこで、<Term>メソッド</Term>内では、設計図から作成された<Term>インスタンス</Term>自身を指す特殊な変数 `this` が使用できます。
+そこで、<Term>メソッド</Term>内では、設計図から作成された<Term>インスタンス</Term>自身を指す特殊な変数`this`が使用できます。
 
 {/* prettier-ignore */}
-<Term>メソッド</Term>を使用するには、<Term>プロパティ</Term>へのアクセス時と同じく、<Term>インスタンス</Term>に対して `.`（ドット）記号を用います。
+<Term>メソッド</Term>を使用するには、<Term>プロパティ</Term>へのアクセス時と同じく、<Term>インスタンス</Term>に対して`.`（ドット）記号を用います。
 
 ```javascript
 const tanaka = new Student();
@@ -119,17 +119,17 @@ tanaka.age = 18;
 tanaka.introduceSelf();
 ```
 
-:::tip[メソッドやプロパティの表記と `prototype`]
+:::tip[メソッドやプロパティの表記と`prototype`]
 
-多くの言語で、<Term>クラス</Term> `Class` の<Term>メソッド</Term>や<Term>プロパティ</Term> `method` を、`#` 記号を用いて `Class#method` と表記します。本資料では他言語の慣習に習い、この表記を用いるものとします。たとえば、上の例で定義されている<Term>メソッド</Term>は `Student#introduceSelf` <Term>メソッド</Term>です。
+多くの言語で、<Term>クラス</Term>`Class`の<Term>メソッド</Term>や<Term>プロパティ</Term>`method`を、`#`記号を用いて`Class#method`と表記します。本資料では他言語の慣習に習い、この表記を用いるものとします。たとえば、上の例で定義されている<Term>メソッド</Term>は`Student#introduceSelf`<Term>メソッド</Term>です。
 
-ただし、JavaScriptにおいては `prototype` という語を用いて `Class.prototype.method` とされる場合があります。これはより厳密な表記です。外部の資料を読む場合は注意してください。
+ただし、JavaScriptにおいては`prototype`という語を用いて`Class.prototype.method`とされる場合があります。これはより厳密な表記です。外部の資料を読む場合は注意してください。
 
 :::
 
 ### 確認問題
 
-自分自身の年齢を1増やすメソッド `incrementAge` を定義して、今年の自己紹介と1年後の自己紹介を表示してみてください。田中さんの年齢は好きな値で構いません。
+自分自身の年齢を1増やすメソッド`incrementAge`を定義して、今年の自己紹介と1年後の自己紹介を表示してみてください。田中さんの年齢は好きな値で構いません。
 
 <Answer title="年齢を増やすメソッド">
 
@@ -161,7 +161,7 @@ tanaka.introduceSelf();
 ## <Term>コンストラクタ</Term>
 
 {/* prettier-ignore */}
-<Term>**コンストラクタ**</Term>は、<Term>インスタンス</Term>を作成するタイミング（`new` 演算子を<Term>クラス</Term>に適用するタイミング）で実行される特殊な<Term>メソッド</Term>です。<Term>コンストラクタ</Term>となる<Term>メソッド</Term>は `constructor` という名前で定義する必要があります。<Term>コンストラクタ</Term>を定義すると、`new Student` を実行して<Term>インスタンス</Term>を生成するときに<Term>プロパティ</Term>の設定も同時に行うことができます。
+<Term>**コンストラクタ**</Term>は、<Term>インスタンス</Term>を作成するタイミング（`new`演算子を<Term>クラス</Term>に適用するタイミング）で実行される特殊な<Term>メソッド</Term>です。<Term>コンストラクタ</Term>となる<Term>メソッド</Term>は`constructor`という名前で定義する必要があります。<Term>コンストラクタ</Term>を定義すると、`new Student`を実行して<Term>インスタンス</Term>を生成するときに<Term>プロパティ</Term>の設定も同時に行うことができます。
 
 ```javascript
 class Student {
@@ -223,7 +223,7 @@ suzuki.introduceSelf();
 sato.introduceSelf();
 ```
 
-オブジェクトの定義が長くなり、書くのも読むのも大変です。さらに人数が増えると、コードはどんどん長くなってしまいます。また、`introduceSelf` 関数の定義はほとんど同じコードが3回繰り返されています。
+オブジェクトの定義が長くなり、書くのも読むのも大変です。さらに人数が増えると、コードはどんどん長くなってしまいます。また、`introduceSelf`関数の定義はほとんど同じコードが3回繰り返されています。
 では、<Term>クラス</Term>と<Term>コンストラクタ</Term>を用いるとどうでしょうか。
 
 ```javascript
@@ -253,11 +253,11 @@ suzuki.introduceSelf();
 sato.introduceSelf();
 ```
 
-クラスの定義自体はやや長いものの、1つの<Term>オブジェクト</Term>の定義はたった1行で済みます。これなら<Term>オブジェクト</Term>の数が増えても安心です。`introduceSelf` 関数の定義を繰り返す必要もなくなり、読みやすく編集しやすいコードになりました。
+クラスの定義自体はやや長いものの、1つの<Term>オブジェクト</Term>の定義はたった1行で済みます。これなら<Term>オブジェクト</Term>の数が増えても安心です。`introduceSelf`関数の定義を繰り返す必要もなくなり、読みやすく編集しやすいコードになりました。
 
 ## 継承
 
-クラス定義の際に `extends` キーワードを用いて別の<Term>クラス</Term>を指定すると、指定された<Term>クラス</Term>の<Term>プロパティ</Term>と<Term>メソッド</Term>を全て受け継いだ新たな<Term>クラス</Term>を定義することができます。
+クラス定義の際に`extends`キーワードを用いて別の<Term>クラス</Term>を指定すると、指定された<Term>クラス</Term>の<Term>プロパティ</Term>と<Term>メソッド</Term>を全て受け継いだ新たな<Term>クラス</Term>を定義することができます。
 
 ```javascript
 class Student {
@@ -298,7 +298,7 @@ tanaka.introduceSelf(); // 私の名前は田中です。18歳です。ドイツ
 
 ### 確認問題
 
-`Student` クラスを継承して `SeniorStudent` クラスを作ってみましょう。`SeniorStudent` クラスのインスタンスは `researchQuestion` プロパティを持ち、`introduceSelf` メソッドを実行すると自分の名前を出力した後に自分の研究内容を紹介するようにしてみましょう。
+`Student`クラスを継承して`SeniorStudent`クラスを作ってみましょう。`SeniorStudent`クラスのインスタンスは`researchQuestion`プロパティを持ち、`introduceSelf`メソッドを実行すると自分の名前を出力した後に自分の研究内容を紹介するようにしてみましょう。
 
 <Answer title="高学年の学生の自己紹介">
 
@@ -345,30 +345,30 @@ tanaka.introduceSelf();
 
 JavaScriptでは、開発者が定義しなくても最初から使用可能な<Term>クラス</Term>が数多く用意されています。
 
-例えば、[`Date` クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)という、日付や時刻を扱うための<Term>クラス</Term>があります。
+例えば、[`Date`クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)という、日付や時刻を扱うための<Term>クラス</Term>があります。
 
 ```javascript
 const myBirthDay = new Date("2014-05-06"); // Dateクラスをインスタンス化
 document.write(myBirthDay.getFullYear()); // 2014
 ```
 
-`Date` <Term>クラス</Term>の<Term>コンストラクタ</Term>は、引数として日時を表す文字列をひとつとります。省略された場合には現在の日時を用います。
+`Date`<Term>クラス</Term>の<Term>コンストラクタ</Term>は、引数として日時を表す文字列をひとつとります。省略された場合には現在の日時を用います。
 
-`getFullYear` <Term>メソッド</Term>は、年となる数値を返す<Term>メソッド</Term>です。
+`getFullYear`<Term>メソッド</Term>は、年となる数値を返す<Term>メソッド</Term>です。
 
-また、DOMを利用して `div` 要素を作成または取得すると、[`HTMLDivElement` クラス](https://developer.mozilla.org/ja/docs/Web/API/HTMLDivElement)のインスタンスが得られます。
+また、DOMを利用して`div`要素を作成または取得すると、[`HTMLDivElement`クラス](https://developer.mozilla.org/ja/docs/Web/API/HTMLDivElement)のインスタンスが得られます。
 
-このクラスは [`HTMLElement` クラス](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement)を継承しており、 `HTMLElement` クラスは [`Element` クラス](https://developer.mozilla.org/ja/docs/Web/API/Element)を、`Element` クラスは [`Node` クラス](https://developer.mozilla.org/ja/docs/Web/API/Node)を継承しています。
+このクラスは[`HTMLElement`クラス](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement)を継承しており、`HTMLElement`クラスは[`Element`クラス](https://developer.mozilla.org/ja/docs/Web/API/Element)を、`Element`クラスは[`Node`クラス](https://developer.mozilla.org/ja/docs/Web/API/Node)を継承しています。
 
 ![HTMLDivElementの継承関係](./html-inheritance.drawio.svg)
 
 実は、[DOMの節](/docs/trial-session/dom/)で使用したtextContentプロパティは、このNodeクラスで定義されています。
 
-:::tip[`Object` クラス]
+:::tip[`Object`クラス]
 
-JavaScriptでは、**全ての<Term>オブジェクト</Term>は[`Object` クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object)を自動的に継承します**。このため、全ての<Term>オブジェクト</Term>は `Object` <Term>クラス</Term>の<Term>メソッド</Term>を使用することができます。また、プリミティブな値でも、<Term>メソッド</Term>を呼び出すと自動的に<Term>オブジェクト</Term>に変換されます。
+JavaScriptでは、**全ての<Term>オブジェクト</Term>は[`Object`クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object)を自動的に継承します**。このため、全ての<Term>オブジェクト</Term>は`Object`<Term>クラス</Term>の<Term>メソッド</Term>を使用することができます。また、プリミティブな値でも、<Term>メソッド</Term>を呼び出すと自動的に<Term>オブジェクト</Term>に変換されます。
 
-`toString` <Term>メソッド</Term>はその一つで、<Term>オブジェクト</Term>の文字列表記を返します。この<Term>メソッド</Term>はオーバーライド可能で、たとえば `Date` <Term>クラス</Term>ではこの<Term>メソッド</Term>がオーバーライドされています。
+`toString`<Term>メソッド</Term>はその一つで、<Term>オブジェクト</Term>の文字列表記を返します。この<Term>メソッド</Term>はオーバーライド可能で、たとえば`Date`<Term>クラス</Term>ではこの<Term>メソッド</Term>がオーバーライドされています。
 
 ```javascript
 // 通常のオブジェクトのtoStringメソッドは"[object Object]"を返す
@@ -393,12 +393,12 @@ document.write(false.toString()); // false
 
 ## 演習
 
-### `Date` クラス
+### `Date`クラス
 
-[`Date` クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)を使って、現在時刻を表示してみましょう。`Date` クラスのドキュメントを読んで、現在時刻を表示するのに必要なメソッドを探してみましょう。
+[`Date`クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)を使って、現在時刻を表示してみましょう。`Date`クラスのドキュメントを読んで、現在時刻を表示するのに必要なメソッドを探してみましょう。
 
 :::tip
-`Date` クラスには、時間、分、秒などを取得するためのメソッドが定義されています。
+`Date`クラスには、時間、分、秒などを取得するためのメソッドが定義されています。
 :::
 
 <Answer title="現在時刻の表示">
@@ -427,9 +427,9 @@ currentTime.textContent = getCurrentTime();
 
 ### 図形クラス
 
-色を表す `color` プロパティを持つ `Shape` クラスを実装してみましょう。
+色を表す`color`プロパティを持つ`Shape`クラスを実装してみましょう。
 
-そして、`Shape` クラスを継承し、面積を求める `calculateArea` メソッドを持つような、`Rectangle` (長方形) クラス、`Square` (正方形) クラス、`Circle` (円) クラスを実装してみましょう。また、この3つのクラスの間のどこで継承関係を作ればいいか考えてみましょう。
+そして、`Shape`クラスを継承し、面積を求める`calculateArea`メソッドを持つような、`Rectangle` (長方形) クラス、`Square` (正方形) クラス、`Circle` (円) クラスを実装してみましょう。また、この3つのクラスの間のどこで継承関係を作ればいいか考えてみましょう。
 
 <Answer title="図形クラス">
 
diff --git a/docs/2-browser-apps/04-anonymous-function/index.mdx b/docs/2-browser-apps/04-anonymous-function/index.mdx
index b218a5705..935113151 100644
--- a/docs/2-browser-apps/04-anonymous-function/index.mdx
+++ b/docs/2-browser-apps/04-anonymous-function/index.mdx
@@ -22,7 +22,7 @@ document.getElementById("greet-button").onclick = onGreetButtonClick;
 
 <ViewSource url={import.meta.url} path="_samples/normal-event-handler" />
 
-この場合、関数 `onGreetButtonClick` は、イベントハンドラとして登録されるためだけに利用されており、`onGreetButtonClick` という名前自体はあまり重要ではありません。こういった場合、関数オブジェクトの生成をするための式（関数式）を用いることができます。このようにして生成された関数は、名前を持たないため、**無名関数**と呼ばれます。
+この場合、関数`onGreetButtonClick`は、イベントハンドラとして登録されるためだけに利用されており、`onGreetButtonClick`という名前自体はあまり重要ではありません。こういった場合、関数オブジェクトの生成をするための式（関数式）を用いることができます。このようにして生成された関数は、名前を持たないため、**無名関数**と呼ばれます。
 
 先ほどのプログラムを関数式を用いて書き換えると、次のようになります。
 
@@ -34,7 +34,7 @@ document.getElementById("greet-button").onclick = () => {
 
 <ViewSource url={import.meta.url} path="_samples/using-anonymous-function" />
 
-JavaScriptにおける関数式の構文は、次のとおりです。`=>` の記号が特徴的な構文となっています。
+JavaScriptにおける関数式の構文は、次のとおりです。`=>`の記号が特徴的な構文となっています。
 
 {/* prettier-ignore */}
 ```javascript
@@ -45,7 +45,7 @@ JavaScriptにおける関数式の構文は、次のとおりです。`=>` の
 
 :::tip[無名関数を用いて関数定義を書き換える]
 
-通常の関数定義の構文は、ほとんど関数式を使用して書き換えることができます。次のプログラムにおいて、`add1` と `add2` はほとんど等価なものとみなすことができます。
+通常の関数定義の構文は、ほとんど関数式を使用して書き換えることができます。次のプログラムにおいて、`add1`と`add2`はほとんど等価なものとみなすことができます。
 
 ```javascript
 function add1(a, b) {
@@ -61,7 +61,7 @@ const add2 = (a, b) => {
 
 :::tip[アロー関数]
 
-この項で扱った無名関数式を、`=>` 記号が矢のように見えることから、<Term>**アロー関数**</Term>と呼ぶことがあります。JavaScriptには、アロー関数の他にもう一つ、無名関数を記述する方法があります。
+この項で扱った無名関数式を、`=>`記号が矢のように見えることから、<Term>**アロー関数**</Term>と呼ぶことがあります。JavaScriptには、アロー関数の他にもう一つ、無名関数を記述する方法があります。
 
 ```javascript
 const add3 = function (a, b) {
@@ -75,7 +75,7 @@ const add3 = function (a, b) {
 
 ## 無名関数を用いると便利な関数
 
-[`Array#map` メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)は、引数として関数をひとつとり、配列の各要素に適用した上で、その戻り値からなる新しい配列を返します。
+[`Array#map`メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)は、引数として関数をひとつとり、配列の各要素に適用した上で、その戻り値からなる新しい配列を返します。
 
 このように、他の関数の引数として呼び出される関数のことを<Term>**コールバック関数**</Term>と呼びます。
 
@@ -90,7 +90,7 @@ document.write(pricesWithTax); // 120,240,360,480,600
 
 ## アロー関数の省略形
 
-アロー関数は、内部の処理が `return` 文のみの場合、波括弧と `return` キーワードを省略して式のみを記述することもできます。前項のサンプルプログラムは、次のように省略可能です。
+アロー関数は、内部の処理が`return`文のみの場合、波括弧と`return`キーワードを省略して式のみを記述することもできます。前項のサンプルプログラムは、次のように省略可能です。
 
 ```javascript
 const pricesWithTax = pricesWithoutTax.map((price) => price * (1 + taxRate));
@@ -100,7 +100,7 @@ const pricesWithTax = pricesWithoutTax.map((price) => price * (1 + taxRate));
 
 ### 問題1
 
-先ほどの[`Array#map` メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)を用いてみましょう。`students` 変数に格納されている名前を箇条書きにしてください。
+先ほどの[`Array#map`メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)を用いてみましょう。`students`変数に格納されている名前を箇条書きにしてください。
 
 ```javascript
 const students = ["Hazel", "Dorian", "Scarlett", "Daisy"];
@@ -109,9 +109,9 @@ const students = ["Hazel", "Dorian", "Scarlett", "Daisy"];
 
 :::info[ヒント]
 
-- `innerHTML` プロパティにより、HTML要素を取得・変更できます。
-- 箇条書きには `ul` タグや `li` タグを使用します。
-- `join` メソッドを配列要素を指定された文字列で連結するのに使います。
+- `innerHTML`プロパティにより、HTML要素を取得・変更できます。
+- 箇条書きには`ul`タグや`li`タグを使用します。
+- `join`メソッドを配列要素を指定された文字列で連結するのに使います。
 
 :::
 
@@ -131,7 +131,7 @@ studentList.innerHTML = students
 
 ### 問題2
 
-`scores` 変数には、各必修科目の点数が格納されているとします。全ての要素が50点以上であることを確認するには、何というメソッドを使うのが適切か調べてみてください。また、実際にそのメソッドを用いて点数を確認してみてください。
+`scores`変数には、各必修科目の点数が格納されているとします。全ての要素が50点以上であることを確認するには、何というメソッドを使うのが適切か調べてみてください。また、実際にそのメソッドを用いて点数を確認してみてください。
 
 ```javascript
 const scores = [90, 65, 70, 55, 80];
@@ -148,7 +148,7 @@ if (/* すべての点数が50点以上なら */) {
 
 <Answer title="進級可能？">
 
-`Array#every` メソッドを使うと、配列の全要素が指定された関数でテストできます
+`Array#every`メソッドを使うと、配列の全要素が指定された関数でテストできます
 
 ```javascript
 const scores = [90, 65, 70, 55, 80];
@@ -163,7 +163,7 @@ if (scores.every((score) => score >= 50)) {
 
 ### 問題3 (発展)
 
-[`Array#reduce` メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)は、`Array` クラスのメソッドの中でも特に使い方の難しいメソッドです。ドキュメントをよく読み、このメソッドを用いて配列の最小値を求めてみましょう。
+[`Array#reduce`メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)は、`Array`クラスのメソッドの中でも特に使い方の難しいメソッドです。ドキュメントをよく読み、このメソッドを用いて配列の最小値を求めてみましょう。
 
 ```javascript
 const scores = [90, 65, 70, 55, 80];
diff --git a/docs/2-browser-apps/05-css-arrangement/index.mdx b/docs/2-browser-apps/05-css-arrangement/index.mdx
index a959f16d8..d1fe96ae9 100644
--- a/docs/2-browser-apps/05-css-arrangement/index.mdx
+++ b/docs/2-browser-apps/05-css-arrangement/index.mdx
@@ -19,7 +19,7 @@ HTMLの要素はすべて、一定の高さと幅を持った四角形だと考
 
 の4重構造になっています。
 
-[「CSS」のページの演習](https://learn.utcode.net/docs/trial-session/css/#%E8%AA%B2%E9%A1%8C-%E6%99%82%E9%96%93%E3%81%8C%E4%BD%99%E3%81%A3%E3%81%9F%E5%A0%B4%E5%90%88)を例に構造を見てみましょう（構造がわかりやすいよう、`border` を `10px` に変更しています）。
+[「CSS」のページの演習](https://learn.utcode.net/docs/trial-session/css/#%E8%AA%B2%E9%A1%8C-%E6%99%82%E9%96%93%E3%81%8C%E4%BD%99%E3%81%A3%E3%81%9F%E5%A0%B4%E5%90%88)を例に構造を見てみましょう（構造がわかりやすいよう、`border`を`10px`に変更しています）。
 
 ```html title="index.html"
 <!doctype html>
@@ -52,8 +52,8 @@ HTMLの要素はすべて、一定の高さと幅を持った四角形だと考
 
 4重に色分けされた構造が見えます。
 
-`content` は主に `width` や `height` などのプロパティを、
-`padding`, `border`, `margin` はそれぞれ主に `padding`, `border`, `margin` などのプロパティを操作することで制御できます。
+`content`は主に`width`や`height`などのプロパティを、
+`padding`, `border`, `margin`はそれぞれ主に`padding`, `border`, `margin`などのプロパティを操作することで制御できます。
 
 `width`, `height`, `padding`, `border`, `margin`の値を変えると開発者ツールの表示がどう変わるか試してみましょう。
 
@@ -67,9 +67,9 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
 
 そのため、ブロックレベル要素を複数並べて書くと、上から下へと配置されていきます。
 
-ブロックレベル要素には `div` 要素や `p` 要素、`table` 要素、`ul` 要素などがあります。
+ブロックレベル要素には`div`要素や`p`要素、`table`要素、`ul`要素などがあります。
 
-以下ではブロックレベル要素である `div` 要素を3つ並べています。
+以下ではブロックレベル要素である`div`要素を3つ並べています。
 
 ```html title="index.html"
 <body>
@@ -103,9 +103,9 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
 
 そのため、インライン要素を複数並べて書くと、左から右へと配置されていきます。
 
-インライン要素には `span` 要素や `a` 要素、`img` 要素や `input` 要素があります。
+インライン要素には`span`要素や`a`要素、`img`要素や`input`要素があります。
 
-以下ではインライン要素である `span` 要素を3つ並べています。
+以下ではインライン要素である`span`要素を3つ並べています。
 
 ```html title="index.html"
 <body>
@@ -121,13 +121,13 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
 
 ブロックレベル要素の中にはブロックレベル要素もインライン要素も配置することができますが、インライン要素の中にブロックレベル要素を配置することはできません。
 
-また、インライン要素の場合、`width` や `height` は適用されません。
+また、インライン要素の場合、`width`や`height`は適用されません。
 
 ### 演習
 
-`display` プロパティを操作することで要素の挙動を変更することができます。
+`display`プロパティを操作することで要素の挙動を変更することができます。
 
-上記のコードで、ブロックレベル要素である `div` 要素に `display: inline` を、インライン要素である `span` 要素に `display: block` を指定してみると表示はどう変わるか、試してみましょう。
+上記のコードで、ブロックレベル要素である`div`要素に`display: inline`を、インライン要素である`span`要素に`display: block`を指定してみると表示はどう変わるか、試してみましょう。
 
 <ViewSource url={import.meta.url} path="_samples/display" />
 
@@ -135,9 +135,9 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
 
 フレックスボックスを利用すると、要素を横や縦に並べたり、間隔を均等に取って並べたり、順番を指定して並べたりといった柔軟な配置を簡単に行うことができます。
 
-フレックスボックスを利用するには、配置したい要素の**親要素**に `display: flex` を適用します。
+フレックスボックスを利用するには、配置したい要素の**親要素**に`display: flex`を適用します。
 
-以下のように、`box1`, `box2`, `box3` という3つの `div` 要素が `wrapper` という `div` 要素の中に並んでいる状態を考えましょう。
+以下のように、`box1`, `box2`, `box3`という3つの`div`要素が`wrapper`という`div`要素の中に並んでいる状態を考えましょう。
 
 ```html title="index.html"
 <body>
@@ -149,11 +149,11 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
 </body>
 ```
 
-このままだとブロックレベル要素である `div` 要素が並んでいるだけなので、`box1`, `box2`, `box3` は縦に並んで表示されます。
+このままだとブロックレベル要素である`div`要素が並んでいるだけなので、`box1`, `box2`, `box3`は縦に並んで表示されます。
 
 ![ブロックレベル要素は縦に並んで表示される](./three-blocks.png)
 
-`box1`, `box2`, `box3` の親要素である `wrapper` に `display: flex` を指定すると、要素は横並びに表示されます。
+`box1`, `box2`, `box3`の親要素である`wrapper`に`display: flex`を指定すると、要素は横並びに表示されます。
 
 ```css title="style.css"
 .wrapper {
@@ -167,7 +167,7 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
 
 フレックスボックスを使用すると複雑な配置も簡単に実現できます。
 
-一つの例として、`justify-content: space-around` を `wrapper` に指定してみると、要素の周囲に同じだけの間隔が空きます。
+一つの例として、`justify-content: space-around`を`wrapper`に指定してみると、要素の周囲に同じだけの間隔が空きます。
 
 ```css title="style.css"
 .wrapper {
@@ -186,9 +186,9 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
 
 1次元で要素をレイアウトしていくフレックスボックスに対して、グリッドには行と列の2次元で要素をレイアウトする発想があります。
 
-グリッドを利用するには、配置したい要素の**親要素**に `display: grid` を適用し、`grid-template-columns` プロパティで列の幅を、`grid-template-rows` プロパティで行の幅を指定します。
+グリッドを利用するには、配置したい要素の**親要素**に`display: grid`を適用し、`grid-template-columns`プロパティで列の幅を、`grid-template-rows`プロパティで行の幅を指定します。
 
-`grid-column` や `grid-row` を使うと、開始ラインや終了ラインを指定して項目を配置することができます。
+`grid-column`や`grid-row`を使うと、開始ラインや終了ラインを指定して項目を配置することができます。
 
 以下のコードを試してみましょう。
 
@@ -237,11 +237,11 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
 
 ## position
 
-`position` プロパティを操作すると、要素の位置指定の基準を変更することができます。
+`position`プロパティを操作すると、要素の位置指定の基準を変更することができます。
 
-`position: static` : デフォルトの状態です。
+`position: static`: デフォルトの状態です。
 
-`position: relative` : 要素の本来の位置から相対的にどれだけずらすかを指定することができます。
+`position: relative`: 要素の本来の位置から相対的にどれだけずらすかを指定することができます。
 
 ```html title="index.html"
 <body>
@@ -269,9 +269,9 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
 
 ![position: relativeによる調整](./position-relative.png)
 
-`position: absolute` : 周囲の要素を無視し、ページ内で絶対的にどの位置にあるかを指定することができます。
+`position: absolute`: 周囲の要素を無視し、ページ内で絶対的にどの位置にあるかを指定することができます。
 
-上のコードの `position: relative` を `position: absolute` に変えてみましょう。
+上のコードの`position: relative`を`position: absolute`に変えてみましょう。
 
 ```css title="style.css"
 .box2 {
@@ -288,9 +288,9 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
 
 ![position: absoluteによる調整](./position-absolute.png)
 
-`position: fixed` : `absolute`に似ていますが、画面をスクロールしても要素は同じ場所に留まります。
+`position: fixed`: `absolute`に似ていますが、画面をスクロールしても要素は同じ場所に留まります。
 
-上のコードの `position: relative` を `position: fixed` に変えてみましょう。
+上のコードの`position: relative`を`position: fixed`に変えてみましょう。
 
 ```css title="style.css"
 .box2 {
@@ -305,19 +305,19 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
 
 <ViewSource url={import.meta.url} path="_samples/fixed" />
 
-以下のように、`absolute` の場合はスクロールすると `box2` も動いていきましたが、
+以下のように、`absolute`の場合はスクロールすると`box2`も動いていきましたが、
 
 <video src={absoluteScroll} controls />
 
-`fixed` の場合はスクロールしても `box2`は同じ場所に留まっています。
+`fixed`の場合はスクロールしても`box2`は同じ場所に留まっています。
 
 <video src={fixedScroll} controls />
 
 ### 親要素を基準にして子要素の位置を指定する
 
-`position` プロパティを使うと、親要素を基準にして子要素の位置を指定することができます。
+`position`プロパティを使うと、親要素を基準にして子要素の位置を指定することができます。
 
-そのような場合、親要素に `relative` を、子要素に `absolute` を指定します。
+そのような場合、親要素に`relative`を、子要素に`absolute`を指定します。
 
 ```html title="index.html"
 <body>
@@ -348,7 +348,7 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
 
 ![親要素にrelativeを、子要素にabsoluteを指定した場合](./relative-absolute-before.png)
 
-上のコードの `box1` に `margin-left: 200px` を指定して位置をずらしてみましょう。
+上のコードの`box1`に`margin-left: 200px`を指定して位置をずらしてみましょう。
 
 ```css title="style.css"
 .box1 {
@@ -362,7 +362,7 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
 
 ![親要素にrelativeを、子要素にabsoluteを指定し位置をずらした場合](./relative-absolute-after.png)
 
-`box1` の位置が変わっても、`box2` の `box1` に対する位置は変化していません。
+`box1`の位置が変わっても、`box2`の`box1`に対する位置は変化していません。
 
 <ViewSource url={import.meta.url} path="_samples/relative-absolute" />
 
@@ -376,13 +376,13 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
 
 画面サイズによって異なるスタイルを適用させたい際にはメディアクエリを使います。
 
-スマートフォン等でもサイトをデバイス本来の画面サイズで表示するために、`head` 要素の中に以下を記述しましょう。
+スマートフォン等でもサイトをデバイス本来の画面サイズで表示するために、`head`要素の中に以下を記述しましょう。
 
 ```html title="index.html"
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 ```
 
-メディアクエリの基本的な形は `@media (条件) {条件が真の場合に適用されるスタイル}` のようになります。
+メディアクエリの基本的な形は`@media (条件) {条件が真の場合に適用されるスタイル}`のようになります。
 
 以下の例を試してみましょう。
 
@@ -441,9 +441,9 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
 
 <video src={percentCss} controls />
 
-### `max-width` , `min-width`
+### `max-width`, `min-width`
 
-`max-width` , `min-width` を使うと、要素の幅の上限と下限を指定することができます。
+`max-width`, `min-width`を使うと、要素の幅の上限と下限を指定することができます。
 
 以下の例を試してみましょう。
 
diff --git a/docs/2-browser-apps/06-project/index.mdx b/docs/2-browser-apps/06-project/index.mdx
index 44abc3d75..608f6286f 100644
--- a/docs/2-browser-apps/06-project/index.mdx
+++ b/docs/2-browser-apps/06-project/index.mdx
@@ -29,7 +29,7 @@ import todoVideo from "./todo.mp4";
 ### ステップ1: ToDoを追加する
 
 ひとまずToDoの一覧、ToDoの入力欄、ToDoの追加ボタンが必要です。
-`ul` 要素と `input` 要素と `button` 要素を使ってみましょう。
+`ul`要素と`input`要素と`button`要素を使ってみましょう。
 
 ```html title="index.html"
 <!doctype html>
@@ -59,16 +59,16 @@ addButton.onclick = () => {
 };
 ```
 
-このとき、箇条書きの項目として新たに `li` 要素を追加する必要があります。
-DOMの章で扱ったように、`document.createElement` 関数を使うと新しい要素を作成できます。
-また、`Node#appendChild` メソッドを用いることで既存の要素内に子要素を追加することができます。
+このとき、箇条書きの項目として新たに`li`要素を追加する必要があります。
+DOMの章で扱ったように、`document.createElement`関数を使うと新しい要素を作成できます。
+また、`Node#appendChild`メソッドを用いることで既存の要素内に子要素を追加することができます。
 
 ```javascript
 const li = document.createElement("li");
 todoList.appendChild(li);
 ```
 
-また、`HTMLInputElement#value` プロパティから、DOMに対応するinput要素の入力欄への入力内容を取得できます。
+また、`HTMLInputElement#value`プロパティから、DOMに対応するinput要素の入力欄への入力内容を取得できます。
 
 ```js
 const todoText = document.createElement("span");
@@ -116,9 +116,9 @@ addButton.onclick = () => {
 ### ステップ2: ToDoを削除する
 
 次に削除ボタンを追加します。
-`document.createElement` 関数で `button` 要素を生成し削除ボタンにしてから `Node#appendChild` メソッドで要素内に追加しましょう。
+`document.createElement`関数で`button`要素を生成し削除ボタンにしてから`Node#appendChild`メソッドで要素内に追加しましょう。
 
-削除ボタンを押すと `li` 要素が1つ消える機能を実装するためには、ある要素から子要素を取り除く [`Node#removeChild` メソッド](https://developer.mozilla.org/ja/docs/Web/API/Node/removeChild)を使います。
+削除ボタンを押すと`li`要素が1つ消える機能を実装するためには、ある要素から子要素を取り除く [`Node#removeChild`メソッド](https://developer.mozilla.org/ja/docs/Web/API/Node/removeChild)を使います。
 
 ```javascript
 // todoListからtodoItemを取り除く
@@ -173,7 +173,7 @@ addButton.onclick = () => {
 編集ボタンをつけてみましょう。
 
 編集ボタンが押されたときに、ユーザーにテキストを入力するように促すダイアログを表示します。
-[`prompt` 関数](https://developer.mozilla.org/ja/docs/Web/API/Window/prompt)を使い、ユーザーに入力を求めることができます。
+[`prompt`関数](https://developer.mozilla.org/ja/docs/Web/API/Window/prompt)を使い、ユーザーに入力を求めることができます。
 
 ```javascript
 todoText.textContent = prompt("新しい内容を入力してください。"); // ユーザーに入力を求める
@@ -230,10 +230,10 @@ addButton.onclick = () => {
 
 ### ステップ4 (発展) : 空のToDoを入れさせない
 
-[`HTMLButtonElement#disabled` プロパティ](https://developer.mozilla.org/ja/docs/Web/API/HTMLButtonElement/disabled)が `true` の時、ボタンはクリックを受け付けなくなります。
-入力欄が空の時にこのプロパティを `true` に、それ以外の時は `false` にすることによって空のタスクの追加を防ぐことができます。
+[`HTMLButtonElement#disabled`プロパティ](https://developer.mozilla.org/ja/docs/Web/API/HTMLButtonElement/disabled)が`true`の時、ボタンはクリックを受け付けなくなります。
+入力欄が空の時にこのプロパティを`true`に、それ以外の時は`false`にすることによって空のタスクの追加を防ぐことができます。
 この時、入力欄に何かキー入力があるたびに入力欄が空かどうかを判定する必要があります。
-[`HTMLElement#oninput` プロパティ](https://html.spec.whatwg.org/multipage/webappapis.html#handler-oninput)にイベントハンドラを登録すると、ユーザーによって要素に入力されたときに実行される関数を定めることができます。
+[`HTMLElement#oninput`プロパティ](https://html.spec.whatwg.org/multipage/webappapis.html#handler-oninput)にイベントハンドラを登録すると、ユーザーによって要素に入力されたときに実行される関数を定めることができます。
 
 ```javascript
 todoInput.oninput = () => {
diff --git a/docs/3-web-servers/01-wsl-setup/index.mdx b/docs/3-web-servers/01-wsl-setup/index.mdx
index ded76de07..ab23ad694 100644
--- a/docs/3-web-servers/01-wsl-setup/index.mdx
+++ b/docs/3-web-servers/01-wsl-setup/index.mdx
@@ -16,17 +16,17 @@ WSLのインストールは、10分程度で終わる簡単な作業です。下
 
 <ExternalVideoPlayer src="https://www.youtube.com/embed/aRf7NYZpUa0" />
 
-まずは `ターミナル` アプリを管理者として実行します。
+まずは`ターミナル`アプリを管理者として実行します。
 
 :::tip[管理者として実行]
 
-`管理者として実行` メニューを使用してアプリを起動することで、アプリは強い権限を行使できるようになります。WSLのインストールにはこのような強い権限が必要なので、起動時に特殊な操作が必要になります。
+`管理者として実行`メニューを使用してアプリを起動することで、アプリは強い権限を行使できるようになります。WSLのインストールにはこのような強い権限が必要なので、起動時に特殊な操作が必要になります。
 
 :::
 
 ![管理者として実行](run-as-administrator.png)
 
-続いて、`wsl --install` コマンドを実行します。これにより、WSLが全自動でインストールされます。
+続いて、`wsl --install`コマンドを実行します。これにより、WSLが全自動でインストールされます。
 
 ![コマンドを打つ](type-wsl-install.png)
 
@@ -34,12 +34,12 @@ WSLのインストールは、10分程度で終わる簡単な作業です。下
 
 - `Enter new UNIX username`: WSLは、普段使っているWindowsとは別のコンピューターのように振る舞います。
   ここで指定する名前は何でも構いませんが、**英小文字のみで構成された文字列**とすることを強く推奨します。
-- `New password` と `Retype new password` では、上で指定したユーザーのパスワードを入力します。
+- `New password`と`Retype new password`では、上で指定したユーザーのパスワードを入力します。
   **入力しても画面に変化はありません**が、入力自体は行われているので気にせず入力しましょう。
 
 ![ユーザーを作成する](type-password.png)
 
-画面に `$` 記号が表示された状態で止まったら完了です。ウィンドウを閉じても問題ありません。
+画面に`$`記号が表示された状態で止まったら完了です。ウィンドウを閉じても問題ありません。
 
 ![完成](completed.png)
 
@@ -49,23 +49,23 @@ VS CodeのWSL拡張機能を用いると、VS CodeをWSL上で動かすことが
 
 ![WSL拡張機能のインストール](./install-wsl-extension.png)
 
-拡張機能をインストールすると、左下に緑色のボタンが出現します。クリックすると画面上部からメニューが出現するので、`Connect to WSL` を選択しましょう。
+拡張機能をインストールすると、左下に緑色のボタンが出現します。クリックすると画面上部からメニューが出現するので、`Connect to WSL`を選択しましょう。
 
 ![WSLに接続](./connect-to-wsl.png)
 
-画面左下の緑色の部分に `WSL: Ubuntu` と表示されたら成功です。
+画面左下の緑色の部分に`WSL: Ubuntu`と表示されたら成功です。
 
 ![接続完了](./connected.png)
 
 ## WSLの基本的な使い方
 
-WSLを使用するには、ターミナルで `wsl` コマンドを実行します。`PS` から始まる行に入力したコマンドは通常のWindows環境で実行されますが、スクリーンショット右側のように、一度 `wsl` コマンドを実行すると、それ以降の入力はLinux上で実行されます。
+WSLを使用するには、ターミナルで`wsl`コマンドを実行します。`PS`から始まる行に入力したコマンドは通常のWindows環境で実行されますが、スクリーンショット右側のように、一度`wsl`コマンドを実行すると、それ以降の入力はLinux上で実行されます。
 
-また、WSLで `exit` コマンドを実行すると、Windows環境に戻ることができます。
+また、WSLで`exit`コマンドを実行すると、Windows環境に戻ることができます。
 
 ![Linuxに入る](./go-into-linux.png)
 
-WSLは、Windowsから独立した別のコンピューターのように振舞います。WSL上にあるファイルをWindows側から確認するには、エクスプローラーのサイドパネルに表示されている `Linux` をクリックします。
+WSLは、Windowsから独立した別のコンピューターのように振舞います。WSL上にあるファイルをWindows側から確認するには、エクスプローラーのサイドパネルに表示されている`Linux`をクリックします。
 
 ![WSL側のファイルをWindowsのエクスプローラーから表示する](./show-linux-files.png)
 
@@ -74,7 +74,7 @@ WSLは、Windowsから独立した別のコンピューターのように振舞
 Windows 10では上記のようにしてもWSL上にあるファイルを確認することができません。
 代わりに以下のようにします。
 
-エクスプローラーのアドレスバーに `¥¥wsl$` と入力して、Enterキーを押します。
+エクスプローラーのアドレスバーに`¥¥wsl$`と入力して、Enterキーを押します。
 ![WSL側のファイルをWindowsのエクスプローラーから表示する(Windows 10)](./show-linux-files-windows10.png)
 
 :::
diff --git a/docs/3-web-servers/02-linux-commands/index.mdx b/docs/3-web-servers/02-linux-commands/index.mdx
index 077ddeb24..6155574b9 100644
--- a/docs/3-web-servers/02-linux-commands/index.mdx
+++ b/docs/3-web-servers/02-linux-commands/index.mdx
@@ -9,7 +9,7 @@ import commandsAnswerVideo from "./commands-answer.mp4";
 **ターミナル**は、文字を用いてコンピューターと会話するためのソフトウェアです。
 macOSだと標準搭載のターミナルアプリが、Windowsだと[Windows Terminalアプリ](https://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701)が利用できますが、VS Code内蔵のターミナルもなかなか便利です。
 
-VS Code内蔵のターミナルを起動させるには、メニューの `Terminal` から `New Terminal` をクリックします。
+VS Code内蔵のターミナルを起動させるには、メニューの`Terminal`から`New Terminal`をクリックします。
 
 ![新しいターミナルを開く](./open-new-terminal.png)
 
@@ -39,29 +39,29 @@ WSL拡張機能を用いてWSLに接続されている場合、起動するタ
 ## パス
 
 LinuxやmacOSのファイルシステムは、**ルートディレクトリ**と呼ばれる特殊なディレクトリを頂点とする木構造で表現され、この木構造の中の特定の要素を一意に表現するための表記を**パス**と呼びます。
-パスの区切り文字は `/` で、それが単体で利用された際はルートディレクトリを表します。
-例えば、ルートディレクトリの中の `home` ディレクトリの中の `sato` という名前のディレクトリは `/home/sato` という形で表現されます。
+パスの区切り文字は`/`で、それが単体で利用された際はルートディレクトリを表します。
+例えば、ルートディレクトリの中の`home`ディレクトリの中の`sato`という名前のディレクトリは`/home/sato`という形で表現されます。
 
 ![Linuxのファイルシステム](./linux-file-system.drawio.svg)
 
 現在作業対象となっているディレクトリを**カレントディレクトリ**と呼びます。
 すべてのファイルやディレクトリは、ルートディレクトリを基準とした**絶対パス**で表される他、カレントディレクトリからの**相対パス**で表すこともできます。
-例えば、カレントディレクトリが `/home/tanaka` のとき、`/home/tanaka/Documents/xxx.txt` は相対パスで `Documents/xxx.txt` と表されます。
+例えば、カレントディレクトリが`/home/tanaka`のとき、`/home/tanaka/Documents/xxx.txt`は相対パスで`Documents/xxx.txt`と表されます。
 
 Ubuntuの場合は、標準状態でカレントディレクトリがターミナル上に表示される場合が多いです。
-以下の例の場合は `~/projects/sample` がカレントディレクトリです。
+以下の例の場合は`~/projects/sample`がカレントディレクトリです。
 
 ![カレントディレクトリの確認](./check-current-directory.png)
 
-パスを表現するとき、カレントディレクトリは `.`、親ディレクトリは `..` という記号が利用できます。
+パスを表現するとき、カレントディレクトリは`.`、親ディレクトリは`..`という記号が利用できます。
 次の表は、これらの記号を用いて相対パスを表した例です。
 
-| カレントディレクトリ | 目標のディレクトリ    | 相対パス                         |
-| -------------------- | --------------------- | -------------------------------- |
-| `/foo/bar`           | `/foo/bar/baz`        | `baz` 又は `./baz`               |
-| `/foo/bar`           | `/foo/bar/baz/foobar` | `baz/foobar` 又は `./baz/foobar` |
-| `/foo/bar/baz`       | `/foo/bar`            | `..` 又は `./..`                 |
-| `/foo/bar/baz`       | `/foo`                | `../..` 又は `./../..`           |
+| カレントディレクトリ | 目標のディレクトリ    | 相対パス                       |
+| -------------------- | --------------------- | ------------------------------ |
+| `/foo/bar`           | `/foo/bar/baz`        | `baz`又は`./baz`               |
+| `/foo/bar`           | `/foo/bar/baz/foobar` | `baz/foobar`又は`./baz/foobar` |
+| `/foo/bar/baz`       | `/foo/bar`            | `..`又は`./..`                 |
+| `/foo/bar/baz`       | `/foo`                | `../..`又は`./../..`           |
 
 ## コマンド
 
@@ -80,7 +80,7 @@ Ubuntuの場合は、標準状態でカレントディレクトリがターミ
 | `mv [移動前] [移動先]`     | ファイルやディレクトリの移動・名前の変更 |
 | `cp [コピー元] [コピー先]` | ファイルのコピー                         |
 
-他にも `curl` や `cat` などの便利なコマンドが多数あります。気になる方は調べてみましょう。
+他にも`curl`や`cat`などの便利なコマンドが多数あります。気になる方は調べてみましょう。
 
 ## 演習
 
@@ -97,7 +97,7 @@ secret
 
 <Answer>
 
-カレントディレクトリを親ディレクトリに移動する場合には `cd ..` とするのがポイントです。
+カレントディレクトリを親ディレクトリに移動する場合には`cd ..`とするのがポイントです。
 
 <video src={commandsAnswerVideo} controls />
 
diff --git a/docs/3-web-servers/03-node-js/index.mdx b/docs/3-web-servers/03-node-js/index.mdx
index 6755cf242..14e49e478 100644
--- a/docs/3-web-servers/03-node-js/index.mdx
+++ b/docs/3-web-servers/03-node-js/index.mdx
@@ -22,7 +22,7 @@ xcode-select --install
 
 <video src={installCommandLineDeveloperToolsVideo} controls />
 
-まずは、[nvmのウェブサイトの `Install & Update Script` セクション](https://github.com/nvm-sh/nvm#install--update-script)に書かれているスクリプトを実行しましょう。2024年5月現在では、次の通りです。
+まずは、[nvmのウェブサイトの`Install & Update Script`セクション](https://github.com/nvm-sh/nvm#install--update-script)に書かれているスクリプトを実行しましょう。2024年5月現在では、次の通りです。
 
 ```shell
 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
@@ -62,7 +62,7 @@ v20.12.2
 
 <Tabs groupId="os">
   <TabItem value="mac" label="macOS">
-    macOSの場合、インストールコマンドを実行してターミナルを再起動しても、`nvm` が使用できない場合があります。その場合、次のコマンドを実行してみてください。
+    macOSの場合、インストールコマンドを実行してターミナルを再起動しても、`nvm`が使用できない場合があります。その場合、次のコマンドを実行してみてください。
 
     ```shell
     touch ~/.zshrc
@@ -81,33 +81,33 @@ v20.12.2
 
 ## Node.jsでHello World
 
-まずは、新しいフォルダを作成し、Visual Studio Codeで開きます。macOSの場合は[はじめてのWeb開発](/docs/trial-session/get-started/)で作成した `projects` フォルダの中に別のフォルダを作れば問題ありませんが、Windowsの場合はWSL上にフォルダを作成します。
+まずは、新しいフォルダを作成し、Visual Studio Codeで開きます。macOSの場合は[はじめてのWeb開発](/docs/trial-session/get-started/)で作成した`projects`フォルダの中に別のフォルダを作れば問題ありませんが、Windowsの場合はWSL上にフォルダを作成します。
 
 :::info[WSL上にプロジェクトフォルダを作る]
 
-WindowsのWSLでは、エクスプローラーのサイドパネルから `Linux` を開いた後、`Ubuntu` → `home` → `[ユーザー名]` の順番でフォルダを開き、そこに `projects` フォルダを作成します。
+WindowsのWSLでは、エクスプローラーのサイドパネルから`Linux`を開いた後、`Ubuntu`→`home`→`[ユーザー名]`の順番でフォルダを開き、そこに`projects`フォルダを作成します。
 
 <video src={openFolderInWslVideo} controls muted />
 
 :::
 
-続いて、開いたフォルダに `main.mjs` ファイルを作成し、下のスクリプトを保存します。拡張子が `.mjs` であることに気をつけてください。`console.log` 関数は、画面に文章を表示させるための関数です。
+続いて、開いたフォルダに`main.mjs`ファイルを作成し、下のスクリプトを保存します。拡張子が`.mjs`であることに気をつけてください。`console.log`関数は、画面に文章を表示させるための関数です。
 
 ```javascript title="main.mjs"
 console.log("Hello World!");
 ```
 
-ターミナルを開き、`node main.mjs` コマンドを実行します。
+ターミナルを開き、`node main.mjs`コマンドを実行します。
 
 ![Hello Worldを実行](./run-hello-world.png)
 
-ターミナルに `Hello World!` が表示されれば成功です。
+ターミナルに`Hello World!`が表示されれば成功です。
 
 ## Node.jsのデバッグ
 
 [ブラウザの開発者ツールを利用する](/docs/browser-apps/inspector/) 節でJavaScriptのデバッグを行ったのと同様に、Node.jsでは、VS Code標準の機能を用いてデバッグを行えます。
 
-Node.jsのデバッグを開始するには、ブレークポイント等を設定したうえで、`F5` キーを押します。初回はデバッグ構成を選択するメニューが出現するので、`Node.js` を選択しましょう。デバッグが開始されると、VS Code下部の青いバーが橙色に変化します。`console.log` は `DEBUG CONSOLE` タブに出力されるので注意しましょう。
+Node.jsのデバッグを開始するには、ブレークポイント等を設定したうえで、`F5`キーを押します。初回はデバッグ構成を選択するメニューが出現するので、`Node.js`を選択しましょう。デバッグが開始されると、VS Code下部の青いバーが橙色に変化します。`console.log`は`DEBUG CONSOLE`タブに出力されるので注意しましょう。
 
 ステップ実行、コールスタックなど、基本的な機能はブラウザに搭載されているものとほとんど同じです。
 
@@ -115,4 +115,4 @@ Node.jsのデバッグを開始するには、ブレークポイント等を設
 
 ### 演習
 
-Node.jsのデバッガを用いて、`console` オブジェクトにどのようなプロパティがあるのか調べてみましょう。
+Node.jsのデバッガを用いて、`console`オブジェクトにどのようなプロパティがあるのか調べてみましょう。
diff --git a/docs/3-web-servers/04-module/index.mdx b/docs/3-web-servers/04-module/index.mdx
index 7aba5913e..983e0163b 100644
--- a/docs/3-web-servers/04-module/index.mdx
+++ b/docs/3-web-servers/04-module/index.mdx
@@ -7,7 +7,7 @@ import npmInstallVideo from "./npm-install.mp4";
 
 ## 別のファイルに書かれたプログラム
 
-Node.jsでは、あるファイルに書かれたプログラムは、別のプログラムからは読み込めません。よって、次の `main.mjs` はエラーになります。
+Node.jsでは、あるファイルに書かれたプログラムは、別のプログラムからは読み込めません。よって、次の`main.mjs`はエラーになります。
 
 ```javascript title="sub.mjs"
 function add(a, b) {
@@ -21,7 +21,7 @@ console.log(add(3, 4)); // Uncaught ReferenceError: add is not defined
 
 別のファイルに書かれたプログラムを読み込むための手段として、Node.jsでは<Term>**モジュール**</Term>という仕組みが用意されています。JavaScriptでは、すべてのファイルが<Term>モジュール</Term>として扱われます。
 
-Node.jsでは、ファイルの拡張子が `.mjs` の場合、`export` 文や `import` 文を用いて他の<Term>モジュール</Term>とのやりとりを行います。
+Node.jsでは、ファイルの拡張子が`.mjs`の場合、`export`文や`import`文を用いて他の<Term>モジュール</Term>とのやりとりを行います。
 
 ```javascript title="sub.mjs"
 export default function add(a, b) {
@@ -62,13 +62,13 @@ console.log(subtract(4, 3));
 
 :::tip[CommonJSモジュール]
 
-さきほどのように `export` 文と `import` 文を用いて他の<Term>モジュール</Term>とのやり取りを行うJavaScript標準の<Term>モジュール</Term>システムを、[**ECMAScriptモジュール**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules)と呼ぶ場合があります。Node.jsでは、拡張子を `.mjs` にすることで、ECMAScript<Term>モジュール</Term>を用いてプログラムを記述できます。
+さきほどのように`export`文と`import`文を用いて他の<Term>モジュール</Term>とのやり取りを行うJavaScript標準の<Term>モジュール</Term>システムを、[**ECMAScriptモジュール**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules)と呼ぶ場合があります。Node.jsでは、拡張子を`.mjs`にすることで、ECMAScript<Term>モジュール</Term>を用いてプログラムを記述できます。
 
-ECMAScriptモジュールの他に[CommonJSモジュール](https://nodejs.org/api/modules.html)と呼ばれるものもあります。CommonJSモジュールでは、`exports` オブジェクトや `require` 関数を用いて他の<Term>モジュール</Term>とのやり取りを行うことができます。Node.jsでは、拡張子を `.js` にすることで、CommonJS<Term>モジュール</Term>を用いてプログラムを記述できます。
+ECMAScriptモジュールの他に[CommonJSモジュール](https://nodejs.org/api/modules.html)と呼ばれるものもあります。CommonJSモジュールでは、`exports`オブジェクトや`require`関数を用いて他の<Term>モジュール</Term>とのやり取りを行うことができます。Node.jsでは、拡張子を`.js`にすることで、CommonJS<Term>モジュール</Term>を用いてプログラムを記述できます。
 
-`exports` オブジェクトは標準では空のオブジェクトですが、プログラム中から書き換えることができます。
+`exports`オブジェクトは標準では空のオブジェクトですが、プログラム中から書き換えることができます。
 
-`require` 関数に別のファイルへの相対パスを指定すると、そのファイルを実行した後にできる `exports` オブジェクトを取得できます。
+`require`関数に別のファイルへの相対パスを指定すると、そのファイルを実行した後にできる`exports`オブジェクトを取得できます。
 
 ```javascript title="sub.js"
 exports.add = (a, b) => {
@@ -88,7 +88,7 @@ console.log(add(3, 4));
 
 ## 標準<Term>モジュール</Term>
 
-Node.jsの [`fs` モジュール](https://nodejs.org/api/fs.html) を用いると、Node.jsからファイルの読み書きを行うことができます。`fs` モジュールの [`readFileSync` 関数](https://nodejs.org/api/fs.html#fsreadfilesyncpath-options)は、ファイルの読み込みを行う関数で、第1引数にファイルへのパスを指定し、第2引数には文字コードを指定します。
+Node.jsの[`fs`モジュール](https://nodejs.org/api/fs.html) を用いると、Node.jsからファイルの読み書きを行うことができます。`fs`モジュールの[`readFileSync`関数](https://nodejs.org/api/fs.html#fsreadfilesyncpath-options)は、ファイルの読み込みを行う関数で、第1引数にファイルへのパスを指定し、第2引数には文字コードを指定します。
 
 ```javascript title="main.mjs"
 import { readFileSync } from "node:fs";
@@ -107,13 +107,13 @@ Hello World!
 
 :::tip[文字コード]
 
-**文字コード**とは、文字のコンピューターによる表現です。`UTF-8` や `Shift_JIS` などさまざまな方式が定義されていますが、現在では通常 `UTF-8` を選んでおけば問題ありません。間違った方式を選んでしまうと、意図と異なる文字として解釈されてしまう現象 (**文字化け**)が起こります。
+**文字コード**とは、文字のコンピューターによる表現です。`UTF-8`や`Shift_JIS`などさまざまな方式が定義されていますが、現在では通常`UTF-8`を選んでおけば問題ありません。間違った方式を選んでしまうと、意図と異なる文字として解釈されてしまう現象 (**文字化け**)が起こります。
 
 :::
 
 ### 演習
 
-`fs` モジュールの [`writeFileSync` 関数](https://nodejs.org/api/fs.html#fswritefilesyncfile-data-options)を用いて、ファイルに文字列を書き出してみましょう。
+`fs`モジュールの[`writeFileSync`関数](https://nodejs.org/api/fs.html#fswritefilesyncfile-data-options)を用いて、ファイルに文字列を書き出してみましょう。
 
 <Answer>
 
@@ -138,23 +138,23 @@ Node.jsにおける**パッケージ**とは、主にJavaScriptファイルを
 
 また、npmから利用されるパッケージを集積したサービス[npmjs.com](https://www.npmjs.com/)もまた、npmと呼ばれます。例として、日付や時刻の操作のために用いられる<Term>ライブラリ</Term>である、[date-fns](https://www.npmjs.com/package/date-fns)パッケージを利用してみましょう。
 
-npmを用いて開発を行うには、まず `npm init` コマンドを実行します。いくつか質問をされるので、Enterキーを押し続けて質問をスキップしましょう。完了すると、フォルダの中に `package.json` という名前のファイルが作成されます。このファイルは、npmによって管理されるフォルダに必ず1つ必要になるものです。
+npmを用いて開発を行うには、まず`npm init`コマンドを実行します。いくつか質問をされるので、Enterキーを押し続けて質問をスキップしましょう。完了すると、フォルダの中に`package.json`という名前のファイルが作成されます。このファイルは、npmによって管理されるフォルダに必ず1つ必要になるものです。
 
 <video src={npmInitVideo} controls muted />
 
-続いて、npmのパッケージをインストールします。`npm install` に続けて、インストールしたいパッケージの名前を入力します。
+続いて、npmのパッケージをインストールします。`npm install`に続けて、インストールしたいパッケージの名前を入力します。
 
 ```shell
 npm install date-fns
 ```
 
-これにより、フォルダの中に `package-lock.json` ファイルと、`node_modules` フォルダが作成され、内部にパッケージ本体がダウンロードされます。
+これにより、フォルダの中に`package-lock.json`ファイルと、`node_modules`フォルダが作成され、内部にパッケージ本体がダウンロードされます。
 
 <video src={npmInstallVideo} controls muted />
 
 :::tip[JSON]
 
-npmによって作成された `package.json` とは何者でしょうか。拡張子が `.json` のファイルには、**JSON**が記述されています。JSONは、JavaScript Object Notationの略で、複雑なデータ構造を単一の文字列として表現する際に、JavaScriptオブジェクトに似た記法を用いるための仕様です。JavaScriptとの相性が非常に良いだけでなく、文法が単純で明快であることから、JavaScriptを用いないプロジェクトでも頻繁に用いられます。
+npmによって作成された`package.json`とは何者でしょうか。拡張子が`.json`のファイルには、**JSON**が記述されています。JSONは、JavaScript Object Notationの略で、複雑なデータ構造を単一の文字列として表現する際に、JavaScriptオブジェクトに似た記法を用いるための仕様です。JavaScriptとの相性が非常に良いだけでなく、文法が単純で明快であることから、JavaScriptを用いないプロジェクトでも頻繁に用いられます。
 
 JSONは、JavaScriptのオブジェクト記法よりも制限が厳しくなっています。例えば、
 
@@ -185,7 +185,7 @@ JSONは、JavaScriptのオブジェクト記法よりも制限が厳しくなっ
 
 ## npmのパッケージをNode.jsから利用する
 
-npmでダウンロードしたパッケージは、<Term>モジュール</Term>として `import` 宣言に指定できます。
+npmでダウンロードしたパッケージは、<Term>モジュール</Term>として`import`宣言に指定できます。
 
 ```javascript
 import { format } from "date-fns";
@@ -198,13 +198,13 @@ console.log(format(new Date(), "yyyy年MM月dd日"));
 
 ## 初級演習
 
-### `node-emoji` パッケージ
+### `node-emoji`パッケージ
 
-[`node-emoji` パッケージ](https://www.npmjs.com/package/node-emoji)は、Node.jsで絵文字を扱うことができるパッケージです。このパッケージを用いて、`I ❤️ ☕!` と出力してください。
+[`node-emoji`パッケージ](https://www.npmjs.com/package/node-emoji)は、Node.jsで絵文字を扱うことができるパッケージです。このパッケージを用いて、`I ❤️ ☕!`と出力してください。
 
 <Answer title="node-emojiパッケージ">
    
-[`emojify` 関数](https://www.npmjs.com/package/node-emoji#emojiemojifyinput-options)を用いると、文字列中の絵文字を表す部分を絵文字に変換することができます。
+[`emojify`関数](https://www.npmjs.com/package/node-emoji#emojiemojifyinput-options)を用いると、文字列中の絵文字を表す部分を絵文字に変換することができます。
    
 ```javascript
 import { emojify } from "node-emoji";
@@ -217,13 +217,13 @@ console.log(emojify("I :heart: :coffee:!"));
 
 ## 中級演習
 
-### `mathjs` パッケージ
+### `mathjs`パッケージ
 
-[`mathjs` パッケージ](https://www.npmjs.com/package/mathjs)は、JavaScriptで複雑な計算を行うためのライブラリです。このライブラリを用いて、$\log(x)$を$x$について微分した式を求めてください。
+[`mathjs`パッケージ](https://www.npmjs.com/package/mathjs)は、JavaScriptで複雑な計算を行うためのライブラリです。このライブラリを用いて、$\log(x)$を$x$について微分した式を求めてください。
 
 <Answer title="mathjsパッケージ">
 
-[`mathjs.derivative` 関数](https://mathjs.org/docs/reference/functions/derivative.html)を用いると、微分した式を求めることができます。
+[`mathjs.derivative`関数](https://mathjs.org/docs/reference/functions/derivative.html)を用いると、微分した式を求めることができます。
 
 ```javascript
 import { derivative } from "mathjs";
diff --git a/docs/3-web-servers/05-server/index.mdx b/docs/3-web-servers/05-server/index.mdx
index e97fe25f7..65df10b9e 100644
--- a/docs/3-web-servers/05-server/index.mdx
+++ b/docs/3-web-servers/05-server/index.mdx
@@ -43,13 +43,13 @@ Webにおいて、HTML、CSS、JavaScriptは、サーバーがクライアント
 
 [Expressパッケージ](https://www.npmjs.com/package/express) を用いると、簡単にWebサーバーを構築できます。
 
-まずは `express` パッケージをnpmでインストールします。
+まずは`express`パッケージをnpmでインストールします。
 
 ```shell
 npm install express
 ```
 
-続いて、次のような `main.mjs` を作成しましょう。
+続いて、次のような`main.mjs`を作成しましょう。
 
 ```javascript title="main.mjs" showLineNumbers
 import express from "express";
@@ -73,10 +73,10 @@ app.listen(3000);
 node main.mjs
 ```
 
-ブラウザで <a href="http://localhost:3000/" target="_blank">`http://localhost:3000/`</a> にアクセスし、次の動作を確認してください。
+ブラウザで<a href="http://localhost:3000/" target="_blank">`http://localhost:3000/`</a>にアクセスし、次の動作を確認してください。
 
-- `Hello World！ 日本語` が表示されること
-- `日本語` をクリックするとアドレスバーが <a href="http://localhost:3000/lang/ja" target="_blank">`http://localhost:3000/lang/ja`</a> に変化し `こんにちは、世界！` が表示されること
+- `Hello World！ 日本語`が表示されること
+- `日本語`をクリックするとアドレスバーが<a href="http://localhost:3000/lang/ja" target="_blank">`http://localhost:3000/lang/ja`</a>に変化し`こんにちは、世界！`が表示されること
 
 <video src={expressSetupVideo} muted controls />
 
@@ -95,36 +95,36 @@ Expressで構築したサーバーは、ターミナル上で<kbd>control</kbd>
 この手順のことを**プロトコル**と呼び、Webの世界では、**HTTP**と呼ばれるプロトコルが用いられます。
 
 ブラウザは、アドレスバーに**URL**が入力されると、その情報をもとにHTTPを用いてサーバーと通信します。
-例えば、先ほどの例で使用した `http://localhost:3000/lang/ja` というURLは、次のように解釈されます。
+例えば、先ほどの例で使用した`http://localhost:3000/lang/ja`というURLは、次のように解釈されます。
 
 <p>
   <UrlStructureExplanation />
 </p>
 
 - **プロトコル**:
-  `http` または `https` のいずれかです。
-  いずれを指定しても使用されるプロトコルはHTTPですが、`https` を指定した場合は通信内容が暗号化されます。
-  この例では `http` を用いていますが、インターネット上に公開するウェブサイトでは `https` を用いることが推奨されます。
+  `http`または`https`のいずれかです。
+  いずれを指定しても使用されるプロトコルはHTTPですが、`https`を指定した場合は通信内容が暗号化されます。
+  この例では`http`を用いていますが、インターネット上に公開するウェブサイトでは`https`を用いることが推奨されます。
 - **ドメイン**:
   通信先のコンピューターを特定するための識別子です。
-  この例ではサーバーを自分のコンピューター上に構築しているため、自分自身を表す特殊なドメイン `localhost` を用いています。
-  `example.com` や `foo.example.net` は、実際のインターネット上で使われるドメイン名の例です。
+  この例ではサーバーを自分のコンピューター上に構築しているため、自分自身を表す特殊なドメイン`localhost`を用いています。
+  `example.com`や`foo.example.net`は、実際のインターネット上で使われるドメイン名の例です。
 - **ポート**:
   通信先のコンピューター上で、どのプログラムと通信するかを特定するための整数です。
   ポートを変えることで、同じコンピューター上で複数のサーバーが通信を待ち受けることができます。
-  省略すると、プロトコル部分が `http` の場合は80番ポートが、`https` の場合は443番ポートが用いられます。
+  省略すると、プロトコル部分が`http`の場合は80番ポートが、`https`の場合は443番ポートが用いられます。
 - **パス**:
   クライアントがサーバーに対し、何を要求するかを指定するための文字列です。
-  Linuxのファイルシステムで用いられるパスと同様に、意味的には `/` 記号によって階層化されますが、クライアントはサーバーに対してパスを文字列として送信するだけで、その内容はサーバーによって自由に解釈されます。
+  Linuxのファイルシステムで用いられるパスと同様に、意味的には`/`記号によって階層化されますが、クライアントはサーバーに対してパスを文字列として送信するだけで、その内容はサーバーによって自由に解釈されます。
 
-`http://localhost:3000/lang/ja` というURLは、HTTPプロトコルを暗号化せずに用いて、`localhost` というドメインの3000番ポートで待ち受けているサーバーに対して `/lang/ja` というパスを要求することを意味します。
+`http://localhost:3000/lang/ja`というURLは、HTTPプロトコルを暗号化せずに用いて、`localhost`というドメインの3000番ポートで待ち受けているサーバーに対して`/lang/ja`というパスを要求することを意味します。
 
 このように、URLに含まれる情報のうち、プロトコル、ドメイン、ポートはネットワーク上で通信を行うために用いられる情報です。
 残りのパス部分をどのように扱うかが、サーバー側のプログラムにおける主な関心事になります。
 
 ## Hello Worldサーバーの動作
 
-`main.mjs` のプログラムを参照しながら、ブラウザとサーバーの間でどのようなやり取りが行われているのかを確認しましょう。
+`main.mjs`のプログラムを参照しながら、ブラウザとサーバーの間でどのようなやり取りが行われているのかを確認しましょう。
 
 ```javascript title="main.mjs (再掲)" showLineNumbers
 import express from "express";
@@ -140,27 +140,27 @@ app.get("/lang/ja", (request, response) => {
 app.listen(3000);
 ```
 
-### `node main.mjs` を実行したとき
+### `node main.mjs`を実行したとき
 
-1. **[2行目]** `const app = express();` により、Expressの [`Application`](https://expressjs.com/ja/api.html#app) クラスのインスタンスが作成されます。
-2. **[4行目]** `app.get("/", (request, response) => { ... });` で呼び出された [`get`](https://expressjs.com/ja/api.html#app.get.method) メソッドにより、`/` というパスに対するリクエストを受けたときに実行される関数として、第2引数に指定された関数が登録されます。この時点では関数は `Application` インスタンスに登録されるのみで、実行はされません。
-3. **[7行目]** 4行目と同様に、`/lang/ja` というパスに対するリクエストを受けたときに実行される関数が登録されます。
-4. **[11行目]** `app.listen(3000);` により、Expressはリクエストを待ち受けるHTTPサーバーとして動作を開始します。
+1. **[2行目]** `const app = express();`により、Expressの[`Application`](https://expressjs.com/ja/api.html#app)クラスのインスタンスが作成されます。
+2. **[4行目]** `app.get("/", (request, response) => { ... });`で呼び出された[`get`](https://expressjs.com/ja/api.html#app.get.method)メソッドにより、`/`というパスに対するリクエストを受けたときに実行される関数として、第2引数に指定された関数が登録されます。この時点では関数は`Application`インスタンスに登録されるのみで、実行はされません。
+3. **[7行目]** 4行目と同様に、`/lang/ja`というパスに対するリクエストを受けたときに実行される関数が登録されます。
+4. **[11行目]** `app.listen(3000);`により、Expressはリクエストを待ち受けるHTTPサーバーとして動作を開始します。
 
 ### ブラウザの操作を行ったとき
 
-1. 利用者が、ブラウザのアドレスバーに `http://localhost:3000/` というURLを入力します。
-2. ブラウザは、`localhost:3000` で起動しているExpressのサーバーに対して、`/` というパスに対するHTTPリクエストを送信します。
-3. Expressは `/` に対するHTTPリクエストを受け取り、**[4行目]** の関数を実行します。引数として、Expressは次に示す2つのオブジェクトを生成して渡します。
-   - 第1引数 (`request`): 受け取ったHTTPリクエストに関する情報をExpressが開発者にとって扱いやすい形にまとめた [`Request`](https://expressjs.com/ja/api.html#req) クラスのインスタンス。
-   - 第2引数 (`response`): Expressがクライアントに返すHTTPレスポンスを開発者が制御するための [`Response`](https://expressjs.com/ja/api.html#res) クラスのインスタンス。
-4. **[5行目]** の <code>{'response.send(`...`);'}</code> により、Expressは <code>{'`Hello World! <a href="./lang/ja">日本語</a>`'}</code> という文字列をレスポンスとして送信します。
-5. ブラウザは、受け取ったレスポンスをHTMLとして解釈し、`Hello World!` という文字列と、`日本語` というリンクを表示します。
-6. 利用者が、`日本語` というリンクをクリックします。
-7. ブラウザは、クリックされたリンクの `href` 属性をもとに、アドレスバーのURLを更新し、ページ遷移を起こします。
-   - `href` 属性にプロトコルを含むURLが指定されていれば、そのURLに遷移します。
-   - `href` 属性が相対パスの形式で指定されていれば、現在のパスを基準に[Linuxにおける相対パス](/docs/web-servers/linux-commands/#パス)と同様の方法でURLを更新します。この例では、更新前のパスが `/` で、`href` 属性には `./lang/ja` が指定されているため、更新後のパスは `/lang/ja` になり、URLは `http://localhost:3000/lang/ja` に変化します。
-8. 2から5までの手順が、`/lang/ja` というパスに対して行われます。
+1. 利用者が、ブラウザのアドレスバーに`http://localhost:3000/`というURLを入力します。
+2. ブラウザは、`localhost:3000`で起動しているExpressのサーバーに対して、`/`というパスに対するHTTPリクエストを送信します。
+3. Expressは`/`に対するHTTPリクエストを受け取り、**[4行目]** の関数を実行します。引数として、Expressは次に示す2つのオブジェクトを生成して渡します。
+   - 第1引数 (`request`): 受け取ったHTTPリクエストに関する情報をExpressが開発者にとって扱いやすい形にまとめた[`Request`](https://expressjs.com/ja/api.html#req)クラスのインスタンス。
+   - 第2引数 (`response`): Expressがクライアントに返すHTTPレスポンスを開発者が制御するための[`Response`](https://expressjs.com/ja/api.html#res)クラスのインスタンス。
+4. **[5行目]** の <code>{'response.send(`...`);'}</code>により、Expressは<code>{'`Hello World! <a href="./lang/ja">日本語</a>`'}</code>という文字列をレスポンスとして送信します。
+5. ブラウザは、受け取ったレスポンスをHTMLとして解釈し、`Hello World!`という文字列と、`日本語`というリンクを表示します。
+6. 利用者が、`日本語`というリンクをクリックします。
+7. ブラウザは、クリックされたリンクの`href`属性をもとに、アドレスバーのURLを更新し、ページ遷移を起こします。
+   - `href`属性にプロトコルを含むURLが指定されていれば、そのURLに遷移します。
+   - `href`属性が相対パスの形式で指定されていれば、現在のパスを基準に[Linuxにおける相対パス](/docs/web-servers/linux-commands/#パス)と同様の方法でURLを更新します。この例では、更新前のパスが`/`で、`href`属性には`./lang/ja`が指定されているため、更新後のパスは`/lang/ja`になり、URLは`http://localhost:3000/lang/ja`に変化します。
+8. 2から5までの手順が、`/lang/ja`というパスに対して行われます。
 
 <p>
   <RequestResponseSlideShow />
@@ -174,13 +174,13 @@ app.listen(3000);
 
 次の例では、ブラウザは2つのHTTPリクエストを送信します。
 
-1. 利用者が、ブラウザのアドレスバーに `http://localhost:3000/` というURLを入力します。
-2. ブラウザは、`/` というパスに対するHTTPリクエストを送信します。
-3. サーバーは、 `<script src="./script.js"></script>` という文字列をレスポンスとして送信します。
-4. ブラウザは、受け取ったレスポンスをHTMLとして解釈し、`script` タグを発見します。
-5. ブラウザは、`src` 属性を相対パスとして解釈し、`/script.js` というパスに対してHTTPリクエストを送信します。
-6. サーバーは、`document.write("Hello World!");` という文字列をレスポンスとして送信します。
-7. ブラウザは、受け取ったレスポンスをJavaScriptとして解釈し、`Hello World!` という文字列を表示します。
+1. 利用者が、ブラウザのアドレスバーに`http://localhost:3000/`というURLを入力します。
+2. ブラウザは、`/`というパスに対するHTTPリクエストを送信します。
+3. サーバーは、`<script src="./script.js"></script>`という文字列をレスポンスとして送信します。
+4. ブラウザは、受け取ったレスポンスをHTMLとして解釈し、`script`タグを発見します。
+5. ブラウザは、`src`属性を相対パスとして解釈し、`/script.js`というパスに対してHTTPリクエストを送信します。
+6. サーバーは、`document.write("Hello World!");`という文字列をレスポンスとして送信します。
+7. ブラウザは、受け取ったレスポンスをJavaScriptとして解釈し、`Hello World!`という文字列を表示します。
 
 ```javascript title="main.mjs"
 import express from "express";
@@ -200,7 +200,7 @@ app.listen(3000);
 
 ## 静的ウェブサーバー
 
-次の例では、`/`、`/script.js`、`/sub/`、`/sub/script.js` へのリクエストについて、それぞれファイルから読み込んでレスポンスを送信しています。
+次の例では、`/`、`/script.js`、`/sub/`、`/sub/script.js`へのリクエストについて、それぞれファイルから読み込んでレスポンスを送信しています。
 
 ```javascript title="main.mjs"
 import express from "express";
@@ -225,7 +225,7 @@ app.listen(3000);
 
 <ViewSource url={import.meta.url} path="_samples/static-hosting-naive" />
 
-[`express.static` 関数](https://expressjs.com/ja/api.html#express.static)を用いると、このような「リクエストを受け取ったら、そのパスに応じて適切なファイルを読み込んでレスポンスとして返す」という一連の動作を簡単に記述できます。
+[`express.static`関数](https://expressjs.com/ja/api.html#express.static)を用いると、このような「リクエストを受け取ったら、そのパスに応じて適切なファイルを読み込んでレスポンスとして返す」という一連の動作を簡単に記述できます。
 
 ```javascript title="main.mjs"
 import express from "express";
@@ -237,23 +237,23 @@ app.listen(3000);
 
 <ViewSource url={import.meta.url} path="_samples/static-hosting-smart" />
 
-これにより、リクエストのパスをもとに、`static` フォルダ内の適切なファイルが自動的に配信されます。
+これにより、リクエストのパスをもとに、`static`フォルダ内の適切なファイルが自動的に配信されます。
 
-:::tip[`index.html` の省略]
+:::tip[`index.html`の省略]
 
-`express.static` を用いる場合、`index.html` は省略可能になります。つまり、`/` へのリクエストで `static/index.html` が、`/sub` へのリクエストで `static/sub/index.html` にアクセスできるようになります。これは、ExpressやJavaScriptに限ったことではなく、多くのWebサーバーの実装において、こういったルールが成り立ちます。
+`express.static`を用いる場合、`index.html`は省略可能になります。つまり、`/`へのリクエストで`static/index.html`が、`/sub`へのリクエストで`static/sub/index.html`にアクセスできるようになります。これは、ExpressやJavaScriptに限ったことではなく、多くのWebサーバーの実装において、こういったルールが成り立ちます。
 
 :::
 
-:::tip[`app.use` と `express.static` の実装]
+:::tip[`app.use`と`express.static`の実装]
 
-Expressの [`use` メソッド](https://expressjs.com/ja/api.html#app.use) は、`get` メソッドと同様に、リクエストを受け取ったときに実行される関数を登録するためのメソッドです。
-しかし、`use` メソッドは、登録された関数が全てのリクエストに対して実行される点が異なります。
-`express.static` 関数は、関数を返す関数となっており、`use` メソッドに渡すことで、リクエストのパスに応じて適切なファイルを読み込んでレスポンスとして返す関数を登録することができます。
+Expressの [`use`メソッド](https://expressjs.com/ja/api.html#app.use) は、`get`メソッドと同様に、リクエストを受け取ったときに実行される関数を登録するためのメソッドです。
+しかし、`use`メソッドは、登録された関数が全てのリクエストに対して実行される点が異なります。
+`express.static`関数は、関数を返す関数となっており、`use`メソッドに渡すことで、リクエストのパスに応じて適切なファイルを読み込んでレスポンスとして返す関数を登録することができます。
 
-Expressの [`Request`](https://expressjs.com/ja/api.html#req) オブジェクトの[`path` プロパティ](https://expressjs.com/ja/api.html#req.path)には、リクエストのパスが文字列として格納されています。
-この値を用いて、`express.static` は適切なファイルを読み込みます。
-次の例は、`express.static` 関数の簡易な実装例です。
+Expressの [`Request`](https://expressjs.com/ja/api.html#req) オブジェクトの[`path`プロパティ](https://expressjs.com/ja/api.html#req.path)には、リクエストのパスが文字列として格納されています。
+この値を用いて、`express.static`は適切なファイルを読み込みます。
+次の例は、`express.static`関数の簡易な実装例です。
 このプログラムは動作はしますが、セキュリティ上の問題があるため、実際のExpressの実装はもっと複雑になっています。
 
 ```javascript
@@ -301,7 +301,7 @@ app.listen(3000);
 
 :::note[`Array#join`]
 
-[`Array#join` メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join)は、配列を指定した区切り文字で結合した文字列を返すメソッドです。
+[`Array#join`メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join)は、配列を指定した区切り文字で結合した文字列を返すメソッドです。
 
 ```javascript
 console.log(["Apple", "Banana", "Orange"].join("/")); // Apple/Banana/Orange
@@ -311,13 +311,13 @@ console.log(["Apple", "Banana", "Orange"].join("/")); // Apple/Banana/Orange
 
 このようにテンプレートリテラルを用いることで、複雑なウェブページの内容を表すことができます。
 
-:::tip[`String#replace` メソッド]
+:::tip[`String#replace`メソッド]
 
 上記のようにテンプレートリテラルを使ってHTMLを作成することもできますが、HTMLがさらに長くなったり、複雑なプログラムが必要になってきたりしたらこのまま続けていくのは難しそうです。
 
-[`String#replace`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace) メソッドは、第1引数に与えられた文字列に一致する文字列を第2引数の文字列に置き換えた新しい文字列を返します。
-`String#replace` メソッドは、最初に一致した場所のみを置き換えます。
-一致するすべての場所を置き換えたい場合は、代わりに [`String#replaceAll`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll) メソッドを使います。
+[`String#replace`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace)メソッドは、第1引数に与えられた文字列に一致する文字列を第2引数の文字列に置き換えた新しい文字列を返します。
+`String#replace`メソッドは、最初に一致した場所のみを置き換えます。
+一致するすべての場所を置き換えたい場合は、代わりに[`String#replaceAll`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll)メソッドを使います。
 
 ```js
 const base = "ABCBCC";
@@ -325,7 +325,7 @@ document.write(base.replace("BC", "EFG")); // AEFGBCC
 document.write(base.replaceAll("C", "T")); // ABTBTT
 ```
 
-`String#replace` メソッドを用いることで、長いHTMLを見通しよく記述できるようになります。
+`String#replace`メソッドを用いることで、長いHTMLを見通しよく記述できるようになります。
 
 ```html title="index.html"
 <!doctype html>
@@ -361,9 +361,9 @@ app.get("/", (request, response) => {
 app.listen(3000);
 ```
 
-リクエストを受け取ったとき、プログラムではまず `readFileSync` 関数を用いて `index.html` ファイルの内容を文字列として読み込んでいます。
+リクエストを受け取ったとき、プログラムではまず`readFileSync`関数を用いて`index.html`ファイルの内容を文字列として読み込んでいます。
 
-次の行で `String#replace` メソッドを用いて、読み込んだHTMLファイルの中の `"<!-- users -->"` を、 `names` を箇条書きにした文字列に置換します。
+次の行で`String#replace`メソッドを用いて、読み込んだHTMLファイルの中の`"<!-- users -->"`を、`names`を箇条書きにした文字列に置換します。
 
 :::
 
@@ -371,7 +371,7 @@ app.listen(3000);
 
 ### 訪問者カウンター
 
-Expressを用いて、`あなたはn人目のお客様です。` とレスポンスするWebサーバーを作成してください。`n` はアクセスされるたびに1ずつ増えるようにしてください。
+Expressを用いて、`あなたはn人目のお客様です。`とレスポンスするWebサーバーを作成してください。`n`はアクセスされるたびに1ずつ増えるようにしてください。
 
 <Answer title="訪問者カウンター">
 
diff --git a/docs/3-web-servers/06-form/index.mdx b/docs/3-web-servers/06-form/index.mdx
index af6c1b852..6cfe8345d 100644
--- a/docs/3-web-servers/06-form/index.mdx
+++ b/docs/3-web-servers/06-form/index.mdx
@@ -4,7 +4,7 @@ title: フォーム
 
 ## クエリパラメータの利用
 
-入力した内容によって、次に移るページで表示されるものが異なるウェブページがあります。例として、Googleで `utcode` と検索した際に表示される検索結果のページを考えてみましょう。
+入力した内容によって、次に移るページで表示されるものが異なるウェブページがあります。例として、Googleで`utcode`と検索した際に表示される検索結果のページを考えてみましょう。
 
 ![クエリパラメータ](./query-parameter.png)
 
@@ -14,7 +14,7 @@ title: フォーム
 https://www.google.com/search?q=utcode&sourceid=chrome&ie=UTF-8
 ```
 
-このようなページでは、入力した内容によって異なるウェブページが表示されるよう、入力した内容が移った先のページのURLに反映されています。この例では、URLの末尾に `?q=utcode&sourceid=chrome&ie=UTF-8` というデータが付加されています。これが**クエリパラメータ**です。
+このようなページでは、入力した内容によって異なるウェブページが表示されるよう、入力した内容が移った先のページのURLに反映されています。この例では、URLの末尾に`?q=utcode&sourceid=chrome&ie=UTF-8`というデータが付加されています。これが**クエリパラメータ**です。
 
 クエリパラメータは、キーと値の組み合わせにより表現されます。先ほどのGoogleの検索結果であれば、次のような3つのパラメータが存在することになります。
 
@@ -24,7 +24,7 @@ https://www.google.com/search?q=utcode&sourceid=chrome&ie=UTF-8
 | `sourceid` | `chrome` |
 | `ie`       | `UTF-8`  |
 
-Expressからクエリパラメータを利用する場合、`request.query` ([`express.Request#query` プロパティ](https://expressjs.com/ja/api.html#req.query)) にこれらの値がオブジェクトとして格納されています。
+Expressからクエリパラメータを利用する場合、`request.query` ([`express.Request#query`プロパティ](https://expressjs.com/ja/api.html#req.query)) にこれらの値がオブジェクトとして格納されています。
 
 ```javascript title="main.mjs"
 import express from "express";
@@ -46,13 +46,13 @@ JSONは「JavaScript Object Notation」の略でJavaScriptのオブジェクト
 
 :::tip[JSON.stringifyメソッド]
 
-`JSON.stringify` メソッドはオブジェクトをJSON形式の文字列に変換するメソッドです。
+`JSON.stringify`メソッドはオブジェクトをJSON形式の文字列に変換するメソッドです。
 
 :::
 
 :::tip[URLとして使用できない文字の対処方法]
 
-URLとして使用できない文字（日本語文字など）は[URLエンコード](https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%BC%E3%82%BB%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0)する必要があります。JavaScriptなら `encodeURIComponent` 関数で変換できます。
+URLとして使用できない文字（日本語文字など）は[URLエンコード](https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%BC%E3%82%BB%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0)する必要があります。JavaScriptなら`encodeURIComponent`関数で変換できます。
 
 ```javascript
 encodeURIComponent("日本語"); // "%E6%97%A5%E6%9C%AC%E8%AA%9E"
@@ -62,12 +62,12 @@ encodeURIComponent("日本語"); // "%E6%97%A5%E6%9C%AC%E8%AA%9E"
 
 ## サーバーにデータを送信する
 
-`form` 要素を使うとユーザーの入力からクエリパラメータを生成してページ遷移できます。
+`form`要素を使うとユーザーの入力からクエリパラメータを生成してページ遷移できます。
 
-- `form` の `action` 属性: フォーム送信時に移動し、データを送信するページ
-- `input` 要素: テキストボックス
-- `input` の `name` 属性: クエリパラメータのキー
-- `button` 要素: `form` 内のボタンをクリックすると `form` の `action` に指定したページに遷移します（送信ボタンになります）
+- `form`の`action`属性: フォーム送信時に移動し、データを送信するページ
+- `input`要素: テキストボックス
+- `input`の`name`属性: クエリパラメータのキー
+- `button`要素: `form`内のボタンをクリックすると`form`の`action`に指定したページに遷移します（送信ボタンになります）
 
 以下のコードの、HTMLファイルと、JavaScriptファイルを作成して実行してみましょう。
 
@@ -110,7 +110,7 @@ app.listen(3000);
 以下のように入力して、送信ボタンをクリックすると、
 ![初めの画面に入力](./form-example-2.png)
 
-`http://localhost:3000/send` に移り、以下のような画面が表示されます。
+`http://localhost:3000/send`に移り、以下のような画面が表示されます。
 
 ![http://localhost:3000/send](./form-example-3.png)
 
@@ -121,15 +121,15 @@ app.listen(3000);
 
 ### node-emoji
 
-[npmの章](/docs/web-servers/module/#node-emoji-%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8)で扱った `node-emoji` パッケージの `emojify` 関数を使って、送られた文字列に `emojify` 関数を適用するサーバーを作ってみましょう。
+[npmの章](/docs/web-servers/module/#node-emoji-%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8)で扱った`node-emoji`パッケージの`emojify`関数を使って、送られた文字列に`emojify`関数を適用するサーバーを作ってみましょう。
 
 また、文字列を簡単にサーバーに送れるようにフォームも作りましょう。
 
-たとえば、フォームで `I :heart: :coffee:` と送信したときに、 `I ❤️ ☕` とブラウザに表示されれば成功です。
+たとえば、フォームで`I :heart: :coffee:`と送信したときに、`I ❤️ ☕`とブラウザに表示されれば成功です。
 
 <Answer title="node-emoji">
 
-`node-emoji` と `express` をインストールするのを忘れないようにしましょう。
+`node-emoji`と`express`をインストールするのを忘れないようにしましょう。
 
 ```html title="static/index.html"
 <!doctype html>
@@ -181,9 +181,9 @@ const books = [
 
 著者名を入力して送信すると、その著者の出版物が一覧表示されるシステムを作ってみましょう。
 
-:::tip[`Array#filter` メソッド]
+:::tip[`Array#filter`メソッド]
 
-[`Array#filter` メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)は、関数オブジェクトを引数としてとり、その関数が `true` となる要素だけからなる新しい配列を返すメソッドです。
+[`Array#filter`メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)は、関数オブジェクトを引数としてとり、その関数が`true`となる要素だけからなる新しい配列を返すメソッドです。
 
 ```javascript
 const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
diff --git a/docs/3-web-servers/07-get-post/index.mdx b/docs/3-web-servers/07-get-post/index.mdx
index 517daa905..9142a2e34 100644
--- a/docs/3-web-servers/07-get-post/index.mdx
+++ b/docs/3-web-servers/07-get-post/index.mdx
@@ -18,7 +18,7 @@ HTTPリクエストのこのような区分を、<Term>**HTTPメソッド**</Ter
 
 ![HTTPメソッドの比較](./method-comparison.png)
 
-前頁の例を、POSTリクエストを用いて書き直してみましょう。`form` 要素の `method` 属性に `post` を指定することで、ブラウザは送信ボタンが押されたときに `POST` メソッドの<Term>リクエスト</Term>を発行します。
+前頁の例を、POSTリクエストを用いて書き直してみましょう。`form`要素の`method`属性に`post`を指定することで、ブラウザは送信ボタンが押されたときに`POST`メソッドの<Term>リクエスト</Term>を発行します。
 
 ```html title="static/index.html"
 <!doctype html>
@@ -55,12 +55,12 @@ app.listen(3000);
 
 <ViewSource url={import.meta.url} path="_samples/post-request" />
 
-これまで利用していた `app.get` ([`express.Application#get` メソッド](https://expressjs.com/ja/api.html#app.get.method)) では、GETメソッドの<Term>リクエスト</Term>しか受け付けられないため、`/send` へのPOSTリクエストを受け付けるために `app.post` ([`express.Application#post` メソッド](https://expressjs.com/ja/api.html#app.post.method)) を利用しています。
+これまで利用していた`app.get` ([`express.Application#get`メソッド](https://expressjs.com/ja/api.html#app.get.method)) では、GETメソッドの<Term>リクエスト</Term>しか受け付けられないため、`/send`へのPOSTリクエストを受け付けるために`app.post` ([`express.Application#post`メソッド](https://expressjs.com/ja/api.html#app.post.method)) を利用しています。
 
 {/* prettier-ignore */}
-<Term>クエリパラメータ</Term>にアクセスするには、`request.query` (<a href="https://expressjs.com/ja/api.html#req.query">`express.Request#query` プロパティ</a>)を使用しましたが、<Term>リクエストボディ</Term>を使用するには、`request.body` (<a href="https://expressjs.com/ja/api.html#req.body">`express.Request#body` プロパティ</a>)を使用します。
+<Term>クエリパラメータ</Term>にアクセスするには、`request.query` (<a href="https://expressjs.com/ja/api.html#req.query">`express.Request#query`プロパティ</a>)を使用しましたが、<Term>リクエストボディ</Term>を使用するには、`request.body` (<a href="https://expressjs.com/ja/api.html#req.body">`express.Request#body`プロパティ</a>)を使用します。
 
-`app.use(express.urlencoded({ extended: true }));` は、<Term>リクエストボディ</Term>の解釈方法を定めています。HTMLのフォームが送信されたとき、ブラウザが発行するPOSTリクエストの<Term>リクエストボディ</Term>は、<Term>クエリパラメータ</Term>と同じくURLエンコードされた形式で記述されます。[`express.urlencoded` 関数](https://expressjs.com/ja/api.html#express.urlencoded)は、URLエンコードされた<Term>リクエストボディ</Term>を読み取り、`request.body` にオブジェクトの形式でデータを保存する役割を担っています。
+`app.use(express.urlencoded({ extended: true }));`は、<Term>リクエストボディ</Term>の解釈方法を定めています。HTMLのフォームが送信されたとき、ブラウザが発行するPOSTリクエストの<Term>リクエストボディ</Term>は、<Term>クエリパラメータ</Term>と同じくURLエンコードされた形式で記述されます。[`express.urlencoded`関数](https://expressjs.com/ja/api.html#express.urlencoded)は、URLエンコードされた<Term>リクエストボディ</Term>を読み取り、`request.body`にオブジェクトの形式でデータを保存する役割を担っています。
 
 このシステムでは、まず次のような画面が表示されます。
 
@@ -70,21 +70,21 @@ app.listen(3000);
 
 ![名前と年齢を入力２](postRequest2.png)
 
-`http://localhost:3000/send` に移り、以下のような画面が表示されます。GETリクエストの時と違い、<Term>クエリパラメータ</Term>がURLに表示されていないことが分かります。
+`http://localhost:3000/send`に移り、以下のような画面が表示されます。GETリクエストの時と違い、<Term>クエリパラメータ</Term>がURLに表示されていないことが分かります。
 
 ![名前と年齢を入力３](postRequest3.png)
 
 ## POSTリクエストを開発者ツールで覗いてみる
 
-実際にPOSTリクエストの中身がどうなっているか覗いてみましょう。まず開発者ツールの `Network` タブを開き、文字を入力して送信してみます。
+実際にPOSTリクエストの中身がどうなっているか覗いてみましょう。まず開発者ツールの`Network`タブを開き、文字を入力して送信してみます。
 
 <video src={postInDevelopment1} controls />
 
-そして `Name` 欄の `send` をクリックし、 `Headers` を選択すると `general` 欄の `Requested method` が `POST` になっています。また、 `Headers` の横にある `Payload` を選択し `Form data` を見ると、 `name` と `age` の情報が載っています。
+そして`Name`欄の`send`をクリックし、`Headers`を選択すると`general`欄の`Requested method`が`POST`になっています。また、`Headers`の横にある`Payload`を選択し`Form data`を見ると、`name`と`age`の情報が載っています。
 
 <video src={postInDevelopment2} controls />
 
-ここからさらに、`Form data` の横の `view source` や `view URL-encoded` も見てみましょう。するとURLエンコードされた<Term>リクエストボディ</Term>の中身を見ることができます。
+ここからさらに、`Form data`の横の`view source`や`view URL-encoded`も見てみましょう。するとURLエンコードされた<Term>リクエストボディ</Term>の中身を見ることができます。
 
 <video src={postInDevelopment3} controls />
 
@@ -96,21 +96,21 @@ app.listen(3000);
 
 古き良き掲示板システムを作ってみましょう。次のようなページを作成してください。
 
-- `GET /`: 現在の投稿されているすべての記事を表示します。`/send` へPOSTするためのフォームも同時に表示します。
+- `GET /`: 現在の投稿されているすべての記事を表示します。`/send`へPOSTするためのフォームも同時に表示します。
 - `POST /send`: リクエストボディに含まれている記事の内容を記録します。
 
 :::tip[ヒント]
 
 - イベントハンドラの外側に現在投稿されたデータを記録するための配列を用意しましょう。
-- `GET /` では 配列の中身を一覧表示しましょう。フォームも忘れずに表示しましょう。
-- `POST /send` に新しい投稿が来たら `Array#push` メソッドで配列に要素を追加しましょう。
+- `GET /`では 配列の中身を一覧表示しましょう。フォームも忘れずに表示しましょう。
+- `POST /send`に新しい投稿が来たら`Array#push`メソッドで配列に要素を追加しましょう。
 
 :::
 
 :::tip[豆知識: リダイレクト]
 
 サーバー側からブラウザに対してページ遷移を指示するためには、ブラウザからのリクエストに対して、特殊なレスポンスを返します。
-Expressを用いてこのようなレスポンスを生成するためには、[`express.Response#send` メソッド](https://expressjs.com/ja/api.html#res.send) の代わりに、[`express.Response#redirect` メソッド](https://expressjs.com/ja/api.html#res.redirect) を用います。
+Expressを用いてこのようなレスポンスを生成するためには、[`express.Response#send`メソッド](https://expressjs.com/ja/api.html#res.send)の代わりに、[`express.Response#redirect`メソッド](https://expressjs.com/ja/api.html#res.redirect)を用います。
 
 ```javascript
 app.post("/send", (request, response) => {
diff --git a/docs/3-web-servers/08-database/index.mdx b/docs/3-web-servers/08-database/index.mdx
index f65d96304..04839fffe 100644
--- a/docs/3-web-servers/08-database/index.mdx
+++ b/docs/3-web-servers/08-database/index.mdx
@@ -72,10 +72,10 @@ app.post((request, response) => {
 
 主にリレーショナルデータベースを操作するためのNode.jsの<Term>ライブラリ</Term>です。複数の構成要素からなります。
 
-- [**`@prisma/client` パッケージ**](https://www.npmjs.com/package/@prisma/client): アプリケーションサーバーから用いるnpmのパッケージです。JavaScriptプログラムから使用します。
-- [**`prisma` パッケージ**](https://www.npmjs.com/package/prisma): 開発時にコマンドとして用いるnpmのパッケージです。`npx` コマンドを通して実行します。
-- [**`.prisma` ファイル**](https://www.prisma.io/docs/concepts/components/prisma-schema): データベースのテーブル構造を記述するファイルです。`prisma` パッケージのコマンドを用いて実際のデータベースサーバーに反映させます。
-- [**`Prisma` 拡張機能**](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma): VS Codeの拡張機能です。`.prisma` ファイルに対する補完やフォーマットの機能を提供します。
+- [**`@prisma/client`パッケージ**](https://www.npmjs.com/package/@prisma/client): アプリケーションサーバーから用いるnpmのパッケージです。JavaScriptプログラムから使用します。
+- [**`prisma`パッケージ**](https://www.npmjs.com/package/prisma): 開発時にコマンドとして用いるnpmのパッケージです。`npx`コマンドを通して実行します。
+- [**`.prisma`ファイル**](https://www.prisma.io/docs/concepts/components/prisma-schema): データベースのテーブル構造を記述するファイルです。`prisma`パッケージのコマンドを用いて実際のデータベースサーバーに反映させます。
+- [**`Prisma`拡張機能**](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma): VS Codeの拡張機能です。`.prisma`ファイルに対する補完やフォーマットの機能を提供します。
 
 #### [Supabase](https://supabase.com/)
 
@@ -83,11 +83,11 @@ PostgreSQLサーバーを提供するサービスです。PostgreSQLサーバー
 
 ### Supabase で PostgreSQL サーバーを構築する
 
-[Supabase](https://supabase.com/)のアカウントを作成しましょう。`New Project` ボタンを押して必要な情報を入力し、新しいPostgreSQLサーバーを起動させてください。入力が必要な情報は次の通りです。
+[Supabase](https://supabase.com/)のアカウントを作成しましょう。`New Project`ボタンを押して必要な情報を入力し、新しいPostgreSQLサーバーを起動させてください。入力が必要な情報は次の通りです。
 
 - **Project name**: 起動するサーバーにつける名前です。適当に設定して構いません。
-- **Database Password**: 起動するサーバーのパスワードです。`Generate a password` ボタンを押して生成するのが良いでしょう。また、後でこのパスワードは使用することになるため覚えておきましょう。
-- **Region**: 起動するサーバーの地理的な場所です。ここでは `Northeast Asia (Tokyo)` を選択しています。
+- **Database Password**: 起動するサーバーのパスワードです。`Generate a password`ボタンを押して生成するのが良いでしょう。また、後でこのパスワードは使用することになるため覚えておきましょう。
+- **Region**: 起動するサーバーの地理的な場所です。ここでは`Northeast Asia (Tokyo)`を選択しています。
 
 <video src={newPostgresqlInstanceVideo} controls />
 
@@ -105,28 +105,28 @@ VS Code向けのPrisma拡張機能をインストールしましょう。
 
 ![Prisma拡張機能のインストール](./install-prisma-extension.png)
 
-新しいフォルダをVS Codeで開き、`npm init` コマンドを使用して `package.json` ファイルを作成した後、
+新しいフォルダをVS Codeで開き、`npm init`コマンドを使用して`package.json`ファイルを作成した後、
 
 ```shell
 npx prisma init
 ```
 
-コマンドを実行します。パッケージをインストールしても良いか尋ねられる場合は、`y` を入力して許可しましょう。
+コマンドを実行します。パッケージをインストールしても良いか尋ねられる場合は、`y`を入力して許可しましょう。
 
 <video src={prismaInitVideo} controls muted />
 
-:::tip[`npx` コマンド]
+:::tip[`npx`コマンド]
 
 {/* prettier-ignore */}
-<Term>`npx` コマンド</Term>は、npmのパッケージを、プログラムからではなく直接実行するためのコマンドです。npmには `prisma` パッケージのように、直接実行専用のパッケージも存在します。
+<Term>`npx`コマンド</Term>は、npmのパッケージを、プログラムからではなく直接実行するためのコマンドです。npmには`prisma`パッケージのように、直接実行専用のパッケージも存在します。
 
 :::
 
-続いて、Supabaseからデータベースへの接続情報を `.env` ファイルにコピーします。これにより、PrismaはSupabase上のPostgreSQLサーバーと接続できるようになります。
+続いて、Supabaseからデータベースへの接続情報を`.env`ファイルにコピーします。これにより、PrismaはSupabase上のPostgreSQLサーバーと接続できるようになります。
 
 <video src={copySecretValuesVideo} controls muted />
 
-`prisma/schema.prisma` ファイルを、次のように編集し、データベースのテーブルとカラムを定義します。
+`prisma/schema.prisma`ファイルを、次のように編集し、データベースのテーブルとカラムを定義します。
 
 ```javascript
 // This is your Prisma schema file,
@@ -153,7 +153,7 @@ model Todo {
 npx prisma db push
 ```
 
-コマンドを実行しましょう。すると、データベースに `schema.prisma` に書かれた通りのテーブルとカラムが作成されるので、DBeaverで確認してみてください。接続を一旦切断し、再接続する必要があります。また、このとき、後述する `@prisma/client` パッケージが自動的にインストールされます。
+コマンドを実行しましょう。すると、データベースに`schema.prisma`に書かれた通りのテーブルとカラムが作成されるので、DBeaverで確認してみてください。接続を一旦切断し、再接続する必要があります。また、このとき、後述する`@prisma/client`パッケージが自動的にインストールされます。
 
 <video src={prismaDbPushVideo} controls />
 
@@ -165,24 +165,24 @@ Prismaが作成したテーブルに、DBeaverを用いてレコードを追加
 
 ### Prismaでデータベースのデータを読み書きする
 
-Node.jsからPrismaを利用してデータベースのデータを操作するためには、`@prisma/client` パッケージの [`PrismaClient` クラス](https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#prismaclient)を用います。
+Node.jsからPrismaを利用してデータベースのデータを操作するためには、`@prisma/client`パッケージの[`PrismaClient`クラス](https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#prismaclient)を用います。
 
-- [`PrismaClient#[テーブル名].findMany` メソッド](https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#findmany): 条件を満たすレコードを全て取得
-- [`PrismaClient#[テーブル名].findFirst` メソッド](https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#findfirst): 条件を満たす最初のレコードを取得
-- [`PrismaClient#[テーブル名].findUnique` メソッド](https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#findunique): レコードを一意に識別できる条件を使用してレコードを1つだけ取得
+- [`PrismaClient#[テーブル名].findMany`メソッド](https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#findmany): 条件を満たすレコードを全て取得
+- [`PrismaClient#[テーブル名].findFirst`メソッド](https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#findfirst): 条件を満たす最初のレコードを取得
+- [`PrismaClient#[テーブル名].findUnique`メソッド](https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#findunique): レコードを一意に識別できる条件を使用してレコードを1つだけ取得
 
 :::tip[非同期処理]
 
 上記の3つのメソッドは、<Term>**非同期処理**</Term>を行います。JavaScriptにおける非同期処理とは、ファイルの入出力やネットワーク通信など、JavaScriptの外側の時間のかかる処理の完了を待つ間、ほかの処理を実行できるようにする仕組みです。非同期処理を行う関数を使用するためには、次の2つを行います。
 
-- 非同期処理を行う関数を呼び出す関数を定義する際、`async` キーワードをつけること
-- 非同期処理を行う関数の戻り値に対し、`await` 演算子を適用すること
+- 非同期処理を行う関数を呼び出す関数を定義する際、`async`キーワードをつけること
+- 非同期処理を行う関数の戻り値に対し、`await`演算子を適用すること
 
 非同期処理に関する詳細は、[MDNの記事](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Asynchronous)を参照してください。
 
 :::
 
-まずは、`findMany` メソッドの戻り値を、デバッガを用いて確認してみましょう。
+まずは、`findMany`メソッドの戻り値を、デバッガを用いて確認してみましょう。
 
 ```javascript
 import { PrismaClient } from "@prisma/client";
@@ -194,7 +194,7 @@ debugger;
 
 ![findManyの戻り値](./find-many-result.png)
 
-続いて、[`PrismaClient#[テーブル名].create` メソッド](https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#create)を用いて、テーブルにレコードを作成してみましょう。
+続いて、[`PrismaClient#[テーブル名].create`メソッド](https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#create)を用いて、テーブルにレコードを作成してみましょう。
 
 ```javascript
 import { PrismaClient } from "@prisma/client";
@@ -218,14 +218,14 @@ Supabaseで新しいデータベースを作成しましょう。作成したデ
 
 ### 手順2
 
-新しいプロジェクト用のディレクトリを作成し、`npx prisma init` コマンドを実行して、Prismaのセットアップをしましょう。`.env` ファイルを編集し、Prismaがデータベースに接続できるようにしましょう。
+新しいプロジェクト用のディレクトリを作成し、`npx prisma init`コマンドを実行して、Prismaのセットアップをしましょう。`.env`ファイルを編集し、Prismaがデータベースに接続できるようにしましょう。
 
 ### 手順3
 
-作成された `.prisma` ファイルを編集し、掲示板に投稿されたメッセージを保存するためのテーブルと、そのテーブルのカラムの定義を記述しましょう。`npx prisma db push` コマンドでテーブルとカラムの定義をデータベースに反映させましょう。
+作成された`.prisma`ファイルを編集し、掲示板に投稿されたメッセージを保存するためのテーブルと、そのテーブルのカラムの定義を記述しましょう。`npx prisma db push`コマンドでテーブルとカラムの定義をデータベースに反映させましょう。
 
 :::info[テーブルの定義]
-掲示板サービスに必要なテーブルの構造を考えてみましょう。例えば、次の例では、掲示板の投稿を保存するための `Post` テーブルを定義しており、このテーブルには `id` と `message` の2つのカラムが存在しています。他にも、投稿のタイトルを保存するための `title` カラムや、投稿者名を保存するための `author` カラムなどを定義するなどの工夫が考えられます。
+掲示板サービスに必要なテーブルの構造を考えてみましょう。例えば、次の例では、掲示板の投稿を保存するための`Post`テーブルを定義しており、このテーブルには`id`と`message`の2つのカラムが存在しています。他にも、投稿のタイトルを保存するための`title`カラムや、投稿者名を保存するための`author`カラムなどを定義するなどの工夫が考えられます。
 
 ```javascript title="prisma/schema.prisma の抜粋"
 model Post {
@@ -246,10 +246,10 @@ Node.jsのデバッガを用いて、データベースのデータがPrismaで
 
 ### 手順6
 
-Expressをインストールし、`/` へのGETリクエストに対して、データベースのデータをHTMLに整形したレスポンスを返せるようにしましょう。
+Expressをインストールし、`/`へのGETリクエストに対して、データベースのデータをHTMLに整形したレスポンスを返せるようにしましょう。
 
 :::info[ヒント]
-Prismaの `findMany` メソッドを用いて、テーブル内にある全てのレコードを取得できます。
+Prismaの`findMany`メソッドを用いて、テーブル内にある全てのレコードを取得できます。
 
 ```javascript
 const posts = await client.post.findMany();
@@ -259,7 +259,7 @@ const posts = await client.post.findMany();
 // ]
 ```
 
-このメソッドの戻り値は、各カラムの値をプロパティとして持つオブジェクトの配列です。`Array#map` メソッドや `Array#join` メソッドを用い、適切なHTMLに変換してレスポンスを生成しましょう。
+このメソッドの戻り値は、各カラムの値をプロパティとして持つオブジェクトの配列です。`Array#map`メソッドや`Array#join`メソッドを用い、適切なHTMLに変換してレスポンスを生成しましょう。
 :::
 
 <Answer title="手順6まで">
@@ -295,7 +295,7 @@ app.get("/", async (request, response) => {
 
 ### 手順7
 
-掲示板を投稿するためのHTMLのフォームを表示できるようにしましょう。入力されたデータは `/send` へのPOSTリクエストとして送信されるようにしてみましょう。
+掲示板を投稿するためのHTMLのフォームを表示できるようにしましょう。入力されたデータは`/send`へのPOSTリクエストとして送信されるようにしてみましょう。
 
 :::info[ヒント]
 手順6で作成したテンプレートとなるHTMLファイルを編集し、フォームを追加しましょう。
@@ -326,7 +326,7 @@ app.get("/", async (request, response) => {
 
 ### 手順8
 
-前の手順で作成したHTMLのフォームの送信先 (`/send` へのPOSTリクエスト) を作成しましょう。送られてきたデータが正しいか、Node.jsのデバッガを用いて確認してみましょう。
+前の手順で作成したHTMLのフォームの送信先 (`/send`へのPOSTリクエスト) を作成しましょう。送られてきたデータが正しいか、Node.jsのデバッガを用いて確認してみましょう。
 
 <Answer title="手順8まで">
 
@@ -341,10 +341,10 @@ app.post("/send", async (request, response) => {
 
 ### 手順9
 
-送られてきたデータをデータベースに保存できるようにしましょう。データベースに投稿が保存された後、ブラウザは自動的に `/` に戻るようにしてみましょう。
+送られてきたデータをデータベースに保存できるようにしましょう。データベースに投稿が保存された後、ブラウザは自動的に`/`に戻るようにしてみましょう。
 
 :::info[ヒント]
-[GETリクエストとPOSTリクエストの章](/docs/web-servers/get-post/)で扱った `express.Response#redirect` メソッドが使えます。
+[GETリクエストとPOSTリクエストの章](/docs/web-servers/get-post/)で扱った`express.Response#redirect`メソッドが使えます。
 
 :::
 
diff --git a/docs/3-web-servers/09-cookie/index.mdx b/docs/3-web-servers/09-cookie/index.mdx
index 9c5a2c5f5..42955df04 100644
--- a/docs/3-web-servers/09-cookie/index.mdx
+++ b/docs/3-web-servers/09-cookie/index.mdx
@@ -6,15 +6,15 @@ import cookieCounterVideo from "./cookie-counter.mp4";
 
 ## HTTPヘッダ
 
-HTTPにおけるリクエストとレスポンスには、**ヘッダ**と呼ばれるKey-Value型のデータ構造が毎回付加されています。Chromeの開発者ツールでの `Network` タブで確認できるので、確認してみましょう。
+HTTPにおけるリクエストとレスポンスには、**ヘッダ**と呼ばれるKey-Value型のデータ構造が毎回付加されています。Chromeの開発者ツールでの`Network`タブで確認できるので、確認してみましょう。
 
 ![HTTPヘッダ](./http-headers.png)
 
 ## Cookie
 
-レスポンスヘッダに `set-cookie` ヘッダを含めることにより、次回以降のリクエストで、クライアントはそのデータをリクエストヘッダの `cookie` ヘッダに入れて毎回送信します。この性質を利用することで、HTTPサーバーはクライアント毎に異なるサービスを提供できるようになります。
+レスポンスヘッダに`set-cookie`ヘッダを含めることにより、次回以降のリクエストで、クライアントはそのデータをリクエストヘッダの`cookie`ヘッダに入れて毎回送信します。この性質を利用することで、HTTPサーバーはクライアント毎に異なるサービスを提供できるようになります。
 
-Cookie自体もKey-Valueのデータ構造となっているので、`set-cookie` ヘッダを複数回送信することにより、複数のcookieを1つのレスポンスで送信することができます。例として、[Yahoo! Japanのウェブサイト](https://www.yahoo.co.jp/) にアクセスした際に、Yahoo! Japanが送信するCookieの中身を覗いてみましょう。
+Cookie自体もKey-Valueのデータ構造となっているので、`set-cookie`ヘッダを複数回送信することにより、複数のcookieを1つのレスポンスで送信することができます。例として、[Yahoo! Japanのウェブサイト](https://www.yahoo.co.jp/) にアクセスした際に、Yahoo! Japanが送信するCookieの中身を覗いてみましょう。
 
 ![Yahoo! JapanのCookie](./yahoo-cookies.png)
 
@@ -28,7 +28,7 @@ Cookie自体もKey-Valueのデータ構造となっているので、`set-cookie
 
 ## ExpressでCookieを利用する
 
-Expressを用いてレスポンスヘッダにCookieを付加するには、[`express.Response#cookie` メソッド](https://expressjs.com/ja/api.html#res.cookie)を利用します。また、クライアントからのリクエストの `cookie` ヘッダを解析するためには、[cookie-parser](https://www.npmjs.com/package/cookie-parser)パッケージを利用します。
+Expressを用いてレスポンスヘッダにCookieを付加するには、[`express.Response#cookie`メソッド](https://expressjs.com/ja/api.html#res.cookie)を利用します。また、クライアントからのリクエストの`cookie`ヘッダを解析するためには、[cookie-parser](https://www.npmjs.com/package/cookie-parser)パッケージを利用します。
 
 ```shell
 npm install cookie-parser
@@ -55,7 +55,7 @@ app.get("/", (request, response) => {
 app.listen(3000);
 ```
 
-[`express.Request#cookies` プロパティ](https://expressjs.com/ja/api.html#req.cookies) には、ブラウザから送信されていたCookieがオブジェクト形式で保存されています。ブラウザで表示させると、更新ボタンが押されるたびに数値が増えていることがわかります。
+[`express.Request#cookies`プロパティ](https://expressjs.com/ja/api.html#req.cookies) には、ブラウザから送信されていたCookieがオブジェクト形式で保存されています。ブラウザで表示させると、更新ボタンが押されるたびに数値が増えていることがわかります。
 
 <video src={cookieCounterVideo} controls muted />
 
@@ -80,7 +80,7 @@ app.listen(3000);
 
 ユーザーが自分のユーザー名とパスワードでログインし、プロフィールを表示できるウェブアプリケーションを作成してみましょう。
 
-`schema.prisma` は次の通りとします。
+`schema.prisma`は次の通りとします。
 
 ```javascript title="schema.prisma"
 model User {
diff --git a/docs/3-web-servers/10-git-github-init/index.mdx b/docs/3-web-servers/10-git-github-init/index.mdx
index 2601a32b4..ffe7792f6 100644
--- a/docs/3-web-servers/10-git-github-init/index.mdx
+++ b/docs/3-web-servers/10-git-github-init/index.mdx
@@ -29,7 +29,7 @@ VS Code標準の機能だけでも多くのことができますが、より便
 
 ### [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
 
-コマンドパレット (<kbd>command</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (Windows) ) に `Git Graph: View Git Graph (git log)` というメニューが出て見やすい
+コマンドパレット (<kbd>command</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (Windows) ) に`Git Graph: View Git Graph (git log)`というメニューが出て見やすい
 
 ![GitGragh](./gitGraph.png)
 
@@ -59,7 +59,7 @@ Gitでは、ファイルの変更だけでなく、その変更を行ったの
 
 - メールアドレス: GitHubの登録の際に設定したメールアドレスが推奨されますが、メールアドレスを公開したくない場合は、次のようにダミーのメールアドレスを取得することもできます。
 
-  [GitHubのメール設定](https://github.com/settings/emails)から `Keep my email addresses private` を有効化し、表示されているダミーのメールアドレス (スクリーンショットの例では `112743782+sample-ma9qke@users.noreply.github.com`) をGitに指定してください。
+  [GitHubのメール設定](https://github.com/settings/emails)から`Keep my email addresses private`を有効化し、表示されているダミーのメールアドレス (スクリーンショットの例では`112743782+sample-ma9qke@users.noreply.github.com`) をGitに指定してください。
 
   ![メールアドレスを隠す](./hide-email-address.png)
 
@@ -83,7 +83,7 @@ git config --global user.email メールアドレス
 
 ### デフォルトブランチの設定
 
-現在WSL上のUbuntuのGitでは、デフォルトブランチというものが `master` に設定されていますが、macOSでは `main` になっています。また、GitHubではデフォルトブランチが `main` になっています。これらを統一するために、次のコマンドを実行してください。
+現在WSL上のUbuntuのGitでは、デフォルトブランチというものが`master`に設定されていますが、macOSでは`main`になっています。また、GitHubではデフォルトブランチが`main`になっています。これらを統一するために、次のコマンドを実行してください。
 
 ```shell
 git config --global init.defaultBranch main
@@ -107,32 +107,32 @@ GitHubに公開鍵を登録しましょう。
 
 詳細な手順は、次の通りです。
 
-公開鍵と秘密鍵のペアを生成するには、`ssh-keygen` コマンドを使用します。次のコマンドを実行することで、`Ed25519` というアルゴリズムの実装を用いて鍵を生成できます。
-途中でターミナルの表示画面が止まりますが、`user@host:~$` が再度表示されるまでEnterキーで進みます。
+公開鍵と秘密鍵のペアを生成するには、`ssh-keygen`コマンドを使用します。次のコマンドを実行することで、`Ed25519`というアルゴリズムの実装を用いて鍵を生成できます。
+途中でターミナルの表示画面が止まりますが、`user@host:~$`が再度表示されるまでEnterキーで進みます。
 
 ```shell
 $ cd ~
 $ ssh-keygen -t ed25519
 ```
 
-デフォルトでは公開鍵が `~/.ssh/id_ed25519.pub`、秘密鍵が `~/.ssh/id_ed25519` に格納されます。公開鍵のファイルを `cat` コマンドを用いて出力しましょう。
+デフォルトでは公開鍵が`~/.ssh/id_ed25519.pub`、秘密鍵が`~/.ssh/id_ed25519`に格納されます。公開鍵のファイルを`cat`コマンドを用いて出力しましょう。
 
 ```shell
 $ cat ~/.ssh/id_ed25519.pub
 ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIEqE0cyVkFSFD/BlAwvJ9QejXwgyFppn5JDQc8iGW/Gp [ユーザー名]@[コンピューター名]
 ```
 
-`ssh-ed25519 AA...Gp` の部分をコピーしましょう。これが公開鍵です。
+`ssh-ed25519 AA...Gp`の部分をコピーしましょう。これが公開鍵です。
 
 :::tip[ホームディレクトリのパスを表す記号]
 
-パスの中に現れる `~` は、**ホームディレクトリ**を表します。ホームディレクトリとは、ユーザー毎に割り当てられたディレクトリで、macOSでは `/Users/ユーザー名`、Ubuntuでは `/home/ユーザー名` になります。デスクトップやドキュメントディレクトリも通常ユーザーディレクトリの下に配置されています。
+パスの中に現れる`~`は、**ホームディレクトリ**を表します。ホームディレクトリとは、ユーザー毎に割り当てられたディレクトリで、macOSでは`/Users/ユーザー名`、Ubuntuでは`/home/ユーザー名`になります。デスクトップやドキュメントディレクトリも通常ユーザーディレクトリの下に配置されています。
 
 :::
 
 :::tip[公開鍵のフォーマット]
 
-`ssh-keygen` が生成する標準の公開鍵は、スペースを区切り文字として3つのパートに分かれています。鍵の種類、鍵の中身、コメントです。コメントの部分はなくても構いません。
+`ssh-keygen`が生成する標準の公開鍵は、スペースを区切り文字として3つのパートに分かれています。鍵の種類、鍵の中身、コメントです。コメントの部分はなくても構いません。
 
 ```plain
 ssh-ed25519 AAAAC3...GW/Gp user@computer
@@ -142,11 +142,11 @@ ssh-ed25519 AAAAC3...GW/Gp user@computer
 
 これをGitHubの[SSH鍵の設定](https://github.com/settings/keys)から登録します。
 
-登録ページへの移動方法は、`Settings` > `SSH and GPG keys` > `New SSH key`と順に移動すればたどり着けます。
+登録ページへの移動方法は、`Settings`>`SSH and GPG keys`>`New SSH key`と順に移動すればたどり着けます。
 
 ![SSHキーを追加](./add-ssh-key.png)
 
-上記のようなページが表示されたら、`Title` に適切な名前、`Key` には先ほどターミナルで表示した公開鍵を入力して登録しましょう。
+上記のようなページが表示されたら、`Title`に適切な名前、`Key`には先ほどターミナルで表示した公開鍵を入力して登録しましょう。
 
 ## 確認
 
@@ -190,7 +190,7 @@ Are you sure you want to continue connecting (yes/no/[fingerprint])?
 ```
 
 これは、接続先となっているGitHubが、なりすましではなく本物のGitHubであると信頼してもよいかを尋ねるメッセージです。
-家庭用のインターネット回線、UTokyo Wi-Fi等、十分に信頼できるネットワークに接続している場合は問題ありませんので、`yes` と入力して続行させてください。
+家庭用のインターネット回線、UTokyo Wi-Fi等、十分に信頼できるネットワークに接続している場合は問題ありませんので、`yes`と入力して続行させてください。
 
 :::
 
diff --git a/docs/3-web-servers/11-git/index.mdx b/docs/3-web-servers/11-git/index.mdx
index 32aca74ba..05ca99336 100644
--- a/docs/3-web-servers/11-git/index.mdx
+++ b/docs/3-web-servers/11-git/index.mdx
@@ -65,12 +65,12 @@ Gitでは、**リポジトリ**と呼ばれる単位でソースコードを管
 リポジトリはひとつのディレクトリに相当し、そのディレクトリ以下の全てのファイルがGitによる追跡対象となります。
 
 まずはGitで管理するためのディレクトリを作成し、VS Codeで開きます。
-左側のアクティビティバーの `Source Control` パネル内の `Initialize Repository` ボタンを押してください。
+左側のアクティビティバーの`Source Control`パネル内の`Initialize Repository`ボタンを押してください。
 これで、カレントディレクトリをGitの管理下に置く (カレントディレクトリをGitリポジトリにする) ことができます。
 
 <video src={gitInitVideo} controls muted />
 
-:::info[`git init` コマンド]
+:::info[`git init`コマンド]
 
 Gitの操作は、コマンドラインからも行うことができます。
 次のコマンドを実行することで、カレントディレクトリをGitの管理下に置くこともできます。
@@ -83,13 +83,13 @@ git init
 
 :::
 
-:::tip[`.git` ディレクトリ]
+:::tip[`.git`ディレクトリ]
 
-Gitの管理下に置かれたディレクトリには `.git` という名前のディレクトリが生成されます。
+Gitの管理下に置かれたディレクトリには`.git`という名前のディレクトリが生成されます。
 このディレクトリには過去のコミットの履歴など、Gitが内部的に使用するファイルが格納されます。
-誤ったディレクトリで `git init` コマンドを実行してしまった場合、このディレクトリを削除しましょう。
-なお、ピリオドから始まるディレクトリやファイルは `ls` コマンドに `-a` というオプションをつけないと表示できないので注意が必要です。
-また、VS Code上でも `.git` ディレクトリはデフォルトでは表示されません。
+誤ったディレクトリで`git init`コマンドを実行してしまった場合、このディレクトリを削除しましょう。
+なお、ピリオドから始まるディレクトリやファイルは`ls`コマンドに`-a`というオプションをつけないと表示できないので注意が必要です。
+また、VS Code上でも`.git`ディレクトリはデフォルトでは表示されません。
 
 ```shell
 $ ls
@@ -105,21 +105,21 @@ branches  config  description  HEAD  hooks  info  objects  refs
 
 コミットを作るためには、まず変更を**ステージ**する必要があります。
 ステージすることで、Gitに対して該当ファイルをコミットする意思があることを伝えることができます。
-`Source Control` パネル内に表示されているファイルを押すとそのファイルにどのような変更が加えられたかを確認できます。
-ステージするには、コミットしたいファイルの横の `+` ボタンを押します。
-ファイルが `Changes` から `Staged Changes` に移ったら成功です。
+`Source Control`パネル内に表示されているファイルを押すとそのファイルにどのような変更が加えられたかを確認できます。
+ステージするには、コミットしたいファイルの横の`+`ボタンを押します。
+ファイルが`Changes`から`Staged Changes`に移ったら成功です。
 
 <video src={stageChangesVideo} muted controls />
 
-:::info[`git add` コマンド]
+:::info[`git add`コマンド]
 
-`git add` コマンドを使うことで、コマンドラインから、変更をステージすることもできます。
+`git add`コマンドを使うことで、コマンドラインから、変更をステージすることもできます。
 
 ```shell
 git add ステージするファイルへのパス
 ```
 
-`git add` コマンドを使う前後で、現在のリポジトリの状態を確認することができる `git status` コマンドを使うことで、ステージされたファイルとステージされていないファイルを確認することができます。
+`git add`コマンドを使う前後で、現在のリポジトリの状態を確認することができる`git status`コマンドを使うことで、ステージされたファイルとステージされていないファイルを確認することができます。
 
 <video src={stageChangesWithCliVideo} muted controls />
 
@@ -129,16 +129,16 @@ git add ステージするファイルへのパス
 
 それでは、最初のコミットを作成してみましょう。
 
-ステージされた変更からコミットを作成するには、**コミットメッセージ**を入力して `Commit` ボタンを押します。
+ステージされた変更からコミットを作成するには、**コミットメッセージ**を入力して`Commit`ボタンを押します。
 コミットメッセージには、そのコミットで行われた変更を説明する適切なメッセージを入力してください。
 
 変更がコミットとして記録されました。
 
 <video src={commitChangesVideo} muted controls />
 
-:::info[`git commit` コマンド]
+:::info[`git commit`コマンド]
 
-`git commit` コマンドを使うことで、コマンドラインから、コミットを作成することもできます。
+`git commit`コマンドを使うことで、コマンドラインから、コミットを作成することもできます。
 
 ```shell
 git commit -m "コミットメッセージ"
@@ -150,8 +150,8 @@ git commit -m "コミットメッセージ"
 
 :::tip[`.gitignore`]
 
-`.gitignore` ファイルで指定されたファイルはGitの管理下に置かれません。
-`package.json` と `package-lock.json` の情報から全く同じものをダウンロードできてバージョン管理するメリットのない `node_modules` や、機密情報や環境ごとに異なる情報を含む `.env` といったファイルが指定されます。
+`.gitignore`ファイルで指定されたファイルはGitの管理下に置かれません。
+`package.json`と`package-lock.json`の情報から全く同じものをダウンロードできてバージョン管理するメリットのない`node_modules`や、機密情報や環境ごとに異なる情報を含む`.env`といったファイルが指定されます。
 
 :::
 
@@ -162,27 +162,27 @@ git commit -m "コミットメッセージ"
 <video src={secondCommitVideo} muted controls />
 
 これにより、2つ目のコミットが作成されました。
-それぞれのコミットでどのような変更がなされたのかを確認するために、先ほどインストールした `Git Graph` 拡張機能を使ってコミット履歴を確認しましょう。<kbd>command</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (Windows) キーを押してコマンドパレットを開き、`Git Graph: View Git Graph (git log)` を選択します。
+それぞれのコミットでどのような変更がなされたのかを確認するために、先ほどインストールした`Git Graph`拡張機能を使ってコミット履歴を確認しましょう。<kbd>command</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (Windows) キーを押してコマンドパレットを開き、`Git Graph: View Git Graph (git log)`を選択します。
 それぞれのコミットでどのような変更がなされたのかを確認することができます。
 
 <video src={showGitHistoryVideo} muted controls />
 
-:::info[`git log` コマンド]
+:::info[`git log`コマンド]
 
-`git log` コマンドを使うことで、コマンドラインから、コミット履歴を確認することもできます。
+`git log`コマンドを使うことで、コマンドラインから、コミット履歴を確認することもできます。
 
 ![コマンドラインでのコミット履歴の表示](./show-git-history-with-cli.png)
 
 :::
 
-:::info[`git diff` コマンド]
+:::info[`git diff`コマンド]
 
-`git diff` コマンドを使うことで、コマンドラインから、コミット同士の差分を確認することもできます。
+`git diff`コマンドを使うことで、コマンドラインから、コミット同士の差分を確認することもできます。
 
-コミットには一意のIDが割り当てられており、このIDを `git diff` コマンドに与えることで、コミット同士を比較することができます。
+コミットには一意のIDが割り当てられており、このIDを`git diff`コマンドに与えることで、コミット同士を比較することができます。
 
-下の動画の最後で実行されている `git diff @ @~` は、最新のコミットとそのひとつ前のコミットを比較するためのコマンドです。
-`@` が最新のコミットを、`~` が「そのひとつ前」を表します。
+下の動画の最後で実行されている`git diff @ @~`は、最新のコミットとそのひとつ前のコミットを比較するためのコマンドです。
+`@`が最新のコミットを、`~`が「そのひとつ前」を表します。
 
 <video src={showGitDiffWithCliVideo} muted controls />
 
@@ -208,7 +208,7 @@ Gitリポジトリを作成しましょう。
 
 ### 手順2
 
-`index.html` を作成し、学部一覧ページを作成しましょう。
+`index.html`を作成し、学部一覧ページを作成しましょう。
 
 <Answer>
 
@@ -238,7 +238,7 @@ Gitリポジトリを作成しましょう。
 
 ### 手順3
 
-差分を確認して、`index.html` をステージしましょう。
+差分を確認して、`index.html`をステージしましょう。
 
 <Answer>
 
@@ -258,7 +258,7 @@ Gitリポジトリを作成しましょう。
 
 ### 手順5
 
-`index.html` を編集し、教養学部、教育学部、薬学部を追加しましょう。
+`index.html`を編集し、教養学部、教育学部、薬学部を追加しましょう。
 
 <Answer>
 
@@ -291,7 +291,7 @@ Gitリポジトリを作成しましょう。
 
 ### 手順6
 
-差分を確認して、`index.html` をステージし、コミットを作成しましょう。
+差分を確認して、`index.html`をステージし、コミットを作成しましょう。
 
 <Answer>
 
diff --git a/docs/3-web-servers/12-github/index.mdx b/docs/3-web-servers/12-github/index.mdx
index 29fdebdde..68e10df08 100644
--- a/docs/3-web-servers/12-github/index.mdx
+++ b/docs/3-web-servers/12-github/index.mdx
@@ -82,12 +82,12 @@ GitとGitHubを用いた共同開発は、大きく次のような流れで行
 
 ### GitHubにソースコードを保存する
 
-自分のコンピューター上に作成したリポジトリと同期させるため、GitHub上にもリポジトリを作成します。GitHub上部のメニューから `New repository` を選択してください。
+自分のコンピューター上に作成したリポジトリと同期させるため、GitHub上にもリポジトリを作成します。GitHub上部のメニューから`New repository`を選択してください。
 
 ![新しいリポジトリを作成](new-repository.png)
 
 必要な設定はリポジトリの名前と公開範囲です。
-公開するつもりがない場合は公開範囲は `Private` に設定するようにしましょう。
+公開するつもりがない場合は公開範囲は`Private`に設定するようにしましょう。
 
 ![リポジトリの設定](./repository-settings.png)
 
@@ -95,7 +95,7 @@ GitとGitHubを用いた共同開発は、大きく次のような流れで行
 GitHub上に表示されている**SSH**のURLをコピーします。(**SSH**にするのを忘れないでください。)
 これがGitHub上に作成したリポジトリを表すURLになります。
 GitHub上に作成したリポジトリを**リモートリポジトリ**と呼びます。
-次のコマンドを実行して、このリモートリポジトリを `origin` (慣習的にリモートリポジトリが一つだけの場合はこの名前が用いられます) という名前で登録します。
+次のコマンドを実行して、このリモートリポジトリを`origin` (慣習的にリモートリポジトリが一つだけの場合はこの名前が用いられます) という名前で登録します。
 
 ```shell
 git remote add origin git@github.com:アカウント名/リポジトリ名.git
@@ -103,23 +103,23 @@ git remote add origin git@github.com:アカウント名/リポジトリ名.git
 
 <video src={addRemoteRepositoryVideo} muted controls />
 
-登録が完了したら、`origin` として登録したリモートリポジトリにコミットを送信します。
+登録が完了したら、`origin`として登録したリモートリポジトリにコミットを送信します。
 この操作を**プッシュ**と呼びます。
-プッシュをするには、`Pull, Push` > `Push to...` > `origin` を押します。
+プッシュをするには、`Pull, Push`>`Push to...`>`origin`を押します。
 
 <video src={pushChangesVideo} muted controls />
 
 GitHubを開いているブラウザを更新して、プログラムが反映されていることを確認したら完了です。
 
-:::info[`git push` コマンド]
+:::info[`git push`コマンド]
 
-`git push` コマンドを使うことで、コマンドラインから、プッシュをすることもできます。
+`git push`コマンドを使うことで、コマンドラインから、プッシュをすることもできます。
 
 ```shell
 git push origin main
 ```
 
-このコマンドの `main` というのは、メインのブランチの名前です。
+このコマンドの`main`というのは、メインのブランチの名前です。
 
 ![コマンドラインでのプッシュ](./push-changes-with-cli.png)
 
@@ -152,37 +152,37 @@ gitGraph
 ```
 
 まずは、メインのブランチから今回の作業専用のブランチを作成しましょう。
-左下の `main` というボタンをクリックして、`Create new branch from...` を選択します。
-次に、分岐元のブランチである `main` を選択します。
+左下の`main`というボタンをクリックして、`Create new branch from...`を選択します。
+次に、分岐元のブランチである`main`を選択します。
 最後に、新しいブランチの名前を入力します。
 新しいブランチの名前には、今回加えたい変更の内容を表す名前をつけましょう。
-左下の表示が `main` から新しいブランチの名前に変わったことを確認してください。
+左下の表示が`main`から新しいブランチの名前に変わったことを確認してください。
 
 <video src={createNewBranchVideo} muted controls />
 
-:::info[`git switch` コマンド]
+:::info[`git switch`コマンド]
 
 ブランチの作成をコマンドラインから行うこともできます。
 
 まずは、現在いるブランチを確認してみましょう。
-ターミナルで `git branch` コマンドを実行してください。
+ターミナルで`git branch`コマンドを実行してください。
 
 ```shell
 $ git branch
 * main
 ```
 
-ここで、`*` から始まっているのが、現在いるブランチです。
-`main` となっているはずです。
+ここで、`*`から始まっているのが、現在いるブランチです。
+`main`となっているはずです。
 
-`git switch` コマンドを使うことで、ブランチを切り替えることができます。
-切り替え先のブランチが存在しない場合 `-c` というオプションをつけることで、新しいブランチを作成して切り替えることができます。
+`git switch`コマンドを使うことで、ブランチを切り替えることができます。
+切り替え先のブランチが存在しない場合`-c`というオプションをつけることで、新しいブランチを作成して切り替えることができます。
 
 ```shell
 git switch -c 新しいブランチ名
 ```
 
-現在いるブランチを確認すると、`*` が移動しているはずです。
+現在いるブランチを確認すると、`*`が移動しているはずです。
 
 ```shell
 $ git branch
@@ -222,23 +222,23 @@ git push origin ブランチ名
 次に変更をメインのブランチに反映します。
 GitHubのプルリクエストという機能を使うことで、簡単に変更の内容を他の人に確認してもらい、メインのブランチに反映することができます。
 
-GitHubを開き `Pull requests` を開いてください。
+GitHubを開き`Pull requests`を開いてください。
 
 ![プルリクエストを作成](./pull-requests-tab.png)
 
-`New pull request` を押してください。
+`New pull request`を押してください。
 
 ![ブランチ選択前](./compare-changes.png)
 
-`compare` と書いてある方のブランチを変更して、さきほど作成したブランチを選択してください。
+`compare`と書いてある方のブランチを変更して、さきほど作成したブランチを選択してください。
 
 ![ブランチ選択後](./comparing-changes.png)
 
-`Create pull request` を押してください。
+`Create pull request`を押してください。
 
 ![プルリクエストの作成](./create-pull-request.png)
 
-確認画面が出るので、コメントを書いて `Create pull request` を押してください。
+確認画面が出るので、コメントを書いて`Create pull request`を押してください。
 これで、プルリクエストを作成することができました。
 
 <video src={createPullRequestVideo} muted controls />
@@ -255,12 +255,12 @@ gitGraph
   merge "ブランチ名"
 ```
 
-メインのブランチと変更を加えたブランチとの差分は、`Files changed` タブから確認できます。
-変更が良さそうだったら、`Merge pull request` を押してください。
+メインのブランチと変更を加えたブランチとの差分は、`Files changed`タブから確認できます。
+変更が良さそうだったら、`Merge pull request`を押してください。
 これで、メインのブランチに変更を加えたブランチを**マージ**することができます。
 マージとは、あるブランチと別のブランチとを統合することです。
 
-マージしたら、不要になったブランチは `Delete branch` を押して削除しておきましょう。
+マージしたら、不要になったブランチは`Delete branch`を押して削除しておきましょう。
 
 ![プルリクエストをマージ](./merge-pull-request.png)
 
@@ -268,10 +268,10 @@ gitGraph
 
 ### 新たなプルリクエストを作成する
 
-これ以降プルリクエストを作る場合は、リモートリポジトリのメインのブランチに他の人が変更を加えている可能性があるため、`main` ブランチに戻って、リモートリポジトリから新たな変更を**プル**しましょう。プルするとは、自分のPC上にリモートリポジトリの変更を取り込むことです。
+これ以降プルリクエストを作る場合は、リモートリポジトリのメインのブランチに他の人が変更を加えている可能性があるため、`main`ブランチに戻って、リモートリポジトリから新たな変更を**プル**しましょう。プルするとは、自分のPC上にリモートリポジトリの変更を取り込むことです。
 その後は、今までと同様に新しいブランチを作成して進めていきます。
 
-リモートリポジトリの変更をプルするには、`Pull, Push` > `Pull from...` > `origin/main` を押します。
+リモートリポジトリの変更をプルするには、`Pull, Push`>`Pull from...`>`origin/main`を押します。
 
 <video src={pullBranchVideo} muted controls />
 
diff --git a/docs/3-web-servers/13-deploy-on-render/index.mdx b/docs/3-web-servers/13-deploy-on-render/index.mdx
index 77e49d7cf..ad173bd56 100644
--- a/docs/3-web-servers/13-deploy-on-render/index.mdx
+++ b/docs/3-web-servers/13-deploy-on-render/index.mdx
@@ -28,19 +28,19 @@ import dynamicSiteDeployVideo from "./dynamic-site-deploy.mp4";
 
 ![Renderのホーム画面](./render-home.png)
 
-この画面の `Static Sites` と `Web Services` の違いを解説します。
+この画面の`Static Sites`と`Web Services`の違いを解説します。
 
-`Static Sites` は静的ページのことで、大まかに言えば「内容が変化しないWebページ」です。サーバーにアップロードされてから内容が変化せず、いつ閲覧しても同じページが表示されます。
+`Static Sites`は静的ページのことで、大まかに言えば「内容が変化しないWebページ」です。サーバーにアップロードされてから内容が変化せず、いつ閲覧しても同じページが表示されます。
 
-一方、Renderにおける `Web Services` は静的ページの対義語にあたる動的ページに分類されます。これは大まかに言えば「内容が変化するWebページ」で、先ほどやったようなデータベースやサーバーとの通信をすることで閲覧する端末や閲覧する時間によって内容が異なるページが表示されます。
+一方、Renderにおける`Web Services`は静的ページの対義語にあたる動的ページに分類されます。これは大まかに言えば「内容が変化するWebページ」で、先ほどやったようなデータベースやサーバーとの通信をすることで閲覧する端末や閲覧する時間によって内容が異なるページが表示されます。
 
-動的ページはSNSやログイン機能のあるページなど、Webサービスでは必要不可欠ですが、その都度サーバーとの通信をしなければならないため静的ページに比べてサーバー負荷が大きいというデメリットがあります。Renderでも `Static Sites` は無料ですが、`Web Services` はサーバーの性能によって無料〜月450ドルのプランを選択することになります。
+動的ページはSNSやログイン機能のあるページなど、Webサービスでは必要不可欠ですが、その都度サーバーとの通信をしなければならないため静的ページに比べてサーバー負荷が大きいというデメリットがあります。Renderでも`Static Sites`は無料ですが、`Web Services`はサーバーの性能によって無料〜月450ドルのプランを選択することになります。
 
 ## 静的サイトのデプロイ
 
 RenderをGitHubのリポジトリと接続することで、ファイルを編集するごとに手動でサーバーにアップロードし直す必要なくGitHubでの更新に合わせて自動でWebサイトを更新することができます。 事前にアプリケーション全体を GitHubに保存しておいてください。
 
-静的サイトをデプロイするには、ホーム画面から `Static Sites` を選択しましょう。
+静的サイトをデプロイするには、ホーム画面から`Static Sites`を選択しましょう。
 
 リポジトリを選択します。
 
@@ -50,8 +50,8 @@ RenderをGitHubのリポジトリと接続することで、ファイルを編
 
 ![静的サイトの設定](./static-site-config.png)
 
-`Create Static Site` を押して、ステータスが `Live` になったら成功です！
-表示されているリンク (動画の例では `https://render-test-1zpa.onrender.com`) にアプリケーションが公開されています！
+`Create Static Site`を押して、ステータスが`Live`になったら成功です！
+表示されているリンク (動画の例では`https://render-test-1zpa.onrender.com`) にアプリケーションが公開されています！
 
 <video src={staticSiteDeployVideo} controls muted />
 
@@ -59,7 +59,7 @@ RenderをGitHubのリポジトリと接続することで、ファイルを編
 
 プルリクエストした内容を実際に確認できるように、プレビューページを自動で生成することもできます。
 
-設定で、`Enable PR Previews` を設定しましょう。
+設定で、`Enable PR Previews`を設定しましょう。
 
 ![Enable PR Previews](./enable-pr-previews.png)
 
@@ -71,7 +71,7 @@ RenderをGitHubのリポジトリと接続することで、ファイルを編
 
 ## 動的サイトのデプロイ
 
-Renderで動的サイトをデプロイするには、ホーム画面から `Web Services` を選択しましょう。
+Renderで動的サイトをデプロイするには、ホーム画面から`Web Services`を選択しましょう。
 
 静的サイトのときと同様にリポジトリを選択します。
 
@@ -79,7 +79,7 @@ Renderで動的サイトをデプロイするには、ホーム画面から `Web
 
 ![動的サイトの設定](./dynamic-site-config.png)
 
-ステータスが `Live` になったら成功です！
+ステータスが`Live`になったら成功です！
 
 ![Live](./live.png)
 
@@ -87,7 +87,7 @@ Renderで動的サイトをデプロイするには、ホーム画面から `Web
 
 :::tip[ポート番号]
 
-Renderでは必要ありませんが、PaaSを利用するにあたって、プログラムの改変が必要になる場合があります。ポート番号は、その一例です。ポート番号は `PORT` という名前の環境変数によって指定されています。Node.jsでは、環境変数は `process.env` 変数を用いて取得できるので、このポート番号を指定しましょう。
+Renderでは必要ありませんが、PaaSを利用するにあたって、プログラムの改変が必要になる場合があります。ポート番号は、その一例です。ポート番号は`PORT`という名前の環境変数によって指定されています。Node.jsでは、環境変数は`process.env`変数を用いて取得できるので、このポート番号を指定しましょう。
 
 ```javascript
 app.listen(process.env.PORT || 3000);
diff --git a/docs/4-advanced/01-fetch-api/index.mdx b/docs/4-advanced/01-fetch-api/index.mdx
index b379f11a7..66a63b0b6 100644
--- a/docs/4-advanced/01-fetch-api/index.mdx
+++ b/docs/4-advanced/01-fetch-api/index.mdx
@@ -27,11 +27,11 @@ document.getElementById("fetch-button").onclick = async () => {
 
 <ViewSource url={import.meta.url} path="_samples/fetch-api" />
 
-`async () => {}` は、<Term>非同期関数</Term>、つまり `async` キーワードのついた関数を生成するための<Term>アロー関数</Term>式です。
+`async () => {}`は、<Term>非同期関数</Term>、つまり`async`キーワードのついた関数を生成するための<Term>アロー関数</Term>式です。
 
-[`fetch` 関数](https://developer.mozilla.org/ja/docs/Web/API/fetch)は、<Term>リクエスト</Term>を発行するための関数です。標準では<Term>GETリクエスト</Term>が発行されます。この関数の戻り値に `await 演算子` を適用すると、発行した<Term>リクエスト</Term>に対する [`Response` クラス](https://developer.mozilla.org/ja/docs/Web/API/Response)のインスタンスが得られます。`fetch` 関数を利用することで、ページの再読み込みを伴わず、関数が実行されるタイミングで<Term>リクエスト</Term>を発行することができます。
+[`fetch`関数](https://developer.mozilla.org/ja/docs/Web/API/fetch)は、<Term>リクエスト</Term>を発行するための関数です。標準では<Term>GETリクエスト</Term>が発行されます。この関数の戻り値に`await 演算子`を適用すると、発行した<Term>リクエスト</Term>に対する[`Response`クラス](https://developer.mozilla.org/ja/docs/Web/API/Response)のインスタンスが得られます。`fetch`関数を利用することで、ページの再読み込みを伴わず、関数が実行されるタイミングで<Term>リクエスト</Term>を発行することができます。
 
-[`Response#text` メソッド](https://developer.mozilla.org/ja/docs/Web/API/Response/text)は、<Term>レスポンスボディ</Term>全体を文字列として読み込むための<Term>非同期関数</Term>です。
+[`Response#text`メソッド](https://developer.mozilla.org/ja/docs/Web/API/Response/text)は、<Term>レスポンスボディ</Term>全体を文字列として読み込むための<Term>非同期関数</Term>です。
 
 なお、<Term>サーバー</Term>では次のプログラムが動作しているものとします。
 
@@ -50,9 +50,9 @@ app.listen(3000);
 
 ## <Term>POSTリクエスト</Term>を送信する
 
-何もオプションをつけずに呼び出された `fetch` 関数は、<Term>GETリクエスト</Term>を送信します。しかしながら、`fetch` 関数の第2引数に指定したオブジェクトの `method` プロパティに `"post"` を指定することで、<Term>POSTリクエスト</Term>を送信できます。
+何もオプションをつけずに呼び出された`fetch`関数は、<Term>GETリクエスト</Term>を送信します。しかしながら、`fetch`関数の第2引数に指定したオブジェクトの`method`プロパティに`"post"`を指定することで、<Term>POSTリクエスト</Term>を送信できます。
 
-このとき、<Term>リクエストボディ</Term>は、 `fetch` 関数の第2引数に指定したオブジェクトの `body` プロパティに指定します。
+このとき、<Term>リクエストボディ</Term>は、`fetch`関数の第2引数に指定したオブジェクトの`body`プロパティに指定します。
 
 ```javascript title="static/script.js"
 document.getElementById("send-button").onclick = async () => {
@@ -83,15 +83,15 @@ app.listen(3000);
 
 <ViewSource url={import.meta.url} path="_samples/send-post-request" />
 
-HTMLのフォームで送ったものと同じ形式でデータを送信するには、[GETリクエストとPOSTリクエスト](/docs/web-servers/get-post/)節で扱ったように、<Term>リクエストボディ</Term>が<Term>クエリ文字列</Term>の形式になっている必要があります。[`URLSearchParams` クラス](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams)を用いると、<Term>クエリ文字列</Term>を簡単に扱うことができます。この例では、<Term>リクエストボディ</Term>には `name=入力された名前&age=入力された年齢` といった文字列が格納されます。
+HTMLのフォームで送ったものと同じ形式でデータを送信するには、[GETリクエストとPOSTリクエスト](/docs/web-servers/get-post/)節で扱ったように、<Term>リクエストボディ</Term>が<Term>クエリ文字列</Term>の形式になっている必要があります。[`URLSearchParams`クラス](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams)を用いると、<Term>クエリ文字列</Term>を簡単に扱うことができます。この例では、<Term>リクエストボディ</Term>には`name=入力された名前&age=入力された年齢`といった文字列が格納されます。
 
 ## <Term>リクエストボディ</Term>に<Term>JSON</Term>を使用する
 
 前項では、<Term>リクエストボディ</Term>に<Term>クエリ文字列</Term>の形式を用いましたが、<Term>JSON</Term>を用いることで、より複雑なデータを扱えるようになります。
 
-[`JSON.stringify` 関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)は、JavaScriptオブジェクトを受け取って<Term>JSON</Term>文字列を返す関数です。この値を<Term>リクエストボディ</Term>に指定しています。
+[`JSON.stringify`関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)は、JavaScriptオブジェクトを受け取って<Term>JSON</Term>文字列を返す関数です。この値を<Term>リクエストボディ</Term>に指定しています。
 
-`fetch` 関数の第2引数の `headers` オプションでは、<Term>リクエストヘッダ</Term>を指定します。<Term>リクエストボディ</Term>に<Term>JSON</Term>を指定する場合は、**`Content-Type` リクエストヘッダ**を `"application/json"` に指定します。
+`fetch`関数の第2引数の`headers`オプションでは、<Term>リクエストヘッダ</Term>を指定します。<Term>リクエストボディ</Term>に<Term>JSON</Term>を指定する場合は、**`Content-Type`リクエストヘッダ**を`"application/json"`に指定します。
 
 ```javascript title="static/script.js"
 document.getElementById("send-button").onclick = async () => {
@@ -108,7 +108,7 @@ document.getElementById("send-button").onclick = async () => {
 };
 ```
 
-サーバー側では、<Term>リクエストボディ</Term>のJSONを解釈するため、[`express.urlencoded`](https://expressjs.com/ja/api.html#express.urlencoded) の代わりに [`express.json`](https://expressjs.com/ja/api.html#express.json) を用います。
+サーバー側では、<Term>リクエストボディ</Term>のJSONを解釈するため、[`express.urlencoded`](https://expressjs.com/ja/api.html#express.urlencoded)の代わりに[`express.json`](https://expressjs.com/ja/api.html#express.json)を用います。
 
 ```javascript title="main.mjs"
 import express from "express";
@@ -128,9 +128,9 @@ app.listen(3000);
 
 <ViewSource url={import.meta.url} path="_samples/json-request-body" />
 
-:::tip[`Content-Type` <Term type="httpHeaderBody">リクエスト・レスポンスヘッダ</Term>]
+:::tip[`Content-Type`<Term type="httpHeaderBody">リクエスト・レスポンスヘッダ</Term>]
 
-`Content-Type` ヘッダは、<Term>リクエストボディ</Term>や<Term>レスポンスボディ</Term>の種類を識別するために使用されます。ここで使用する種類は、[**MIMEタイプ**](https://developer.mozilla.org/ja/docs/Glossary/MIME_type)と呼ばれます。
+`Content-Type`ヘッダは、<Term>リクエストボディ</Term>や<Term>レスポンスボディ</Term>の種類を識別するために使用されます。ここで使用する種類は、[**MIMEタイプ**](https://developer.mozilla.org/ja/docs/Glossary/MIME_type)と呼ばれます。
 
 代表的なMIMEタイプとして、次のような値が定義されています。
 
@@ -147,13 +147,13 @@ app.listen(3000);
 
 ## 課題
 
-`Fetch API` を用いてチャットアプリを作成してみましょう。
+`Fetch API`を用いてチャットアプリを作成してみましょう。
 
 <video src={chatAppVideo} controls muted />
 
 ### ヒント
 
-[掲示板を作ったとき](/docs/web-servers/get-post/) と同じく、`messages` という配列をサーバー側に用意し、メッセージが送信されたらその配列に要素を追加するようにしましょう。
+[掲示板を作ったとき](/docs/web-servers/get-post/) と同じく、`messages`という配列をサーバー側に用意し、メッセージが送信されたらその配列に要素を追加するようにしましょう。
 
 ```javascript title="main.mjs"
 const messages = [];
@@ -162,9 +162,9 @@ app.post("/send", (request, response) => {
 });
 ```
 
-`/messages` への<Term>GETリクエスト</Term>に対し、メッセージの一覧を<Term>JSON</Term>で応答するようにしてみましょう。
+`/messages`への<Term>GETリクエスト</Term>に対し、メッセージの一覧を<Term>JSON</Term>で応答するようにしてみましょう。
 
-[`express.Response#json` メソッド](https://expressjs.com/ja/api.html#res.json)は、受け取ったオブジェクトを `JSON.stringify` によって<Term>JSON</Term>としたうえで<Term>レスポンス</Term>するためのメソッドです。このとき、`Content-Type` レスポンスヘッダは自動的に `"application/json"` に設定されます。
+[`express.Response#json`メソッド](https://expressjs.com/ja/api.html#res.json)は、受け取ったオブジェクトを`JSON.stringify`によって<Term>JSON</Term>としたうえで<Term>レスポンス</Term>するためのメソッドです。このとき、`Content-Type`レスポンスヘッダは自動的に`"application/json"`に設定されます。
 
 ```javascript title="main.mjs"
 app.get("/messages", (request, response) => {
@@ -172,7 +172,7 @@ app.get("/messages", (request, response) => {
 });
 ```
 
-新着メッセージを確認するために、定期的に `/messages` に対して `fetch` 関数を用いて<Term>リクエスト</Term>しましょう。`setInterval` 関数が利用できます。
+新着メッセージを確認するために、定期的に`/messages`に対して`fetch`関数を用いて<Term>リクエスト</Term>しましょう。`setInterval`関数が利用できます。
 
 ```javascript title="static/script.js"
 setInterval(async () => {
@@ -181,7 +181,7 @@ setInterval(async () => {
 }, 1000);
 ```
 
-`innerHTML` プロパティを空文字列とすることで要素の子要素を全て削除できます。`document.createElement` 関数を用いて再び生成し直しましょう。
+`innerHTML`プロパティを空文字列とすることで要素の子要素を全て削除できます。`document.createElement`関数を用いて再び生成し直しましょう。
 
 ```html title="static/index.html"
 <ul id="message-list"></ul>
diff --git a/docs/4-advanced/02-bundler/index.mdx b/docs/4-advanced/02-bundler/index.mdx
index 49c781822..fcb2dd241 100644
--- a/docs/4-advanced/02-bundler/index.mdx
+++ b/docs/4-advanced/02-bundler/index.mdx
@@ -22,7 +22,7 @@ JavaScriptは、当初はWebサイトに簡易的な動きを追加させるた
 
 ### <Term>モジュールバンドラ</Term>
 
-通常、規模の大きなプログラムは、見通しが良くなるよう複数のファイルに分割されます。HTMLから複数のJavaScriptを読み込むためには `script` タグを並べれば良いですが、[HTTPサーバー](/docs/web-servers/server/)の節で学んだように、`script` タグの数だけ<Term>HTTPリクエスト</Term>が発行されてしまうため非効率的です。
+通常、規模の大きなプログラムは、見通しが良くなるよう複数のファイルに分割されます。HTMLから複数のJavaScriptを読み込むためには`script`タグを並べれば良いですが、[HTTPサーバー](/docs/web-servers/server/)の節で学んだように、`script`タグの数だけ<Term>HTTPリクエスト</Term>が発行されてしまうため非効率的です。
 
 [webpack](https://webpack.js.org)のような<Term>**モジュールバンドラ**</Term>を用いることで、複数のJavaScriptファイルを統合できます。
 
@@ -48,11 +48,11 @@ Viteを用いて新しくプロジェクトを作成してみましょう。
 npm create vite@latest
 ```
 
-を実行します。`Select a framework` と尋ねられるので、`Vanilla` を選択してください。その後、`Select a variant` と尋ねられるので、`JavaScript` を選択してください。
+を実行します。`Select a framework`と尋ねられるので、`Vanilla`を選択してください。その後、`Select a variant`と尋ねられるので、`JavaScript`を選択してください。
 
-すると、`package.json` を含む新しいディレクトリがカレントディレクトリに作成されます。このディレクトリをVS Codeで開きましょう。
+すると、`package.json`を含む新しいディレクトリがカレントディレクトリに作成されます。このディレクトリをVS Codeで開きましょう。
 
-続いて、作成された `package.json` をもとにnpmから必要なパッケージをダウンロードするため、
+続いて、作成された`package.json`をもとにnpmから必要なパッケージをダウンロードするため、
 
 ```shell
 npm install
@@ -66,11 +66,11 @@ npm run dev
 
 を実行してください。
 
-Vite内蔵のウェブサーバーが起動し、`http://localhost:5173/` でウェブサイトが表示されます。
+Vite内蔵のウェブサーバーが起動し、`http://localhost:5173/`でウェブサイトが表示されます。
 
 ## Viteの仕組み
 
-Viteの挙動を理解するため、<kbd>control</kbd> + <kbd>C</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>C</kbd> (Windows) で先ほど起動させたウェブサーバーを停止させ、`npm run build` コマンドを実行してみましょう。
+Viteの挙動を理解するため、<kbd>control</kbd> + <kbd>C</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>C</kbd> (Windows) で先ほど起動させたウェブサーバーを停止させ、`npm run build`コマンドを実行してみましょう。
 
 ```shell
 $ npm run build
@@ -87,17 +87,17 @@ dist/assets/index-44b5bae5.js        1.45 kB │ gzip: 0.75 kB
 ✓ built in 64ms
 ```
 
-これにより、カレントディレクトリに `dist` ディレクトリが作成され、<Term>トランスパイル</Term>と<Term type="moduleBundler">バンドル</Term>の結果が格納されます。
+これにより、カレントディレクトリに`dist`ディレクトリが作成され、<Term>トランスパイル</Term>と<Term type="moduleBundler">バンドル</Term>の結果が格納されます。
 
-出力されたファイルを元のファイルと比較してみましょう。元の `index.html` や `main.js` が、変換された状態で出力されていることがわかります。ディレクトリごと[Netlify Drop](/docs/trial-session/deploy-application/)などにアップロードすれば使用可能になるでしょう。
+出力されたファイルを元のファイルと比較してみましょう。元の`index.html`や`main.js`が、変換された状態で出力されていることがわかります。ディレクトリごと[Netlify Drop](/docs/trial-session/deploy-application/)などにアップロードすれば使用可能になるでしょう。
 
 <video src={buildVideo} controls />
 
-:::tip[`npm run` コマンド]
+:::tip[`npm run`コマンド]
 
-`npm run` コマンドは、`package.json` の `scripts` プロパティに記載されたコマンドを実行します。開発によく使うコマンドを登録しておくことで、コマンドを打つ手間を削減できます。
+`npm run`コマンドは、`package.json`の`scripts`プロパティに記載されたコマンドを実行します。開発によく使うコマンドを登録しておくことで、コマンドを打つ手間を削減できます。
 
-`npm create vite@latest` が自動的に生成する `package.json` の `scripts` プロパティは、次のようになっていました。ここに記載されたコマンドでは、`npx` コマンドを用いたときのように、npmでインストールされたパッケージをそのまま実行できます。例えば、`npm run dev` コマンドを実行することで、`npx vite` に相当する処理が行われます。
+`npm create vite@latest`が自動的に生成する`package.json`の`scripts`プロパティは、次のようになっていました。ここに記載されたコマンドでは、`npx`コマンドを用いたときのように、npmでインストールされたパッケージをそのまま実行できます。例えば、`npm run dev`コマンドを実行することで、`npx vite`に相当する処理が行われます。
 
 ```json title="package.json (一部抜粋)"
 {
@@ -113,7 +113,7 @@ dist/assets/index-44b5bae5.js        1.45 kB │ gzip: 0.75 kB
 
 ## npmのパッケージをWebブラウザ上で利用する
 
-npmのパッケージがブラウザ上での実行に対応している場合は、Viteをはじめとした<Term>トランスパイラ</Term>や<Term>モジュールバンドラ</Term>により、ブラウザ向けのJavaScriptに変換させられます。例として `date-fns` パッケージを使用してみましょう。
+npmのパッケージがブラウザ上での実行に対応している場合は、Viteをはじめとした<Term>トランスパイラ</Term>や<Term>モジュールバンドラ</Term>により、ブラウザ向けのJavaScriptに変換させられます。例として`date-fns`パッケージを使用してみましょう。
 
 ```javascript
 import { format } from "date-fns";
@@ -145,7 +145,7 @@ app
 
 <ViewSource url={import.meta.url} path="_samples/fullstack-app" />
 
-`npm run build` コマンドによってViteがビルド結果を `/dist` に出力するようにしておきます。
+`npm run build`コマンドによってViteがビルド結果を`/dist`に出力するようにしておきます。
 
 ```json title="/package.json"
 {
@@ -156,7 +156,7 @@ app
 }
 ```
 
-`express.static` によりViteが作成したディレクトリを指定すれば完成です。
+`express.static`によりViteが作成したディレクトリを指定すれば完成です。
 
 ```javascript title="server/main.mjs"
 import express from "express";
@@ -172,7 +172,7 @@ app.listen(3000);
 
 ## 課題
 
-- [`chart.js`](https://www.npmjs.com/package/chart.js) を用いると、ブラウザ上に非常に美しいグラフを描画することができます。このパッケージを用いて、適当なデータをビジュアライズしてみましょう。
+- [`chart.js`](https://www.npmjs.com/package/chart.js)を用いると、ブラウザ上に非常に美しいグラフを描画することができます。このパッケージを用いて、適当なデータをビジュアライズしてみましょう。
 
   <ViewSource url={import.meta.url} path="_samples/chartjs" noCodeSandbox />
 
diff --git a/docs/4-advanced/03-typescript/index.mdx b/docs/4-advanced/03-typescript/index.mdx
index 43f2b77f2..319cb4fc5 100644
--- a/docs/4-advanced/03-typescript/index.mdx
+++ b/docs/4-advanced/03-typescript/index.mdx
@@ -18,13 +18,13 @@ function formatDate(date) {
 }
 ```
 
-この関数の `date` 引数には、どのような値を指定すれば良いでしょうか。答えは、[`Date` オブジェクト](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)を指定することです。`formatDate(new Date("2022-01-01"))` は動作しますが、`formatDate("2022-01-01")` はエラーになってしまいます。しかも、エラーが発生するかどうかは実際に実行してみるまでわかりません。
+この関数の`date`引数には、どのような値を指定すれば良いでしょうか。答えは、[`Date`オブジェクト](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)を指定することです。`formatDate(new Date("2022-01-01"))`は動作しますが、`formatDate("2022-01-01")`はエラーになってしまいます。しかも、エラーが発生するかどうかは実際に実行してみるまでわかりません。
 
 上のような単純なプログラムならこういった問題は起きにくいですが、プログラムの規模が大きくなるにつれ、「どういった値がやりとりされているのか」という情報を把握することが重要になってきます。こういった情報を、**データ型**、あるいは単に**型**と呼びます。
 
 [TypeScript](https://www.typescriptlang.org/)を用いると、プログラム中にデータ型を記述できるようになります。TypeScriptは、Microsoft社によって開発された、JavaScriptに<Term>トランスパイル</Term>して用いられる言語です。
 
-TypeScriptにおける型は、通常 `:` の記号に続けて記述します。例えば、先程のプログラムをTypeScriptを用いて書き直すと、次のようになります。引数の部分に型指定が入っているところに注目してください。
+TypeScriptにおける型は、通常`:`の記号に続けて記述します。例えば、先程のプログラムをTypeScriptを用いて書き直すと、次のようになります。引数の部分に型指定が入っているところに注目してください。
 
 ```typescript
 function formatDate(date: Date) {
@@ -34,7 +34,7 @@ function formatDate(date: Date) {
 
 これにより、次のような開発者体験が得られます。
 
-- `date.` と入力されたタイミングで、使用可能なメソッドが全て表示されます
+- `date.`と入力されたタイミングで、使用可能なメソッドが全て表示されます
 - 誤った型の引数 (動画内では文字列) を指定すると、エラーが表示されるようになります
 
 <video src={typescriptDemoVideo} controls muted />
@@ -51,7 +51,7 @@ TypeScriptを用いてNode.jsのプログラムを作成するには、次の手
 
 <video src={setupTypeScriptNodeVideo} controls />
 
-まずは、プロジェクトルートに `package.json` を作成します。`npm init` を実行すればよいのでした。
+まずは、プロジェクトルートに`package.json`を作成します。`npm init`を実行すればよいのでした。
 
 続いて、
 
@@ -59,9 +59,9 @@ TypeScriptを用いてNode.jsのプログラムを作成するには、次の手
 npm install -D typescript
 ```
 
-を実行し、[typescriptパッケージ](https://www.npmjs.com/package/typescript)をインストールします。`-D` オプションは「開発時のみに使用する」という意思表示になります。`package.json` に記録される方法が少しだけ変わります。
+を実行し、[typescriptパッケージ](https://www.npmjs.com/package/typescript)をインストールします。`-D`オプションは「開発時のみに使用する」という意思表示になります。`package.json`に記録される方法が少しだけ変わります。
 
-続いて、`main.ts` ファイルを作成します。TypeScriptファイルの拡張子は通常 `.ts` です。今回は、
+続いて、`main.ts`ファイルを作成します。TypeScriptファイルの拡張子は通常`.ts`です。今回は、
 
 ```typescript title="main.ts"
 const language: string = "TypeScript";
@@ -70,7 +70,7 @@ console.log(`Hello ${language}!`);
 
 としました。
 
-TypeScriptファイルの作成が終わったら、<Term>`npx` コマンド</Term>で[TypeScriptパッケージを実行](https://www.typescriptlang.org/docs/handbook/compiler-options.html)し、TypeScriptファイルをJavaScriptファイルにトランスパイルします。パッケージ名と異なり、`tsc` となるので注意しましょう。
+TypeScriptファイルの作成が終わったら、<Term>`npx`コマンド</Term>で[TypeScriptパッケージを実行](https://www.typescriptlang.org/docs/handbook/compiler-options.html)し、TypeScriptファイルをJavaScriptファイルにトランスパイルします。パッケージ名と異なり、`tsc`となるので注意しましょう。
 
 ```shell
 npx tsc main.ts
@@ -84,7 +84,7 @@ TypeScriptを試すには、Microsoftが提供している[TS Playground](https:
 
 ### 型を記述できる場所
 
-TypeScriptの型は、関数の引数や戻り値、変数の後に `:` とともに記述できます。
+TypeScriptの型は、関数の引数や戻り値、変数の後に`:`とともに記述できます。
 
 ```typescript
 // addはnumber型の引数a, bをとりnumber型の値を返す関数
@@ -106,7 +106,7 @@ add("3", "4"); // Argument of type 'string' is not assignable to parameter of ty
 
 ### データ型と値
 
-TypeScriptのデータ型は、**全ての値を含む集合 `unknown` の部分集合**になります。ある値 `v` が集合 `T` に属するとき、`v` は `T` 型であるといいます。例えば、数値 `1` は `1` 型、`number` 型、`unknown` 型のいずれにも当てはまります。なお、空集合は `never` 型です。
+TypeScriptのデータ型は、**全ての値を含む集合`unknown`の部分集合**になります。ある値`v`が集合`T`に属するとき、`v`は`T`型であるといいます。例えば、数値`1`は`1`型、`number`型、`unknown`型のいずれにも当てはまります。なお、空集合は`never`型です。
 
 ```typescript
 // すべて正しい
@@ -120,9 +120,9 @@ const c: 1 = 1; // 左辺の1はデータ型 (unknownの部分集合) として
 
 ![TypeScriptのデータ型](./typescript-types.drawio.svg)
 
-:::tip[`any` 型]
+:::tip[`any`型]
 
-TypeScriptの標準設定では、型が判明しなかった場合、`any` 型が指定されたものとみなされます。`any` 型の値には、どんな操作でも許容されます。`any` 型の値はどんな型の変数にも代入できますし、`any` 型の変数にはどんな値でも代入できます。上の集合のどの部分にも当てはまりません。
+TypeScriptの標準設定では、型が判明しなかった場合、`any`型が指定されたものとみなされます。`any`型の値には、どんな操作でも許容されます。`any`型の値はどんな型の変数にも代入できますし、`any`型の変数にはどんな値でも代入できます。上の集合のどの部分にも当てはまりません。
 
 ```typescript
 const strangeValue: any = 1;
@@ -135,7 +135,7 @@ strangeValue.strangeMethod();
 
 ### データ型の別名
 
-`type` 宣言を用いると、データ型に対して別名を付けられます。
+`type`宣言を用いると、データ型に対して別名を付けられます。
 
 ```typescript
 type Age = number;
@@ -164,7 +164,7 @@ type Student = {
 let student: Student = { name: "田中", age: 18 };
 ```
 
-なお、余分なプロパティを持つオブジェクトでも問題なく代入できます。次の例から、`Teacher` は `Student` の部分集合であることが分かります。
+なお、余分なプロパティを持つオブジェクトでも問題なく代入できます。次の例から、`Teacher`は`Student`の部分集合であることが分かります。
 
 ```typescript
 type Teacher = {
@@ -182,7 +182,7 @@ teacher = student;
 
 ### 配列型
 
-型 `T` の配列型は、`T[]` のように記述できます。また、`T` が `U` の部分集合であれば、`T[]` は `U[]` の部分集合になります。
+型`T`の配列型は、`T[]`のように記述できます。また、`T`が`U`の部分集合であれば、`T[]`は`U[]`の部分集合になります。
 
 ```typescript
 const numbers: number[] = [1, 2, 3];
@@ -279,7 +279,7 @@ function identity(x) {
 }
 ```
 
-こういった関数では、引数 `x` はどんな型の値も指定できます。つまり、`x` は `unknown` 型とするのが適切なはずです。しかしながら、引数を `unknown` 型としてしまうと、戻り値が `unknown` 型となってしまい、戻り値に対する操作が一切不可能になってしまいます。
+こういった関数では、引数`x`はどんな型の値も指定できます。つまり、`x`は`unknown`型とするのが適切なはずです。しかしながら、引数を`unknown`型としてしまうと、戻り値が`unknown`型となってしまい、戻り値に対する操作が一切不可能になってしまいます。
 
 ```typescript
 function identity(x: unknown) {
@@ -309,7 +309,7 @@ identity(1).toString();
 
 こういった言語機能は他の多くのプログラミング言語でも用意されており、[ジェネリクス](https://www.typescriptlang.org/docs/handbook/2/generics.html)と呼ばれます。
 
-`type` 宣言でも型パラメータを利用できます。
+`type`宣言でも型パラメータを利用できます。
 
 ```typescript
 type BinaryOperator<T> = (a: T, b: T) => T;
@@ -324,11 +324,11 @@ npmでインストールしたパッケージがTypeScriptに対応している
 
 ![npmパッケージのTypeScript対応](./npm-typescript.png)
 
-`DT` アイコンがついているパッケージは、`@types/パッケージ名` という名称のパッケージをインストールすることで、TypeScriptからパッケージが利用可能になります。例えば、`@types/express` パッケージをインストールすることにより、`express` パッケージがTypeScriptから利用できるようになります。
+`DT`アイコンがついているパッケージは、`@types/パッケージ名`という名称のパッケージをインストールすることで、TypeScriptからパッケージが利用可能になります。例えば、`@types/express`パッケージをインストールすることにより、`express`パッケージがTypeScriptから利用できるようになります。
 
 <video src={typesPackageVideo} controls />
 
-`@types` パッケージのインストール前後で `app` の型が変わっていることが分かります。
+`@types`パッケージのインストール前後で`app`の型が変わっていることが分かります。
 
 ## フロントエンドにおけるTypeScriptの利用
 
@@ -338,27 +338,27 @@ Viteは、標準でTypeScriptのトランスパイラが内蔵されています
 
 :::tip[`tsconfig.json`]
 
-この方法でプロジェクトを作成すると、`tsconfig.json` というファイルが生成されます。TypeScriptは、さまざまなJavaScriptのニーズに合わせてカスタマイズできるようになっており、その設定を記述するためのファイルが `tsconfig.json` です。
+この方法でプロジェクトを作成すると、`tsconfig.json`というファイルが生成されます。TypeScriptは、さまざまなJavaScriptのニーズに合わせてカスタマイズできるようになっており、その設定を記述するためのファイルが`tsconfig.json`です。
 
-[公式ドキュメント](https://www.typescriptlang.org/tsconfig) には、全てのオプションの詳細な説明が記述されています。特に、[`strict` オプション](https://www.typescriptlang.org/tsconfig#strict)は、TypeScriptの能力を大幅に上昇させることができるので、有効にすることが推奨されています。`typescript` パッケージを直接インストールしたプロジェクトでは、`npx tsc --init` コマンドによりこのファイルを生成できます。
+[公式ドキュメント](https://www.typescriptlang.org/tsconfig) には、全てのオプションの詳細な説明が記述されています。特に、[`strict`オプション](https://www.typescriptlang.org/tsconfig#strict)は、TypeScriptの能力を大幅に上昇させることができるので、有効にすることが推奨されています。`typescript`パッケージを直接インストールしたプロジェクトでは、`npx tsc --init`コマンドによりこのファイルを生成できます。
 
 :::
 
 ## 課題
 
-1. `string & number` 型は何型と等しいでしょうか。
-2. 次のように定義される型 `T` に対して使用可能なプロパティは何でしょうか。
+1. `string & number`型は何型と等しいでしょうか。
+2. 次のように定義される型`T`に対して使用可能なプロパティは何でしょうか。
 
    ```typescript
    type T = { name: string; age: number } | { name: string; subject: string };
    ```
 
-3. 次の型のうち、`(v: string) => string` 型とみなせる (部分集合である) ものを全て選んでください。
+3. 次の型のうち、`(v: string) => string`型とみなせる (部分集合である) ものを全て選んでください。
    - `(v: unknown) => string`
    - `(v: never) => string`
    - `(v: string) => unknown`
    - `(v: string) => never`
-4. 次の関数 `apply` は、関数を適用する関数です。ジェネリクスを用いて適切な型をつけてください (ヒント: 引数と戻り値を表す型パラメータを定義しましょう)。
+4. 次の関数`apply`は、関数を適用する関数です。ジェネリクスを用いて適切な型をつけてください (ヒント: 引数と戻り値を表す型パラメータを定義しましょう)。
 
    ```typescript
    function apply(f, x) {
@@ -370,21 +370,21 @@ Viteは、標準でTypeScriptのトランスパイラが内蔵されています
 
 <Answer>
 
-1. `never` 型
+1. `never`型
 
    ```typescript
    type StringAndNumber = string & number; // never
    ```
 
-2. `name` のみ
+2. `name`のみ
 
-   2つの型に共通しているのは `name` プロパティだけなので、`T` 型の変数に必ず存在しているプロパティは`name` のみとなります。よって、`name` のみ使用可能となります。
+   2つの型に共通しているのは`name`プロパティだけなので、`T`型の変数に必ず存在しているプロパティは`name`のみとなります。よって、`name`のみ使用可能となります。
 
-3. `(v: unknown) => string` と `(v: string) => never`
+3. `(v: unknown) => string`と`(v: string) => never`
 
-   まず `(v: string) => never` に関してですが、こちらはなんとなく想像がつくかもしれません。`never` 型はすべての型に含まれるため `string` 型にも含まれますから、 `(v: string) => string` とみなすことができるでしょう。
+   まず`(v: string) => never`に関してですが、こちらはなんとなく想像がつくかもしれません。`never`型はすべての型に含まれるため`string`型にも含まれますから、`(v: string) => string`とみなすことができるでしょう。
 
-   一方で、`(v: unknown) => string` 型が答えになっているのは意外かもしれません。`unknown` 型は `string` 型を含むから間違いなのではないかと考えた方も多いでしょう。しかし、この理論で行くと少々不都合が生じます。例えば、次のようなコードを考えましょう。
+   一方で、`(v: unknown) => string`型が答えになっているのは意外かもしれません。`unknown`型は`string`型を含むから間違いなのではないかと考えた方も多いでしょう。しかし、この理論で行くと少々不都合が生じます。例えば、次のようなコードを考えましょう。
 
    ```javascript
    type F = (arg: { name: string, math: number }) => number;
@@ -398,9 +398,9 @@ Viteは、標準でTypeScriptのトランスパイラが内蔵されています
    f({ name: "Tanaka", math: 100 });
    ```
 
-   このコードでは、`{ name: string, math: number }` 型は `{ name: string, math: number, science: number }` 型を含んでいます。先ほどの `unknown` 型と `string` 型の関係と同じです。
+   このコードでは、`{ name: string, math: number }`型は`{ name: string, math: number, science: number }`型を含んでいます。先ほどの`unknown`型と`string`型の関係と同じです。
 
-   もしこのコードが通る場合、実際に渡された `{name: "Tanaka", math: 100}` には存在しないはずの `science` プロパティにアクセスできてしまうことになります。このようなことを防ぐために、引数の型が小さい集合になればなるほど、関数の型は大きな集合になる必要があります。
+   もしこのコードが通る場合、実際に渡された`{name: "Tanaka", math: 100}`には存在しないはずの`science`プロパティにアクセスできてしまうことになります。このようなことを防ぐために、引数の型が小さい集合になればなるほど、関数の型は大きな集合になる必要があります。
 
 4. 以下のコード
 
diff --git a/docs/4-advanced/04-react/index.mdx b/docs/4-advanced/04-react/index.mdx
index 17e7b12de..94b92a7f3 100644
--- a/docs/4-advanced/04-react/index.mdx
+++ b/docs/4-advanced/04-react/index.mdx
@@ -45,7 +45,7 @@ addTodoButton.onclick = () => {
 
 このようになってしまう根本的な原因は、**現在の状態がDOMに記憶されてしまっていることにあります**。DOMには、テキストや位置、色など、数えきれない状態が格納されています。状態の数が$n$種類あれば、その遷移パターンは$n^2$個になるわけですので、状態の数が増えることが非常に危険であることは明らかです。
 
-ところが、アプリケーションの本質的な状態というのは、一般的にそこまで多いものではありません。例えば、ToDoリストアプリケーションであれば、各ToDoを表す `string` の配列 `string[]` がひとつだけあれば、アプリケーションの状態は全て表現できていることになるはずです。
+ところが、アプリケーションの本質的な状態というのは、一般的にそこまで多いものではありません。例えば、ToDoリストアプリケーションであれば、各ToDoを表す`string`の配列`string[]`がひとつだけあれば、アプリケーションの状態は全て表現できていることになるはずです。
 
 **宣言的UI**は、こういった性質に着目します。より具体的に説明するのであれば、アプリケーションの状態$S$に対し、関数$f(S)$によりUIの状態を表現できるのであれば、開発者の関心を$S$の変化と$f$の定義のみに絞ることができるというわけです。
 
@@ -58,7 +58,7 @@ type State = { todos: string[] };
 const state: State = { todos: [] };
 ```
 
-続いて、`state` 変数をもとにUIを構築する関数 `render` を定義します。
+続いて、`state`変数をもとにUIを構築する関数`render`を定義します。
 
 ```typescript
 function render() {
@@ -73,7 +73,7 @@ function render() {
 }
 ```
 
-最後に、状態を変化させる関数を定義します。状態を変化させたら、 `render` 関数を呼び出して、変更をUIに反映させます。
+最後に、状態を変化させる関数を定義します。状態を変化させたら、`render`関数を呼び出して、変更をUIに反映させます。
 
 ```typescript
 function addTodo(todo: string) {
@@ -88,23 +88,23 @@ function removeTodo(index: number) {
 
 <ViewSource url={import.meta.url} path="_samples/todo-declarative" />
 
-これにより、アプリケーション全体の状態が変数 `state` に集約され、開発者が意識すべき状態のパターンを大幅に減らすことに成功しました。
+これにより、アプリケーション全体の状態が変数`state`に集約され、開発者が意識すべき状態のパターンを大幅に減らすことに成功しました。
 
 ## React
 
-先ほどのプログラムはうまく動作しますが、一つ問題があります。それは、`render` 関数が呼ばれるたびに全ての要素が削除され、再構築される点です。一般的に、DOMに対する操作は非常にコストが高く、可能な限り減らすことがパフォーマンス改善のために有効です。
+先ほどのプログラムはうまく動作しますが、一つ問題があります。それは、`render`関数が呼ばれるたびに全ての要素が削除され、再構築される点です。一般的に、DOMに対する操作は非常にコストが高く、可能な限り減らすことがパフォーマンス改善のために有効です。
 
 [React](https://ja.reactjs.org/)は、この問題を**仮想DOM**を用いて解決します。Reactは、DOMに似たデータ構造を内部的にJavaScriptオブジェクトの形式で保持し、実際に変更された部分のみを実際のDOMに反映させることで、高いパフォーマンスを実現しています。
 
-それでは、Reactを用いたプロジェクトを作成してみましょう。Viteでプロジェクトを作成しますが、`framework` は `React`、`variant` は `TypeScript` を選択してください。
+それでは、Reactを用いたプロジェクトを作成してみましょう。Viteでプロジェクトを作成しますが、`framework`は`React`、`variant`は`TypeScript`を選択してください。
 
 <video src={createReactProjectVideo} controls />
 
 :::tip[Reactの使用に最低限必要なパッケージ]
 
-Reactを新規プロジェクトではなく、既存のウェブプロジェクトで用いる場合には、[`react` パッケージ](https://www.npmjs.com/package/react)と、[`react-dom` パッケージ](https://www.npmjs.com/package/react-dom)が必要です。
+Reactを新規プロジェクトではなく、既存のウェブプロジェクトで用いる場合には、[`react`パッケージ](https://www.npmjs.com/package/react)と、[`react-dom`パッケージ](https://www.npmjs.com/package/react-dom)が必要です。
 
-また、React本体はTypeScriptに対応していないので、TypeScriptプロジェクトでReactを用いるためには `@types` パッケージを加えてインストールする必要があります。
+また、React本体はTypeScriptに対応していないので、TypeScriptプロジェクトでReactを用いるためには`@types`パッケージを加えてインストールする必要があります。
 
 ```json title="package.json (抜粋)"
 {
@@ -123,9 +123,9 @@ Reactを新規プロジェクトではなく、既存のウェブプロジェク
 
 ## <Term>JSX</Term>
 
-Reactを使用するプロジェクトでは、通常<Term>**JSX**</Term>と呼ばれる、JavaScriptの拡張構文も用いられます。拡張子は `.jsx` で、TypeScriptとともに用いるためには `.tsx` となります。Viteのテンプレートからプロジェクトを作成した場合には、`main.tsx` と `App.tsx` が作成されるはずです。
+Reactを使用するプロジェクトでは、通常<Term>**JSX**</Term>と呼ばれる、JavaScriptの拡張構文も用いられます。拡張子は`.jsx`で、TypeScriptとともに用いるためには`.tsx`となります。Viteのテンプレートからプロジェクトを作成した場合には、`main.tsx`と`App.tsx`が作成されるはずです。
 
-`main.tsx` はHTMLから直接実行されるファイルで、`id` 属性に `root` を持つ要素の中をReactにより管理する旨を示しています。また、このファイルから `App.tsx` で定義された関数 `App` が読み込まれています。詳細は重要ではないのでここでは扱いません。
+`main.tsx`はHTMLから直接実行されるファイルで、`id`属性に`root`を持つ要素の中をReactにより管理する旨を示しています。また、このファイルから`App.tsx`で定義された関数`App`が読み込まれています。詳細は重要ではないのでここでは扱いません。
 
 ```tsx title="main.tsx"
 ReactDOM.createRoot(document.getElementById("root")!).render(
@@ -137,7 +137,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
 
 :::tip[Non-null assertion operator]
 
-`document.getElementById("root")` の直後に続く `!` 記号は、TypeScriptのnon-null assertion operatorです。`document.getElementById` 関数は、要素が見つからなかった場合に `null` を返すため、戻り値は `HTMLElement | null` 型と定義されています。`null` である可能性がないことをプログラマが保証することをTypeScriptに伝える記号が `!` です。なお、`tsconfig.json` の設定によってはこのエラーは表示されません。
+`document.getElementById("root")`の直後に続く`!`記号は、TypeScriptのnon-null assertion operatorです。`document.getElementById`関数は、要素が見つからなかった場合に`null`を返すため、戻り値は`HTMLElement | null`型と定義されています。`null`である可能性がないことをプログラマが保証することをTypeScriptに伝える記号が`!`です。なお、`tsconfig.json`の設定によってはこのエラーは表示されません。
 
 ```typescript
 document.getElementById("root").textContent; // Object is possibly 'null'.
@@ -146,7 +146,7 @@ document.getElementById("root")!.textContent; // OK
 
 :::
 
-それでは、`App.tsx` を書き換えながら、Reactの動作を確認していきましょう。まずは、`App.tsx` を次のように修正します。
+それでは、`App.tsx`を書き換えながら、Reactの動作を確認していきましょう。まずは、`App.tsx`を次のように修正します。
 
 ```tsx title="App.tsx"
 export default function App() {
@@ -156,11 +156,11 @@ export default function App() {
 
 <ViewSource url={import.meta.url} path="_samples/react-hello-world" />
 
-このプログラムを実行すると、`div` 要素が生成され、その中に `Hello React` が表示されます。3行目の `<div>Hello React</div>` が見慣れない文法ですね。
+このプログラムを実行すると、`div`要素が生成され、その中に`Hello React`が表示されます。3行目の`<div>Hello React</div>`が見慣れない文法ですね。
 
-JSXでは、`<div>` のように、**HTMLの開始タグに似た記号が現れると、対応する終了タグまで囲まれた部分を、「JSX要素」を生成する式と解釈する**ようになります。この部分のことを以後便宜的にJSX式と呼ぶことにします。
+JSXでは、`<div>`のように、**HTMLの開始タグに似た記号が現れると、対応する終了タグまで囲まれた部分を、「JSX要素」を生成する式と解釈する**ようになります。この部分のことを以後便宜的にJSX式と呼ぶことにします。
 
-JSX式は、JSX要素 (`JSX.Element` 型の値) を生成します。この値はごく一般的なオブジェクトで、変数に代入するなど、他の値と同じように扱うことが可能です。
+JSX式は、JSX要素 (`JSX.Element`型の値) を生成します。この値はごく一般的なオブジェクトで、変数に代入するなど、他の値と同じように扱うことが可能です。
 
 ```tsx title="App.tsx"
 const message: JSX.Element = <div>Hello React</div>;
@@ -186,9 +186,9 @@ const message = React.createElement("div", null, "Hello React");
 
 :::
 
-Reactは、`App` 関数の戻り値として `JSX.Element` が返されると、それをもとに実際のDOMを構築します。この例では、`div` 要素を作成し、その中に `Hello React` というテキストを挿入します。つまり、この `JSX.Element` が、先ほどの**仮想DOM**なるものの実体です。
+Reactは、`App`関数の戻り値として`JSX.Element`が返されると、それをもとに実際のDOMを構築します。この例では、`div`要素を作成し、その中に`Hello React`というテキストを挿入します。つまり、この`JSX.Element`が、先ほどの**仮想DOM**なるものの実体です。
 
-JSX式の中に括弧 `{}` が現れると、その内部は通常のJavaScript式として評価されるようになります。これを利用して、HTML構造の中にJavaScriptによる計算結果を埋め込むことができます。
+JSX式の中に括弧`{}`が現れると、その内部は通常のJavaScript式として評価されるようになります。これを利用して、HTML構造の中にJavaScriptによる計算結果を埋め込むことができます。
 
 ```tsx title="App.tsx"
 export default function App() {
@@ -196,7 +196,7 @@ export default function App() {
 }
 ```
 
-属性の値部分にも `{}` が使用できます。
+属性の値部分にも`{}`が使用できます。
 
 ```tsx title="App.tsx"
 export default function App() {
@@ -224,7 +224,7 @@ export default function App() {
 
 :::tip[条件演算子 (三項演算子)]
 
-`?` と `:` の組で表される演算子は、**条件演算子 (三項演算子)**です。条件式の評価結果が真なら2つめの式を、偽なら3つめの式を評価します。
+`?`と`:`の組で表される演算子は、**条件演算子 (三項演算子)**です。条件式の評価結果が真なら2つめの式を、偽なら3つめの式を評価します。
 
 ```javascript
 const a = 5;
@@ -238,11 +238,11 @@ const max = a > b ? a : b; // 6
 
 ### 課題
 
-自分のテストの点数を表す変数 `score` を用意し、Reactで次を満たすプログラムを作成してください。
+自分のテストの点数を表す変数`score`を用意し、Reactで次を満たすプログラムを作成してください。
 
-- `score` が80以上なら `大変よくできました。` と表示する。
-- `score` が50以上80未満なら `よくできました。` と表示する。
-- `score` が50未満なら `もう少し頑張りましょう。` と表示する。
+- `score`が80以上なら`大変よくできました。`と表示する。
+- `score`が50以上80未満なら`よくできました。`と表示する。
+- `score`が50未満なら`もう少し頑張りましょう。`と表示する。
 
 <Answer>
 
@@ -296,9 +296,9 @@ export default function App() {
 
 ## JSXにおける条件分岐
 
-JSX要素は式の形で表現されるため、内部で `if` 文や `for` 文といった制御構造は用いることができません。
+JSX要素は式の形で表現されるため、内部で`if`文や`for`文といった制御構造は用いることができません。
 
-前項で扱ったように、`if〜else` 構造を式として表現するためには、条件演算子が使用できます。一方、`else if` を含まない単純な `if` に相当する構造をJSX式として表現するためには、通常 `&&` 演算子が用いられます。例を見てみましょう。
+前項で扱ったように、`if〜else`構造を式として表現するためには、条件演算子が使用できます。一方、`else if`を含まない単純な`if`に相当する構造をJSX式として表現するためには、通常`&&`演算子が用いられます。例を見てみましょう。
 
 ```tsx title="App.tsx"
 const age = 20;
@@ -316,20 +316,20 @@ export default function App() {
 
 :::tip[JSXと閉じタグ]
 
-JSXでは、HTMLにおいて閉じタグが必須でない要素 (この例では `input` 要素) でも閉じタグが必須となります。
+JSXでは、HTMLにおいて閉じタグが必須でない要素 (この例では`input`要素) でも閉じタグが必須となります。
 
 :::
 
-このプログラムは、`age` 変数が `18` 以上である場合のみメッセージを表示します。これは、`&&` 演算子の挙動を利用した手法です。これまで、`&&` 演算子は両辺が `true` であれば `true` を返す演算子であるとしてきました。しかしながら、[`&&` 演算子のより一般的な定義](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND)は、**左辺が[<Term>truthy</Term>](https://developer.mozilla.org/ja/docs/Glossary/Truthy)であれば右辺の値を、そうでなければ左辺の値を返す演算子**です。
+このプログラムは、`age`変数が`18`以上である場合のみメッセージを表示します。これは、`&&`演算子の挙動を利用した手法です。これまで、`&&`演算子は両辺が`true`であれば`true`を返す演算子であるとしてきました。しかしながら、[`&&`演算子のより一般的な定義](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND)は、**左辺が[<Term>truthy</Term>](https://developer.mozilla.org/ja/docs/Glossary/Truthy)であれば右辺の値を、そうでなければ左辺の値を返す演算子**です。
 
 ```typescript
 const a = 3 && 4; // 3はtruthyなのでaは4
 const b = null && "Hello"; // nullはfalsyなのでbはnull
 ```
 
-つまり、`age < 18 && <p>18歳未満の...</p>` という式は、ageが `18` 未満のとき `<p>18歳未満の...</p>` (`JSX.Element`) に、そうでないときに `false` になります。
+つまり、`age < 18 && <p>18歳未満の...</p>`という式は、ageが`18`未満のとき`<p>18歳未満の...</p>` (`JSX.Element`) に、そうでないときに`false`になります。
 
-さらに、Reactは、**JSX中に現れた `false` や `null`、`undefined` といった値は無視します**。これにより、`if` に似た構造が表現できるわけです。
+さらに、Reactは、**JSX中に現れた`false`や`null`、`undefined`といった値は無視します**。これにより、`if`に似た構造が表現できるわけです。
 
 :::tip[truthyとfalsy]
 
@@ -341,7 +341,7 @@ if ("") {
 }
 ```
 
-Boolean関数は、truthyな値を `true` に、falsyな値を `false` に変換します。
+Boolean関数は、truthyな値を`true`に、falsyな値を`false`に変換します。
 
 ```typescript
 Boolean(null); // false
@@ -352,7 +352,7 @@ Boolean("Hello"); // true
 
 ## JSXにおける繰り返し
 
-Reactでは、JSXの子要素として配列を指定することができます。ただし、**配列の要素が `JSX.Element` 型である場合、各要素の `key` 属性に重複しない値を指定する必要があります**。
+Reactでは、JSXの子要素として配列を指定することができます。ただし、**配列の要素が`JSX.Element`型である場合、各要素の`key`属性に重複しない値を指定する必要があります**。
 
 ```tsx title="App.tsx"
 const listItems = [
@@ -366,7 +366,7 @@ export default function App() {
 }
 ```
 
-この性質から、Reactにおいて [`Array#map` メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)は、繰り返し構文の代わりとして非常によく用いられます。次の例は、`Student[]` 型の変数 `students` が、`Array#map` により `JSX.Element[]` の値に変換され、`ul` 要素の子要素に指定されています。
+この性質から、Reactにおいて[`Array#map`メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)は、繰り返し構文の代わりとして非常によく用いられます。次の例は、`Student[]`型の変数`students`が、`Array#map`により`JSX.Element[]`の値に変換され、`ul`要素の子要素に指定されています。
 
 ```tsx title="App.tsx"
 type Student = { id: string; name: string; age: number };
@@ -392,7 +392,7 @@ export default function App() {
 
 ### 課題
 
-先程の `students` のデータを用いて、次のような表を作ってみましょう。
+先程の`students`のデータを用いて、次のような表を作ってみましょう。
 
 | 学籍番号  | 名前 | 年齢 |
 | --------- | ---- | ---- |
@@ -441,7 +441,7 @@ export default function App() {
 
 ## コンポーネント
 
-Reactでは、**大文字の名前から始まる関数**を、**コンポーネント**として使用できます。コンポーネントとなる関数は、`JSX.Element` を返さなければなりません。次の例では、自作のコンポーネント `Greeting` を定義しています。なお、`main.tsx` から呼び出される `App` もまたコンポーネントです。
+Reactでは、**大文字の名前から始まる関数**を、**コンポーネント**として使用できます。コンポーネントとなる関数は、`JSX.Element`を返さなければなりません。次の例では、自作のコンポーネント`Greeting`を定義しています。なお、`main.tsx`から呼び出される`App`もまたコンポーネントです。
 
 ```tsx title="App.tsx"
 function Greeting() {
@@ -457,7 +457,7 @@ export default function App() {
 }
 ```
 
-属性を指定した場合、属性名と属性の値の組み合わせからなるオブジェクトがコンポーネントの第1引数に渡されます。この引数は通常 `props` と命名されます。属性名は通常<Term>キャメルケース</Term>で表記されます。
+属性を指定した場合、属性名と属性の値の組み合わせからなるオブジェクトがコンポーネントの第1引数に渡されます。この引数は通常`props`と命名されます。属性名は通常<Term>キャメルケース</Term>で表記されます。
 
 ```tsx title="App.tsx"
 type GreetingProps = { myName: string };
@@ -475,7 +475,7 @@ export default function App() {
 }
 ```
 
-属性名には文字列しか指定できませんが、属性の値にはJavaScriptの任意の値が使用できます。次の例では、`Clock` コンポーネントの `now` 属性に `Date` オブジェクトを指定しています。
+属性名には文字列しか指定できませんが、属性の値にはJavaScriptの任意の値が使用できます。次の例では、`Clock`コンポーネントの`now`属性に`Date`オブジェクトを指定しています。
 
 ```tsx title="App.tsx"
 type ClockProps = { now: Date };
@@ -493,9 +493,9 @@ export default function App() {
 }
 ```
 
-## `useState` フックと状態
+## `useState`フックと状態
 
-Reactでは、**フック** と呼ばれる、コンポーネント内のみから呼び出すことのできる特別な関数を使用できます。フックは通常 `use` から始まる名前の関数となっています。[`useState` フック](https://ja.reactjs.org/docs/hooks-reference.html#usestate)は、最も基本的なフックで、**コンポーネントに状態を持たせるためのフック**です。次の例は、状態 `count` が、ボタンがクリックされるたびに1ずつ増加していくアプリケーションです。
+Reactでは、**フック** と呼ばれる、コンポーネント内のみから呼び出すことのできる特別な関数を使用できます。フックは通常`use`から始まる名前の関数となっています。[`useState`フック](https://ja.reactjs.org/docs/hooks-reference.html#usestate)は、最も基本的なフックで、**コンポーネントに状態を持たせるためのフック**です。次の例は、状態`count`が、ボタンがクリックされるたびに1ずつ増加していくアプリケーションです。
 
 ```tsx title="App.tsx"
 import { useState } from "react";
@@ -518,9 +518,9 @@ export default function App() {
 }
 ```
 
-`useState` 関数は、**コンポーネントに持たせる状態の初期値を引数にとり、コンポーネントの状態を作成する関数**です。型パラメータを用いて、状態の型を指定できます。この例では、初期値が `0` であるような `number` 型の状態を作成しています。
+`useState`関数は、**コンポーネントに持たせる状態の初期値を引数にとり、コンポーネントの状態を作成する関数**です。型パラメータを用いて、状態の型を指定できます。この例では、初期値が`0`であるような`number`型の状態を作成しています。
 
-`useState` 関数の戻り値は、**要素数2の配列で、0番目の要素が現在の状態を、1番目の要素が状態を更新するための関数**になります。もう少し厳密な表現を用いるのであれば、`useState<T>` 関数の戻り値は `[T, (value: T) => void]` 型とみなせます。
+`useState`関数の戻り値は、**要素数2の配列で、0番目の要素が現在の状態を、1番目の要素が状態を更新するための関数**になります。もう少し厳密な表現を用いるのであれば、`useState<T>`関数の戻り値は`[T, (value: T) => void]`型とみなせます。
 
 :::tip[配列の分割代入]
 
@@ -540,17 +540,17 @@ const setCount = useStateResult[1];
 
 :::
 
-:::tip[`void` 型]
+:::tip[`void`型]
 
-`void` 型は、通常関数の戻り値にのみ使用される型で、関数が値を返さないことを示します。
+`void`型は、通常関数の戻り値にのみ使用される型で、関数が値を返さないことを示します。
 
 :::
 
-`App` 関数内で定義されている `increment` 関数では、`setCount` 関数に対し、現在の状態である `count` 変数に `1` を加えた値を引数として渡しています。これにより、`increment` 関数が呼ばれると、状態 `count` が増加するようになります。
+`App`関数内で定義されている`increment`関数では、`setCount`関数に対し、現在の状態である`count`変数に`1`を加えた値を引数として渡しています。これにより、`increment`関数が呼ばれると、状態`count`が増加するようになります。
 
 :::tip[フック呼び出しの制約]
 
-Reactのフックは、コンポーネントの中で**毎度同じ回数、同じ順序で呼ばれる**必要があります。ですので、`if` などの制御構造の中でフックを呼び出すことは通常ありません。この理由は次の項で判明します。
+Reactのフックは、コンポーネントの中で**毎度同じ回数、同じ順序で呼ばれる**必要があります。ですので、`if`などの制御構造の中でフックを呼び出すことは通常ありません。この理由は次の項で判明します。
 
 ```tsx
 function App() {
@@ -566,9 +566,9 @@ function App() {
 
 ## コンポーネント関数が実行されるタイミング
 
-Reactにおけるコンポーネントとは、`JSX.Element` を返す関数を指すのでした。では、この関数は、どういったタイミングで実行されるのでしょうか。
+Reactにおけるコンポーネントとは、`JSX.Element`を返す関数を指すのでした。では、この関数は、どういったタイミングで実行されるのでしょうか。
 
-この疑問に対する回答を探るため、先ほど作成したApp関数の先頭に、`console.log` を追加してみましょう。これにより、`App` 関数が実行されるタイミングで、コンソールにメッセージが表示されるようになります。
+この疑問に対する回答を探るため、先ほど作成したApp関数の先頭に、`console.log`を追加してみましょう。これにより、`App`関数が実行されるタイミングで、コンソールにメッセージが表示されるようになります。
 
 ```tsx title="App.tsx"
 import { useState } from "react";
@@ -594,15 +594,15 @@ export default function App() {
 
 <ViewSource url={import.meta.url} path="_samples/react-component-function" />
 
-このプログラムを実行することで、`App` 関数は、初回読み込み時と、ボタンがクリックされたタイミングで実行されていることが分かります。
+このプログラムを実行することで、`App`関数は、初回読み込み時と、ボタンがクリックされたタイミングで実行されていることが分かります。
 
 <video src={componentRenderingVideo} controls muted />
 
-つまり、Reactは、**状態が変化するたびにコンポーネント関数を実行し、その結果得られた `JSX.Element` の変化を検知してDOMに反映させている**のです。
+つまり、Reactは、**状態が変化するたびにコンポーネント関数を実行し、その結果得られた`JSX.Element`の変化を検知してDOMに反映させている**のです。
 
 ## ユーザー入力を扱う
 
-Reactでは、入力可能な要素の `value` 属性を固定すると、その要素には入力できなくなります。
+Reactでは、入力可能な要素の`value`属性を固定すると、その要素には入力できなくなります。
 
 ```tsx title="App.tsx"
 export default function App() {
@@ -612,7 +612,7 @@ export default function App() {
 
 <ViewSource url={import.meta.url} path="_samples/react-fixed-input" />
 
-`onChange` イベントを受け取って入力した値をコンポーネントの状態に反映させることで、ユーザー入力とコンポーネントの状態を同期させることができるようになります。
+`onChange`イベントを受け取って入力した値をコンポーネントの状態に反映させることで、ユーザー入力とコンポーネントの状態を同期させることができるようになります。
 
 ```tsx title="App.tsx"
 import { useState } from "react";
@@ -636,17 +636,17 @@ export default function App() {
 
 <ViewSource url={import.meta.url} path="_samples/react-fixed-input" />
 
-`onChange` 属性には、要素のテキストが変更された際に発生するイベントのイベントハンドラを指定します。Reactの `onChange` 属性は、DOMの [`change` イベント](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/change_event)ハンドラと同様に記述することができ、第1引数には [`Event` オブジェクト](https://developer.mozilla.org/ja/docs/Web/API/Event)に似た値が与えられます。
+`onChange`属性には、要素のテキストが変更された際に発生するイベントのイベントハンドラを指定します。Reactの`onChange`属性は、DOMの[`change`イベント](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/change_event)ハンドラと同様に記述することができ、第1引数には[`Event`オブジェクト](https://developer.mozilla.org/ja/docs/Web/API/Event)に似た値が与えられます。
 
-[`Event#target`](https://developer.mozilla.org/ja/docs/Web/API/Event/target) プロパティには、イベントが発生した要素 (上の例では [`HTMLInputElement`](https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement)) が格納されます。このオブジェクトの [`value` プロパティ](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)を通して入力されようとしている値が取得できるので、この値を `setText` 関数を用いて状態に反映させています。
+[`Event#target`](https://developer.mozilla.org/ja/docs/Web/API/Event/target)プロパティには、イベントが発生した要素 (上の例では[`HTMLInputElement`](https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement)) が格納されます。このオブジェクトの[`value`プロパティ](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)を通して入力されようとしている値が取得できるので、この値を`setText`関数を用いて状態に反映させています。
 
 ![入力されたデータの流れ](./input-data-flow.png)
 
 ## 複数のコンポーネントで状態を共有する
 
-親コンポーネント `App` と子コンポーネント `TextField` の関係があったとします。`TextField` コンポーネントで編集可能な状態を、親コンポーネント `App` でも使用したいとします。
+親コンポーネント`App`と子コンポーネント`TextField`の関係があったとします。`TextField`コンポーネントで編集可能な状態を、親コンポーネント`App`でも使用したいとします。
 
-複数のコンポーネントで共通の状態が必要となる場合、**それら全てが持つ共通の親コンポーネントで状態を定義する必要があります**。この場合では、親コンポーネントである `App` に状態を定義するのが正解です。
+複数のコンポーネントで共通の状態が必要となる場合、**それら全てが持つ共通の親コンポーネントで状態を定義する必要があります**。この場合では、親コンポーネントである`App`に状態を定義するのが正解です。
 
 子コンポーネントには、**現在の状態の値そのものと、状態を更新するための関数を属性を経由して渡せば**、通常の状態と同じように使用できるようになります。
 
@@ -685,7 +685,7 @@ export default function App() {
 
 ## 複雑な状態を扱う
 
-`useState` が作成可能な状態は、何もプリミティブな値のみに限りません。オブジェクトの形の状態を作成することで、より複雑な状態を表現することができます。以前扱ったToDoアプリを、Reactを用いて書き直してみましょう。
+`useState`が作成可能な状態は、何もプリミティブな値のみに限りません。オブジェクトの形の状態を作成することで、より複雑な状態を表現することができます。以前扱ったToDoアプリを、Reactを用いて書き直してみましょう。
 
 ```tsx title="App.tsx"
 import { useState } from "react";
@@ -742,11 +742,11 @@ export default function App() {
 
 <ViewSource url={import.meta.url} path="_samples/react-todo" />
 
-この例では、ToDo一覧を保持する状態 `todos` と、次のIDを保持する状態 `nextId`、そして新規作成用のテキストボックスの内容を保持する状態 `newTodo` に分けて状態を管理しています。
+この例では、ToDo一覧を保持する状態`todos`と、次のIDを保持する状態`nextId`、そして新規作成用のテキストボックスの内容を保持する状態`newTodo`に分けて状態を管理しています。
 
 :::tip[Reactとイミュータビリティ]
 
-[オブジェクトの参照](/docs/browser-apps/reference/)節で扱ったように、JavaScriptオブジェクトは参照として扱われます。Reactでは、**状態として保存されたオブジェクトの参照先への変更は許可されていません**。例えば、先ほどのプログラムの `addTodo` 関数と `removeTodo` 関数は、次のように書き換えることはできません。これは、この方法ではReactが状態が変化したことを検知できないからです。
+[オブジェクトの参照](/docs/browser-apps/reference/)節で扱ったように、JavaScriptオブジェクトは参照として扱われます。Reactでは、**状態として保存されたオブジェクトの参照先への変更は許可されていません**。例えば、先ほどのプログラムの`addTodo`関数と`removeTodo`関数は、次のように書き換えることはできません。これは、この方法ではReactが状態が変化したことを検知できないからです。
 
 ```tsx
 const addTodo = () => {
@@ -760,7 +760,7 @@ const removeTodo = (id: number) => {
 };
 ```
 
-オブジェクトの中身が変化しないとき、そのオブジェクトは<Term>**イミュータブル**</Term>であるといいます。一方、`Array#push` メソッドや `Array#splice` メソッドは、配列の中身を変化させます。このように、<Term>ミュータブル</Term>な操作を伴う関数を、**破壊的**であるという場合があります。破壊的メソッドは React の状態に対して使用できません。
+オブジェクトの中身が変化しないとき、そのオブジェクトは<Term>**イミュータブル**</Term>であるといいます。一方、`Array#push`メソッドや`Array#splice`メソッドは、配列の中身を変化させます。このように、<Term>ミュータブル</Term>な操作を伴う関数を、**破壊的**であるという場合があります。破壊的メソッドは React の状態に対して使用できません。
 
 :::
 
diff --git a/src/components/Term/definitions.js b/src/components/Term/definitions.js
index 743e01def..3f9799ebd 100644
--- a/src/components/Term/definitions.js
+++ b/src/components/Term/definitions.js
@@ -122,7 +122,7 @@ export default {
       referencePage: "/docs/trial-session/css/",
     },
     styleAttribute: {
-      name: "style 属性",
+      name: "style属性",
       definition:
         "表示可能な多くのHTML要素に対して設定できる、見た目をカスタマイズするための属性。",
       referencePage: "/docs/trial-session/css/",
@@ -390,7 +390,7 @@ export default {
       referencePage: "/docs/web-servers/get-post/",
     },
     npxCommand: {
-      name: "npx コマンド",
+      name: "npxコマンド",
       definition:
         "npm付属のコマンド。インストールしたnpmパッケージを直接実行する機能を持つ。",
       referencePage: "/docs/web-servers/database/",
diff --git a/src/components/Term/type-map.js b/src/components/Term/type-map.js
index 34cfc0204..dfa30f676 100644
--- a/src/components/Term/type-map.js
+++ b/src/components/Term/type-map.js
@@ -37,7 +37,7 @@ const typeMap = new Map([
   ["要素", "element"],
   ["終了タグ", "endTag"],
   ["CSS", "css"],
-  ["style 属性", "styleAttribute"],
+  ["style属性", "styleAttribute"],
   ["文", "javascriptStatement"],
   ["値", "javascriptValue"],
   ["文字列", "javascriptString"],
@@ -91,7 +91,7 @@ const typeMap = new Map([
   ["HTTPメソッド", "httpMethod"],
   ["GETリクエスト", "httpMethod"],
   ["POSTリクエスト", "httpMethod"],
-  ["npx コマンド", "npxCommand"],
+  ["npxコマンド", "npxCommand"],
   ["非同期処理", "asynchronousProcess"],
   ["非同期関数", "asynchronousProcess"],
   ["API", "api"],