From e5620e25c46a3d6f94970c51ba8d60fb22c594d2 Mon Sep 17 00:00:00 2001
From: chvmvd <104971044+chvmvd@users.noreply.github.com>
Date: Sat, 20 Jul 2024 12:13:54 +0900
Subject: [PATCH] =?UTF-8?q?=E5=92=8C=E6=AC=A7=E6=96=87=E9=96=93=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 |  24 +--
 docs/1-trial-session/02-html/index.mdx        |  44 ++---
 docs/1-trial-session/03-javascript/index.mdx  |  24 +--
 docs/1-trial-session/05-variables/index.mdx   |  10 +-
 docs/1-trial-session/06-boolean/index.mdx     |  24 +--
 .../1-trial-session/07-if-statement/index.mdx |  33 ++--
 docs/1-trial-session/08-functions/index.mdx   |  24 +--
 docs/1-trial-session/09-loop/index.mdx        |  16 +-
 .../10-array/_samples/array-max/script.js     |   4 +-
 docs/1-trial-session/10-array/index.mdx       |  22 +--
 .../11-object/_samples/incrementAge/script.js |   4 +-
 docs/1-trial-session/11-object/index.mdx      |  22 +--
 docs/1-trial-session/12-css/index.mdx         |  40 ++---
 docs/1-trial-session/13-dom/index.mdx         |  44 ++---
 docs/1-trial-session/14-events/index.mdx      |  12 +-
 docs/1-trial-session/15-project/index.mdx     |  14 +-
 .../16-deploy-application/index.mdx           |   6 +-
 docs/1-trial-session/index.mdx                |   4 +-
 docs/2-browser-apps/01-inspector/index.mdx    |  40 ++---
 docs/2-browser-apps/02-reference/index.mdx    |  10 +-
 docs/2-browser-apps/03-class/index.mdx        |  60 +++----
 .../04-anonymous-function/index.mdx           |  16 +-
 .../05-css-arrangement/index.mdx              |  30 ++--
 docs/2-browser-apps/06-project/index.mdx      |  58 +++----
 docs/2-browser-apps/index.mdx                 |   2 +-
 docs/3-web-servers/01-wsl-setup/index.mdx     |  46 +++---
 .../3-web-servers/02-linux-commands/index.mdx |  24 +--
 docs/3-web-servers/03-node-js/index.mdx       |  38 ++---
 docs/3-web-servers/04-module/index.mdx        |  48 +++---
 docs/3-web-servers/05-server/index.mdx        | 118 +++++++-------
 docs/3-web-servers/06-form/index.mdx          |  28 ++--
 docs/3-web-servers/07-get-post/index.mdx      |  34 ++--
 docs/3-web-servers/08-database/index.mdx      | 131 ++++++++-------
 docs/3-web-servers/09-cookie/index.mdx        |  42 ++---
 .../10-git-github-init/index.mdx              |  70 ++++----
 docs/3-web-servers/11-git/index.mdx           |  66 ++++----
 docs/3-web-servers/12-github/index.mdx        |  80 ++++-----
 .../13-deploy-on-render/index.mdx             |  30 ++--
 docs/3-web-servers/index.mdx                  |   2 +-
 docs/4-advanced/01-fetch-api/index.mdx        |  40 ++---
 docs/4-advanced/02-bundler/index.mdx          |  57 ++++---
 docs/4-advanced/03-typescript/index.mdx       |  94 +++++------
 docs/4-advanced/04-react/index.mdx            | 154 +++++++++---------
 .../01-git-workflow/index.mdx                 |  56 +++----
 docs/index.mdx                                |   8 +-
 src/components/Term/definitions.js            |  96 ++++++-----
 src/components/Term/type-map.js               |  12 +-
 47 files changed, 925 insertions(+), 936 deletions(-)

diff --git a/docs/1-trial-session/01-get-started/index.mdx b/docs/1-trial-session/01-get-started/index.mdx
index 137634043..e2d70e0d1 100644
--- a/docs/1-trial-session/01-get-started/index.mdx
+++ b/docs/1-trial-session/01-get-started/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: はじめての Web 開発
+title: はじめてのWeb開発
 ---
 
 import installChromeOnMacVideo from "./install-chrome-on-mac.mp4";
@@ -11,11 +11,11 @@ import createFolderOnWindowsVideo from "./create-folder-on-windows.mp4";
 import openFolderOnMacVideo from "./open-folder-on-mac.mp4";
 import openFolderOnWindowsVideo from "./open-folder-on-windows.mp4";
 
-## Google Chrome のインストール
+## Google Chromeのインストール
 
-**Google Chrome** は、Google 社が開発するウェブブラウザです。現在多くの人に使われています。他のウェブブラウザを使うことも出来ますが、この教材では Google Chrome の使用を前提として話を進めていきます。
+**Google Chrome**は、Google社が開発するウェブブラウザです。現在多くの人に使われています。他のウェブブラウザを使うことも出来ますが、この教材ではGoogle Chromeの使用を前提として話を進めていきます。
 
-Google Chrome は、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。
+Google Chromeは、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。
 
 <Tabs groupId="os">
   <TabItem value="mac" label="macOS">
@@ -26,11 +26,11 @@ Google Chrome は、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)
   </TabItem>
 </Tabs>
 
-## Visual Studio Code のインストール
+## Visual Studio Codeのインストール
 
-**Visual Studio Code** (以下 VS Code) は、Microsoft 社が開発するテキストエディタです。多くの開発者に使用されています。
+**Visual Studio Code** (以下VS Code) は、Microsoft社が開発するテキストエディタです。多くの開発者に使用されています。
 
-Visual Studio Code は、[公式サイト](https://code.visualstudio.com)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。
+Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。
 
 <Tabs groupId="os">
   <TabItem value="mac" label="macOS">
@@ -43,7 +43,7 @@ Visual Studio Code は、[公式サイト](https://code.visualstudio.com)から
 
 ## プロジェクトを格納するフォルダを作成する
 
-これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ホームフォルダ (macOS) / ユーザーフォルダ (Windows) の中に `projects` という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ホームフォルダ (macOS) / ユーザーフォルダ (Windows) の場所については次の動画をご確認ください。
+これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中に `projects` という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の場所については次の動画をご確認ください。
 
 次の例では、`hello-world` の名前でプロジェクト用のフォルダを作成しています。
 
@@ -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 でプロジェクトフォルダを開く
+## 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 0f45e58a5..706fa7a3e 100644
--- a/docs/1-trial-session/02-html/index.mdx
+++ b/docs/1-trial-session/02-html/index.mdx
@@ -7,13 +7,13 @@ import openInBrowserVideo from "./open-in-browser.mp4";
 import showFileExtensionsVideo from "./show-file-extensions.mp4";
 import reloadBrowserVideo from "./reload-browser.mp4";
 
-Web 開発に必ず用いられる言語があります。<Term>**HTML**</Term> と CSS、そして JavaScript です。これらは互いに異なる役割をもっています。まずは最も基本となる <Term>HTML</Term> から学んでいきましょう。
+Web開発に必ず用いられる言語があります。<Term>**HTML**</Term>とCSS、そしてJavaScriptです。これらは互いに異なる役割をもっています。まずは最も基本となる<Term>HTML</Term>から学んでいきましょう。
 
 ![Web開発で用いられる言語](./web-development-languages.drawio.svg)
 
-## <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>
@@ -30,7 +30,7 @@ VS Code の画面左端には、ファイル一覧が表示されています。
 
 <video src={createFileVideo} controls />
 
-## ブラウザで <Term>HTML</Term> ファイルを開く
+## ブラウザで<Term>HTML</Term>ファイルを開く
 
 前頁で作成したフォルダを開き、`index.html` が作成されていることを確認しましょう。このファイルをダブルクリックして開きます。`Hello World!` (`World` の部分だけ太字) が表示されましたか？
 
@@ -38,23 +38,23 @@ VS Code の画面左端には、ファイル一覧が表示されています。
 
 :::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 では、拡張子は標準で表示されません。下の動画を参考に、拡張子を表示する設定に変更しておきましょう。
+実はWindowsでは、拡張子は標準で表示されません。下の動画を参考に、拡張子を表示する設定に変更しておきましょう。
 
 <video src={showFileExtensionsVideo} controls />
 
 :::
 
-## <Term>HTML</Term> の構造
+## <Term>HTML</Term>の構造
 
 それでは、先ほどのファイルの中身を見ていきましょう。
 
 `<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>に分かれ、内部にテキストや別のタグを挟み込むことができます。
@@ -76,13 +76,13 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
 </html>
 ```
 
-繰り返しになりますが、<Term>HTML</Term> を編集したら、<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。
+繰り返しになりますが、<Term>HTML</Term>を編集したら、<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。
 
 ![ファイルを保存する](./save-file.png)
 
 :::tip[ショートカットキー]
 
-ショートカットキーがうまく押せませんか？<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) はよく、「<kbd>command</kbd> (macOS) または <kbd>Ctrl</kbd> (Windows) キーと <kbd>S</kbd> キーを同時に押す」と言われますが、実は同時に押すと半分くらいの確率で失敗します。<kbd>command</kbd> (macOS) / <kbd>Ctrl</kbd> (Windows) キーを押した後、キーから指を離す前に <kbd>S</kbd> キーを押しましょう。
+ショートカットキーがうまく押せませんか？<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) はよく、「<kbd>command</kbd> (macOS) または<kbd>Ctrl</kbd> (Windows) キーと<kbd>S</kbd>キーを同時に押す」と言われますが、実は同時に押すと半分くらいの確率で失敗します。<kbd>command</kbd> (macOS) / <kbd>Ctrl</kbd> (Windows) キーを押した後、キーから指を離す前に<kbd>S</kbd>キーを押しましょう。
 
 ショートカットキーを使いこなせるようになると、パソコンの操作速度が飛躍的に上昇します。慣れている人がパソコンを操作しているのを見たら、ぜひ後ろから覗き込んでみましょう。便利そうなショートカットキーを使っている人がいたら身に付けるようにすると良いです。
 
@@ -94,23 +94,23 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
 
 `<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)
 
-## <Term>HTML</Term> の文法
+## <Term>HTML</Term>の文法
 
-それでは、作成した <Term>HTML</Term> をもう一度見直してみましょう。
+それでは、作成した<Term>HTML</Term>をもう一度見直してみましょう。
 
-すべての <Term>HTML</Term> ファイルは、
+すべての<Term>HTML</Term>ファイルは、
 
 ```html title="index.html"
 <!doctype html>
 ```
 
-という、「このファイルは <Term>HTML</Term> ファイルだ！」と宣言する定型句から始まります。
+という、「このファイルは<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>) が実際にブラウザの表示領域上に表示されることになります。
 
@@ -118,15 +118,15 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
 
 :::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>内部のみを記述することとします。
 
 :::
 
 ## 演習問題
 
-### 問題 1
+### 問題1
 
-単一の HTML ファイルのみを使用して、下のような遠足の持ち物リストを作成してみましょう。お弁当は何よりも重要なので太字にしましょう。
+単一のHTMLファイルのみを使用して、下のような遠足の持ち物リストを作成してみましょう。お弁当は何よりも重要なので太字にしましょう。
 
 ![遠足の持ち物リストの例](./excursion-sample.png)
 
@@ -162,9 +162,9 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
 
 </Answer>
 
-### 問題 2 (時間が余った場合)
+### 問題2 (時間が余った場合)
 
-下のようなフォームを作成してみましょう。いきなり飛躍した感がありますが、やることは単純で、ひたすら HTML タグを並べるのみです。
+下のようなフォームを作成してみましょう。いきなり飛躍した感がありますが、やることは単純で、ひたすらHTMLタグを並べるのみです。
 
 ![新規登録フォームの例](form-sample.png)
 
diff --git a/docs/1-trial-session/03-javascript/index.mdx b/docs/1-trial-session/03-javascript/index.mdx
index 790e8e313..e05944e49 100644
--- a/docs/1-trial-session/03-javascript/index.mdx
+++ b/docs/1-trial-session/03-javascript/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: JavaScript ことはじめ
+title: JavaScriptことはじめ
 ---
 
 import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4";
@@ -7,13 +7,13 @@ import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4";
 ## <Term>JavaScript</Term>
 
 {/* prettier-ignore */}
-<Term>HTML</Term> がウェブサイトの構造を表す言語だとすれば、<Term>**JavaScript**</Term> はウェブサイトに振る舞いを与える言語といえます。ブラウザさえあれば環境に関係なく同じように実行可能な、強力なプログラミング言語です。
+<Term>HTML</Term>がウェブサイトの構造を表す言語だとすれば、<Term>**JavaScript**</Term>はウェブサイトに振る舞いを与える言語といえます。ブラウザさえあれば環境に関係なく同じように実行可能な、強力なプログラミング言語です。
 
-![Web 開発で用いられる言語](../02-html/web-development-languages.drawio.svg)
+![Web開発で用いられる言語](../02-html/web-development-languages.drawio.svg)
 
-## <Term>JavaScript</Term> で Hello World!
+## <Term>JavaScript</Term>でHello World!
 
-プログラミングの世界では、まず画面に `Hello World!` と表示させることが慣例になっています。<Term>JavaScript</Term> を用いて画面に `Hello World!` を表示してみましょう。
+プログラミングの世界では、まず画面に `Hello World!` と表示させることが慣例になっています。<Term>JavaScript</Term>を用いて画面に `Hello World!` を表示してみましょう。
 
 まずは、`index.html` を次のように書き換えます。
 
@@ -40,27 +40,27 @@ document.write("Hello World!");
 
 <video src={helloWorldByJavascriptVideo} controls />
 
-## <Term>JavaScript</Term> が動く仕組み
+## <Term>JavaScript</Term>が動く仕組み
 
-<Term>HTML</Term> ファイルの中に、以下のような記述があります。
+<Term>HTML</Term>ファイルの中に、以下のような記述があります。
 
 ```html title="index.html"
 <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>がすでに表示されていることを保証するためです。
 
 :::
 
 ## <Term>JavaScript</Term> の基本文法
 
 {/* prettier-ignore */}
-<Term>JavaScript</Term> のプログラムで、セミコロンで区切られた部分を<Term>文</Term>と呼びます。
-<Term>JavaScript</Term> の実行環境は、プログラム中に含まれる<Term>文</Term>を上から下に向けて順番に実行していきます。
+<Term>JavaScript</Term>のプログラムで、セミコロンで区切られた部分を<Term>文</Term>と呼びます。
+<Term>JavaScript</Term>の実行環境は、プログラム中に含まれる<Term>文</Term>を上から下に向けて順番に実行していきます。
 `document.write` はブラウザの画面に出力するための命令です。
 
 ```javascript title="script.js"
@@ -71,7 +71,7 @@ document.write("Hello World3");
 
 :::tip
 
-改行が表示されず困っていますか？`document.write` で出力したテキストは、HTML として解釈されます。`br` 要素や `p` 要素を使いましょう。
+改行が表示されず困っていますか？`document.write` で出力したテキストは、HTMLとして解釈されます。`br` 要素や `p` 要素を使いましょう。
 
 :::
 
diff --git a/docs/1-trial-session/05-variables/index.mdx b/docs/1-trial-session/05-variables/index.mdx
index 0cdb2239f..092134f68 100644
--- a/docs/1-trial-session/05-variables/index.mdx
+++ b/docs/1-trial-session/05-variables/index.mdx
@@ -18,9 +18,9 @@ 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` があります。
@@ -34,12 +34,12 @@ document.write(myName);
 
 ここまでの例では、`my name` というフレーズを、`myName` のように記述しています。
 
-このように、複数の単語にわたるフレーズを、2 語目以降の先頭の文字を大文字にして結合する命名規則を、<Term>**キャメルケース**</Term>と呼びます。
+このように、複数の単語にわたるフレーズを、2語目以降の先頭の文字を大文字にして結合する命名規則を、<Term>**キャメルケース**</Term>と呼びます。
 
 :::info
 
 {/* prettier-ignore */}
-<Term>JavaScript</Term> の<Term>変数</Term>名には、通常<Term>キャメルケース</Term>が用いられます。
+<Term>JavaScript</Term>の<Term>変数</Term>名には、通常<Term>キャメルケース</Term>が用いられます。
 <Term>スネークケース</Term>や<Term>パスカルケース</Term>などの命名規則が利用される文法もあります。
 
 :::
@@ -80,7 +80,7 @@ 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` に置き換えることはできません。
 
diff --git a/docs/1-trial-session/06-boolean/index.mdx b/docs/1-trial-session/06-boolean/index.mdx
index cc50edee2..838b61d32 100644
--- a/docs/1-trial-session/06-boolean/index.mdx
+++ b/docs/1-trial-session/06-boolean/index.mdx
@@ -5,11 +5,11 @@ title: 論理値と論理演算子
 ## <Term>論理値</Term>
 
 {/* prettier-ignore */}
-<Term>JavaScript</Term> で利用できる「<Term>値</Term>」として、これまで<Term>文字列</Term>と<Term>数値</Term>を扱いました。
-JavaScript ではこの他に、<Term>**論理値**</Term>と呼ばれる、「正しいか、正しくないか」を表すための<Term>値</Term>が存在します。
+<Term>JavaScript</Term>で利用できる「<Term>値</Term>」として、これまで<Term>文字列</Term>と<Term>数値</Term>を扱いました。
+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,13 +25,13 @@ 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` |
 
 具体的な使用例を考えてみましょう。
 
@@ -56,7 +56,7 @@ document.write(age === 14); // true
 ```
 
 `===` は左辺と右辺が等しいかどうか判定する比較<Term>演算子</Term>です。
-2 行目では `age` と 15 とは等しくないので `false` が、3 行目では `age` と 14 とは等しいので `true` が表示されます。
+2行目では `age` と15とは等しくないので `false` が、3行目では `age` と14とは等しいので `true` が表示されます。
 
 各<Term>演算子</Term>の意味は次の通りです。
 
@@ -71,7 +71,7 @@ document.write(age === 14); // true
 
 さらに具体的な使用例を考えてみましょう。
 
-ジェットコースターに乗れるかどうかを表す変数 `canRideRollerCoasters` を考えます。年齢を表す変数 `age` と身長を表す変数 `height` が与えられたとして、10 歳以上かつ身長が 120cm 以上でないと乗れないとしたら以下のようになるでしょう。
+ジェットコースターに乗れるかどうかを表す変数 `canRideRollerCoasters` を考えます。年齢を表す変数 `age` と身長を表す変数 `height` が与えられたとして、10歳以上かつ身長が120cm以上でないと乗れないとしたら以下のようになるでしょう。
 
 ```javascript
 const age = 15;
@@ -106,7 +106,7 @@ document.write(takaoHeight = everestHeight);
 クイズ番組で田中さんと佐藤さんが戦っています。
 田中さんの点数が `tanakaScore` で、佐藤さんの点数が `satoScore` で用意されています。
 
-点数が 100 点以上で、かつ相手より 20 点以上高い点数の場合に勝ちとします。
+点数が100点以上で、かつ相手より20点以上高い点数の場合に勝ちとします。
 田中さんが勝ちかどうかを表す変数 `isTanakaWinner` を作成してください。
 
 ```javascript
diff --git a/docs/1-trial-session/07-if-statement/index.mdx b/docs/1-trial-session/07-if-statement/index.mdx
index 2f5787edc..7fa1ef38c 100644
--- a/docs/1-trial-session/07-if-statement/index.mdx
+++ b/docs/1-trial-session/07-if-statement/index.mdx
@@ -2,9 +2,9 @@
 title: 条件分岐
 ---
 
-## if 文
+## if文
 
-**if 文**は、<Term>JavaScript</Term> の<Term>**制御構造**</Term>で、特定の条件下のみで実行されるプログラムを記述することができます。
+**if文**は、<Term>JavaScript</Term>の<Term>**制御構造**</Term>で、特定の条件下のみで実行されるプログラムを記述することができます。
 
 ## 基本構造
 
@@ -15,11 +15,11 @@ 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 文の基本構造は
+if文の基本構造は
 
 ```javascript
 if (式) {
@@ -29,9 +29,9 @@ if (式) {
 
 で、<Term>式</Term>の<Term>評価</Term>結果が `true` であれば処理が実行されます。
 
-## if ～ else
+## if～else
 
-if ～ else 構文を用いると、条件が満たされなかったときの処理を記述できます。
+if～else構文を用いると、条件が満たされなかったときの処理を記述できます。
 
 ```javascript
 if (式) {
@@ -42,8 +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;
@@ -56,9 +55,9 @@ if (age >= 20) {
 
 この例では、`age >= 20` の<Term>評価</Term>が `false` となるので、`子供です` が表示されます。
 
-## if ～ else if ～ else
+## if～else if～else
 
-if ～ else if ～ else 構文を使うと、複数の条件を重ねることができます。
+if～else if～else構文を使うと、複数の条件を重ねることができます。
 
 ```javascript
 if (式1) {
@@ -70,7 +69,7 @@ if (式1) {
 }
 ```
 
-![if 文のフローチャート](./flowchart.drawio.svg)
+![if文のフローチャート](./flowchart.drawio.svg)
 
 ## 演習
 
@@ -82,13 +81,13 @@ const age = 20;
 
 下を満たすプログラムを作成してください。
 
-- 18 歳未満なら `選挙権はありません` と表示する
-- 18 歳以上 ～ 25 歳未満なら `投票に行けます` と表示する
-- 25 歳以上なら `衆議院議員に立候補できます` と表示する
+- 18歳未満なら `選挙権はありません` と表示する
+- 18歳以上～25歳未満なら `投票に行けます` と表示する
+- 25歳以上なら `衆議院議員に立候補できます` と表示する
 
 <Answer title="選挙権">
 
-if ～ else if ～ else 構文を使うと、次のように書くことができます。
+if～else if～else構文を使うと、次のように書くことができます。
 
 ```javascript title="script.js" showLineNumbers
 const age = 20;
@@ -103,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 d7f11d2ff..8eb26ed49 100644
--- a/docs/1-trial-session/08-functions/index.mdx
+++ b/docs/1-trial-session/08-functions/index.mdx
@@ -6,7 +6,7 @@ import returnValueVideo from "./return-value.mp4";
 
 ## 処理の共通化
 
-数学における関数は、数と数の関係のようなものですが、<Term>JavaScript</Term> をはじめとしたプログラミング言語の文脈における<Term>**関数**</Term>は、基本的には<Term>文</Term>のまとまりに名前を付けたものです。
+数学における関数は、数と数の関係のようなものですが、<Term>JavaScript</Term>をはじめとしたプログラミング言語の文脈における<Term>**関数**</Term>は、基本的には<Term>文</Term>のまとまりに名前を付けたものです。
 
 ```javascript
 // 関数を定義しておけば
@@ -24,7 +24,7 @@ greet();
 {/* prettier-ignore */}
 <Term>関数</Term>を定義すると、<Term>関数</Term>名に続けてかっこを記述することにより、その<Term>関数</Term>を実行できるようになります。
 
-このプログラムでは、`greet` <Term>関数</Term>が 2 回呼び出されているので、ブラウザに `Hello World!` が 2 つ表示されます。
+このプログラムでは、`greet` <Term>関数</Term>が2回呼び出されているので、ブラウザに `Hello World!` が2つ表示されます。
 
 ## <Term>**引数**</Term>
 
@@ -53,7 +53,7 @@ greet("morning", "佐藤");
 
 {/* prettier-ignore */}
 <Term>関数</Term>呼び出しは<Term>式</Term>の一種です。
-<Term>関数</Term>定義内で **return 文** を用いると、<Term>関数</Term>の実行が停止され、<Term>関数</Term>呼び出し<Term>式</Term>の<Term>評価</Term>結果が確定します。
+<Term>関数</Term>定義内で**return文**を用いると、<Term>関数</Term>の実行が停止され、<Term>関数</Term>呼び出し<Term>式</Term>の<Term>評価</Term>結果が確定します。
 この値を<Term>**戻り値**</Term>と呼びます。
 ある<Term>値</Term>を<Term>戻り値</Term>として設定して<Term>関数</Term>の実行を終了することを、<Term>関数</Term>がその<Term>値</Term>を<Term>**返す**</Term>と表現します。
 
@@ -66,14 +66,14 @@ 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` が代入されます。
+上の例の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 />
 
 :::tip
-**return 文** が実行された時点で<Term>関数</Term>の処理が終了するため、次のように書くことで [if 〜 else 文](../if-statement/#if--else) や [&& (AND) 演算子](../boolean/#論理演算子)の繰り返しを避けつつ、複数の条件のついた処理を実行することができます。
+**return文**が実行された時点で<Term>関数</Term>の処理が終了するため、次のように書くことで[if〜else文](../if-statement/#if--else)や[&& (AND) 演算子](../boolean/#論理演算子)の繰り返しを避けつつ、複数の条件のついた処理を実行することができます。
 
 ```javascript
 let age = 21;
@@ -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,7 +130,7 @@ greet(); // あなたは1人目のお客様です。
 greet(); // あなたは2人目のお客様です。
 ```
 
-この例における、`greet` <Term>関数</Term>は、呼び出されるたびに `guestCount` に 1 を加えています。
+この例における、`greet` <Term>関数</Term>は、呼び出されるたびに `guestCount` に1を加えています。
 
 :::tip[複合代入演算子]
 
@@ -183,7 +183,7 @@ increment();
 - パーツごとにテストができるので、デバッグがしやすい
 - パーツの使いまわしができる
 
-次の例は、`totalTicketCount` 枚のうち `hitTicketCount` 枚の当たりがあるくじから `drawnTicketCount` 枚を引いたときに、当たりが少なくとも 1 枚出る確率 `winningProbability` を、`■■■□□□□□□□` のようなグラフ形式で表示するプログラムです。
+次の例は、`totalTicketCount` 枚のうち `hitTicketCount` 枚の当たりがあるくじから `drawnTicketCount` 枚を引いたときに、当たりが少なくとも1枚出る確率 `winningProbability` を、`■■■□□□□□□□` のようなグラフ形式で表示するプログラムです。
 
 ```javascript
 const totalTicketCount = 10;
@@ -206,7 +206,7 @@ for (let p = 0; p < 1; p += 0.1) {
 }
 ```
 
-このプログラムを、<Term>関数</Term>を用いて確率を計算する部分とグラフとして表示する部分に分割すると、次のようになります。先頭の 9 行を読むだけでプログラム全体の処理の流れが追えるようになりました。
+このプログラムを、<Term>関数</Term>を用いて確率を計算する部分とグラフとして表示する部分に分割すると、次のようになります。先頭の9行を読むだけでプログラム全体の処理の流れが追えるようになりました。
 
 ```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) {
diff --git a/docs/1-trial-session/09-loop/index.mdx b/docs/1-trial-session/09-loop/index.mdx
index 90436c1a7..fcdb85de9 100644
--- a/docs/1-trial-session/09-loop/index.mdx
+++ b/docs/1-trial-session/09-loop/index.mdx
@@ -4,9 +4,9 @@ title: 繰り返し
 
 import whileLoopVideo from "./while-loop.mp4";
 
-## while 文
+## while文
 
-while 文を用いると、ある条件が満たされている間実行され続けるプログラムを記述することができます。次のプログラムを実行すると、画面には `01234` のように表示されます。
+while文を用いると、ある条件が満たされている間実行され続けるプログラムを記述することができます。次のプログラムを実行すると、画面には `01234` のように表示されます。
 
 ```javascript
 let i = 0;
@@ -21,7 +21,7 @@ document.write("終了");
 
 <video src={whileLoopVideo} controls muted />
 
-while 文は、次のように記述します。
+while文は、次のように記述します。
 
 ```javascript
 while (条件式) {
@@ -33,11 +33,11 @@ while (条件式) {
 
 これをフローチャートの形式で表すと、次のようになります。
 
-![while 文の構造](./while-statement.drawio.svg)
+![while文の構造](./while-statement.drawio.svg)
 
 ### 確認問題
 
-1 から 10 までの整数の合計を計算するプログラムを作ってみましょう。
+1から10までの整数の合計を計算するプログラムを作ってみましょう。
 
 :::tip
 
@@ -90,7 +90,7 @@ for (初期化; 条件式; 更新式) {
 
 ### 確認問題
 
-前項で書いた 1 から 10 までの整数の合計を計算するプログラムを for 文を用いて書き換えてみましょう。
+前項で書いた1から10までの整数の合計を計算するプログラムをfor文を用いて書き換えてみましょう。
 
 <Answer>
 
@@ -139,7 +139,7 @@ const string2 = `10から2を引くと${10 - 2}です。`;
 
 ## 基礎演習
 
-### 1 ~ 10 の積
+### 1~10の積
 
 `1` から `10` までの数の積を求めて画面に表示する、 `for` 文を含むコードを書いてみましょう。
 
@@ -180,7 +180,7 @@ document.write(product);
 :::info
 素数の定義は「1より大きい自然数のうち、1とその数以外で割り切れないもの」でしたね。
 
-`範囲内の全ての自然数 i に対して〇〇である` はどうやって評価すればよいでしょうか？
+`範囲内の全ての自然数iに対して〇〇である` はどうやって評価すればよいでしょうか？
 :::
 
 :::tip[豆知識]
diff --git a/docs/1-trial-session/10-array/_samples/array-max/script.js b/docs/1-trial-session/10-array/_samples/array-max/script.js
index 1da786bb6..de811f79e 100644
--- a/docs/1-trial-session/10-array/_samples/array-max/script.js
+++ b/docs/1-trial-session/10-array/_samples/array-max/script.js
@@ -13,8 +13,8 @@ function findMaxNumber(numbers) {
 }
 
 document.write(
-  `<p>配列 [${array1}] の最大値は${findMaxNumber(array1)} です。</p>`,
+  `<p>配列[${array1}]の最大値は${findMaxNumber(array1)}です。</p>`,
 );
 document.write(
-  `<p>配列 [${array2}] の最大値は${findMaxNumber(array2)} です。</p>`,
+  `<p>配列[${array2}]の最大値は${findMaxNumber(array2)}です。</p>`,
 );
diff --git a/docs/1-trial-session/10-array/index.mdx b/docs/1-trial-session/10-array/index.mdx
index bb00b554e..c1a109d9b 100644
--- a/docs/1-trial-session/10-array/index.mdx
+++ b/docs/1-trial-session/10-array/index.mdx
@@ -4,13 +4,13 @@ title: 配列
 
 ## 配列
 
-JavaScript における配列は、複数の値を並べて一つにまとめた値です。`[` から `]` で囲まれた部分は配列を生成する式になります。
+JavaScriptにおける配列は、複数の値を並べて一つにまとめた値です。`[` から `]` で囲まれた部分は配列を生成する式になります。
 
 ```javascript
 const studentNames = ["田中", "佐藤", "鈴木"];
 ```
 
-これで、3 つの文字列値 `"田中"`, `"佐藤"`, `"鈴木"` が順番に並んで格納された配列が作成され、変数 `studentNames` に格納されました。
+これで、3つの文字列値 `"田中"`, `"佐藤"`, `"鈴木"` が順番に並んで格納された配列が作成され、変数 `studentNames` に格納されました。
 
 配列を使用するには、配列を生成する際と同じく `[`, `]` 記号を用います。この括弧に囲まれた部分に数値（**インデックス**）を指定すると、配列の要素にアクセスできます。
 
@@ -45,15 +45,15 @@ 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" />
 
 </Answer>
 
-## for 〜 of 文
+## for〜of文
 
-`for 〜 of` 文を用いると、配列の要素を順番に取り出す処理を簡単に記述できます。
+`for〜of` 文を用いると、配列の要素を順番に取り出す処理を簡単に記述できます。
 
 ```javascript
 const studentNames = ["田中", "佐藤", "鈴木"];
@@ -64,7 +64,7 @@ for (const studentName of studentNames) {
 
 このプログラムを実行すると、`田中佐藤鈴木` と表示されます。
 
-`for 〜 of` 文の構造は次の通りです。
+`for〜of` 文の構造は次の通りです。
 
 ```javascript
 for (変数の宣言/変数名 of 配列) {
@@ -76,7 +76,7 @@ for (変数の宣言/変数名 of 配列) {
 
 ## 配列の便利な機能
 
-JavaScript の配列には、便利な変数や関数のようなものが定義されています。正確には[オブジェクト](/docs/trial-session/object)と[クラス](/docs/browser-apps/class)の回でそれぞれ扱う<Term>プロパティ</Term>、<Term>メソッド</Term>というものですが、今のところは特殊な書き方をする変数や関数であると考えればよいでしょう。
+JavaScriptの配列には、便利な変数や関数のようなものが定義されています。正確には[オブジェクト](/docs/trial-session/object)と[クラス](/docs/browser-apps/class)の回でそれぞれ扱う<Term>プロパティ</Term>、<Term>メソッド</Term>というものですが、今のところは特殊な書き方をする変数や関数であると考えればよいでしょう。
 
 ### `配列.length`
 
@@ -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];
@@ -189,10 +189,10 @@ function findMaxNumber(numbers) {
 }
 
 document.write(
-  `<p>配列 [${array1}] の最大値は${findMaxNumber(array1)} です。</p>`,
+  `<p>配列[${array1}]の最大値は${findMaxNumber(array1)}です。</p>`,
 );
 document.write(
-  `<p>配列 [${array2}] の最大値は${findMaxNumber(array2)} です。</p>`,
+  `<p>配列[${array2}]の最大値は${findMaxNumber(array2)}です。</p>`,
 );
 ```
 
diff --git a/docs/1-trial-session/11-object/_samples/incrementAge/script.js b/docs/1-trial-session/11-object/_samples/incrementAge/script.js
index 5df8084bd..d9c5c98c7 100644
--- a/docs/1-trial-session/11-object/_samples/incrementAge/script.js
+++ b/docs/1-trial-session/11-object/_samples/incrementAge/script.js
@@ -7,6 +7,4 @@ const tanaka = { name: "田中", age: 18 };
 const sato = { name: "佐藤", age: 22 };
 const nextYearTanaka = incrementAge(tanaka);
 const nextYearSato = incrementAge(sato);
-document.write(
-  `田中は ${nextYearTanaka.age} 歳、佐藤は ${nextYearSato.age} 歳`,
-);
+document.write(`田中は${nextYearTanaka.age}歳、佐藤は${nextYearSato.age}歳`);
diff --git a/docs/1-trial-session/11-object/index.mdx b/docs/1-trial-session/11-object/index.mdx
index 2261b8b0c..c1c28d370 100644
--- a/docs/1-trial-session/11-object/index.mdx
+++ b/docs/1-trial-session/11-object/index.mdx
@@ -4,7 +4,7 @@ title: オブジェクト
 
 ## <Term>オブジェクト</Term>
 
-JavaScript で扱うことのできる<Term>値</Term>の種類として、これまで<Term>数値</Term>、<Term>文字列</Term>、<Term>論理値</Term>を扱ってきました。<Term>**オブジェクト**</Term>もまた、<Term>JavaScript</Term> の<Term>値</Term>ですが、今まで扱ってきた<Term>値</Term>とは少し性質が異なります。
+JavaScriptで扱うことのできる<Term>値</Term>の種類として、これまで<Term>数値</Term>、<Term>文字列</Term>、<Term>論理値</Term>を扱ってきました。<Term>**オブジェクト**</Term>もまた、<Term>JavaScript</Term>の<Term>値</Term>ですが、今まで扱ってきた<Term>値</Term>とは少し性質が異なります。
 
 {/* prettier-ignore */}
 <Term>オブジェクト</Term>を用いると、これまで扱ってきたような単純な<Term>値</Term>を複数まとめて一つの<Term>値</Term>として扱うことができます。
@@ -14,7 +14,7 @@ JavaScript で扱うことのできる<Term>値</Term>の種類として、こ
 {/* prettier-ignore */}
 <Term>オブジェクト</Term>は、複数の<Term>**プロパティ**</Term>と呼ばれる<Term>値</Term>を持ちます。
 <Term>プロパティ</Term>にはそれぞれ名前がついています。
-<Term>プロパティ</Term>の名前には文字列しか指定できませんが、<Term>プロパティ</Term>の<Term>値</Term>としては <Term>JavaScript</Term> で使用できるすべての<Term>値</Term>が使用可能です。
+<Term>プロパティ</Term>の名前には文字列しか指定できませんが、<Term>プロパティ</Term>の<Term>値</Term>としては<Term>JavaScript</Term>で使用できるすべての<Term>値</Term>が使用可能です。
 
 ```javascript
 const person = { name: "田中", age: 18 };
@@ -24,7 +24,7 @@ const person = { name: "田中", age: 18 };
 
 :::tip[ほかの言語の経験者へ]
 
-JavaScript の<Term>オブジェクト</Term>は、ほかの言語でいう**辞書**や**連想配列**、**Map** に近いものです。ただ、こういったものと比べ、JavaScript の<Term>オブジェクト</Term>は使用頻度が非常に高いです。
+JavaScriptの<Term>オブジェクト</Term>は、ほかの言語でいう**辞書**や**連想配列**、**Map**に近いものです。ただ、こういったものと比べ、JavaScriptの<Term>オブジェクト</Term>は使用頻度が非常に高いです。
 
 :::
 
@@ -70,7 +70,7 @@ document.write(person.favoriteFood); // 餃子
 
 ## 配列とオブジェクト
 
-上で説明したように、配列はプリミティブではないのでオブジェクトの一種です。JavaScript のオブジェクトとは、プロパティ名とプロパティ値の組の集合でした。
+上で説明したように、配列はプリミティブではないのでオブジェクトの一種です。JavaScriptのオブジェクトとは、プロパティ名とプロパティ値の組の集合でした。
 
 配列もこの原則に従って動作しています。次の図に示すように、配列とは、各要素のインデックスがプロパティ名になっているオブジェクトだと考えることができるのです。
 
@@ -129,7 +129,7 @@ document.write(tanaka.scores.japanese);
 
 <ViewSource url={import.meta.url} path="_samples/add-and-view-Japanese-score" />
 
-2 では、プロパティを自分で追加しています。
+2では、プロパティを自分で追加しています。
 
 </Answer>
 
@@ -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) {
@@ -149,10 +149,8 @@ const tanaka = { name: "田中", age: 18 };
 const sato = { name: "佐藤", age: 22 };
 const nextYearTanaka = incrementAge(tanaka);
 const nextYearSato = incrementAge(sato);
-// 19 歳、23 歳 と表示されてほしい
-document.write(
-  `田中は ${nextYearTanaka.age} 歳、佐藤は ${nextYearSato.age} 歳`,
-);
+// 19歳、23歳と表示されてほしい
+document.write(`田中は${nextYearTanaka.age}歳、佐藤は${nextYearSato.age}歳`);
 ```
 
 <Answer title="年齢を増やす">
@@ -167,9 +165,7 @@ const tanaka = { name: "田中", age: 18 };
 const sato = { name: "佐藤", age: 22 };
 const nextYearTanaka = incrementAge(tanaka);
 const nextYearSato = incrementAge(sato);
-document.write(
-  `田中は ${nextYearTanaka.age} 歳、佐藤は ${nextYearSato.age} 歳`,
-);
+document.write(`田中は${nextYearTanaka.age}歳、佐藤は${nextYearSato.age}歳`);
 ```
 
 <ViewSource url={import.meta.url} path="_samples/incrementAge" />
diff --git a/docs/1-trial-session/12-css/index.mdx b/docs/1-trial-session/12-css/index.mdx
index 6ae014160..1936b9407 100644
--- a/docs/1-trial-session/12-css/index.mdx
+++ b/docs/1-trial-session/12-css/index.mdx
@@ -2,17 +2,17 @@
 title: CSS
 ---
 
-今までは HTML と JavaScript を勉強してきました。今回は Web 開発で用いられるもう一つの言語、CSS について学びましょう。CSS は Web サイトの「見た目」をつかさどる言語です。多くの <Term>HTML 要素</Term> は、<Term>CSS</Term> を用いることで、その見た目を細かくカスタマイズすることができます。
+今まではHTMLとJavaScriptを勉強してきました。今回はWeb開発で用いられるもう一つの言語、CSSについて学びましょう。CSSはWebサイトの「見た目」をつかさどる言語です。多くの<Term>HTML要素</Term>は、<Term>CSS</Term>を用いることで、その見た目を細かくカスタマイズすることができます。
 
-![Web 開発で用いられる言語](../02-html/web-development-languages.drawio.svg)
+![Web開発で用いられる言語](../02-html/web-development-languages.drawio.svg)
 
-CSS の書き方を学び、「Hello World!」の文字を赤くしてみましょう。
+CSSの書き方を学び、「Hello World!」の文字を赤くしてみましょう。
 
 ![Hello World!](./red-hello-world.png)
 
-## <Term>CSS</Term> ファイルを作成する
+## <Term>CSS</Term>ファイルを作成する
 
-CSS ファイルの拡張子は通常 `.css` です。今回は `index.html` と併せて `style.css` を作成しました。
+CSSファイルの拡張子は通常 `.css` です。今回は `index.html` と併せて `style.css` を作成しました。
 
 ![CSSを書き始める](./begin-css.png)
 
@@ -52,17 +52,17 @@ CSS ファイルの拡張子は通常 `.css` です。今回は `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` 属性があります。この属性は、開発者が好きな値を設定できるのは同じですが、複数の要素が同じ値を持つことが許されています。また、スペース区切りで複数の値を設定することもできます。
 
@@ -74,7 +74,7 @@ CSS を記述する際には、まずスタイルを適用する対象となる
 
 :::info[高度なセレクタ]
 
-また、セレクタをスペースで区切ると子孫要素、`>` で区切ると直属の子要素を表すことができます。そのまま繋げば and 条件とみなされます。
+また、セレクタをスペースで区切ると子孫要素、`>` で区切ると直属の子要素を表すことができます。そのまま繋げばand条件とみなされます。
 
 | セレクタ         | 意味                                                                           |
 | ---------------- | ------------------------------------------------------------------------------ |
@@ -82,7 +82,7 @@ CSS を記述する際には、まずスタイルを適用する対象となる
 | `#parent .child` | `id` 属性が `parent` である要素の子孫の、`class` 属性に `child` が含まれる要素 |
 | `#parent > div`  | `id` 属性が `parent` である要素の直属の子の `div` 要素                         |
 
-セレクタを上手に活用すると、変更に強くて柔軟な CSS を作成することができます。
+セレクタを上手に活用すると、変更に強くて柔軟なCSSを作成することができます。
 
 :::
 
@@ -96,7 +96,7 @@ CSS を記述する際には、まずスタイルを適用する対象となる
 }
 ```
 
-CSS の `{` から `}` で囲まれたブロックの中に、<Term type="cssProperty">**プロパティ**</Term>と呼ばれるスタイルの種類と、「プロパティ値」と呼ばれるプロパティに指定できる外観を、コロン記号で区切って記述します。
+CSSの `{` から `}` で囲まれたブロックの中に、<Term type="cssProperty">**プロパティ**</Term>と呼ばれるスタイルの種類と、「プロパティ値」と呼ばれるプロパティに指定できる外観を、コロン記号で区切って記述します。
 
 上の例では、`color` という<Term type="cssProperty">プロパティ</Term>に、`red` というプロパティ値を設定することで、文字色を赤色に設定するよう指示しています。
 
@@ -105,12 +105,12 @@ CSS の `{` から `}` で囲まれたブロックの中に、<Term type="cssPro
 :::note
 
 {/* prettier-ignore */}
-<Term>CSS</Term> の<Term type="cssProperty">プロパティ</Term>は、<Term>オブジェクト</Term>における<Term>プロパティ</Term>と似ているものの、全く異なるものです。文脈により何を意味しているのかが変わるので注意してください。
+<Term>CSS</Term>の<Term type="cssProperty">プロパティ</Term>は、<Term>オブジェクト</Term>における<Term>プロパティ</Term>と似ているものの、全く異なるものです。文脈により何を意味しているのかが変わるので注意してください。
 
 :::
 
 :::tip[HTMLの <Term>`style` 属性</Term>]
-`style.css` を作らずとも、HTML 内に直接 CSS を指定することもできます。例えば、`div` <Term>要素</Term> の <Term>`style` 属性</Term>に `color: red;` を指定するとどうなるでしょうか。
+`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="cssPro
 
 <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ファイルとは別に用意されます。
 :::
 
 ## 複数のプロパティ
@@ -134,7 +134,7 @@ CSS の `{` から `}` で囲まれたブロックの中に、<Term type="cssPro
 
 複数の<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[どうやって調べたらいいの？]
 
@@ -142,15 +142,15 @@ CSS の<Term type="cssProperty">プロパティ</Term>には `color` (文字色)
 
 #### 1. タスクを細かく分割する
 
-現在持ち合わせている知識をもとに、やりたいことを可能な限り細かく分割します。「文字を赤くする」であれば、見た目に関することなので CSS を使えばいいのだろうと想像がつきます。加えて、色の指定方法について調べてみるとよいでしょう。
+現在持ち合わせている知識をもとに、やりたいことを可能な限り細かく分割します。「文字を赤くする」であれば、見た目に関することなのでCSSを使えばいいのだろうと想像がつきます。加えて、色の指定方法について調べてみるとよいでしょう。
 
 #### 2. Google で検索してみる
 
-「CSS 文字色」「CSS 色指定」などと調べてみましょう。課題が十分に細かく分割できていれば、これで直接的な回答が得られるはずです。うまく答えが見つからない場合は、慣れている人に聞いてみてください。 Slack でどんどん質問しましょう。
+「CSS 文字色」「CSS 色指定」などと調べてみましょう。課題が十分に細かく分割できていれば、これで直接的な回答が得られるはずです。うまく答えが見つからない場合は、慣れている人に聞いてみてください。Slackでどんどん質問しましょう。
 
 #### 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>について調べておきましょう。
 
 :::
 
diff --git a/docs/1-trial-session/13-dom/index.mdx b/docs/1-trial-session/13-dom/index.mdx
index 1eaad75bb..46e8f7d93 100644
--- a/docs/1-trial-session/13-dom/index.mdx
+++ b/docs/1-trial-session/13-dom/index.mdx
@@ -2,13 +2,13 @@
 title: DOM
 ---
 
-## <Term>HTML</Term> 要素を <Term>JavaScript</Term> で取得する
+## <Term>HTML</Term>要素を<Term>JavaScript</Term>で取得する
 
 {/* prettier-ignore */}
-<Term>**DOM**</Term> (Document Object Model) は、<Term>HTML</Term> 構造を <Term>JavaScript</Term> の<Term>オブジェクト</Term>として扱うための枠組みです。
-<Term>HTML</Term> と <Term>CSS</Term> のほとんどの機能は <Term>JavaScript</Term> から制御することができます。
+<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>
@@ -36,7 +36,7 @@ greetingElement.textContent = "Hello DOM";
 
 ![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,17 +45,17 @@ 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>の内部のテキストを変更しています。
 
 ### 確認問題
 
-下のような HTML が記述されています。
+下のようなHTMLが記述されています。
 
 ```html title="index.html"
 <div>Good <strong id="greeting-type">morning</strong>!</div>
 ```
 
-JavaScript を使って、`morning` を `evening` にしてください。
+JavaScriptを使って、`morning` を `evening` にしてください。
 
 <Answer>
 
@@ -68,9 +68,9 @@ greetingType.textContent = "evening";
 
 </Answer>
 
-## <Term>HTML 要素</Term>のスタイルを変更する
+## <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";
@@ -78,15 +78,15 @@ element.style.backgroundColor = "red";
 
 このプログラムは、取得した<Term>要素</Term>の背景色を赤色に変更します。
 
-![JavaScript からスタイルを操作する](./change-styles.png)
+![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>として指定する必要があることに注意してください。
 
 ### 確認問題
 
-下のような HTML ファイルがあります。
+下のようなHTMLファイルがあります。
 
 ```html title="index.html"
 <div id="greeting">Hello World!</div>
@@ -94,9 +94,9 @@ element.style.backgroundColor = "red";
 
 文字色が黄色、背景色が黒色で `Hello World!` と表示されるようにしてください。
 
-ここでは CSS ファイルを作成するのではなく、JavaScript を使ってスタイルを操作してください。
+ここではCSSファイルを作成するのではなく、JavaScriptを使ってスタイルを操作してください。
 
-![文字色が黄色、背景色が黒色の Hello World!](./yellow-hello-world.png)
+![文字色が黄色、背景色が黒色のHello World!](./yellow-hello-world.png)
 
 <Answer>
 
@@ -110,10 +110,10 @@ greetingElement.style.backgroundColor = "black";
 
 </Answer>
 
-## DOM を用いて要素を追加する
+## DOMを用いて要素を追加する
 
-`document.createElement` 関数は、引数に要素の種類を表す文字列を取り、その種類の新しい HTML 要素を作る関数です。
-`document.createElement` 関数の戻り値は、新しく作った HTML 要素に対応するオブジェクトです。
+`document.createElement` 関数は、引数に要素の種類を表す文字列を取り、その種類の新しいHTML要素を作る関数です。
+`document.createElement` 関数の戻り値は、新しく作ったHTML要素に対応するオブジェクトです。
 下の例では、新しい `li` 要素を作っています。
 
 中身のない空の要素が作成されるので、`textContent` を `おやつ` に設定してみましょう。
@@ -123,7 +123,7 @@ const snackElement = document.createElement("li");
 snackElement.textContent = "おやつ";
 ```
 
-そして、`要素1.appendChild(要素2)` とすることで、要素 1 の子要素に要素 2 を追加し、画面に表示することができます。
+そして、`要素1.appendChild(要素2)` とすることで、要素1の子要素に要素2を追加し、画面に表示することができます。
 今回は、遠足の持ち物リストに新しい項目を追加してみましょう。
 
 ```html title="index.html"
@@ -172,7 +172,7 @@ packingList.appendChild(capElement);
 
 ### 買い物リストの書き換え
 
-次の HTML ファイルから読み込んでいる JavaScript ファイルを書き換えて、「トマト」「レモン」「バジル」と表示されるようにしてみましょう。
+次のHTMLファイルから読み込んでいるJavaScriptファイルを書き換えて、「トマト」「レモン」「バジル」と表示されるようにしてみましょう。
 
 ```html title="index.html"
 <ul>
@@ -205,7 +205,7 @@ const fruits = ["イチゴ", "スイカ", "バナナ"];
 ```
 
 `createElement` 関数や `appendChild` 関数を用い、`ul` 要素の中に各果物に対応する `li` 要素を作成することで、箇条書きを完成させましょう。
-ただし、HTML ファイルには次のように記述されているものとします。
+ただし、HTMLファイルには次のように記述されているものとします。
 
 ```html title="index.html"
 <ul id="fruit-basket"></ul>
diff --git a/docs/1-trial-session/14-events/index.mdx b/docs/1-trial-session/14-events/index.mdx
index 450625ad5..cbaa6b33f 100644
--- a/docs/1-trial-session/14-events/index.mdx
+++ b/docs/1-trial-session/14-events/index.mdx
@@ -8,7 +8,7 @@ import projectMovieForDom from "./project-movie-for-dom.mp4";
 ## <Term>値</Term>としての<Term>関数</Term>
 
 {/* prettier-ignore */}
-<Term>JavaScript</Term> では、<Term>関数</Term>も<Term>値</Term>の一種です。
+<Term>JavaScript</Term>では、<Term>関数</Term>も<Term>値</Term>の一種です。
 したがって、他の<Term>値</Term>と同じように、<Term>変数</Term>に<Term>代入</Term>したり、<Term>関数</Term>の<Term>引数</Term>や<Term>戻り値</Term>として使用したりすることができます。
 
 ```javascript
@@ -28,7 +28,7 @@ func();
 <Term>オブジェクト</Term>の<Term>プロパティ</Term>として<Term>関数</Term>を利用することもできます。
 `document.getElementById` が返す<Term>オブジェクト</Term>の `onclick` <Term>プロパティ</Term>には、<Term>要素</Term>がクリックされたときに実行される<Term>関数</Term>を指定できます。
 
-ボタンのクリック、フォームへの入力、ページの読み込みなど、Web ページ上で発生するあらゆるアクションを総称して<Term>イベント</Term>と呼びます。
+ボタンのクリック、フォームへの入力、ページの読み込みなど、Webページ上で発生するあらゆるアクションを総称して<Term>イベント</Term>と呼びます。
 このような<Term>イベント</Term>の処理を行うのが<Term>イベントハンドラ</Term>で、`onclick` 関数はその一例です。
 
 ```html title="index.html"
@@ -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 />
 
@@ -73,7 +73,7 @@ greetButton.onclick = clicked();
 
 :::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>が使用されることはほとんどありません。
 
 :::
 
@@ -87,13 +87,13 @@ greetButton.onclick = clicked();
 
 `document.write` 関数を使うと、画面上にあったボタンが消えてしまいます。また、文字色や文字サイズを変えることも困難です。
 
-`document.write` 関数の代わりに、先ほどの DOM の章で扱った方法を使って HTML 要素を JavaScript で操作するとよいでしょう。
+`document.write` 関数の代わりに、先ほどのDOMの章で扱った方法を使ってHTML要素をJavaScriptで操作するとよいでしょう。
 
 :::
 
 :::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 37075059d..519efeef8 100644
--- a/docs/1-trial-session/15-project/index.mdx
+++ b/docs/1-trial-session/15-project/index.mdx
@@ -5,7 +5,7 @@ title: プロジェクト
 import omikujiVideo from "./omikuji.mp4";
 import stopwatchVideo from "./stopwatch.mp4";
 
-これまで学んできた知識を利用して、はじめての Web アプリケーション作りに挑戦してみましょう。題材が思いつかない場合は、下の例を参考にしてみてください。
+これまで学んできた知識を利用して、はじめてのWebアプリケーション作りに挑戦してみましょう。題材が思いつかない場合は、下の例を参考にしてみてください。
 
 ## おみくじ
 
@@ -21,13 +21,13 @@ import stopwatchVideo from "./stopwatch.mp4";
 
 ### ヒント
 
-- `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>
@@ -68,7 +68,7 @@ omikujiButton.onclick = omikuji;
 ### ルール
 
 - `スタート` ボタンをクリックすると、時刻の数え上げが開始されます
-- 1 秒ごとに表示される数値が更新されます
+- 1秒ごとに表示される数値が更新されます
 
 <video src={stopwatchVideo} controls />
 
@@ -84,7 +84,7 @@ function greet() {
 setInterval(greet, 1000);
 ```
 
-このコードを実行すると、1 秒ずつ画面に `<p>Hello World</p>` が書き加えられていきます。
+このコードを実行すると、1秒ずつ画面に `<p>Hello World</p>` が書き加えられていきます。
 
 - ボタン<Term>要素</Term>がクリックされたら `setInterval` <Term>関数</Term>を実行し、タイマーを開始しましょう。
 
@@ -97,7 +97,7 @@ const startButton = document.getElementById("start-button");
 startButton.onclick = start;
 ```
 
-- 時刻は常に <Term>JavaScript</Term> の<Term>変数</Term>として保持しておくと扱いやすくなります。
+- 時刻は常に<Term>JavaScript</Term>の<Term>変数</Term>として保持しておくと扱いやすくなります。
 
 ```javascript
 let time = 0;
diff --git a/docs/1-trial-session/16-deploy-application/index.mdx b/docs/1-trial-session/16-deploy-application/index.mdx
index 9ee9fb0f6..8641371b8 100644
--- a/docs/1-trial-session/16-deploy-application/index.mdx
+++ b/docs/1-trial-session/16-deploy-application/index.mdx
@@ -4,14 +4,14 @@ title: 作ったウェブアプリを公開する
 
 import deployOnNetlifyDropVideo from "./deploy-on-netlify-drop.mp4";
 
-## Netlify Drop を用いてウェブアプリを公開する
+## Netlify Dropを用いてウェブアプリを公開する
 
-[Netlify Drop](https://app.netlify.com/drop) は、<Term>HTML</Term>ファイルが格納されたフォルダをドラッグ・ドロップするだけでウェブサイトを公開できる、非常に便利なサービスです。作ったウェブアプリが公開できるかどうか試してみましょう。
+[Netlify Drop](https://app.netlify.com/drop)は、<Term>HTML</Term>ファイルが格納されたフォルダをドラッグ・ドロップするだけでウェブサイトを公開できる、非常に便利なサービスです。作ったウェブアプリが公開できるかどうか試してみましょう。
 
 <video src={deployOnNetlifyDropVideo} controls />
 
 ## おわりに
 
-おめでとうございます。あなただけの Web アプリケーションを作成することができました。発行された URL は、インターネットに接続可能なあらゆる場所や端末から利用できます。ぜひ URL を家族や友人に教えて、自慢してみてください。
+おめでとうございます。あなただけのWebアプリケーションを作成することができました。発行されたURLは、インターネットに接続可能なあらゆる場所や端末から利用できます。ぜひURLを家族や友人に教えて、自慢してみてください。
 
 ![ありがとうございました](./undraw_well_done.svg)
diff --git a/docs/1-trial-session/index.mdx b/docs/1-trial-session/index.mdx
index 9a81b9cdb..1b67b8978 100644
--- a/docs/1-trial-session/index.mdx
+++ b/docs/1-trial-session/index.mdx
@@ -1,9 +1,9 @@
 ---
-title: Web プログラミングの基礎を学ぼう
+title: Webプログラミングの基礎を学ぼう
 ---
 
 import DocCardList from "@theme/DocCardList";
 
-この部では、HTML、CSS、JavaScript の基礎を学び、簡単なウェブアプリケーションを作ってみます。
+この部では、HTML、CSS、JavaScriptの基礎を学び、簡単なウェブアプリケーションを作ってみます。
 
 <DocCardList />
diff --git a/docs/2-browser-apps/01-inspector/index.mdx b/docs/2-browser-apps/01-inspector/index.mdx
index e4b4358c6..617e9db17 100644
--- a/docs/2-browser-apps/01-inspector/index.mdx
+++ b/docs/2-browser-apps/01-inspector/index.mdx
@@ -12,11 +12,11 @@ import {
 
 ## 開発者ツールを起動する
 
-Google Chrome などのブラウザに搭載されている**開発者ツール**には、ウェブ開発をサポートする様々な機能が提供されています。
+Google Chromeなどのブラウザに搭載されている**開発者ツール**には、ウェブ開発をサポートする様々な機能が提供されています。
 
-:::info[Google Chrome 以外の開発者ツール]
+:::info[Google Chrome以外の開発者ツール]
 
-Google Chrome 以外のブラウザにも開発者ツールは搭載されています。ほとんど同等の機能が提供されているので、基本的にはどれを使っても構いません。しかしながら、Google Chrome のものが最も多く使用されており、本カリキュラムでも基本的には Google Chrome を用いるものとします。
+Google Chrome以外のブラウザにも開発者ツールは搭載されています。ほとんど同等の機能が提供されているので、基本的にはどれを使っても構いません。しかしながら、Google Chromeのものが最も多く使用されており、本カリキュラムでも基本的にはGoogle Chromeを用いるものとします。
 
 :::
 
@@ -24,11 +24,11 @@ Google Chrome 以外のブラウザにも開発者ツールは搭載されてい
 
 ![開発者ツールを起動した様子](open-inspector.png)
 
-## HTML や CSS の構造の確認
+## 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 />
 
@@ -38,20 +38,20 @@ Google Chrome 以外のブラウザにも開発者ツールは搭載されてい
 
 ## デバッガ
 
-**デバッガ** は、プログラムのバグを探し、解決するために役立つソフトウェアです。ブラウザの開発者ツールには、通常 JavaScript のデバッガが搭載されています。
+**デバッガ** は、プログラムのバグを探し、解決するために役立つソフトウェアです。ブラウザの開発者ツールには、通常JavaScriptのデバッガが搭載されています。
 
 :::info
 
-デバッガを使うために知っておくべきことは以下の 4 つです。
+デバッガを使うために知っておくべきことは以下の4つです。
 
 - **ブレークポイント**  
-  設置した行でプログラムの実行が一時停止するもので、Google Chrome の開発者ツールでは Sources タブからファイルを開くと表示される行番号をクリックすると設置できます。
+  設置した行でプログラムの実行が一時停止するもので、Google Chromeの開発者ツールではSourcesタブからファイルを開くと表示される行番号をクリックすると設置できます。
 
 - **ステップオーバーボタン** (<VscDebugStepOver style={{ verticalAlign: "middle" }} />)  
   現在の行を実行し、次の行に進む操作です。現在止まっている行で関数が呼び出される場合は、その関数内の処理を全て実行して次の行で止まるものです。
 
 - **ステップインボタン** (<VscDebugStepInto style={{ verticalAlign: "middle" }} />)  
-  現在の行が関数呼び出しだった場合、実行が関数の中に移ります。処理の流れを 1 個ずつ確認できます。
+  現在の行が関数呼び出しだった場合、実行が関数の中に移ります。処理の流れを1個ずつ確認できます。
 
 - **ステップアウトボタン** (<VscDebugStepOut style={{ verticalAlign: "middle" }} />)  
   関数内で処理が止まっている場合、その関数内の残りの処理を全て実行し、関数を呼び出している行の次の行へ移動します。
@@ -84,29 +84,29 @@ const sum = add(3, 4);
 resultElement.textContent = sum;
 ```
 
-JavaScript のデバッガは主に `Sources` タブから用います。まずはこのタブを開き、サイドパネルに表示された `script.js` を開きましょう。
+JavaScriptのデバッガは主に `Sources` タブから用います。まずはこのタブを開き、サイドパネルに表示された `script.js` を開きましょう。
 
 ![デバッガでファイルを開く](./open-file-in-debugger.png)
 
-続いて、5 行目の行番号が表示されている部分をクリックして**ブレークポイント**を設置します。この状態でブラウザを更新してみてください。
+続いて、5行目の行番号が表示されている部分をクリックして**ブレークポイント**を設置します。この状態でブラウザを更新してみてください。
 
-JavaScript の実行がブレークポイントを設定した地点に差し掛かると、プログラムの実行がデバッガにより一時停止されます。
+JavaScriptの実行がブレークポイントを設定した地点に差し掛かると、プログラムの実行がデバッガにより一時停止されます。
 
 :::info
 
-上記のプログラムにおいて、ページの読み込みの完了時にはすでに JavaScript の実行が終わっています。このため、ブレークポイントを設置した行のプログラムは、ページを更新するまで再度実行されません。
+上記のプログラムにおいて、ページの読み込みの完了時にはすでにJavaScriptの実行が終わっています。このため、ブレークポイントを設置した行のプログラムは、ページを更新するまで再度実行されません。
 
 :::
 
 :::warning
 
-下の画像の中の、オレンジ色の線で強調されている部分は、**これから実行されようとしている行**を表します。つまり、5 行目のプログラムは、この時点ではまだ実行されていません。
+下の画像の中の、オレンジ色の線で強調されている部分は、**これから実行されようとしている行**を表します。つまり、5行目のプログラムは、この時点ではまだ実行されていません。
 
 :::
 
 ![ブレークポイントの設置](./set-breakpoint.png)
 
-続いて、**ステップ オーバー**ボタンを押します。これにより、オレンジ色の線で強調された部分が 6 行目に移ります。
+続いて、**ステップ オーバー**ボタンを押します。これにより、オレンジ色の線で強調された部分が6行目に移ります。
 
 ![ステップ オーバー](./step-over.png)
 
@@ -114,15 +114,15 @@ JavaScript の実行がブレークポイントを設定した地点に差し掛
 
 ![オブジェクトの中身を見る](./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)
 
@@ -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 5c6d252a6..f50d44a52 100644
--- a/docs/2-browser-apps/02-reference/index.mdx
+++ b/docs/2-browser-apps/02-reference/index.mdx
@@ -4,7 +4,7 @@ title: オブジェクトの参照
 
 ## 参照
 
-[オブジェクト](/docs/trial-session/object/)で扱ったように、JavaScript の値はオブジェクトとプリミティブに分けられます。前回は、プリミティブを「それ以上分解できない値」のように説明しました。もう少し詳しくみてみましょう。
+[オブジェクト](/docs/trial-session/object/)で扱ったように、JavaScriptの値はオブジェクトとプリミティブに分けられます。前回は、プリミティブを「それ以上分解できない値」のように説明しました。もう少し詳しくみてみましょう。
 
 ![オブジェクトとプリミティブ](../../1-trial-session/11-object/value-types-with-object.drawio.svg)
 
@@ -23,13 +23,13 @@ document.write(object1.age);
 
 実は、オブジェクトを生成する式 `{ name: "田中", age: 18 }` は、オブジェクトを生成こそするものの、**式自体の評価結果は、オブジェクトそのものでなく、コンピューターのメモリ上のどこかに存在するオブジェクトの本体の場所を指し示す値になります**。
 
-言い換えれば、JavaScript において、**オブジェクトそのものは値ではありません**。JavaScript の**値として有効なのは、オブジェクトへの参照**なのです。
+言い換えれば、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
 上で説明したように、オブジェクトを変数に代入するとき、実際に代入されているのはオブジェクトの**参照**です。
@@ -56,7 +56,7 @@ const person = {
 };
 ```
 
-[以前](/docs/trial-session/object/)にも記載した通り、オブジェクトのプロパティ名として使用可能なのは文字列のみですが、プロパティの値としては任意の JavaScript の値が使用できるのでした。
+[以前](/docs/trial-session/object/)にも記載した通り、オブジェクトのプロパティ名として使用可能なのは文字列のみですが、プロパティの値としては任意のJavaScriptの値が使用できるのでした。
 
 オブジェクトがネストされている場合、次のようにプロパティの値として別のオブジェクトへの参照が格納されていると考えることができます。
 
diff --git a/docs/2-browser-apps/03-class/index.mdx b/docs/2-browser-apps/03-class/index.mdx
index 2671d6f82..b2d658092 100644
--- a/docs/2-browser-apps/03-class/index.mdx
+++ b/docs/2-browser-apps/03-class/index.mdx
@@ -19,8 +19,8 @@ const tanaka = {
 
 ```javascript
 class Student {
-  name; // name プロパティを作成する
-  age = 18; // age プロパティのデフォルト値として `18` を使用する
+  name; // nameプロパティを作成する
+  age = 18; // ageプロパティのデフォルト値として `18` を使用する
 }
 ```
 
@@ -34,10 +34,10 @@ class Student {
 `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 クラスをもとにオブジェクトを作成する
+const tanaka = new Student(); // Studentクラスをもとにオブジェクトを作成する
 
-tanaka.name = "田中"; // name プロパティに代入
-document.write(tanaka.age); // age プロパティのデフォルト値は 18
+tanaka.name = "田中"; // nameプロパティに代入
+document.write(tanaka.age); // ageプロパティのデフォルト値は18
 ```
 
 ![クラスとインスタンス](./class-instance.png)
@@ -46,7 +46,7 @@ document.write(tanaka.age); // age プロパティのデフォルト値は 18
 
 上で定義した `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` となります。
 
@@ -54,8 +54,8 @@ document.write(tanaka.age); // age プロパティのデフォルト値は 18
 const emptyObject = {};
 function emptyFunction() {}
 
-document.write(emptyObject.unknownProperty); // 存在しないプロパティは undefined
-document.write(emptyFunction()); // 値を返さない関数の戻り値は undefined
+document.write(emptyObject.unknownProperty); // 存在しないプロパティはundefined
+document.write(emptyFunction()); // 値を返さない関数の戻り値はundefined
 ```
 
 :::
@@ -95,9 +95,9 @@ class Student {
   name;
   age;
 
-  // メソッド introduceSelf を定義する
+  // メソッドintroduceSelfを定義する
   introduceSelf() {
-    // this は作成されたインスタンスを指す
+    // thisは作成されたインスタンスを指す
     document.write(`私の名前は${this.name}です。${this.age}歳です。`);
   }
 }
@@ -115,7 +115,7 @@ const tanaka = new Student();
 tanaka.name = "田中";
 tanaka.age = 18;
 
-// introduceSelf メソッド内では this は tanaka に格納されたオブジェクトになる
+// introduceSelfメソッド内ではthisはtanakaに格納されたオブジェクトになる
 tanaka.introduceSelf();
 ```
 
@@ -123,13 +123,13 @@ tanaka.introduceSelf();
 
 多くの言語で、<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="年齢を増やすメソッド">
 
@@ -170,8 +170,8 @@ class Student {
 
   // コンストラクタを定義する
   constructor(name, birthYear, currentYear) {
-    // this.name は作成されたインスタンスのプロパティ
-    // name はコンストラクタに渡された引数
+    // this.nameは作成されたインスタンスのプロパティ
+    // nameはコンストラクタに渡された引数
     this.name = name;
     this.age = currentYear - birthYear;
   }
@@ -223,7 +223,7 @@ suzuki.introduceSelf();
 sato.introduceSelf();
 ```
 
-オブジェクトの定義が長くなり、書くのも読むのも大変です。さらに人数が増えると、コードはどんどん長くなってしまいます。また、`introduceSelf` 関数の定義はほとんど同じコードが 3 回繰り返されています。
+オブジェクトの定義が長くなり、書くのも読むのも大変です。さらに人数が増えると、コードはどんどん長くなってしまいます。また、`introduceSelf` 関数の定義はほとんど同じコードが3回繰り返されています。
 では、<Term>クラス</Term>と<Term>コンストラクタ</Term>を用いるとどうでしょうか。
 
 ```javascript
@@ -233,12 +233,12 @@ class Student {
 
   // コンストラクタを定義する
   constructor(name, age) {
-    // this は作成されたインスタンスを指す
+    // thisは作成されたインスタンスを指す
     this.name = name;
     this.age = age;
   }
 
-  // メソッド introduceSelf を定義する
+  // メソッドintroduceSelfを定義する
   introduceSelf() {
     document.write(`<p>私の名前は${this.name}です。${this.age}歳です。</p>`);
   }
@@ -253,7 +253,7 @@ suzuki.introduceSelf();
 sato.introduceSelf();
 ```
 
-クラスの定義自体はやや長いものの、1 つの<Term>オブジェクト</Term>の定義はたった 1 行で済みます。これなら<Term>オブジェクト</Term>の数が増えても安心です。`introduceSelf` 関数の定義を繰り返す必要もなくなり、読みやすく編集しやすいコードになりました。
+クラスの定義自体はやや長いものの、1つの<Term>オブジェクト</Term>の定義はたった1行で済みます。これなら<Term>オブジェクト</Term>の数が増えても安心です。`introduceSelf` 関数の定義を繰り返す必要もなくなり、読みやすく編集しやすいコードになりました。
 
 ## 継承
 
@@ -274,19 +274,19 @@ class Student {
   }
 }
 
-// Student を継承したクラス FreshmanStudent を定義
+// Studentを継承したクラスFreshmanStudentを定義
 class FreshmanStudent extends Student {
   selectedLanguage;
 
   constructor(name, age, selectedLanguage) {
-    // コンストラクタ内では super キーワードで親クラスのコンストラクタを呼ぶ必要がある
+    // コンストラクタ内ではsuperキーワードで親クラスのコンストラクタを呼ぶ必要がある
     super(name, age);
     this.selectedLanguage = selectedLanguage;
   }
 
   // 継承元のクラスと同じ名前のメソッドを定義（オーバーライド）すると、継承元のクラスのメソッドは覆い隠されてしまう
   introduceSelf() {
-    // super キーワードを使えば覆い隠された同名のメソッドを呼び出せる
+    // superキーワードを使えば覆い隠された同名のメソッドを呼び出せる
     super.introduceSelf();
     document.write(`${this.selectedLanguage}選択です。`);
   }
@@ -343,7 +343,7 @@ tanaka.introduceSelf();
 
 ## 組み込みのクラス
 
-JavaScript では、開発者が定義しなくても最初から使用可能な<Term>クラス</Term>が数多く用意されています。
+JavaScriptでは、開発者が定義しなくても最初から使用可能な<Term>クラス</Term>が数多く用意されています。
 
 例えば、[`Date` クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)という、日付や時刻を扱うための<Term>クラス</Term>があります。
 
@@ -356,28 +356,28 @@ document.write(myBirthDay.getFullYear()); // 2014
 
 `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)を継承しています。
 
 ![HTMLDivElementの継承関係](./html-inheritance.drawio.svg)
 
-実は、[DOM の節](/docs/trial-session/dom/)で使用した textContent プロパティは、この Node クラスで定義されています。
+実は、[DOMの節](/docs/trial-session/dom/)で使用したtextContentプロパティは、このNodeクラスで定義されています。
 
 :::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>がオーバーライドされています。
 
 ```javascript
-// 通常のオブジェクトの toString メソッドは "[object Object]" を返す
+// 通常のオブジェクトのtoStringメソッドは"[object Object]"を返す
 document.write({ name: "田中" }.toString()); // [object Object]
 
-// Date クラスは toString メソッドをオーバーライドしている
+// DateクラスはtoStringメソッドをオーバーライドしている
 document.write(new Date().toString()); // Fri Apr 01 2022 10:00:00 GMT+0900 (Japan Standard Time)
 
-// 関数もオブジェクトの一種なのでやはり Object クラスを継承し、toString メソッドをオーバーライドしている
+// 関数もオブジェクトの一種なのでやはりObjectクラスを継承し、toStringメソッドをオーバーライドしている
 function add(a, b) {
   return a + b;
 }
@@ -429,7 +429,7 @@ currentTime.textContent = getCurrentTime();
 
 色を表す `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 f92eb8af8..b218a5705 100644
--- a/docs/2-browser-apps/04-anonymous-function/index.mdx
+++ b/docs/2-browser-apps/04-anonymous-function/index.mdx
@@ -34,7 +34,7 @@ document.getElementById("greet-button").onclick = () => {
 
 <ViewSource url={import.meta.url} path="_samples/using-anonymous-function" />
 
-JavaScript における関数式の構文は、次のとおりです。`=>` の記号が特徴的な構文となっています。
+JavaScriptにおける関数式の構文は、次のとおりです。`=>` の記号が特徴的な構文となっています。
 
 {/* prettier-ignore */}
 ```javascript
@@ -61,7 +61,7 @@ const add2 = (a, b) => {
 
 :::tip[アロー関数]
 
-この項で扱った無名関数式を、`=>` 記号が矢のように見えることから、<Term>**アロー関数**</Term>と呼ぶことがあります。JavaScript には、アロー関数の他にもう一つ、無名関数を記述する方法があります。
+この項で扱った無名関数式を、`=>` 記号が矢のように見えることから、<Term>**アロー関数**</Term>と呼ぶことがあります。JavaScriptには、アロー関数の他にもう一つ、無名関数を記述する方法があります。
 
 ```javascript
 const add3 = function (a, b) {
@@ -98,13 +98,13 @@ const pricesWithTax = pricesWithoutTax.map((price) => price * (1 + taxRate));
 
 ## 演習
 
-### 問題 1
+### 問題1
 
 先ほどの[`Array#map` メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)を用いてみましょう。`students` 変数に格納されている名前を箇条書きにしてください。
 
 ```javascript
 const students = ["Hazel", "Dorian", "Scarlett", "Daisy"];
-// ここで HTML 要素を取得し、学生の名前を箇条書きとして表示
+// ここでHTML要素を取得し、学生の名前を箇条書きとして表示
 ```
 
 :::info[ヒント]
@@ -129,13 +129,13 @@ studentList.innerHTML = students
 
 </Answer>
 
-### 問題 2
+### 問題2
 
-`scores` 変数には、各必修科目の点数が格納されているとします。全ての要素が 50 点以上であることを確認するには、何というメソッドを使うのが適切か調べてみてください。また、実際にそのメソッドを用いて点数を確認してみてください。
+`scores` 変数には、各必修科目の点数が格納されているとします。全ての要素が50点以上であることを確認するには、何というメソッドを使うのが適切か調べてみてください。また、実際にそのメソッドを用いて点数を確認してみてください。
 
 ```javascript
 const scores = [90, 65, 70, 55, 80];
-if (/* すべての点数が 50 点以上なら */) {
+if (/* すべての点数が50点以上なら */) {
   document.write("進級できます");
 }
 ```
@@ -161,7 +161,7 @@ if (scores.every((score) => score >= 50)) {
 
 </Answer>
 
-### 問題 3 (発展)
+### 問題3 (発展)
 
 [`Array#reduce` メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)は、`Array` クラスのメソッドの中でも特に使い方の難しいメソッドです。ドキュメントをよく読み、このメソッドを用いて配列の最小値を求めてみましょう。
 
diff --git a/docs/2-browser-apps/05-css-arrangement/index.mdx b/docs/2-browser-apps/05-css-arrangement/index.mdx
index c8cfdf37a..a959f16d8 100644
--- a/docs/2-browser-apps/05-css-arrangement/index.mdx
+++ b/docs/2-browser-apps/05-css-arrangement/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: CSS による配置（発展）
+title: CSSによる配置（発展）
 ---
 
 import absoluteScroll from "./position-absolute-scroll.mp4";
@@ -8,16 +8,16 @@ import percentCss from "./percent-css.mp4";
 import maxMinWidth from "./max-width-min-width.mp4";
 import mediaQuery from "./mediaquery.mp4";
 
-## CSS のボックスモデル
+## CSSのボックスモデル
 
-HTML の要素はすべて、一定の高さと幅を持った四角形だと考えることができます。その四角形は
+HTMLの要素はすべて、一定の高さと幅を持った四角形だと考えることができます。その四角形は
 
 - content（中身）
 - padding（中身と境界線の間の幅）
 - border（境界線）
 - margin（境界線の外側の余白）
 
-の 4 重構造になっています。
+の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` に変更しています）。
 
@@ -50,7 +50,7 @@ HTML の要素はすべて、一定の高さと幅を持った四角形だと考
 このページを開発者ツールを使って見てみましょう。
 ![開発者ツールでボックスモデルを眺める](./devtool-boxmodel.png)
 
-4 重に色分けされた構造が見えます。
+4重に色分けされた構造が見えます。
 
 `content` は主に `width` や `height` などのプロパティを、
 `padding`, `border`, `margin` はそれぞれ主に `padding`, `border`, `margin` などのプロパティを操作することで制御できます。
@@ -59,7 +59,7 @@ HTML の要素はすべて、一定の高さと幅を持った四角形だと考
 
 ## ブロックレベル要素とインライン要素
 
-HTML の要素は、ブロックレベル要素とインライン要素に分類されます。
+HTMLの要素は、ブロックレベル要素とインライン要素に分類されます。
 
 **ブロックレベル要素**は見出しや段落、表など、文章を構成する基本単位となる要素です。
 
@@ -69,7 +69,7 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 
 ブロックレベル要素には `div` 要素や `p` 要素、`table` 要素、`ul` 要素などがあります。
 
-以下ではブロックレベル要素である `div` 要素を 3 つ並べています。
+以下ではブロックレベル要素である `div` 要素を3つ並べています。
 
 ```html title="index.html"
 <body>
@@ -105,7 +105,7 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 
 インライン要素には `span` 要素や `a` 要素、`img` 要素や `input` 要素があります。
 
-以下ではインライン要素である `span` 要素を 3 つ並べています。
+以下ではインライン要素である `span` 要素を3つ並べています。
 
 ```html title="index.html"
 <body>
@@ -117,7 +117,7 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 
 <ViewSource url={import.meta.url} path="_samples/three-span" />
 
-![span 要素を3つ並べる](./three-span.png)
+![span要素を3つ並べる](./three-span.png)
 
 ブロックレベル要素の中にはブロックレベル要素もインライン要素も配置することができますが、インライン要素の中にブロックレベル要素を配置することはできません。
 
@@ -137,7 +137,7 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 
 フレックスボックスを利用するには、配置したい要素の**親要素**に `display: flex` を適用します。
 
-以下のように、`box1`, `box2`, `box3` という 3 つの `div` 要素が `wrapper` という `div` 要素の中に並んでいる状態を考えましょう。
+以下のように、`box1`, `box2`, `box3` という3つの `div` 要素が `wrapper` という `div` 要素の中に並んでいる状態を考えましょう。
 
 ```html title="index.html"
 <body>
@@ -184,7 +184,7 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 
 ## グリッド
 
-1 次元で要素をレイアウトしていくフレックスボックスに対して、グリッドには行と列の 2 次元で要素をレイアウトする発想があります。
+1次元で要素をレイアウトしていくフレックスボックスに対して、グリッドには行と列の2次元で要素をレイアウトする発想があります。
 
 グリッドを利用するには、配置したい要素の**親要素**に `display: grid` を適用し、`grid-template-columns` プロパティで列の幅を、`grid-template-rows` プロパティで行の幅を指定します。
 
@@ -346,7 +346,7 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 }
 ```
 
-![親要素に relative を、子要素に absolute を指定した場合](./relative-absolute-before.png)
+![親要素にrelativeを、子要素にabsoluteを指定した場合](./relative-absolute-before.png)
 
 上のコードの `box1` に `margin-left: 200px` を指定して位置をずらしてみましょう。
 
@@ -360,7 +360,7 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 }
 ```
 
-![親要素に relative を、子要素に absolute を指定し位置をずらした場合](./relative-absolute-after.png)
+![親要素にrelativeを、子要素にabsoluteを指定し位置をずらした場合](./relative-absolute-after.png)
 
 `box1` の位置が変わっても、`box2` の `box1` に対する位置は変化していません。
 
@@ -370,7 +370,7 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 
 デバイスの画面サイズに応じて適切なレイアウトで表示を行うデザインをレスポンシブデザインと呼びます。
 
-スマートフォン用、PC 用などと個別のサイトを作らずとも、同一の CSS であらゆるデバイスに対応することができます。
+スマートフォン用、PC用などと個別のサイトを作らずとも、同一のCSSであらゆるデバイスに対応することができます。
 
 ### メディアクエリ
 
@@ -488,7 +488,7 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 スマホ等でも見やすく表示されるようにしてみましょう。
 ![スマートフォンでの表示](./exercise-smartphone.png)
 
-### 参考: サンプルで使われている CSS プロパティの一覧
+### 参考: サンプルで使われているCSSプロパティの一覧
 
 - `display`
 - `flex-direction`
diff --git a/docs/2-browser-apps/06-project/index.mdx b/docs/2-browser-apps/06-project/index.mdx
index 40ac22bc7..44abc3d75 100644
--- a/docs/2-browser-apps/06-project/index.mdx
+++ b/docs/2-browser-apps/06-project/index.mdx
@@ -4,31 +4,31 @@ title: プロジェクト
 
 import todoVideo from "./todo.mp4";
 
-ここまでの知識を使って、シンプルな ToDo アプリを作ってみましょう。
+ここまでの知識を使って、シンプルなToDoアプリを作ってみましょう。
 
 ## ルール
 
-- ToDo の追加ができます。
-- ToDo の削除ができます。
-- ToDo の編集ができます。
-- 入力欄が空欄だと ToDo の追加ができなくなります。
+- ToDoの追加ができます。
+- ToDoの削除ができます。
+- ToDoの編集ができます。
+- 入力欄が空欄だとToDoの追加ができなくなります。
 
 <video src={todoVideo} controls muted />
 
 ## 手順
 
-いきなり作るのが難しい場合はタスクを分解してみましょう。今回はルールにある 4 つの課題をひとつずつ解決していきます。
+いきなり作るのが難しい場合はタスクを分解してみましょう。今回はルールにある4つの課題をひとつずつ解決していきます。
 
-1. ToDo を追加できるようにする。
-2. ToDo を削除できるようにする。
-3. ToDo を編集できるようにする。
-4. 空の ToDo を追加できないようにする。
+1. ToDoを追加できるようにする。
+2. ToDoを削除できるようにする。
+3. ToDoを編集できるようにする。
+4. 空のToDoを追加できないようにする。
 
-の 4 つの仕事があるので、まず 1 からやっていきましょう。
+の4つの仕事があるので、まず1からやっていきましょう。
 
-### ステップ 1: ToDo を追加する
+### ステップ1: ToDoを追加する
 
-ひとまず ToDo の一覧、ToDo の入力欄、ToDo の追加ボタンが必要です。
+ひとまずToDoの一覧、ToDoの入力欄、ToDoの追加ボタンが必要です。
 `ul` 要素と `input` 要素と `button` 要素を使ってみましょう。
 
 ```html title="index.html"
@@ -47,7 +47,7 @@ import todoVideo from "./todo.mp4";
 </html>
 ```
 
-次に JavaScript ファイルを作成して追加ボタンを押したときの処理を記述しましょう。
+次にJavaScriptファイルを作成して追加ボタンを押したときの処理を記述しましょう。
 
 ```javascript title="script.js"
 const todoList = document.getElementById("todo-list");
@@ -55,12 +55,12 @@ const todoInput = document.getElementById("todo-input");
 const addButton = document.getElementById("add-button");
 
 addButton.onclick = () => {
-  // 追加ボタンを押すと ToDo を 1 つ追加する
+  // 追加ボタンを押すとToDoを1つ追加する
 };
 ```
 
 このとき、箇条書きの項目として新たに `li` 要素を追加する必要があります。
-DOM の章で扱ったように、`document.createElement` 関数を使うと新しい要素を作成できます。
+DOMの章で扱ったように、`document.createElement` 関数を使うと新しい要素を作成できます。
 また、`Node#appendChild` メソッドを用いることで既存の要素内に子要素を追加することができます。
 
 ```javascript
@@ -68,12 +68,12 @@ const li = document.createElement("li");
 todoList.appendChild(li);
 ```
 
-また、`HTMLInputElement#value` プロパティから、DOM に対応する input 要素の入力欄への入力内容を取得できます。
+また、`HTMLInputElement#value` プロパティから、DOMに対応するinput要素の入力欄への入力内容を取得できます。
 
 ```js
 const todoText = document.createElement("span");
-todoText.textContent = todoInput.value; // input 要素に入力された文字列を取得する
-todoInput.value = ""; // input 要素の入力欄を空にする
+todoText.textContent = todoInput.value; // input要素に入力された文字列を取得する
+todoInput.value = ""; // input要素の入力欄を空にする
 ```
 
 <Answer title="ステップ 1">
@@ -113,19 +113,19 @@ addButton.onclick = () => {
 
 </Answer>
 
-### ステップ 2: ToDo を削除する
+### ステップ2: ToDoを削除する
 
 次に削除ボタンを追加します。
 `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 を取り除く
+// todoListからtodoItemを取り除く
 todoList.removeChild(todoItem);
 ```
 
-<Answer title="ステップ 2">
+<Answer title="ステップ2">
 
 ```html title="index.html"
 <!doctype html>
@@ -168,7 +168,7 @@ addButton.onclick = () => {
 
 </Answer>
 
-### ステップ 3 (発展) : ToDo を編集する
+### ステップ3 (発展) : ToDoを編集する
 
 編集ボタンをつけてみましょう。
 
@@ -179,7 +179,7 @@ addButton.onclick = () => {
 todoText.textContent = prompt("新しい内容を入力してください。"); // ユーザーに入力を求める
 ```
 
-<Answer title="ステップ 3">
+<Answer title="ステップ3">
 
 ```html title="index.html"
 <!doctype html>
@@ -228,7 +228,7 @@ addButton.onclick = () => {
 
 </Answer>
 
-### ステップ 4 (発展) : 空の ToDo を入れさせない
+### ステップ4 (発展) : 空のToDoを入れさせない
 
 [`HTMLButtonElement#disabled` プロパティ](https://developer.mozilla.org/ja/docs/Web/API/HTMLButtonElement/disabled)が `true` の時、ボタンはクリックを受け付けなくなります。
 入力欄が空の時にこのプロパティを `true` に、それ以外の時は `false` にすることによって空のタスクの追加を防ぐことができます。
@@ -242,7 +242,7 @@ todoInput.oninput = () => {
 };
 ```
 
-<Answer title="ステップ 4">
+<Answer title="ステップ4">
 
 ```html title="index.html"
 <!doctype html>
@@ -276,11 +276,11 @@ addButton.onclick = () => {
   const deleteButton = document.createElement("button");
   todoText.textContent = todoInput.value;
   todoInput.value = "";
-  addButton.disabled = true; // value への代入は oninput イベントを発火しない
+  addButton.disabled = true; // valueへの代入はoninputイベントを発火しない
   editButton.textContent = "編集";
   editButton.onclick = () => {
     const input = prompt("新しい内容を入力してください"。);
-    // prompt 関数は入力された文字列が空の場合は空文字列 ("")、キャンセルされた場合は null を返す
+    // prompt関数は入力された文字列が空の場合は空文字列 ("")、キャンセルされた場合はnullを返す
     if (input !== "" && input !== null) todoText.textContent = input;
   };
   deleteButton.textContent = "削除";
diff --git a/docs/2-browser-apps/index.mdx b/docs/2-browser-apps/index.mdx
index 31d642a0c..68e997611 100644
--- a/docs/2-browser-apps/index.mdx
+++ b/docs/2-browser-apps/index.mdx
@@ -4,6 +4,6 @@ title: ブラウザで動作するアプリを構築しよう
 
 import DocCardList from "@theme/DocCardList";
 
-JavaScript を用いて開発を行うにあたり、JavaScript をより深く学んでいきましょう。
+JavaScriptを用いて開発を行うにあたり、JavaScriptをより深く学んでいきましょう。
 
 <DocCardList />
diff --git a/docs/3-web-servers/01-wsl-setup/index.mdx b/docs/3-web-servers/01-wsl-setup/index.mdx
index 9c3086851..ded76de07 100644
--- a/docs/3-web-servers/01-wsl-setup/index.mdx
+++ b/docs/3-web-servers/01-wsl-setup/index.mdx
@@ -1,18 +1,18 @@
 ---
-title: WSL のセットアップ (Windows のみ)
+title: WSLのセットアップ (Windowsのみ)
 ---
 
-## Linux と WSL
+## LinuxとWSL
 
-現在、Web サービスを提供するコンピューターのほとんどに、**Linux** という名前の OS が搭載されています。このため、Web サービスを開発するには、Linux を用いて開発することが理想です。しかしながら、現在流通している一般的なコンピューターに搭載されている OS は、Windows または macOS です。
+現在、Webサービスを提供するコンピューターのほとんどに、**Linux**という名前のOSが搭載されています。このため、Webサービスを開発するには、Linuxを用いて開発することが理想です。しかしながら、現在流通している一般的なコンピューターに搭載されているOSは、WindowsまたはmacOSです。
 
-実は、macOS を使う場合はあまり問題になりません。これは、macOS という OS が、Linux と源流を共にしているからです。こういった理由から、macOS は Web 開発者から強く支持されています。
+実は、macOSを使う場合はあまり問題になりません。これは、macOSというOSが、Linuxと源流を共にしているからです。こういった理由から、macOSはWeb開発者から強く支持されています。
 
-**WSL** は、こういった状況を覆すべく Microsoft 社によって開発された、**Windows 上で Linux を動かすための仕組み**です。WSL を用いることで、Windows の利便性を享受しつつ、Linux のパワーを活用できます。
+**WSL**は、こういった状況を覆すべくMicrosoft社によって開発された、**Windows上でLinuxを動かすための仕組み**です。WSLを用いることで、Windowsの利便性を享受しつつ、Linuxのパワーを活用できます。
 
-## Windows 環境に WSL をインストールする
+## Windows環境にWSLをインストールする
 
-WSL のインストールは、10 分程度で終わる簡単な作業です。下の動画を参考に実施しましょう。
+WSLのインストールは、10分程度で終わる簡単な作業です。下の動画を参考に実施しましょう。
 
 <ExternalVideoPlayer src="https://www.youtube.com/embed/aRf7NYZpUa0" />
 
@@ -20,19 +20,19 @@ WSL のインストールは、10 分程度で終わる簡単な作業です。
 
 :::tip[管理者として実行]
 
-`管理者として実行` メニューを使用してアプリを起動することで、アプリは強い権限を行使できるようになります。WSL のインストールにはこのような強い権限が必要なので、起動時に特殊な操作が必要になります。
+`管理者として実行` メニューを使用してアプリを起動することで、アプリは強い権限を行使できるようになります。WSLのインストールにはこのような強い権限が必要なので、起動時に特殊な操作が必要になります。
 
 :::
 
 ![管理者として実行](run-as-administrator.png)
 
-続いて、`wsl --install` コマンドを実行します。これにより、WSL が全自動でインストールされます。
+続いて、`wsl --install` コマンドを実行します。これにより、WSLが全自動でインストールされます。
 
 ![コマンドを打つ](type-wsl-install.png)
 
-インストールが完了すると、自動的にコンピューターが再起動します。このとき、3 回質問を受けます。
+インストールが完了すると、自動的にコンピューターが再起動します。このとき、3回質問を受けます。
 
-- `Enter new UNIX username`: WSL は、普段使っている Windows とは別のコンピューターのように振る舞います。
+- `Enter new UNIX username`: WSLは、普段使っているWindowsとは別のコンピューターのように振る舞います。
   ここで指定する名前は何でも構いませんが、**英小文字のみで構成された文字列**とすることを強く推奨します。
 - `New password` と `Retype new password` では、上で指定したユーザーのパスワードを入力します。
   **入力しても画面に変化はありません**が、入力自体は行われているので気にせず入力しましょう。
@@ -43,11 +43,11 @@ WSL のインストールは、10 分程度で終わる簡単な作業です。
 
 ![完成](completed.png)
 
-## VS Code に WSL 拡張機能をインストールする
+## VS CodeにWSL拡張機能をインストールする
 
-VS Code の WSL 拡張機能を用いると、VS Code を WSL 上で動かすことができ、Linux と同様の開発体験を得られます。まずは、WSL 拡張機能をインストールしましょう。
+VS CodeのWSL拡張機能を用いると、VS CodeをWSL上で動かすことができ、Linuxと同様の開発体験を得られます。まずは、WSL拡張機能をインストールしましょう。
 
-![WSL 拡張機能のインストール](./install-wsl-extension.png)
+![WSL拡張機能のインストール](./install-wsl-extension.png)
 
 拡張機能をインストールすると、左下に緑色のボタンが出現します。クリックすると画面上部からメニューが出現するので、`Connect to WSL` を選択しましょう。
 
@@ -57,24 +57,24 @@ VS Code の WSL 拡張機能を用いると、VS Code を WSL 上で動かすこ
 
 ![接続完了](./connected.png)
 
-## WSL の基本的な使い方
+## 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)
+![WSL側のファイルをWindowsのエクスプローラーから表示する](./show-linux-files.png)
 
-:::info[Windows 10 を使っている場合の注意]
+:::info[Windows 10を使っている場合の注意]
 
-Windows 10 では上記のようにしても WSL 上にあるファイルを確認することができません。
+Windows 10では上記のようにしてもWSL上にあるファイルを確認することができません。
 代わりに以下のようにします。
 
-エクスプローラーのアドレスバーに `¥¥wsl$` と入力して、Enter キーを押します。
-![WSL 側のファイルを Windows のエクスプローラーから表示する(Windows 10)](./show-linux-files-windows10.png)
+エクスプローラーのアドレスバーに `¥¥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 b3bab2b31..077ddeb24 100644
--- a/docs/3-web-servers/02-linux-commands/index.mdx
+++ b/docs/3-web-servers/02-linux-commands/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: Linux コマンド
+title: Linuxコマンド
 ---
 
 import commandsAnswerVideo from "./commands-answer.mp4";
@@ -7,30 +7,30 @@ import commandsAnswerVideo from "./commands-answer.mp4";
 ## ターミナル
 
 **ターミナル**は、文字を用いてコンピューターと会話するためのソフトウェアです。
-macOS だと標準搭載のターミナルアプリが、Windows だと [Windows Terminal アプリ](https://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701)が利用できますが、VS Code 内蔵のターミナルもなかなか便利です。
+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)
 
 :::tip[コマンド パレット]
 
-VS Code の**コマンド パレット**は、現在 VS Code 上で使用できる全ての機能を一覧表示する機能です。
+VS Codeの**コマンド パレット**は、現在VS Code上で使用できる全ての機能を一覧表示する機能です。
 
 {/* prettier-ignore */}
 <kbd>command</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (Windows) キーを押すことにより起動できます。
 
 次の画像は、コマンド パレットを用いて新しいターミナルを作成する例です。
-コマンド パレットを使用することで、ショートカットキーを知らなくても、キーボードのみで VS Code が操作できるようになります。
+コマンド パレットを使用することで、ショートカットキーを知らなくても、キーボードのみでVS Codeが操作できるようになります。
 
 ![コマンド パレット](./command-palette.png)
 
 :::
 
-:::info[Windows 環境でターミナルを使用する場合の注意]
+:::info[Windows環境でターミナルを使用する場合の注意]
 
-WSL 拡張機能を用いて WSL に接続されている場合、起動するターミナルは自動的に WSL のものになります。
-外部のターミナルアプリケーションを使用する場合は、明示的に WSL を起動させるようにしましょう。
+WSL拡張機能を用いてWSLに接続されている場合、起動するターミナルは自動的にWSLのものになります。
+外部のターミナルアプリケーションを使用する場合は、明示的にWSLを起動させるようにしましょう。
 
 ![統合ターミナル](./wsl-integrated-terminal.png)
 
@@ -38,17 +38,17 @@ WSL 拡張機能を用いて WSL に接続されている場合、起動する
 
 ## パス
 
-Linux や macOS のファイルシステムは、**ルートディレクトリ**と呼ばれる特殊なディレクトリを頂点とする木構造で表現され、この木構造の中の特定の要素を一意に表現するための表記を**パス**と呼びます。
+LinuxやmacOSのファイルシステムは、**ルートディレクトリ**と呼ばれる特殊なディレクトリを頂点とする木構造で表現され、この木構造の中の特定の要素を一意に表現するための表記を**パス**と呼びます。
 パスの区切り文字は `/` で、それが単体で利用された際はルートディレクトリを表します。
 例えば、ルートディレクトリの中の `home` ディレクトリの中の `sato` という名前のディレクトリは `/home/sato` という形で表現されます。
 
-![Linux のファイルシステム](./linux-file-system.drawio.svg)
+![Linuxのファイルシステム](./linux-file-system.drawio.svg)
 
 現在作業対象となっているディレクトリを**カレントディレクトリ**と呼びます。
 すべてのファイルやディレクトリは、ルートディレクトリを基準とした**絶対パス**で表される他、カレントディレクトリからの**相対パス**で表すこともできます。
 例えば、カレントディレクトリが `/home/tanaka` のとき、`/home/tanaka/Documents/xxx.txt` は相対パスで `Documents/xxx.txt` と表されます。
 
-Ubuntu の場合は、標準状態でカレントディレクトリがターミナル上に表示される場合が多いです。
+Ubuntuの場合は、標準状態でカレントディレクトリがターミナル上に表示される場合が多いです。
 以下の例の場合は `~/projects/sample` がカレントディレクトリです。
 
 ![カレントディレクトリの確認](./check-current-directory.png)
@@ -84,7 +84,7 @@ Ubuntu の場合は、標準状態でカレントディレクトリがターミ
 
 ## 演習
 
-現在 VS Code で開いているフォルダの中に、コマンドを用いて次のファイルとディレクトリの構造を作成してください。
+現在VS Codeで開いているフォルダの中に、コマンドを用いて次のファイルとディレクトリの構造を作成してください。
 
 ```plain
 secret
diff --git a/docs/3-web-servers/03-node-js/index.mdx b/docs/3-web-servers/03-node-js/index.mdx
index ed1ab392c..6755cf242 100644
--- a/docs/3-web-servers/03-node-js/index.mdx
+++ b/docs/3-web-servers/03-node-js/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: はじめての Node.js
+title: はじめてのNode.js
 ---
 
 import installCommandLineDeveloperToolsVideo from "./install-command-line-developer-tools.mp4";
@@ -8,13 +8,13 @@ import installNvmInMacVideo from "./install-nvm-in-mac.mp4";
 import openFolderInWslVideo from "./open-folder-in-wsl.mp4";
 import debuggingVideo from "./debugging.mp4";
 
-## ブラウザ外で動作する JavaScript
+## ブラウザ外で動作するJavaScript
 
-これまで、JavaScript といえば、ブラウザ上で動作するプログラミング言語でした。**Node.js** は、JavaScript をブラウザ外で動作させるための実行エンジンです。
+これまで、JavaScriptといえば、ブラウザ上で動作するプログラミング言語でした。**Node.js**は、JavaScriptをブラウザ外で動作させるための実行エンジンです。
 
-Node.js をインストールする方法は様々ですが、現在は [nvm](https://github.com/nvm-sh/nvm) と呼ばれるツールが用いられることが多いようです。
+Node.jsをインストールする方法は様々ですが、現在は[nvm](https://github.com/nvm-sh/nvm)と呼ばれるツールが用いられることが多いようです。
 
-macOS の場合は、先に次のコマンドを実行してコマンドラインデベロッパツールをインストールする必要があります。
+macOSの場合は、先に次のコマンドを実行してコマンドラインデベロッパツールをインストールする必要があります。
 
 ```shell
 xcode-select --install
@@ -22,13 +22,13 @@ 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
 ```
 
-続いて、ターミナルアプリケーションを再起動してから、nvm のインストールが成功していることを確認するため、次のコマンドを実行します。
+続いて、ターミナルアプリケーションを再起動してから、nvmのインストールが成功していることを確認するため、次のコマンドを実行します。
 
 ```shell
 nvm -v
@@ -41,13 +41,13 @@ $ nvm -v
 0.39.7
 ```
 
-さらに、次のコマンドを実行して、Node.js をインストールします。
+さらに、次のコマンドを実行して、Node.jsをインストールします。
 
 ```shell
 nvm install --lts
 ```
 
-完了したら、Node.js のインストールが完了しているか確認するため、次のコマンドを実行します。
+完了したら、Node.jsのインストールが完了しているか確認するため、次のコマンドを実行します。
 
 ```shell
 node -v
@@ -62,7 +62,7 @@ v20.12.2
 
 <Tabs groupId="os">
   <TabItem value="mac" label="macOS">
-    macOS の場合、インストールコマンドを実行してターミナルを再起動しても、`nvm` が使用できない場合があります。その場合、次のコマンドを実行してみてください。
+    macOSの場合、インストールコマンドを実行してターミナルを再起動しても、`nvm` が使用できない場合があります。その場合、次のコマンドを実行してみてください。
 
     ```shell
     touch ~/.zshrc
@@ -72,20 +72,20 @@ v20.12.2
 
   </TabItem>
   <TabItem value="win" label="Windows (WSL)">
-    Windows 上での作業は、WSL のターミナルを利用するようにしましょう。
+    Windows上での作業は、WSLのターミナルを利用するようにしましょう。
 
     <video src={installNvmInWslVideo} controls />
 
   </TabItem>
 </Tabs>
 
-## Node.js で Hello World
+## 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 上にプロジェクトフォルダを作る]
+:::info[WSL上にプロジェクトフォルダを作る]
 
-Windows の WSL では、エクスプローラーのサイドパネルから `Linux` を開いた後、`Ubuntu` → `home` → `[ユーザー名]` の順番でフォルダを開き、そこに `projects` フォルダを作成します。
+WindowsのWSLでは、エクスプローラーのサイドパネルから `Linux` を開いた後、`Ubuntu` → `home` → `[ユーザー名]` の順番でフォルダを開き、そこに `projects` フォルダを作成します。
 
 <video src={openFolderInWslVideo} controls muted />
 
@@ -103,11 +103,11 @@ console.log("Hello World!");
 
 ターミナルに `Hello World!` が表示されれば成功です。
 
-## Node.js のデバッグ
+## Node.jsのデバッグ
 
-[ブラウザの開発者ツールを利用する](/docs/browser-apps/inspector/) 節で JavaScript のデバッグを行ったのと同様に、Node.js では、VS Code 標準の機能を用いてデバッグを行えます。
+[ブラウザの開発者ツールを利用する](/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 a574f7c25..7aba5913e 100644
--- a/docs/3-web-servers/04-module/index.mdx
+++ b/docs/3-web-servers/04-module/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: モジュールと npm
+title: モジュールとnpm
 ---
 
 import npmInitVideo from "./npm-init.mp4";
@@ -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) {
@@ -19,9 +19,9 @@ function add(a, b) {
 console.log(add(3, 4)); // Uncaught ReferenceError: add is not defined
 ```
 
-別のファイルに書かれたプログラムを読み込むための手段として、Node.js では<Term>**モジュール**</Term>という仕組みが用意されています。JavaScript では、すべてのファイルが<Term>モジュール</Term>として扱われます。
+別のファイルに書かれたプログラムを読み込むための手段として、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) {
@@ -60,11 +60,11 @@ console.log(subtract(4, 3));
 
 :::
 
-:::tip[CommonJS モジュール]
+:::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` オブジェクトは標準では空のオブジェクトですが、プログラム中から書き換えることができます。
 
@@ -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";
@@ -117,7 +117,7 @@ Hello World!
 
 <Answer>
 
-第 1 引数にファイルへのパス、第 2 引数に書き込む文字列を指定します。
+第1引数にファイルへのパス、第2引数に書き込む文字列を指定します。
 
 ```javascript title="main.mjs"
 import { writeFileSync } from "node:fs";
@@ -134,15 +134,15 @@ writeFileSync("./sample.txt", "Hello World!");
 
 ## npm
 
-Node.js における**パッケージ**とは、主に JavaScript ファイルをまとめていろいろな場所で利用可能にしたものです。[npm](https://docs.npmjs.com/about-npm) (Node Package Manager) は、Node.js の**パッケージマネージャー**で、このソフトウェアを通してパッケージを管理できます。
+Node.jsにおける**パッケージ**とは、主にJavaScriptファイルをまとめていろいろな場所で利用可能にしたものです。[npm](https://docs.npmjs.com/about-npm) (Node Package Manager) は、Node.jsの**パッケージマネージャー**で、このソフトウェアを通してパッケージを管理できます。
 
-また、npm から利用されるパッケージを集積したサービス [npmjs.com](https://www.npmjs.com/) もまた、npm と呼ばれます。例として、日付や時刻の操作のために用いられる<Term>ライブラリ</Term>である、[date-fns](https://www.npmjs.com/package/date-fns) パッケージを利用してみましょう。
+また、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
@@ -154,9 +154,9 @@ npm install date-fns
 
 :::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 のオブジェクト記法よりも制限が厳しくなっています。例えば、
+JSONは、JavaScriptのオブジェクト記法よりも制限が厳しくなっています。例えば、
 
 ```js
 {
@@ -165,12 +165,12 @@ JSON は、JavaScript のオブジェクト記法よりも制限が厳しくな
 }
 ```
 
-は、JavaScript の文法では有効ですが、JSON としては誤りです。JSON には、
+は、JavaScriptの文法では有効ですが、JSONとしては誤りです。JSONには、
 
 - キーには必ずダブルクォーテーションをつける
 - 最後のプロパティの後にはコンマをつけてはならない
 
-という制約があります。このため、上のオブジェクトを JSON で記述するためには、
+という制約があります。このため、上のオブジェクトをJSONで記述するためには、
 
 ```json
 {
@@ -183,9 +183,9 @@ JSON は、JavaScript のオブジェクト記法よりも制限が厳しくな
 
 :::
 
-## npm のパッケージを Node.js から利用する
+## npmのパッケージをNode.jsから利用する
 
-npm でダウンロードしたパッケージは、<Term>モジュール</Term>として `import` 宣言に指定できます。
+npmでダウンロードしたパッケージは、<Term>モジュール</Term>として `import` 宣言に指定できます。
 
 ```javascript
 import { format } from "date-fns";
@@ -194,15 +194,15 @@ console.log(format(new Date(), "yyyy年MM月dd日"));
 
 <ViewSource url={import.meta.url} path="_samples/date-fns" noCodeSandbox />
 
-![date-fns パッケージの利用](./use-package.png)
+![date-fnsパッケージの利用](./use-package.png)
 
 ## 初級演習
 
 ### `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 パッケージ">
+<Answer title="node-emojiパッケージ">
    
 [`emojify` 関数](https://www.npmjs.com/package/node-emoji#emojiemojifyinput-options)を用いると、文字列中の絵文字を表す部分を絵文字に変換することができます。
    
@@ -219,9 +219,9 @@ console.log(emojify("I :heart: :coffee:!"));
 
 ### `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 パッケージ">
+<Answer title="mathjsパッケージ">
 
 [`mathjs.derivative` 関数](https://mathjs.org/docs/reference/functions/derivative.html)を用いると、微分した式を求めることができます。
 
diff --git a/docs/3-web-servers/05-server/index.mdx b/docs/3-web-servers/05-server/index.mdx
index c7924d02e..e97fe25f7 100644
--- a/docs/3-web-servers/05-server/index.mdx
+++ b/docs/3-web-servers/05-server/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: Express によるサーバー構築
+title: Expressによるサーバー構築
 ---
 
 import expressSetupVideo from "./express-setup.mp4";
@@ -8,9 +8,9 @@ import RequestResponseSlideShow from "./request-response-slide-show";
 
 ## ウェブサイトが動作する仕組み
 
-[「Web プログラミングの基礎を学ぼう」](/docs/trial-session/) の章では、ウェブサイトを表示するために HTML ファイルと JavaScript ファイルを作成し、ブラウザから開きました。
-しかし、一般的なウェブサイトを閲覧する際は、HTML ファイルや JavaScript ファイルの存在を意識することはありません。
-これは、Web では、通常インターネットを介してデータをやり取りするためです。
+[「Webプログラミングの基礎を学ぼう」](/docs/trial-session/) の章では、ウェブサイトを表示するためにHTMLファイルとJavaScriptファイルを作成し、ブラウザから開きました。
+しかし、一般的なウェブサイトを閲覧する際は、HTMLファイルやJavaScriptファイルの存在を意識することはありません。
+これは、Webでは、通常インターネットを介してデータをやり取りするためです。
 
 インターネットを人間が直接利用することはできないので、何らかのコンピューターを使用しなければなりません。
 このとき、
@@ -25,25 +25,25 @@ import RequestResponseSlideShow from "./request-response-slide-show";
 
 のように区別して呼びます。
 
-Google Chrome や Safari に代表される**ブラウザ**は、Web におけるクライアントソフトウェアの呼称です。
-Web において、HTML、CSS、JavaScript は、サーバーがクライアントに対してレスポンスとして送信するデータの一部で、ブラウザによって解釈されて表示されます。
+Google ChromeやSafariに代表される**ブラウザ**は、Webにおけるクライアントソフトウェアの呼称です。
+Webにおいて、HTML、CSS、JavaScriptは、サーバーがクライアントに対してレスポンスとして送信するデータの一部で、ブラウザによって解釈されて表示されます。
 
-ここからは、Node.js を用いて、Web サーバーとして動作するソフトウェアを作成していきます。
+ここからは、Node.jsを用いて、Webサーバーとして動作するソフトウェアを作成していきます。
 
 ![クライアントとサーバー](./client-server.drawio.svg)
 
 :::tip[ここまででの教材とのつながり]
 
-ブラウザは、サーバーと通信して取得した HTML、CSS、JavaScript データを解釈して表示するだけでなく、コンピューター上にファイルの形式で存在している HTML、CSS、JavaScript を表示することもできます。
+ブラウザは、サーバーと通信して取得したHTML、CSS、JavaScriptデータを解釈して表示するだけでなく、コンピューター上にファイルの形式で存在しているHTML、CSS、JavaScriptを表示することもできます。
 ここまでの教材では、サーバーという概念の導入による複雑さを避けるため、この機能を用いて各言語の文法を学んできました。
 
 :::
 
-## Express パッケージを用いて Web サーバーを構築する
+## Expressパッケージを用いてWebサーバーを構築する
 
-[Express パッケージ](https://www.npmjs.com/package/express) を用いると、簡単に Web サーバーを構築できます。
+[Expressパッケージ](https://www.npmjs.com/package/express) を用いると、簡単にWebサーバーを構築できます。
 
-まずは `express` パッケージを npm でインストールします。
+まずは `express` パッケージをnpmでインストールします。
 
 ```shell
 npm install express
@@ -80,22 +80,22 @@ node main.mjs
 
 <video src={expressSetupVideo} muted controls />
 
-:::warning[Web サーバーの停止]
+:::warning[Webサーバーの停止]
 
 サーバーは、クライアントからのリクエストを待ち受けるため、管理者により指示されない限り終了しないソフトウェアとして動作します。
-Express で構築したサーバーは、ターミナル上で <kbd>control</kbd> + <kbd>C</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>C</kbd> (Windows) を押すことで停止することができます。
+Expressで構築したサーバーは、ターミナル上で<kbd>control</kbd> + <kbd>C</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>C</kbd> (Windows) を押すことで停止することができます。
 
 :::
 
-## HTTP と URL
+## HTTPとURL
 
 前項のプログラムが動作する仕組みを理解するためには、ブラウザとサーバーの間で行われるやり取りについて知る必要があります。
 互いが好き勝手にデータを送受信しても、意味のあるやり取りは成立しません。
 そこで、ブラウザとサーバーの間でデータを送受信する際には、一定の手順に従う必要があります。
-この手順のことを**プロトコル**と呼び、Web の世界では、**HTTP** と呼ばれるプロトコルが用いられます。
+この手順のことを**プロトコル**と呼び、Webの世界では、**HTTP**と呼ばれるプロトコルが用いられます。
 
-ブラウザは、アドレスバーに **URL** が入力されると、その情報をもとに HTTP を用いてサーバーと通信します。
-例えば、先ほどの例で使用した `http://localhost:3000/lang/ja` という URL は、次のように解釈されます。
+ブラウザは、アドレスバーに**URL**が入力されると、その情報をもとにHTTPを用いてサーバーと通信します。
+例えば、先ほどの例で使用した `http://localhost:3000/lang/ja` というURLは、次のように解釈されます。
 
 <p>
   <UrlStructureExplanation />
@@ -103,7 +103,7 @@ Express で構築したサーバーは、ターミナル上で <kbd>control</kbd
 
 - **プロトコル**:
   `http` または `https` のいずれかです。
-  いずれを指定しても使用されるプロトコルは HTTP ですが、`https` を指定した場合は通信内容が暗号化されます。
+  いずれを指定しても使用されるプロトコルはHTTPですが、`https` を指定した場合は通信内容が暗号化されます。
   この例では `http` を用いていますが、インターネット上に公開するウェブサイトでは `https` を用いることが推奨されます。
 - **ドメイン**:
   通信先のコンピューターを特定するための識別子です。
@@ -112,17 +112,17 @@ Express で構築したサーバーは、ターミナル上で <kbd>control</kbd
 - **ポート**:
   通信先のコンピューター上で、どのプログラムと通信するかを特定するための整数です。
   ポートを変えることで、同じコンピューター上で複数のサーバーが通信を待ち受けることができます。
-  省略すると、プロトコル部分が `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 に含まれる情報のうち、プロトコル、ドメイン、ポートはネットワーク上で通信を行うために用いられる情報です。
+このように、URLに含まれる情報のうち、プロトコル、ドメイン、ポートはネットワーク上で通信を行うために用いられる情報です。
 残りのパス部分をどのように扱うかが、サーバー側のプログラムにおける主な関心事になります。
 
-## Hello World サーバーの動作
+## Hello Worldサーバーの動作
 
 `main.mjs` のプログラムを参照しながら、ブラウザとサーバーの間でどのようなやり取りが行われているのかを確認しましょう。
 
@@ -142,45 +142,45 @@ app.listen(3000);
 
 ### `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!` という文字列と、`日本語` というリンクを表示します。
+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` というパスに対して行われます。
+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 />
 </p>
 
-## HTML に指定された外部リソースの取得
+## HTMLに指定された外部リソースの取得
 
-サーバーから返されたレスポンスが HTML である場合、ブラウザによってさらに別のリクエストが送信される場合があります。
-例えば、HTML には CSS や JavaScript などの外部リソースを読み込むためのタグが存在します。
-これらの外部リソースは、ブラウザが HTML を解釈する際に、それぞれに対するリクエストを送信して取得します。
+サーバーから返されたレスポンスがHTMLである場合、ブラウザによってさらに別のリクエストが送信される場合があります。
+例えば、HTMLにはCSSやJavaScriptなどの外部リソースを読み込むためのタグが存在します。
+これらの外部リソースは、ブラウザがHTMLを解釈する際に、それぞれに対するリクエストを送信して取得します。
 
-次の例では、ブラウザは 2 つの HTTP リクエストを送信します。
+次の例では、ブラウザは2つのHTTPリクエストを送信します。
 
-1. 利用者が、ブラウザのアドレスバーに `http://localhost:3000/` という URL を入力します。
-2. ブラウザは、`/` というパスに対する HTTP リクエストを送信します。
+1. 利用者が、ブラウザのアドレスバーに `http://localhost:3000/` というURLを入力します。
+2. ブラウザは、`/` というパスに対するHTTPリクエストを送信します。
 3. サーバーは、 `<script src="./script.js"></script>` という文字列をレスポンスとして送信します。
-4. ブラウザは、受け取ったレスポンスを HTML として解釈し、`script` タグを発見します。
-5. ブラウザは、`src` 属性を相対パスとして解釈し、`/script.js` というパスに対して HTTP リクエストを送信します。
+4. ブラウザは、受け取ったレスポンスをHTMLとして解釈し、`script` タグを発見します。
+5. ブラウザは、`src` 属性を相対パスとして解釈し、`/script.js` というパスに対してHTTPリクエストを送信します。
 6. サーバーは、`document.write("Hello World!");` という文字列をレスポンスとして送信します。
-7. ブラウザは、受け取ったレスポンスを JavaScript として解釈し、`Hello World!` という文字列を表示します。
+7. ブラウザは、受け取ったレスポンスをJavaScriptとして解釈し、`Hello World!` という文字列を表示します。
 
 ```javascript title="main.mjs"
 import express from "express";
@@ -241,20 +241,20 @@ app.listen(3000);
 
 :::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` の実装]
 
-Express の [`use` メソッド](https://expressjs.com/ja/api.html#app.use) は、`get` メソッドと同様に、リクエストを受け取ったときに実行される関数を登録するためのメソッドです。
+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の [`Request`](https://expressjs.com/ja/api.html#req) オブジェクトの[`path` プロパティ](https://expressjs.com/ja/api.html#req.path)には、リクエストのパスが文字列として格納されています。
 この値を用いて、`express.static` は適切なファイルを読み込みます。
 次の例は、`express.static` 関数の簡易な実装例です。
-このプログラムは動作はしますが、セキュリティ上の問題があるため、実際の Express の実装はもっと複雑になっています。
+このプログラムは動作はしますが、セキュリティ上の問題があるため、実際のExpressの実装はもっと複雑になっています。
 
 ```javascript
 const app = express();
@@ -270,7 +270,7 @@ app.listen(3000);
 
 ## 複雑なウェブページ
 
-前項のプログラムを書き換えて、複雑な HTML を出力できるようにしてみましょう。
+前項のプログラムを書き換えて、複雑なHTMLを出力できるようにしてみましょう。
 
 ```javascript title="main.mjs"
 import express from "express";
@@ -313,9 +313,9 @@ console.log(["Apple", "Banana", "Orange"].join("/")); // Apple/Banana/Orange
 
 :::tip[`String#replace` メソッド]
 
-上記のようにテンプレートリテラルを使って HTML を作成することもできますが、HTML がさらに長くなったり、複雑なプログラムが必要になってきたりしたらこのまま続けていくのは難しそうです。
+上記のようにテンプレートリテラルを使ってHTMLを作成することもできますが、HTMLがさらに長くなったり、複雑なプログラムが必要になってきたりしたらこのまま続けていくのは難しそうです。
 
-[`String#replace`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace) メソッドは、第 1 引数に与えられた文字列に一致する文字列を第 2 引数の文字列に置き換えた新しい文字列を返します。
+[`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) メソッドを使います。
 
@@ -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>
@@ -363,7 +363,7 @@ app.listen(3000);
 
 リクエストを受け取ったとき、プログラムではまず `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="訪問者カウンター">
 
@@ -394,7 +394,7 @@ app.listen(3000);
 
 ### サーバー側とクライアント側
 
-(重要) アクセスされた時刻をウェブサーバー側で求めて表示するウェブサーバーと、ブラウザに求めさせるウェブサーバーをそれぞれ作成してください。また、この 2 つの違いは何でしょうか。どういった場合にどちらの手法を使うのが適切でしょうか。
+(重要) アクセスされた時刻をウェブサーバー側で求めて表示するウェブサーバーと、ブラウザに求めさせるウェブサーバーをそれぞれ作成してください。また、この2つの違いは何でしょうか。どういった場合にどちらの手法を使うのが適切でしょうか。
 
 <Answer title="サーバー側とクライアント側">
 
diff --git a/docs/3-web-servers/06-form/index.mdx b/docs/3-web-servers/06-form/index.mdx
index bc7802d85..af6c1b852 100644
--- a/docs/3-web-servers/06-form/index.mdx
+++ b/docs/3-web-servers/06-form/index.mdx
@@ -4,19 +4,19 @@ title: フォーム
 
 ## クエリパラメータの利用
 
-入力した内容によって、次に移るページで表示されるものが異なるウェブページがあります。例として、Google で `utcode` と検索した際に表示される検索結果のページを考えてみましょう。
+入力した内容によって、次に移るページで表示されるものが異なるウェブページがあります。例として、Googleで `utcode` と検索した際に表示される検索結果のページを考えてみましょう。
 
 ![クエリパラメータ](./query-parameter.png)
 
-このページの URL は、次のようになっています。
+このページのURLは、次のようになっています。
 
 ```
 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 つのパラメータが存在することになります。
+クエリパラメータは、キーと値の組み合わせにより表現されます。先ほどの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";
@@ -38,21 +38,21 @@ app.listen(3000);
 
 <ViewSource url={import.meta.url} path="_samples/query-parameter" />
 
-:::tip[JSON とは何か]
+:::tip[JSONとは何か]
 
-JSON は「JavaScript Object Notation」の略で JavaScript のオブジェクト表記法を倣ったデータ記述方法のことです。つまりデータの保存は<Term>オブジェクト</Term>の形式で行うという決まり事です。表記法の名前なので臆する必要はありません。
+JSONは「JavaScript Object Notation」の略でJavaScriptのオブジェクト表記法を倣ったデータ記述方法のことです。つまりデータの保存は<Term>オブジェクト</Term>の形式で行うという決まり事です。表記法の名前なので臆する必要はありません。
 
 :::
 
-:::tip[JSON.stringify メソッド]
+:::tip[JSON.stringifyメソッド]
 
-`JSON.stringify` メソッドはオブジェクトを JSON 形式の文字列に変換するメソッドです。
+`JSON.stringify` メソッドはオブジェクトをJSON形式の文字列に変換するメソッドです。
 
 :::
 
-:::tip[URL として使用できない文字の対処方法]
+:::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"
@@ -69,7 +69,7 @@ encodeURIComponent("日本語"); // "%E6%97%A5%E6%9C%AC%E8%AA%9E"
 - `input` の `name` 属性: クエリパラメータのキー
 - `button` 要素: `form` 内のボタンをクリックすると `form` の `action` に指定したページに遷移します（送信ボタンになります）
 
-以下のコードの、HTML ファイルと、JavaScript ファイルを作成して実行してみましょう。
+以下のコードの、HTMLファイルと、JavaScriptファイルを作成して実行してみましょう。
 
 ```html title="static/index.html"
 <!doctype html>
@@ -114,14 +114,14 @@ app.listen(3000);
 
 ![http://localhost:3000/send](./form-example-3.png)
 
-このページの URL を見てみましょう。特に、クエリパラメータの部分に注目してみましょう。
+このページのURLを見てみましょう。特に、クエリパラメータの部分に注目してみましょう。
 ![URLのクエリパラメータ](form-url.png)
 
 ## 初級演習
 
 ### 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` 関数を適用するサーバーを作ってみましょう。
 
 また、文字列を簡単にサーバーに送れるようにフォームも作りましょう。
 
diff --git a/docs/3-web-servers/07-get-post/index.mdx b/docs/3-web-servers/07-get-post/index.mdx
index 466401eaf..517daa905 100644
--- a/docs/3-web-servers/07-get-post/index.mdx
+++ b/docs/3-web-servers/07-get-post/index.mdx
@@ -1,24 +1,24 @@
 ---
-title: GET リクエストと POST リクエスト
+title: GETリクエストとPOSTリクエスト
 ---
 
 import postInDevelopment1 from "./postInDevelopment1.mp4";
 import postInDevelopment2 from "./postInDevelopment2.mp4";
 import postInDevelopment3 from "./postInDevelopment3.mp4";
 
-## GET リクエストと POST リクエスト
+## GETリクエストとPOSTリクエスト
 
-HTTP 上の通信において<Term>クライアント</Term>から<Term>サーバー</Term>への要求を<Term>リクエスト</Term>と言いましたが、今まで扱ってきたのはその中でも **GET リクエスト**と呼ばれるものになります。
+HTTP上の通信において<Term>クライアント</Term>から<Term>サーバー</Term>への要求を<Term>リクエスト</Term>と言いましたが、今まで扱ってきたのはその中でも**GETリクエスト**と呼ばれるものになります。
 
-GET リクエストで<Term>サーバー</Term>にデータを送信する場合、前頁で扱ったように、<Term>クエリパラメータ</Term>として URL の末尾に付加するしかありませんが、この方式だと困ってしまうことがあります。例えばパスワードなどを入力したときに URL にパスワード情報が載ってしまい機密情報の漏洩につながります。また、URL の長さの制限のため、大量の情報は送信できません。
+GETリクエストで<Term>サーバー</Term>にデータを送信する場合、前頁で扱ったように、<Term>クエリパラメータ</Term>としてURLの末尾に付加するしかありませんが、この方式だと困ってしまうことがあります。例えばパスワードなどを入力したときにURLにパスワード情報が載ってしまい機密情報の漏洩につながります。また、URLの長さの制限のため、大量の情報は送信できません。
 
-そこで用いるのが **POST リクエスト**です。POST リクエストでは、<Term>クエリパラメータ</Term>とは別に、<Term>リクエストボディ</Term>と呼ばれる領域を使って大容量のデータを送信できます。
+そこで用いるのが**POSTリクエスト**です。POSTリクエストでは、<Term>クエリパラメータ</Term>とは別に、<Term>リクエストボディ</Term>と呼ばれる領域を使って大容量のデータを送信できます。
 
-HTTP リクエストのこのような区分を、<Term>**HTTP メソッド**</Term>と呼びます。
+HTTPリクエストのこのような区分を、<Term>**HTTPメソッド**</Term>と呼びます。
 
-![HTTP メソッドの比較](./method-comparison.png)
+![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>)を使用します。
 
-`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,13 +70,13 @@ 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リクエストを開発者ツールで覗いてみる
 
-実際に POST リクエストの中身がどうなっているか覗いてみましょう。まず開発者ツールの `Network` タブを開き、文字を入力して送信してみます。
+実際にPOSTリクエストの中身がどうなっているか覗いてみましょう。まず開発者ツールの `Network` タブを開き、文字を入力して送信してみます。
 
 <video src={postInDevelopment1} controls />
 
@@ -84,11 +84,11 @@ app.listen(3000);
 
 <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 />
 
-以上のようにして、POST リクエストの中身を覗くことができます。
+以上のようにして、POSTリクエストの中身を覗くことができます。
 
 ![GETリクエストとPOSTリクエスト](requestAndResponse.png)
 
@@ -96,7 +96,7 @@ app.listen(3000);
 
 古き良き掲示板システムを作ってみましょう。次のようなページを作成してください。
 
-- `GET /`: 現在の投稿されているすべての記事を表示します。`/send` へ POST するためのフォームも同時に表示します。
+- `GET /`: 現在の投稿されているすべての記事を表示します。`/send` へPOSTするためのフォームも同時に表示します。
 - `POST /send`: リクエストボディに含まれている記事の内容を記録します。
 
 :::tip[ヒント]
@@ -110,7 +110,7 @@ app.listen(3000);
 :::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 b255cc5d9..f65d96304 100644
--- a/docs/3-web-servers/08-database/index.mdx
+++ b/docs/3-web-servers/08-database/index.mdx
@@ -12,7 +12,7 @@ import forumVideo from "./forum.mp4";
 
 ## データ管理の限界
 
-これまで作成してきたアプリケーションでは、次のように、データを全て Node.js アプリケーション上の変数に記録していました。しかし、このような方法では、<Term>サーバー</Term>が終了するたびにデータが消えてしまいます。
+これまで作成してきたアプリケーションでは、次のように、データを全てNode.jsアプリケーション上の変数に記録していました。しかし、このような方法では、<Term>サーバー</Term>が終了するたびにデータが消えてしまいます。
 
 ```javascript
 const messages = [];
@@ -32,7 +32,7 @@ app.post((request, response) => {
 });
 ```
 
-ひとつは、複数の<Term>サーバー</Term>間でデータの共有ができないことです。Web アプリケーションの利用者が増えてくると、1 台の<Term>サーバー</Term>では<Term>リクエスト</Term>を処理しきれなくなります。このような場合、<Term>リクエスト</Term>を複数のサーバーに分散させます。このとき、<Term>サーバー</Term>内に保存されているファイルは共有されないため、データに不整合が生じてしまいます。
+ひとつは、複数の<Term>サーバー</Term>間でデータの共有ができないことです。Webアプリケーションの利用者が増えてくると、1台の<Term>サーバー</Term>では<Term>リクエスト</Term>を処理しきれなくなります。このような場合、<Term>リクエスト</Term>を複数のサーバーに分散させます。このとき、<Term>サーバー</Term>内に保存されているファイルは共有されないため、データに不整合が生じてしまいます。
 
 ![複数のサーバーで負荷を分散する](./load-balancing.drawio.svg)
 
@@ -44,19 +44,19 @@ app.post((request, response) => {
 
 データベースは、通常<Term>サーバー</Term>として動作します。つまり、**データベースサーバー**は、保持しているデータに対する参照や更新のための<Term>リクエスト</Term> (**クエリ**) を受け、その結果を<Term>レスポンス</Term>として<Term>クライアント</Term>に返します。
 
-データベースサーバーの<Term>クライアント</Term>は、通常 Web サービスの使用者ではなく、皆さんが Node.js などで開発する<Term>サーバー</Term>です。これまで開発してきたような<Term>サーバー</Term>を、データベースサーバーと対比して**アプリケーションサーバー**と呼びます。
+データベースサーバーの<Term>クライアント</Term>は、通常Webサービスの使用者ではなく、皆さんがNode.jsなどで開発する<Term>サーバー</Term>です。これまで開発してきたような<Term>サーバー</Term>を、データベースサーバーと対比して**アプリケーションサーバー**と呼びます。
 
 ![データベースとアプリケーションサーバー](./database-application-server.drawio.svg)
 
-データベースの中でも、**リレーショナルデータベース**は、最も多く使われる種類のもので、データを Excel のような表形式でとらえます。次の図は、リレーショナルデータベースの基本的な概念である、**テーブル**、**カラム**、**レコード**について整理した図です。リレーショナルデータベースを用いる一般的なアプリケーションでは、アプリケーション開発時にテーブルとカラムを作成しておき、ユーザーの操作に応じてレコードを追加・編集・削除していきます。
+データベースの中でも、**リレーショナルデータベース**は、最も多く使われる種類のもので、データをExcelのような表形式でとらえます。次の図は、リレーショナルデータベースの基本的な概念である、**テーブル**、**カラム**、**レコード**について整理した図です。リレーショナルデータベースを用いる一般的なアプリケーションでは、アプリケーション開発時にテーブルとカラムを作成しておき、ユーザーの操作に応じてレコードを追加・編集・削除していきます。
 
 ![リレーショナルデータベース](./relational-database-concept.png)
 
-リレーショナルデータベースに対するクエリは、通常 **SQL** と呼ばれる言語を用いて記述します。データベース<Term>クライアント</Term>として用いるライブラリによっては、SQL を直接用いることなく、そのライブラリが提供する専用の関数等を用いてデータベースに対してクエリを発行できることがあります。
+リレーショナルデータベースに対するクエリは、通常**SQL**と呼ばれる言語を用いて記述します。データベース<Term>クライアント</Term>として用いるライブラリによっては、SQLを直接用いることなく、そのライブラリが提供する専用の関数等を用いてデータベースに対してクエリを発行できることがあります。
 
 ## データベースを用いるアプリケーション
 
-ここでは、Node.js のアプリケーションサーバーで、Prisma と呼ばれる<Term>ライブラリ</Term>を用い、リレーショナルデータベースの一つである PostgreSQL <Term>サーバー</Term>に保存されているデータを取得します。
+ここでは、Node.jsのアプリケーションサーバーで、Prismaと呼ばれる<Term>ライブラリ</Term>を用い、リレーショナルデータベースの一つであるPostgreSQL<Term>サーバー</Term>に保存されているデータを取得します。
 
 ### 使用する技術・サービス
 
@@ -66,24 +66,24 @@ app.post((request, response) => {
 
 #### [DBeaver](https://dbeaver.io/)
 
-多くのデータベースを直感的に操作できるソフトウェアです。PostgreSQL にも対応しています。
+多くのデータベースを直感的に操作できるソフトウェアです。PostgreSQLにも対応しています。
 
 #### [Prisma](https://www.prisma.io/)
 
-主にリレーショナルデータベースを操作するための Node.js の<Term>ライブラリ</Term>です。複数の構成要素からなります。
+主にリレーショナルデータベースを操作するための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/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` 拡張機能**](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma): VS Codeの拡張機能です。`.prisma` ファイルに対する補完やフォーマットの機能を提供します。
 
 #### [Supabase](https://supabase.com/)
 
-PostgreSQL サーバーを提供するサービスです。PostgreSQL サーバーは皆さんのコンピューター上にも構築できますが、ここではその手間を省くため、外部のサービスを利用します。
+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` ボタンを押して生成するのが良いでしょう。また、後でこのパスワードは使用することになるため覚えておきましょう。
@@ -91,21 +91,21 @@ PostgreSQL サーバーを提供するサービスです。PostgreSQL サーバ
 
 <video src={newPostgresqlInstanceVideo} controls />
 
-### DBeaver で PostgreSQL サーバーに接続する
+### DBeaverでPostgreSQLサーバーに接続する
 
-[DBeaver](https://dbeaver.io) をインストールしましょう。続いて、Supabase で接続情報を表示し、その情報を DBeaver に入力して前項で起動した PostgreSQL サーバーに接続しましょう。
+[DBeaver](https://dbeaver.io)をインストールしましょう。続いて、Supabaseで接続情報を表示し、その情報をDBeaverに入力して前項で起動したPostgreSQLサーバーに接続しましょう。
 
 <video src={connectDbeaverToDatabaseVideo} controls />
 
-この時点では、まだデータベース上にテーブルが作成されていません。DBeaver 上で作成することもできますが、今回は Prisma を使用して作成することにします。
+この時点では、まだデータベース上にテーブルが作成されていません。DBeaver上で作成することもできますが、今回はPrismaを使用して作成することにします。
 
-### Prisma でテーブル構造を作成する
+### Prismaでテーブル構造を作成する
 
-VS Code 向けの Prisma 拡張機能をインストールしましょう。
+VS Code向けのPrisma拡張機能をインストールしましょう。
 
-![Prisma 拡張機能のインストール](./install-prisma-extension.png)
+![Prisma拡張機能のインストール](./install-prisma-extension.png)
 
-新しいフォルダを VS Code で開き、`npm init` コマンドを使用して `package.json` ファイルを作成した後、
+新しいフォルダをVS Codeで開き、`npm init` コマンドを使用して `package.json` ファイルを作成した後、
 
 ```shell
 npx prisma init
@@ -117,13 +117,12 @@ npx prisma init
 
 :::tip[`npx` コマンド]
 
-<Term>`npx` コマンド</Term>は、npm
-のパッケージを、プログラムからではなく直接実行するためのコマンドです。npm には
-`prisma` パッケージのように、直接実行専用のパッケージも存在します。
+{/* prettier-ignore */}
+<Term>`npx` コマンド</Term>は、npmのパッケージを、プログラムからではなく直接実行するためのコマンドです。npmには `prisma` パッケージのように、直接実行専用のパッケージも存在します。
 
 :::
 
-続いて、Supabase からデータベースへの接続情報を `.env` ファイルにコピーします。これにより、Prisma は Supabase 上の PostgreSQL サーバーと接続できるようになります。
+続いて、Supabaseからデータベースへの接続情報を `.env` ファイルにコピーします。これにより、PrismaはSupabase上のPostgreSQLサーバーと接続できるようになります。
 
 <video src={copySecretValuesVideo} controls muted />
 
@@ -154,32 +153,32 @@ model Todo {
 npx prisma db push
 ```
 
-コマンドを実行しましょう。すると、データベースに `schema.prisma` に書かれた通りのテーブルとカラムが作成されるので、DBeaver で確認してみてください。接続を一旦切断し、再接続する必要があります。また、このとき、後述する `@prisma/client` パッケージが自動的にインストールされます。
+コマンドを実行しましょう。すると、データベースに `schema.prisma` に書かれた通りのテーブルとカラムが作成されるので、DBeaverで確認してみてください。接続を一旦切断し、再接続する必要があります。また、このとき、後述する `@prisma/client` パッケージが自動的にインストールされます。
 
 <video src={prismaDbPushVideo} controls />
 
-### DBeaver で Prisma が作成したテーブルにレコードを追加する
+### DBeaverでPrismaが作成したテーブルにレコードを追加する
 
-Prisma が作成したテーブルに、DBeaver を用いてレコードを追加しましょう。
+Prismaが作成したテーブルに、DBeaverを用いてレコードを追加しましょう。
 
 <video src={createRecordInDatabaseVideo} controls />
 
-### Prisma でデータベースのデータを読み書きする
+### 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#[テーブル名].findUnique` メソッド](https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#findunique): レコードを一意に識別できる条件を使用してレコードを1つだけ取得
 
 :::tip[非同期処理]
 
-上記の 3 つのメソッドは、<Term>**非同期処理**</Term>を行います。JavaScript における非同期処理とは、ファイルの入出力やネットワーク通信など、JavaScript の外側の時間のかかる処理の完了を待つ間、ほかの処理を実行できるようにする仕組みです。非同期処理を行う関数を使用するためには、次の 2 つを行います。
+上記の3つのメソッドは、<Term>**非同期処理**</Term>を行います。JavaScriptにおける非同期処理とは、ファイルの入出力やネットワーク通信など、JavaScriptの外側の時間のかかる処理の完了を待つ間、ほかの処理を実行できるようにする仕組みです。非同期処理を行う関数を使用するためには、次の2つを行います。
 
 - 非同期処理を行う関数を呼び出す関数を定義する際、`async` キーワードをつけること
 - 非同期処理を行う関数の戻り値に対し、`await` 演算子を適用すること
 
-非同期処理に関する詳細は、[MDN の記事](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Asynchronous)を参照してください。
+非同期処理に関する詳細は、[MDNの記事](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Asynchronous)を参照してください。
 
 :::
 
@@ -193,7 +192,7 @@ const todos = await client.todo.findMany();
 debugger;
 ```
 
-![findMany の戻り値](./find-many-result.png)
+![findManyの戻り値](./find-many-result.png)
 
 続いて、[`PrismaClient#[テーブル名].create` メソッド](https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#create)を用いて、テーブルにレコードを作成してみましょう。
 
@@ -205,28 +204,28 @@ const todos = await client.todo.create({ data: { name: "買い物をする" } })
 debugger;
 ```
 
-![create の戻り値](./create-result.png)
+![createの戻り値](./create-result.png)
 
 ## 演習
 
-PostgreSQL にデータを保存する掲示板サービスを作ってみましょう。
+PostgreSQLにデータを保存する掲示板サービスを作ってみましょう。
 
 <video src={forumVideo} muted controls />
 
-### 手順 1
+### 手順1
 
-Supabase で新しいデータベースを作成しましょう。作成したデータベースに DBeaver から接続できることを確認しましょう。
+Supabaseで新しいデータベースを作成しましょう。作成したデータベースにDBeaverから接続できることを確認しましょう。
 
-### 手順 2
+### 手順2
 
-新しいプロジェクト用のディレクトリを作成し、`npx prisma init` コマンドを実行して、Prisma のセットアップをしましょう。`.env` ファイルを編集し、Prisma がデータベースに接続できるようにしましょう。
+新しいプロジェクト用のディレクトリを作成し、`npx prisma init` コマンドを実行して、Prismaのセットアップをしましょう。`.env` ファイルを編集し、Prismaがデータベースに接続できるようにしましょう。
 
-### 手順 3
+### 手順3
 
 作成された `.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 {
@@ -237,20 +236,20 @@ model Post {
 
 :::
 
-### 手順 4
+### 手順4
 
-DBeaver を用いて掲示板の投稿のサンプルデータをデータベースに登録しましょう。
+DBeaverを用いて掲示板の投稿のサンプルデータをデータベースに登録しましょう。
 
-### 手順 5
+### 手順5
 
-Node.js のデバッガを用いて、データベースのデータが Prisma で取得できることを確認しましょう。
+Node.jsのデバッガを用いて、データベースのデータがPrismaで取得できることを確認しましょう。
 
-### 手順 6
+### 手順6
 
-Express をインストールし、`/` への GET リクエストに対して、データベースのデータを HTML に整形したレスポンスを返せるようにしましょう。
+Expressをインストールし、`/` へのGETリクエストに対して、データベースのデータをHTMLに整形したレスポンスを返せるようにしましょう。
 
 :::info[ヒント]
-Prisma の `findMany` メソッドを用いて、テーブル内にある全てのレコードを取得できます。
+Prismaの `findMany` メソッドを用いて、テーブル内にある全てのレコードを取得できます。
 
 ```javascript
 const posts = await client.post.findMany();
@@ -260,12 +259,12 @@ const posts = await client.post.findMany();
 // ]
 ```
 
-このメソッドの戻り値は、各カラムの値をプロパティとして持つオブジェクトの配列です。`Array#map` メソッドや `Array#join` メソッドを用い、適切な HTML に変換してレスポンスを生成しましょう。
+このメソッドの戻り値は、各カラムの値をプロパティとして持つオブジェクトの配列です。`Array#map` メソッドや `Array#join` メソッドを用い、適切なHTMLに変換してレスポンスを生成しましょう。
 :::
 
-<Answer title="手順 6 まで">
+<Answer title="手順6まで">
 
-```javascript title="main.mjs の抜粋"
+```javascript title="main.mjsの抜粋"
 const template = readFileSync("./index.html", "utf-8");
 app.get("/", async (request, response) => {
   const posts = await client.post.findMany();
@@ -294,15 +293,15 @@ app.get("/", async (request, response) => {
 
 </Answer>
 
-### 手順 7
+### 手順7
 
-掲示板を投稿するための HTML のフォームを表示できるようにしましょう。入力されたデータは `/send` への POST リクエストとして送信されるようにしてみましょう。
+掲示板を投稿するためのHTMLのフォームを表示できるようにしましょう。入力されたデータは `/send` へのPOSTリクエストとして送信されるようにしてみましょう。
 
 :::info[ヒント]
-手順 6 で作成したテンプレートとなる HTML ファイルを編集し、フォームを追加しましょう。
+手順6で作成したテンプレートとなるHTMLファイルを編集し、フォームを追加しましょう。
 :::
 
-<Answer title="手順 7 まで">
+<Answer title="手順7まで">
 
 ```html title="index.html"
 <!doctype html>
@@ -325,33 +324,33 @@ app.get("/", async (request, response) => {
 
 </Answer>
 
-### 手順 8
+### 手順8
 
-前の手順で作成した HTML のフォームの送信先 (`/send` への POST リクエスト) を作成しましょう。送られてきたデータが正しいか、Node.js のデバッガを用いて確認してみましょう。
+前の手順で作成したHTMLのフォームの送信先 (`/send` へのPOSTリクエスト) を作成しましょう。送られてきたデータが正しいか、Node.jsのデバッガを用いて確認してみましょう。
 
-<Answer title="手順 8 まで">
+<Answer title="手順8まで">
 
-```javascript title="main.mjs の抜粋"
+```javascript title="main.mjsの抜粋"
 app.use(express.urlencoded({ extended: true }));
 app.post("/send", async (request, response) => {
-  debugger; // ここで request オブジェクトの中身を確認
+  debugger; // ここでrequestオブジェクトの中身を確認
 });
 ```
 
 </Answer>
 
-### 手順 9
+### 手順9
 
 送られてきたデータをデータベースに保存できるようにしましょう。データベースに投稿が保存された後、ブラウザは自動的に `/` に戻るようにしてみましょう。
 
 :::info[ヒント]
-[GET リクエストと POST リクエストの章](/docs/web-servers/get-post/)で扱った `express.Response#redirect` メソッドが使えます。
+[GETリクエストとPOSTリクエストの章](/docs/web-servers/get-post/)で扱った `express.Response#redirect` メソッドが使えます。
 
 :::
 
-<Answer title="手順 9 まで">
+<Answer title="手順9まで">
 
-```javascript title="main.mjs の抜粋"
+```javascript title="main.mjsの抜粋"
 app.use(express.urlencoded({ extended: true }));
 app.post("/send", async (request, response) => {
   await client.post.create({ data: { message: request.body.message } });
@@ -361,8 +360,8 @@ app.post("/send", async (request, response) => {
 
 </Answer>
 
-### 手順 10
+### 手順10
 
-DBeaver を用いて、掲示板への投稿がデータベースに保存されていることを確認しましょう。また、Node.js のサーバーを再起動しても、データが残っていることを確認しましょう。
+DBeaverを用いて、掲示板への投稿がデータベースに保存されていることを確認しましょう。また、Node.jsのサーバーを再起動しても、データが残っていることを確認しましょう。
 
 <ViewSource url={import.meta.url} path="_samples/forum" noCodeSandbox />
diff --git a/docs/3-web-servers/09-cookie/index.mdx b/docs/3-web-servers/09-cookie/index.mdx
index db911084f..9c5a2c5f5 100644
--- a/docs/3-web-servers/09-cookie/index.mdx
+++ b/docs/3-web-servers/09-cookie/index.mdx
@@ -1,40 +1,40 @@
 ---
-title: Cookie と認証（発展）
+title: Cookieと認証（発展）
 ---
 
 import cookieCounterVideo from "./cookie-counter.mp4";
 
-## HTTP ヘッダ
+## HTTPヘッダ
 
-HTTP におけるリクエストとレスポンスには、**ヘッダ**と呼ばれる Key-Value 型のデータ構造が毎回付加されています。Chrome の開発者ツールでの `Network` タブで確認できるので、確認してみましょう。
+HTTPにおけるリクエストとレスポンスには、**ヘッダ**と呼ばれるKey-Value型のデータ構造が毎回付加されています。Chromeの開発者ツールでの `Network` タブで確認できるので、確認してみましょう。
 
-![HTTP ヘッダ](./http-headers.png)
+![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)
+![Yahoo! JapanのCookie](./yahoo-cookies.png)
 
-このレスポンスヘッダを受けて、ブラウザは次のような Cookie を保存します。
+このレスポンスヘッダを受けて、ブラウザは次のようなCookieを保存します。
 
-![保存された Cookie](./saved-cookies.png)
+![保存されたCookie](./saved-cookies.png)
 
-ブラウザを更新することで、設定された Cookie が確かにリクエストヘッダの中に含まれて送信されていることがわかります。
+ブラウザを更新することで、設定されたCookieが確かにリクエストヘッダの中に含まれて送信されていることがわかります。
 
-![リクエストに付加された Cookie](./sent-cookies.png)
+![リクエストに付加されたCookie](./sent-cookies.png)
 
-## Express で 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
 ```
 
-を実行して、パッケージをインストールしましょう。Web サーバーのプログラムは次のようになります。
+を実行して、パッケージをインストールしましょう。Webサーバーのプログラムは次のようになります。
 
 ```javascript title="main.mjs"
 import express from "express";
@@ -44,7 +44,7 @@ const app = express();
 app.use(cookieParser());
 
 app.get("/", (request, response) => {
-  // Cookie の値は文字列なので数値に変換が必要
+  // Cookieの値は文字列なので数値に変換が必要
   const count = parseInt(request.cookies.count) || 0;
   const newCount = count + 1;
   // 変更後の値をレスポンスヘッダに乗せる
@@ -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 />
 
@@ -65,14 +65,14 @@ app.listen(3000);
 
 ### 演習
 
-- Chrome の開発者ツールを用いて、リクエストヘッダとレスポンスヘッダの内容を確認してみましょう。
+- Chromeの開発者ツールを用いて、リクエストヘッダとレスポンスヘッダの内容を確認してみましょう。
 - シークレットモードでページを開くと値はどうなるでしょうか。
 
-## Cookie を用いた認証
+## Cookieを用いた認証
 
-ユーザー名とパスワードを用いて認証するタイプのアプリケーションを考えてみましょう。ユーザー名とパスワードを、そのまま Cookie に入れてしまうと、データが悪意のある第三者に奪われてしまうリスクが高まります。
+ユーザー名とパスワードを用いて認証するタイプのアプリケーションを考えてみましょう。ユーザー名とパスワードを、そのままCookieに入れてしまうと、データが悪意のある第三者に奪われてしまうリスクが高まります。
 
-このため、ログインが成功したタイミングで、クライアントに対してランダムな ID を発行し、Cookie に保存させておくことが一般的です（**セッション ID** と呼ばれる）。次回以降のアクセスでは、このセッション ID を用いて認証を行います。このフローを図にすると、次のようになります。
+このため、ログインが成功したタイミングで、クライアントに対してランダムなIDを発行し、Cookieに保存させておくことが一般的です（**セッションID**と呼ばれる）。次回以降のアクセスでは、このセッションIDを用いて認証を行います。このフローを図にすると、次のようになります。
 
 ![セッション](./session.png)
 
@@ -91,7 +91,7 @@ model User {
 
 model Session {
   id     String @id // 一意でランダムなID
-  userId Int // User の ID
+  userId Int // UserのID
 }
 ```
 
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 ca9d2aca3..2601a32b4 100644
--- a/docs/3-web-servers/10-git-github-init/index.mdx
+++ b/docs/3-web-servers/10-git-github-init/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: Git と GitHub のセットアップ
+title: GitとGitHubのセットアップ
 ---
 
 import registerGitHubVideo from "./register-github.mp4";
@@ -11,15 +11,15 @@ import testSshConnectionVideo from "./test-ssh-connection.mp4";
 
 **バージョン管理システム**を用いると、プログラムへの変更の履歴を追跡できます。これにより、大規模なプログラムや、複数人で開発されたプログラムを効率的に操作できます。
 
-**Git** は、現在最もよく使われるバージョン管理システムです。軽量ながらも多機能であり、周辺のエコシステムも非常に充実しています。
+**Git**は、現在最もよく使われるバージョン管理システムです。軽量ながらも多機能であり、周辺のエコシステムも非常に充実しています。
 
-## Git のインストール
+## Gitのインストール
 
-macOS と WSL のいずれも、Git は標準搭載なので追加でインストールする必要はありません。
+macOSとWSLのいずれも、Gitは標準搭載なので追加でインストールする必要はありません。
 
-## Git の拡張機能のインストール
+## Gitの拡張機能のインストール
 
-VS Code 標準の機能だけでも多くのことができますが、より便利に利用するために拡張機能を併用していきます。次の拡張機能をインストールしておきましょう。
+VS Code標準の機能だけでも多くのことができますが、より便利に利用するために拡張機能を併用していきます。次の拡張機能をインストールしておきましょう。
 
 ### [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
 
@@ -35,35 +35,35 @@ VS Code 標準の機能だけでも多くのことができますが、より便
 
 ![GitGragh拡張機能の様子](./gitGraph-view.png)
 
-## GitHub への登録
+## GitHubへの登録
 
-[GitHub](https://github.com/) は、Git で管理されたソースコードを共有することができるサービスです。Git を使ううえで GitHub への登録は必須ではありませんが、Git を用いた共同開発では通常 GitHub が使用されます。
+[GitHub](https://github.com/)は、Gitで管理されたソースコードを共有することができるサービスです。Gitを使ううえでGitHubへの登録は必須ではありませんが、Gitを用いた共同開発では通常GitHubが使用されます。
 
-[GitHub に登録](https://github.com/signup)しましょう。
+[GitHubに登録](https://github.com/signup)しましょう。
 
 :::warning[登録する上での注意]
 
-GitHub のアカウント名は、開発者コミュニティにおける自分のアイデンティティになります。他の開発者とやり取りする際に表示される名前になるので、慎重に決めてください。
+GitHubのアカウント名は、開発者コミュニティにおける自分のアイデンティティになります。他の開発者とやり取りする際に表示される名前になるので、慎重に決めてください。
 
 :::
 
 <video src={registerGitHubVideo} controls muted />
 
-## Git と GitHub の初期設定
+## GitとGitHubの初期設定
 
 ### ユーザー情報の登録
 
-Git では、ファイルの変更だけでなく、その変更を行ったのが誰なのかも記録します。Git に対して名前とメールアドレスを登録しましょう。
+Gitでは、ファイルの変更だけでなく、その変更を行ったのが誰なのかも記録します。Gitに対して名前とメールアドレスを登録しましょう。
 
-- 名前: 必ず GitHub のアカウント名と一致させるようにしてください。
+- 名前: 必ずGitHubのアカウント名と一致させるようにしてください。
 
-- メールアドレス: GitHub の登録の際に設定したメールアドレスが推奨されますが、メールアドレスを公開したくない場合は、次のようにダミーのメールアドレスを取得することもできます。
+- メールアドレス: 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)
 
-名前とメールアドレスを登録するために、次の 2 つのコマンドを実行しましょう。
+名前とメールアドレスを登録するために、次の2つのコマンドを実行しましょう。
 
 ```shell
 git config --global user.name 名前
@@ -75,7 +75,7 @@ git config --global user.email メールアドレス
 
 :::danger[プライバシーの注意]
 
-自分が書いたプログラムを GitHub を用いて公開する場合、ここで設定した名前とメールアドレスが公開されます。メールアドレスを公開したくない場合は、上記で取得したダミーのメールアドレスを設定してください。
+自分が書いたプログラムをGitHubを用いて公開する場合、ここで設定した名前とメールアドレスが公開されます。メールアドレスを公開したくない場合は、上記で取得したダミーのメールアドレスを設定してください。
 
 :::
 
@@ -83,32 +83,32 @@ 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
 ```
 
-### 公開鍵・秘密鍵ペアの作成と GitHub への登録
+### 公開鍵・秘密鍵ペアの作成とGitHubへの登録
 
-GitHub にブラウザからログインする際にはメールアドレスとパスワードを用いますが、Git のコマンドを用いて GitHub を使用する場合には、公開鍵・秘密鍵のペアを使用します。
+GitHubにブラウザからログインする際にはメールアドレスとパスワードを用いますが、Gitのコマンドを用いてGitHubを使用する場合には、公開鍵・秘密鍵のペアを使用します。
 
-:::tip[公開鍵暗号と GitHub]
+:::tip[公開鍵暗号とGitHub]
 
-公開鍵暗号では、「公開鍵」「秘密鍵」の 2 つの鍵が登場します。この 2 つの鍵は、「公開鍵で暗号化されたデータは秘密鍵を持っていないと復号できない」という特徴を持っています。
+公開鍵暗号では、「公開鍵」「秘密鍵」の2つの鍵が登場します。この2つの鍵は、「公開鍵で暗号化されたデータは秘密鍵を持っていないと復号できない」という特徴を持っています。
 
-自分の PC で生成した公開鍵と秘密鍵のペアのうち、公開鍵のみをブラウザから事前に GitHub に登録しておくことで、自分の PC に保存されている秘密鍵を用いて認証できるようになります。
+自分のPCで生成した公開鍵と秘密鍵のペアのうち、公開鍵のみをブラウザから事前にGitHubに登録しておくことで、自分のPCに保存されている秘密鍵を用いて認証できるようになります。
 
 :::
 
-GitHub に公開鍵を登録しましょう。
+GitHubに公開鍵を登録しましょう。
 
 <video src={addSshKeyVideo} controls muted />
 
 詳細な手順は、次の通りです。
 
 公開鍵と秘密鍵のペアを生成するには、`ssh-keygen` コマンドを使用します。次のコマンドを実行することで、`Ed25519` というアルゴリズムの実装を用いて鍵を生成できます。
-途中でターミナルの表示画面が止まりますが、`user@host:~$` が再度表示されるまで Enter キーで進みます。
+途中でターミナルの表示画面が止まりますが、`user@host:~$` が再度表示されるまでEnterキーで進みます。
 
 ```shell
 $ cd ~
@@ -126,13 +126,13 @@ ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIEqE0cyVkFSFD/BlAwvJ9QejXwgyFppn5JDQc8iGW/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
@@ -140,7 +140,7 @@ ssh-ed25519 AAAAC3...GW/Gp user@computer
 
 :::
 
-これを GitHub の [SSH 鍵の設定](https://github.com/settings/keys)から登録します。
+これをGitHubの[SSH鍵の設定](https://github.com/settings/keys)から登録します。
 
 登録ページへの移動方法は、`Settings` > `SSH and GPG keys` > `New SSH key`と順に移動すればたどり着けます。
 
@@ -150,12 +150,12 @@ ssh-ed25519 AAAAC3...GW/Gp user@computer
 
 ## 確認
 
-ここまでで Git と GitHub のセットアップが完了しました。
+ここまででGitとGitHubのセットアップが完了しました。
 この章で行ってきたセットアップが正しくできているのかは次のようにして確認することができます。
 
-### Git の初期設定の確認
+### Gitの初期設定の確認
 
-次のコマンドを実行することで Git の設定を確認することができます。
+次のコマンドを実行することでGitの設定を確認することができます。
 
 ```shell
 git config --global --list
@@ -170,9 +170,9 @@ user.email=メールアドレス
 init.defaultBranch=main
 ```
 
-### SSH 接続のテスト
+### SSH接続のテスト
 
-次のコマンドを実行することで SSH 接続が正常につながっているかをテストすることができます。
+次のコマンドを実行することでSSH接続が正常につながっているかをテストすることができます。
 
 ```shell
 ssh -T git@github.com
@@ -189,8 +189,8 @@ This key is not known by any other names
 Are you sure you want to continue connecting (yes/no/[fingerprint])?
 ```
 
-これは、接続先となっている GitHub が、なりすましではなく本物の GitHub であると信頼してもよいかを尋ねるメッセージです。
-家庭用のインターネット回線、UTokyo Wi-Fi 等、十分に信頼できるネットワークに接続している場合は問題ありませんので、`yes` と入力して続行させてください。
+これは、接続先となっているGitHubが、なりすましではなく本物のGitHubであると信頼してもよいかを尋ねるメッセージです。
+家庭用のインターネット回線、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 299e489c0..32aca74ba 100644
--- a/docs/3-web-servers/11-git/index.mdx
+++ b/docs/3-web-servers/11-git/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: Git を用いたバージョン管理
+title: Gitを用いたバージョン管理
 ---
 
 import gitInitVideo from "./git-init.mp4";
@@ -25,13 +25,13 @@ import step7Video from "./step7.mp4";
 
 ![バージョン管理の例](./versioning-example.png)
 
-## Git によるバージョン管理の仕組み
+## Gitによるバージョン管理の仕組み
 
 バージョン管理システムを使うことでこのような問題を解決することができます。
-Git は、代表的なバージョン管理システムのひとつです。
+Gitは、代表的なバージョン管理システムのひとつです。
 
-Git では、**コミット**を作成することで、その時点での状態を記録することができます。
-ここでいう状態とは、Git で管理されているすべてのディレクトリやファイルの名前、その内容などです。
+Gitでは、**コミット**を作成することで、その時点での状態を記録することができます。
+ここでいう状態とは、Gitで管理されているすべてのディレクトリやファイルの名前、その内容などです。
 次の図のようにプロジェクトのある一定のまとまりごとにその時点での状態をコミットとして記録します。
 こうすることで、どのファイルが最新であるのかがわかりやすくなり、また、過去の状態に戻すことも簡単になります。
 
@@ -44,36 +44,36 @@ gitGraph
   commit id: "採用情報ページを更新"
 ```
 
-## Git を使ったバージョン管理をする
+## Gitを使ったバージョン管理をする
 
-では、実際に Git を使ってバージョン管理をしてみましょう。
+では、実際にGitを使ってバージョン管理をしてみましょう。
 
-Git を使ったバージョン管理は大きく次のような流れで行います。
+Gitを使ったバージョン管理は大きく次のような流れで行います。
 
-1. Git リポジトリを作成する。
+1. Gitリポジトリを作成する。
 1. ファイルに変更を加える。
 1. 必要な変更のみをステージする。
 1. コミットを作成する。
 
-2 回目からは、2. 以降の手順を繰り返すことで、新たなコミットを作成していきます。
+2回目からは、2.以降の手順を繰り返すことで、新たなコミットを作成していきます。
 
 では、それぞれについて見ていきましょう。
 
-### Git リポジトリを作成する
+### Gitリポジトリを作成する
 
-Git では、**リポジトリ**と呼ばれる単位でソースコードを管理します。
-リポジトリはひとつのディレクトリに相当し、そのディレクトリ以下の全てのファイルが Git による追跡対象となります。
+Gitでは、**リポジトリ**と呼ばれる単位でソースコードを管理します。
+リポジトリはひとつのディレクトリに相当し、そのディレクトリ以下の全てのファイルがGitによる追跡対象となります。
 
-まずは Git で管理するためのディレクトリを作成し、VS Code で開きます。
+まずはGitで管理するためのディレクトリを作成し、VS Codeで開きます。
 左側のアクティビティバーの `Source Control` パネル内の `Initialize Repository` ボタンを押してください。
-これで、カレントディレクトリを Git の管理下に置く (カレントディレクトリを Git リポジトリにする) ことができます。
+これで、カレントディレクトリをGitの管理下に置く (カレントディレクトリをGitリポジトリにする) ことができます。
 
 <video src={gitInitVideo} controls muted />
 
 :::info[`git init` コマンド]
 
-Git の操作は、コマンドラインからも行うことができます。
-次のコマンドを実行することで、カレントディレクトリを Git の管理下に置くこともできます。
+Gitの操作は、コマンドラインからも行うことができます。
+次のコマンドを実行することで、カレントディレクトリをGitの管理下に置くこともできます。
 
 ```shell
 git init
@@ -85,11 +85,11 @@ git init
 
 :::tip[`.git` ディレクトリ]
 
-Git の管理下に置かれたディレクトリには `.git` という名前のディレクトリが生成されます。
-このディレクトリには過去のコミットの履歴など、Git が内部的に使用するファイルが格納されます。
+Gitの管理下に置かれたディレクトリには `.git` という名前のディレクトリが生成されます。
+このディレクトリには過去のコミットの履歴など、Gitが内部的に使用するファイルが格納されます。
 誤ったディレクトリで `git init` コマンドを実行してしまった場合、このディレクトリを削除しましょう。
 なお、ピリオドから始まるディレクトリやファイルは `ls` コマンドに `-a` というオプションをつけないと表示できないので注意が必要です。
-また、VS Code 上でも `.git` ディレクトリはデフォルトでは表示されません。
+また、VS Code上でも `.git` ディレクトリはデフォルトでは表示されません。
 
 ```shell
 $ ls
@@ -104,7 +104,7 @@ branches  config  description  HEAD  hooks  info  objects  refs
 ### 変更をステージする
 
 コミットを作るためには、まず変更を**ステージ**する必要があります。
-ステージすることで、Git に対して該当ファイルをコミットする意思があることを伝えることができます。
+ステージすることで、Gitに対して該当ファイルをコミットする意思があることを伝えることができます。
 `Source Control` パネル内に表示されているファイルを押すとそのファイルにどのような変更が加えられたかを確認できます。
 ステージするには、コミットしたいファイルの横の `+` ボタンを押します。
 ファイルが `Changes` から `Staged Changes` に移ったら成功です。
@@ -150,7 +150,7 @@ git commit -m "コミットメッセージ"
 
 :::tip[`.gitignore`]
 
-`.gitignore` ファイルで指定されたファイルは Git の管理下に置かれません。
+`.gitignore` ファイルで指定されたファイルはGitの管理下に置かれません。
 `package.json` と `package-lock.json` の情報から全く同じものをダウンロードできてバージョン管理するメリットのない `node_modules` や、機密情報や環境ごとに異なる情報を含む `.env` といったファイルが指定されます。
 
 :::
@@ -161,7 +161,7 @@ git commit -m "コミットメッセージ"
 
 <video src={secondCommitVideo} muted controls />
 
-これにより、2 つ目のコミットが作成されました。
+これにより、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)` を選択します。
 それぞれのコミットでどのような変更がなされたのかを確認することができます。
 
@@ -179,7 +179,7 @@ git commit -m "コミットメッセージ"
 
 `git diff` コマンドを使うことで、コマンドラインから、コミット同士の差分を確認することもできます。
 
-コミットには一意の ID が割り当てられており、この ID を `git diff` コマンドに与えることで、コミット同士を比較することができます。
+コミットには一意のIDが割り当てられており、このIDを `git diff` コマンドに与えることで、コミット同士を比較することができます。
 
 下の動画の最後で実行されている `git diff @ @~` は、最新のコミットとそのひとつ前のコミットを比較するためのコマンドです。
 `@` が最新のコミットを、`~` が「そのひとつ前」を表します。
@@ -190,15 +190,15 @@ git commit -m "コミットメッセージ"
 
 ## 演習
 
-大学の学部一覧ページを作成することで、Git の基本的な操作を学びましょう。
+大学の学部一覧ページを作成することで、Gitの基本的な操作を学びましょう。
 まずは、法学部、医学部、工学部、文学部、理学部、農学部、経済学部を含めた学部一覧を作成しましょう。
 次に、教養学部、教育学部、薬学部を一覧に追加しましょう。
 
 ![学部一覧](./faculties.png)
 
-### 手順 1
+### 手順1
 
-Git リポジトリを作成しましょう。
+Gitリポジトリを作成しましょう。
 
 <Answer>
 
@@ -206,7 +206,7 @@ Git リポジトリを作成しましょう。
 
 </Answer>
 
-### 手順 2
+### 手順2
 
 `index.html` を作成し、学部一覧ページを作成しましょう。
 
@@ -236,7 +236,7 @@ Git リポジトリを作成しましょう。
 
 </Answer>
 
-### 手順 3
+### 手順3
 
 差分を確認して、`index.html` をステージしましょう。
 
@@ -246,7 +246,7 @@ Git リポジトリを作成しましょう。
 
 </Answer>
 
-### 手順 4
+### 手順4
 
 コミットを作成しましょう。
 
@@ -256,7 +256,7 @@ Git リポジトリを作成しましょう。
 
 </Answer>
 
-### 手順 5
+### 手順5
 
 `index.html` を編集し、教養学部、教育学部、薬学部を追加しましょう。
 
@@ -289,7 +289,7 @@ Git リポジトリを作成しましょう。
 
 </Answer>
 
-### 手順 6
+### 手順6
 
 差分を確認して、`index.html` をステージし、コミットを作成しましょう。
 
@@ -299,7 +299,7 @@ Git リポジトリを作成しましょう。
 
 </Answer>
 
-### 手順 7
+### 手順7
 
 コミットの履歴を確認して、変更が正しく記録されていることを確認しましょう。
 
diff --git a/docs/3-web-servers/12-github/index.mdx b/docs/3-web-servers/12-github/index.mdx
index 6b912710d..29fdebdde 100644
--- a/docs/3-web-servers/12-github/index.mdx
+++ b/docs/3-web-servers/12-github/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: Git と GitHub を用いた共同開発
+title: GitとGitHubを用いた共同開発
 ---
 
 import addRemoteRepositoryVideo from "./add-remote-repository.mp4";
@@ -20,17 +20,17 @@ import step6Video from "./step6.mp4";
 
 ## 共同開発で生じる問題
 
-2 人で企画書を作成することを考えてみてください。
-1 人が企画書を書いた後、それを相手にメールで送り、相手はそれをさらに修正してまたメールで送り返すということを繰り返します。
-このようにすると、1 人が編集している間はもう一人は企画書を編集できなくなってしまいますし、メールで送り合うのは手間がかかりますし、やり取りが複雑になってしまいます。
+2人で企画書を作成することを考えてみてください。
+1人が企画書を書いた後、それを相手にメールで送り、相手はそれをさらに修正してまたメールで送り返すということを繰り返します。
+このようにすると、1人が編集している間はもう一人は企画書を編集できなくなってしまいますし、メールで送り合うのは手間がかかりますし、やり取りが複雑になってしまいます。
 
 ![バージョン管理の例](./versioning-example.png)
 
-## Git と GitHub を用いた共同開発の仕組み
+## GitとGitHubを用いた共同開発の仕組み
 
-Git と GitHub を用いることでこの問題を解決することができます。
-まず、GitHub 上にリポジトリを作成し、他のメンバーがそのリポジトリにアクセスできるようにします。
-Git には**ブランチ**という仕組みが備わっています。
+GitとGitHubを用いることでこの問題を解決することができます。
+まず、GitHub上にリポジトリを作成し、他のメンバーがそのリポジトリにアクセスできるようにします。
+Gitには**ブランチ**という仕組みが備わっています。
 メンバーは変更を加えたい時には、メインのブランチからその変更を加えるための専用の作業場所であるブランチを作成します。
 そして、そこで変更を加えて、コミットを作成します。
 
@@ -44,7 +44,7 @@ gitGraph
 ```
 
 そして、作業が終わったら、メインのブランチに自分のブランチの変更を取り込みます。
-ここで、GitHub には**プルリクエスト**という機能があります。
+ここで、GitHubには**プルリクエスト**という機能があります。
 プルリクエストを作ることで、自分がどのような変更を加えようとしているのかを他の人に確認してもらうことができます。
 そして、その変更が良さそうだったら、メインのブランチに取り込みます。
 
@@ -61,13 +61,13 @@ gitGraph
 
 このように、プロジェクトの本体に影響を与えずに同時並行で開発を進めることができます。
 
-## Git と GitHub を用いて共同開発をする
+## GitとGitHubを用いて共同開発をする
 
-では、実際に Git と GitHub を用いて共同開発をしてみましょう。
+では、実際にGitとGitHubを用いて共同開発をしてみましょう。
 
-Git と GitHub を用いた共同開発は、大きく次のような流れで行います。
+GitとGitHubを用いた共同開発は、大きく次のような流れで行います。
 
-1. GitHub 上のリポジトリにソースコードを保存する。
+1. GitHub上のリポジトリにソースコードを保存する。
 1. 他のメンバーはそのリポジトリをクローンする。
 1. 変更を加えるために、ブランチを作成する。
 1. 変更を加えて、コミットを作成する。
@@ -75,14 +75,14 @@ Git と GitHub を用いた共同開発は、大きく次のような流れで
 1. プルリクエストを作成する。
 1. プルリクエストを確認してもらい、メインのブランチにマージする。
 
-2 回目以降は、メインのブランチに他のメンバーが変更を加えている可能性があるので、まずはメインのブランチに戻って、プルをすることでリモートリポジトリの変更を取り込みます。
-その後は、3. 以降の手順を繰り返して新たなプルリクエストを作成します。
+2回目以降は、メインのブランチに他のメンバーが変更を加えている可能性があるので、まずはメインのブランチに戻って、プルをすることでリモートリポジトリの変更を取り込みます。
+その後は、3.以降の手順を繰り返して新たなプルリクエストを作成します。
 
 では、それぞれについて見ていきましょう。
 
-### GitHub にソースコードを保存する
+### GitHubにソースコードを保存する
 
-自分のコンピューター上に作成したリポジトリと同期させるため、GitHub 上にもリポジトリを作成します。GitHub 上部のメニューから `New repository` を選択してください。
+自分のコンピューター上に作成したリポジトリと同期させるため、GitHub上にもリポジトリを作成します。GitHub上部のメニューから `New repository` を選択してください。
 
 ![新しいリポジトリを作成](new-repository.png)
 
@@ -91,10 +91,10 @@ Git と GitHub を用いた共同開発は、大きく次のような流れで
 
 ![リポジトリの設定](./repository-settings.png)
 
-続いて、GitHub 上に作成したリポジトリと自分の PC 上にあるリポジトリを紐づけます。
-GitHub 上に表示されている **SSH** の URL をコピーします。(**SSH** にするのを忘れないでください。)
-これが GitHub 上に作成したリポジトリを表す URL になります。
-GitHub 上に作成したリポジトリを**リモートリポジトリ**と呼びます。
+続いて、GitHub上に作成したリポジトリと自分のPC上にあるリポジトリを紐づけます。
+GitHub上に表示されている**SSH**のURLをコピーします。(**SSH**にするのを忘れないでください。)
+これがGitHub上に作成したリポジトリを表すURLになります。
+GitHub上に作成したリポジトリを**リモートリポジトリ**と呼びます。
 次のコマンドを実行して、このリモートリポジトリを `origin` (慣習的にリモートリポジトリが一つだけの場合はこの名前が用いられます) という名前で登録します。
 
 ```shell
@@ -109,7 +109,7 @@ git remote add origin git@github.com:アカウント名/リポジトリ名.git
 
 <video src={pushChangesVideo} muted controls />
 
-GitHub を開いているブラウザを更新して、プログラムが反映されていることを確認したら完了です。
+GitHubを開いているブラウザを更新して、プログラムが反映されていることを確認したら完了です。
 
 :::info[`git push` コマンド]
 
@@ -127,13 +127,13 @@ git push origin main
 
 ### リポジトリをクローンする
 
-自分が作成したリポジトリであれば、そのまま変更を加えることができますが、他の人が作成したリポジトリに変更を加える場合は、まずは自分の PC 上にそのリポジトリをクローンする必要があります。
-**クローン**するとは、リモートリポジトリを自分の PC 上に複製することです。
+自分が作成したリポジトリであれば、そのまま変更を加えることができますが、他の人が作成したリポジトリに変更を加える場合は、まずは自分のPC上にそのリポジトリをクローンする必要があります。
+**クローン**するとは、リモートリポジトリを自分のPC上に複製することです。
 
 他の人が作成したリポジトリに変更を加える場合は、権限を与えてもらってからそのリポジトリをクローンしましょう。
 
-クローンするリモートリポジトリの **SSH** の URL をコピーして、次のコマンドを実行してください。
-その後、クローンしたリポジトリを VS Code で開いてください。
+クローンするリモートリポジトリの**SSH**のURLをコピーして、次のコマンドを実行してください。
+その後、クローンしたリポジトリをVS Codeで開いてください。
 
 ```shell
 git clone git@github.com:アカウント名/リポジトリ名.git
@@ -201,7 +201,7 @@ $ git branch
 
 ### リモートリポジトリにプッシュする
 
-変更を加えたのは、自分の PC 上のリポジトリです。
+変更を加えたのは、自分のPC上のリポジトリです。
 そのため、リモートリポジトリにその変更を反映させる必要があります。
 新しく作ったブランチをリモートリポジトリにプッシュします。
 
@@ -220,9 +220,9 @@ git push origin ブランチ名
 ### プルリクエストを作成する
 
 次に変更をメインのブランチに反映します。
-GitHub のプルリクエストという機能を使うことで、簡単に変更の内容を他の人に確認してもらい、メインのブランチに反映することができます。
+GitHubのプルリクエストという機能を使うことで、簡単に変更の内容を他の人に確認してもらい、メインのブランチに反映することができます。
 
-GitHub を開き `Pull requests` を開いてください。
+GitHubを開き `Pull requests` を開いてください。
 
 ![プルリクエストを作成](./pull-requests-tab.png)
 
@@ -268,7 +268,7 @@ gitGraph
 
 ### 新たなプルリクエストを作成する
 
-これ以降プルリクエストを作る場合は、リモートリポジトリのメインのブランチに他の人が変更を加えている可能性があるため、`main` ブランチに戻って、リモートリポジトリから新たな変更を**プル**しましょう。プルするとは、自分の PC 上にリモートリポジトリの変更を取り込むことです。
+これ以降プルリクエストを作る場合は、リモートリポジトリのメインのブランチに他の人が変更を加えている可能性があるため、`main` ブランチに戻って、リモートリポジトリから新たな変更を**プル**しましょう。プルするとは、自分のPC上にリモートリポジトリの変更を取り込むことです。
 その後は、今までと同様に新しいブランチを作成して進めていきます。
 
 リモートリポジトリの変更をプルするには、`Pull, Push` > `Pull from...` > `origin/main` を押します。
@@ -289,14 +289,14 @@ git pull origin main
 
 ## 演習
 
-Git を用いたバージョン管理の練習問題で、学部一覧ページを作成しました。
-このリポジトリを GitHub に保存して、各学部のウェブサイトの URL を追加するプルリクエストを作成してください。
+Gitを用いたバージョン管理の練習問題で、学部一覧ページを作成しました。
+このリポジトリをGitHubに保存して、各学部のウェブサイトのURLを追加するプルリクエストを作成してください。
 
 ![学部一覧ページ](./faculties-with-link.png)
 
-### 手順 1
+### 手順1
 
-GitHub のリポジトリにソースコードを保存しましょう。
+GitHubのリポジトリにソースコードを保存しましょう。
 
 <Answer>
 
@@ -304,7 +304,7 @@ GitHub のリポジトリにソースコードを保存しましょう。
 
 </Answer>
 
-### 手順 2
+### 手順2
 
 ブランチを作成しましょう。
 
@@ -314,9 +314,9 @@ GitHub のリポジトリにソースコードを保存しましょう。
 
 </Answer>
 
-### 手順 3
+### 手順3
 
-学部一覧ページに各学部のウェブサイトの URL を追加して、ステージをしてコミットを作成しましょう。
+学部一覧ページに各学部のウェブサイトのURLを追加して、ステージをしてコミットを作成しましょう。
 
 <Answer>
 
@@ -349,7 +349,7 @@ GitHub のリポジトリにソースコードを保存しましょう。
 
 </Answer>
 
-### 手順 4
+### 手順4
 
 ブランチをリモートリポジトリにプッシュしましょう。
 
@@ -359,7 +359,7 @@ GitHub のリポジトリにソースコードを保存しましょう。
 
 </Answer>
 
-### 手順 5
+### 手順5
 
 プルリクエストを作成しましょう。
 
@@ -369,7 +369,7 @@ GitHub のリポジトリにソースコードを保存しましょう。
 
 </Answer>
 
-### 手順 6
+### 手順6
 
 差分を確認して、プルリクエストをマージしましょう。
 
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 77ed21a04..77e49d7cf 100644
--- a/docs/3-web-servers/13-deploy-on-render/index.mdx
+++ b/docs/3-web-servers/13-deploy-on-render/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: Render へのデプロイ
+title: Renderへのデプロイ
 ---
 
 import registerRenderVideo from "./register-render.mp4";
@@ -10,35 +10,35 @@ import dynamicSiteDeployVideo from "./dynamic-site-deploy.mp4";
 
 ## PaaS
 
-**PaaS** (Platform as a Service) は、プログラムをアップロードすることで、そのプログラムを動作させることができるサービスです。[Render](https://render.com/) は最近登場した簡単に操作できる PaaS です。
+**PaaS** (Platform as a Service) は、プログラムをアップロードすることで、そのプログラムを動作させることができるサービスです。[Render](https://render.com/)は最近登場した簡単に操作できるPaaSです。
 
-## Render への登録
+## Renderへの登録
 
-[Render](https://render.com/) に登録しましょう。
+[Render](https://render.com/)に登録しましょう。
 
 <video src={registerRenderVideo} controls muted />
 
-初回は、Render の GitHub へのアクセスを許可しないといけません。
+初回は、RenderのGitHubへのアクセスを許可しないといけません。
 
 <video src={connectGitHubVideo} controls muted />
 
 ## 静的サイトと動的サイト
 
-[Render](https://render.com/) に登録すると、最初に次のような画面が現れます。
+[Render](https://render.com/)に登録すると、最初に次のような画面が現れます。
 
-![Render のホーム画面](./render-home.png)
+![Renderのホーム画面](./render-home.png)
 
 この画面の `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 に保存しておいてください。
+RenderをGitHubのリポジトリと接続することで、ファイルを編集するごとに手動でサーバーにアップロードし直す必要なくGitHubでの更新に合わせて自動でWebサイトを更新することができます。 事前にアプリケーション全体を GitHubに保存しておいてください。
 
 静的サイトをデプロイするには、ホーム画面から `Static Sites` を選択しましょう。
 
@@ -65,17 +65,17 @@ Render を GitHub のリポジトリと接続することで、ファイルを
 
 プルリクエストをすると画面に変更の内容を反映したサイトへのリンクが表示されるようになるので、そこからプレビューページにアクセスできます！
 
-![PR Preview のリンク](./pr-preview.png)
+![PR Previewのリンク](./pr-preview.png)
 
 <video src={prPreviewVideo} controls muted />
 
 ## 動的サイトのデプロイ
 
-Render で動的サイトをデプロイするには、ホーム画面から `Web Services` を選択しましょう。
+Renderで動的サイトをデプロイするには、ホーム画面から `Web Services` を選択しましょう。
 
 静的サイトのときと同様にリポジトリを選択します。
 
-設定項目を入力します。ここでは Node.js の設定を行っています。
+設定項目を入力します。ここではNode.jsの設定を行っています。
 
 ![動的サイトの設定](./dynamic-site-config.png)
 
@@ -87,7 +87,7 @@ Render で動的サイトをデプロイするには、ホーム画面から `We
 
 :::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/3-web-servers/index.mdx b/docs/3-web-servers/index.mdx
index 9ca291586..8728e7736 100644
--- a/docs/3-web-servers/index.mdx
+++ b/docs/3-web-servers/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: Web サーバーが動作する仕組みを知ろう
+title: Webサーバーが動作する仕組みを知ろう
 ---
 
 import DocCardList from "@theme/DocCardList";
diff --git a/docs/4-advanced/01-fetch-api/index.mdx b/docs/4-advanced/01-fetch-api/index.mdx
index 7801069dd..b379f11a7 100644
--- a/docs/4-advanced/01-fetch-api/index.mdx
+++ b/docs/4-advanced/01-fetch-api/index.mdx
@@ -4,20 +4,20 @@ title: Fetch API
 
 import chatAppVideo from "./chat-app.mp4";
 
-## ブラウザで動く JavaScript から <Term>HTTP リクエスト</Term>を発行する
+## ブラウザで動くJavaScriptから<Term>HTTPリクエスト</Term>を発行する
 
 これまで、ブラウザが<Term>サーバー</Term>に対して<Term>リクエスト</Term>を送信するのは、リンクがクリックされたときや、フォームが送信されたときなど、ページの再読み込みが起こる場合のみでした。
 
-しかしながら、ブラウザ上で動く JavaScript から利用できる **Fetch <Term>API</Term>** を用いると、任意のタイミングで<Term>リクエスト</Term>が発行できるようになります。<Term>API</Term> は、アプリケーションプログラミングインターフェース(Application Programming Interface)の略で、あるソフトウェアの機能や管理するデータを、外部の他のソフトウェアで利用するための手順やデータ形式を定めた規約のことです。多くのソフトウェアが共通して利用する機能がまとめて提供されており、<Term>API</Term> に従い短いコードを記述するだけでその機能を利用することができます。
+しかしながら、ブラウザ上で動くJavaScriptから利用できる**Fetch <Term>API</Term>**を用いると、任意のタイミングで<Term>リクエスト</Term>が発行できるようになります。<Term>API</Term>は、アプリケーションプログラミングインターフェース(Application Programming Interface)の略で、あるソフトウェアの機能や管理するデータを、外部の他のソフトウェアで利用するための手順やデータ形式を定めた規約のことです。多くのソフトウェアが共通して利用する機能がまとめて提供されており、<Term>API</Term>に従い短いコードを記述するだけでその機能を利用することができます。
 
 {/* prettier-ignore */}
-<Term>サーバー</Term>と<Term>クライアント</Term>、どちらで動く JavaScript なのかに注意しながら、次のプログラムを実行してみましょう。
+<Term>サーバー</Term>と<Term>クライアント</Term>、どちらで動くJavaScriptなのかに注意しながら、次のプログラムを実行してみましょう。
 
-```html title="static/index.html の body 内"
+```html title="static/index.htmlのbody内"
 <button id="fetch-button">天気予報を見る</button>
 ```
 
-```javascript title="static/script.js (ブラウザ上で動く JavaScript)"
+```javascript title="static/script.js (ブラウザ上で動くJavaScript)"
 document.getElementById("fetch-button").onclick = async () => {
   const response = await fetch("/weather");
   const weather = await response.text();
@@ -29,13 +29,13 @@ document.getElementById("fetch-button").onclick = async () => {
 
 `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>です。
 
 なお、<Term>サーバー</Term>では次のプログラムが動作しているものとします。
 
-```javascript title="main.mjs (サーバーとして動く JavaScript)"
+```javascript title="main.mjs (サーバーとして動くJavaScript)"
 import express from "express";
 const app = express();
 
@@ -48,11 +48,11 @@ app.get("/weather", (request, response) => {
 app.listen(3000);
 ```
 
-## <Term>POST リクエスト</Term>を送信する
+## <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>JSON</Term>を使用する
 
-前項では、<Term>リクエストボディ</Term>に<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";
@@ -130,9 +130,9 @@ app.listen(3000);
 
 :::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 タイプとして、次のような値が定義されています。
+代表的なMIMEタイプとして、次のような値が定義されています。
 
 | MIME タイプ        | 種類       |
 | ------------------ | ---------- |
@@ -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) => {
diff --git a/docs/4-advanced/02-bundler/index.mdx b/docs/4-advanced/02-bundler/index.mdx
index 80778a77b..49c781822 100644
--- a/docs/4-advanced/02-bundler/index.mdx
+++ b/docs/4-advanced/02-bundler/index.mdx
@@ -5,39 +5,38 @@ title: トランスパイラとモジュールバンドラ
 import getStartedWithViteVideo from "./get-started-with-vite.mp4";
 import buildVideo from "./build.mp4";
 
-## 複雑化する Web 開発
+## 複雑化するWeb開発
 
-JavaScript は、当初は Web サイトに簡易的な動きを追加させるための言語として設計されました。しかしながら、高度な Web アプリケーションの台頭や、Node.js をはじめとしたブラウザにおける JavaScript のユースケースの広がりにより、標準的な JavaScript のみでの開発には限界があることがわかってきました。
+JavaScriptは、当初はWebサイトに簡易的な動きを追加させるための言語として設計されました。しかしながら、高度なWebアプリケーションの台頭や、Node.jsをはじめとしたブラウザにおけるJavaScriptのユースケースの広がりにより、標準的なJavaScriptのみでの開発には限界があることがわかってきました。
 
-このため、現代では、JavaScript は事前に何らかの変換を行っておくことが一般的になっています。
+このため、現代では、JavaScriptは事前に何らかの変換を行っておくことが一般的になっています。
 
 ### <Term>トランスパイラ</Term>
 
 <Term>**トランスパイラ**</Term>
-は、ソースコードを別のソースコードに変換するためのプログラムです。JavaScript においてトランスパイラが必要になるのは、主に
-2 つの理由によります。
+は、ソースコードを別のソースコードに変換するためのプログラムです。JavaScriptにおいてトランスパイラが必要になるのは、主に2つの理由によります。
 
-ひとつは、**最新の機能を使用するため**です。JavaScript の言語仕様は、[Ecma International](https://www.ecma-international.org/) の [TC39](https://tc39.es/) によって作成されていますが、新しく策定された仕様は、まだブラウザなどによって実装されていない場合があります。[Babel](https://babeljs.io/) は、そういった最新の言語仕様に沿って書かれたプログラムを変換し、古い仕様の範囲内で解釈できるプログラムに変換するための、最も有名な<Term>トランスパイラ</Term>です。
+ひとつは、**最新の機能を使用するため**です。JavaScriptの言語仕様は、[Ecma International](https://www.ecma-international.org/)の[TC39](https://tc39.es/)によって作成されていますが、新しく策定された仕様は、まだブラウザなどによって実装されていない場合があります。[Babel](https://babeljs.io/)は、そういった最新の言語仕様に沿って書かれたプログラムを変換し、古い仕様の範囲内で解釈できるプログラムに変換するための、最も有名な<Term>トランスパイラ</Term>です。
 
-もうひとつは、**別の言語で書かれたプログラムを JavaScript に変換するため**です。次の章で扱う TypeScript は、トランスパイラを用いて JavaScript に変換されます。
+もうひとつは、**別の言語で書かれたプログラムをJavaScriptに変換するため**です。次の章で扱うTypeScriptは、トランスパイラを用いてJavaScriptに変換されます。
 
 ### <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 ファイルを統合できます。
+[webpack](https://webpack.js.org)のような<Term>**モジュールバンドラ**</Term>を用いることで、複数のJavaScriptファイルを統合できます。
 
-なお、Node.js の場合は、モジュールの読み込みはファイルの読み込みに過ぎず、ネットワークを経由することはないため、このプロセスは通常必要ありません。
+なお、Node.jsの場合は、モジュールの読み込みはファイルの読み込みに過ぎず、ネットワークを経由することはないため、このプロセスは通常必要ありません。
 
-![JavaScript ファイルの変換](./javascript-conversion.drawio.svg)
+![JavaScriptファイルの変換](./javascript-conversion.drawio.svg)
 
-## Vite を用いたフロントエンド開発
+## Viteを用いたフロントエンド開発
 
-Web 開発の領域では、ブラウザ (クライアント) で動く JavaScript プログラムを**フロントエンド**、サーバーで動くプログラムを**バックエンド**と呼ぶことがあります。
+Web開発の領域では、ブラウザ (クライアント) で動くJavaScriptプログラムを**フロントエンド**、サーバーで動くプログラムを**バックエンド**と呼ぶことがあります。
 
-[Vite](https://vitejs.dev/) は、主にフロントエンドの領域における、<Term>トランスパイラ</Term>や<Term>モジュールバンドラ</Term>などの機能を持つソフトウェアです。
+[Vite](https://vitejs.dev/)は、主にフロントエンドの領域における、<Term>トランスパイラ</Term>や<Term>モジュールバンドラ</Term>などの機能を持つソフトウェアです。
 
-Vite を用いて新しくプロジェクトを作成してみましょう。
+Viteを用いて新しくプロジェクトを作成してみましょう。
 
 <video src={getStartedWithViteVideo} controls />
 
@@ -51,9 +50,9 @@ npm create vite@latest
 
 を実行します。`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
@@ -67,11 +66,11 @@ npm run dev
 
 を実行してください。
 
-Vite 内蔵のウェブサーバーが起動し、`http://localhost:5173/` でウェブサイトが表示されます。
+Vite内蔵のウェブサーバーが起動し、`http://localhost:5173/` でウェブサイトが表示されます。
 
-## Vite の仕組み
+## 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
@@ -90,7 +89,7 @@ dist/assets/index-44b5bae5.js        1.45 kB │ gzip: 0.75 kB
 
 これにより、カレントディレクトリに `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 />
 
@@ -98,7 +97,7 @@ dist/assets/index-44b5bae5.js        1.45 kB │ gzip: 0.75 kB
 
 `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 (一部抜粋)"
 {
@@ -112,9 +111,9 @@ dist/assets/index-44b5bae5.js        1.45 kB │ gzip: 0.75 kB
 
 :::
 
-## npm のパッケージを Web ブラウザ上で利用する
+## 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";
@@ -129,7 +128,7 @@ document.getElementById("app").textContent = format(
 
 ## フロントエンドとバックエンドの統合
 
-Vite などのツールによって出力されたブラウザ上で動くアプリケーションと、Node.js をはじめとしたサーバー向けのアプリケーションを統合するためには、複数の手法が考えられます。
+Viteなどのツールによって出力されたブラウザ上で動くアプリケーションと、Node.jsをはじめとしたサーバー向けのアプリケーションを統合するためには、複数の手法が考えられます。
 
 最も単純なアプローチは、ビルド時に統合することです。この方法のメリットは、本番環境にデプロイするのが簡単であることです。ディレクトリ構成は、例えば次のようになります。
 
@@ -146,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"
 {
@@ -157,7 +156,7 @@ app
 }
 ```
 
-`express.static` により Vite が作成したディレクトリを指定すれば完成です。
+`express.static` によりViteが作成したディレクトリを指定すれば完成です。
 
 ```javascript title="server/main.mjs"
 import express from "express";
@@ -165,7 +164,7 @@ const app = express();
 
 app.use(express.json());
 
-// Vite によって出力されたディレクトリを配信する
+// Viteによって出力されたディレクトリを配信する
 app.use(express.static("dist"));
 
 app.listen(3000);
@@ -177,4 +176,4 @@ app.listen(3000);
 
   <ViewSource url={import.meta.url} path="_samples/chartjs" noCodeSandbox />
 
-- Vite を用いて作成した Web フロントエンドと、Node.js のバックエンドが協調して動作するアプリケーションを Render にデプロイしてみましょう。
+- Viteを用いて作成したWebフロントエンドと、Node.jsのバックエンドが協調して動作するアプリケーションをRenderにデプロイしてみましょう。
diff --git a/docs/4-advanced/03-typescript/index.mdx b/docs/4-advanced/03-typescript/index.mdx
index d93171f56..43f2b77f2 100644
--- a/docs/4-advanced/03-typescript/index.mdx
+++ b/docs/4-advanced/03-typescript/index.mdx
@@ -8,7 +8,7 @@ import setupTypeScriptNodeVideo from "./setup-typescript-node.mp4";
 import typesPackageVideo from "./types-package.mp4";
 import viteTypescriptVideo from "./vite-typescript.mp4";
 
-## JavaScript とデータ型
+## JavaScriptとデータ型
 
 次のような関数を考えてみましょう。
 
@@ -22,9 +22,9 @@ function formatDate(date) {
 
 上のような単純なプログラムならこういった問題は起きにくいですが、プログラムの規模が大きくなるにつれ、「どういった値がやりとりされているのか」という情報を把握することが重要になってきます。こういった情報を、**データ型**、あるいは単に**型**と呼びます。
 
-[TypeScript](https://www.typescriptlang.org/) を用いると、プログラム中にデータ型を記述できるようになります。TypeScript は、Microsoft 社によって開発された、JavaScript に<Term>トランスパイル</Term>して用いられる言語です。
+[TypeScript](https://www.typescriptlang.org/)を用いると、プログラム中にデータ型を記述できるようになります。TypeScriptは、Microsoft社によって開発された、JavaScriptに<Term>トランスパイル</Term>して用いられる言語です。
 
-TypeScript における型は、通常 `:` の記号に続けて記述します。例えば、先程のプログラムを TypeScript を用いて書き直すと、次のようになります。引数の部分に型指定が入っているところに注目してください。
+TypeScriptにおける型は、通常 `:` の記号に続けて記述します。例えば、先程のプログラムをTypeScriptを用いて書き直すと、次のようになります。引数の部分に型指定が入っているところに注目してください。
 
 ```typescript
 function formatDate(date: Date) {
@@ -41,13 +41,13 @@ function formatDate(date: Date) {
 
 :::tip[静的型言語との比較]
 
-C++ や Java などの一般的なプログラミング言語では、型の情報は実行に何らかの影響を与えますが、TypeScript は JavaScript にトランスパイルされる言語であり、実行時には型の情報は一切利用されません。
+C++やJavaなどの一般的なプログラミング言語では、型の情報は実行に何らかの影響を与えますが、TypeScriptはJavaScriptにトランスパイルされる言語であり、実行時には型の情報は一切利用されません。
 
 :::
 
-## TypeScript を使って Node.js のプログラムを記述する
+## TypeScriptを使ってNode.jsのプログラムを記述する
 
-TypeScript を用いて Node.js のプログラムを作成するには、次の手順に従ってください。
+TypeScriptを用いてNode.jsのプログラムを作成するには、次の手順に従ってください。
 
 <video src={setupTypeScriptNodeVideo} controls />
 
@@ -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,33 +70,33 @@ 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
 ```
 
-すると、同名の JavaScript ファイルが生成されます。このファイルを実行すれば、通常の JavaScript として実行できます。
+すると、同名のJavaScriptファイルが生成されます。このファイルを実行すれば、通常のJavaScriptとして実行できます。
 
-## TypeScript の基礎
+## TypeScriptの基礎
 
-TypeScript を試すには、Microsoft が提供している [TS Playground](https://www.typescriptlang.org/play) を用いると便利です。必要に応じて利用してください。
+TypeScriptを試すには、Microsoftが提供している[TS Playground](https://www.typescriptlang.org/play)を用いると便利です。必要に応じて利用してください。
 
 ### 型を記述できる場所
 
-TypeScript の型は、関数の引数や戻り値、変数の後に `:` とともに記述できます。
+TypeScriptの型は、関数の引数や戻り値、変数の後に `:` とともに記述できます。
 
 ```typescript
-// add は number 型の引数 a, b をとり number 型の値を返す関数
+// addはnumber型の引数a, bをとりnumber型の値を返す関数
 function add(a: number, b: number): number {
   return a + b;
 }
 
-// sum は number 型の変数
+// sumはnumber型の変数
 let sum: number = add(3, 4);
 ```
 
-データ型が誤っている場合、TypeScript はエラーを出力します。
+データ型が誤っている場合、TypeScriptはエラーを出力します。
 
 ```typescript
 sum = "7"; // Type 'string' is not assignable to type 'number'.
@@ -106,28 +106,28 @@ 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
 // すべて正しい
 const a: unknown = 1;
 const b: number = 1;
-const c: 1 = 1; // 左辺の 1 はデータ型 (unknown の部分集合) としての 1
+const c: 1 = 1; // 左辺の1はデータ型 (unknownの部分集合) としての1
 
-// never 型にはどんな値も代入できない
+// never型にはどんな値も代入できない
 // const d: never = 1;
 ```
 
-![TypeScript のデータ型](./typescript-types.drawio.svg)
+![TypeScriptのデータ型](./typescript-types.drawio.svg)
 
 :::tip[`any` 型]
 
-TypeScript の標準設定では、型が判明しなかった場合、`any` 型が指定されたものとみなされます。`any` 型の値には、どんな操作でも許容されます。`any` 型の値はどんな型の変数にも代入できますし、`any` 型の変数にはどんな値でも代入できます。上の集合のどの部分にも当てはまりません。
+TypeScriptの標準設定では、型が判明しなかった場合、`any` 型が指定されたものとみなされます。`any` 型の値には、どんな操作でも許容されます。`any` 型の値はどんな型の変数にも代入できますし、`any` 型の変数にはどんな値でも代入できます。上の集合のどの部分にも当てはまりません。
 
 ```typescript
 const strangeValue: any = 1;
 
-// TypeScript は誤りを検出できないが、実行時にエラーになる
+// TypeScriptは誤りを検出できないが、実行時にエラーになる
 strangeValue.strangeMethod();
 ```
 
@@ -140,7 +140,7 @@ strangeValue.strangeMethod();
 ```typescript
 type Age = number;
 
-// 変数 age は Age (number) 型
+// 変数ageはAge (number) 型
 const age: Age = 18;
 ```
 
@@ -155,7 +155,7 @@ const age: Age = 18;
 オブジェクト型では、プロパティの名前や、値の型が指定できます。
 
 ```typescript
-// Student は string 型の name プロパティと number 型の age プロパティを持つオブジェクト
+// Studentはstring型のnameプロパティとnumber型のageプロパティを持つオブジェクト
 type Student = {
   name: string;
   age: number;
@@ -187,7 +187,7 @@ teacher = student;
 ```typescript
 const numbers: number[] = [1, 2, 3];
 
-// number[] は unknown[] の部分集合
+// number[]はunknown[]の部分集合
 const unknowns: unknown[] = numbers;
 ```
 
@@ -196,7 +196,7 @@ const unknowns: unknown[] = numbers;
 関数型では、引数や戻り値の型が指定できます。引数名は異なっていても同じ型だとみなされます。
 
 ```typescript
-// BinaryNumberOperator は number 型の引数 2 つを受け取って number 型の値を返す関数
+// BinaryNumberOperatorはnumber型の引数2つを受け取ってnumber型の値を返す関数
 type BinaryNumberOperator = (x: number, y: number) => number;
 
 function add(a: number, b: number): number {
@@ -213,7 +213,7 @@ function increment(a: number): number {
   return a + 1;
 }
 
-// (a: number) => number は (a: number, b: number) => number の部分集合
+// (a: number) => numberは(a: number, b: number) => numberの部分集合
 const operator2: BinaryNumberOperator = increment;
 ```
 
@@ -243,13 +243,13 @@ const hand: "グー" | "チョキ" | "パー" = "グー";
 文脈からデータ型が明らかな場合は、型定義の記述を省略できます。
 
 ```typescript
-// age は number 型
+// ageはnumber型
 let age = 18;
 
 // Type 'string' is not assignable to type 'number'.
 age = "19";
 
-// 戻り値の型が推論されるため、add は (a: number, b: number) => number 型
+// 戻り値の型が推論されるため、addは(a: number, b: number) => number型
 function add(a: number, b: number) {
   return a + b;
 }
@@ -260,12 +260,12 @@ function add(a: number, b: number) {
 ```typescript
 type BinaryNumberOperator = (a: number, b: number) => number;
 
-// a や b は number に推論される
+// aやbはnumberに推論される
 const operator: BinaryNumberOperator = (a, b) => a + b;
 
 // イベントハンドラの記述の際に便利
 window.onload = (e) => {
-  // e は Event 型
+  // eはEvent型
 };
 ```
 
@@ -290,20 +290,20 @@ function identity(x: unknown) {
 identity(1).toString();
 ```
 
-TypeScript では、型パラメータを用いることで、この問題を解決できます。型パラメータは、通常の引数と異なり、型を指定するための特殊な引数です。JavaScript に<Term>トランスパイル</Term>されるタイミングで削除されます。
+TypeScriptでは、型パラメータを用いることで、この問題を解決できます。型パラメータは、通常の引数と異なり、型を指定するための特殊な引数です。JavaScriptに<Term>トランスパイル</Term>されるタイミングで削除されます。
 
 ```typescript
-// T は型パラメータ
-// identity は T 型の引数を受け取って T 型の戻り値を返す関数
+// Tは型パラメータ
+// identityはT型の引数を受け取ってT型の戻り値を返す関数
 function identity<T>(x: T): T {
   return x;
 }
 
-// T に number を指定したので、ここでは identity は number 型の引数を受け取って number 型の戻り値を返す関数
+// Tにnumberを指定したので、ここではidentityはnumber型の引数を受け取ってnumber型の戻り値を返す関数
 identity<number>(1).toString();
 
 // 文脈から型パラメータが明らかな場合は推論される
-// この場合は T は number に推論される
+// この場合はTはnumberに推論される
 identity(1).toString();
 ```
 
@@ -314,33 +314,33 @@ identity(1).toString();
 ```typescript
 type BinaryOperator<T> = (a: T, b: T) => T;
 
-// add は (a: number, b: number) => number 型
+// addは(a: number, b: number) => number型
 const add: BinaryOperator<number> = (a, b) => a + b;
 ```
 
-## TypeScript と npm
+## TypeScriptとnpm
 
-npm でインストールしたパッケージが TypeScript に対応している場合、下の図のように、npm のパッケージのウェブサイトに <SiTypescript style={{ verticalAlign: "text-bottom" }} /> アイコンが表示されます。
+npmでインストールしたパッケージがTypeScriptに対応している場合、下の図のように、npmのパッケージのウェブサイトに <SiTypescript style={{ verticalAlign: "text-bottom" }} /> アイコンが表示されます。
 
-![npm パッケージの TypeScript 対応](./npm-typescript.png)
+![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` の型が変わっていることが分かります。
 
-## フロントエンドにおける TypeScript の利用
+## フロントエンドにおけるTypeScriptの利用
 
-Vite は、標準で TypeScript のトランスパイラが内蔵されています。新しくプロジェクトを作成する際は、テンプレートを選択する際に TypeScript のテンプレートを使用しましょう。
+Viteは、標準でTypeScriptのトランスパイラが内蔵されています。新しくプロジェクトを作成する際は、テンプレートを選択する際にTypeScriptのテンプレートを使用しましょう。
 
 <video src={viteTypescriptVideo} controls />
 
 :::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` コマンドによりこのファイルを生成できます。
 
 :::
 
@@ -366,7 +366,7 @@ Vite は、標準で TypeScript のトランスパイラが内蔵されていま
    }
    ```
 
-5. フロントエンド・バックエンドともに TypeScript を利用するアプリケーションを作成し、公開してみてください。
+5. フロントエンド・バックエンドともにTypeScriptを利用するアプリケーションを作成し、公開してみてください。
 
 <Answer>
 
@@ -378,7 +378,7 @@ Vite は、標準で TypeScript のトランスパイラが内蔵されていま
 
 2. `name` のみ
 
-   2 つの型に共通しているのは `name` プロパティだけなので、`T` 型の変数に必ず存在しているプロパティは`name` のみとなります。よって、`name` のみ使用可能となります。
+   2つの型に共通しているのは `name` プロパティだけなので、`T` 型の変数に必ず存在しているプロパティは`name` のみとなります。よって、`name` のみ使用可能となります。
 
 3. `(v: unknown) => string` と `(v: string) => never`
 
diff --git a/docs/4-advanced/04-react/index.mdx b/docs/4-advanced/04-react/index.mdx
index 0f626acb1..17e7b12de 100644
--- a/docs/4-advanced/04-react/index.mdx
+++ b/docs/4-advanced/04-react/index.mdx
@@ -5,11 +5,11 @@ title: React
 import createReactProjectVideo from "./create-react-project.mp4";
 import componentRenderingVideo from "./component-rendering.mp4";
 
-## 宣言的な UI
+## 宣言的なUI
 
-これまで、JavaScript により HTML 要素を操作するために、[DOM](/docs/trial-session/dom/) を用いることができることを学んできました。しかしながら、ナイーブな方法により DOM を使用すると、アプリケーションの規模の限界がすぐにやってきます。
+これまで、JavaScriptによりHTML要素を操作するために、[DOM](/docs/trial-session/dom/)を用いることができることを学んできました。しかしながら、ナイーブな方法によりDOMを使用すると、アプリケーションの規模の限界がすぐにやってきます。
 
-簡単な ToDo アプリケーションを例に考えてみましょう。
+簡単なToDoアプリケーションを例に考えてみましょう。
 
 ```html title="index.html"
 <ul id="todos"></ul>
@@ -43,13 +43,13 @@ addTodoButton.onclick = () => {
 
 なんとか作り上げることができましたが、このまま要件を増やして複雑なプログラムを作ろうとすれば、要素の作成忘れ、削除忘れなどにより、すぐに破綻してしまいそうです。
 
-このようになってしまう根本的な原因は、**現在の状態が DOM に記憶されてしまっていることにあります**。DOM には、テキストや位置、色など、数えきれない状態が格納されています。状態の数が $n$ 種類あれば、その遷移パターンは $n^2$ 個になるわけですので、状態の数が増えることが非常に危険であることは明らかです。
+このようになってしまう根本的な原因は、**現在の状態がDOMに記憶されてしまっていることにあります**。DOMには、テキストや位置、色など、数えきれない状態が格納されています。状態の数が$n$種類あれば、その遷移パターンは$n^2$個になるわけですので、状態の数が増えることが非常に危険であることは明らかです。
 
-ところが、アプリケーションの本質的な状態というのは、一般的にそこまで多いものではありません。例えば、ToDo リストアプリケーションであれば、各 ToDo を表す `string` の配列 `string[]` がひとつだけあれば、アプリケーションの状態は全て表現できていることになるはずです。
+ところが、アプリケーションの本質的な状態というのは、一般的にそこまで多いものではありません。例えば、ToDoリストアプリケーションであれば、各ToDoを表す `string` の配列 `string[]` がひとつだけあれば、アプリケーションの状態は全て表現できていることになるはずです。
 
-**宣言的 UI** は、こういった性質に着目します。より具体的に説明するのであれば、アプリケーションの状態 $S$ に対し、関数 $f(S)$ により UI の状態を表現できるのであれば、開発者の関心を $S$ の変化と $f$ の定義のみに絞ることができるというわけです。
+**宣言的UI**は、こういった性質に着目します。より具体的に説明するのであれば、アプリケーションの状態$S$に対し、関数$f(S)$によりUIの状態を表現できるのであれば、開発者の関心を$S$の変化と$f$の定義のみに絞ることができるというわけです。
 
-具体的なコードで確認してみましょう。先ほどの ToDo アプリケーションを、宣言的 UI のアプローチを用いて書き換えてみましょう。状態を追いやすいよう、TypeScript を用いて記述します。
+具体的なコードで確認してみましょう。先ほどのToDoアプリケーションを、宣言的UIのアプローチを用いて書き換えてみましょう。状態を追いやすいよう、TypeScriptを用いて記述します。
 
 まずはアプリケーションの状態と、その状態を格納する変数を宣言します。
 
@@ -58,7 +58,7 @@ type State = { todos: string[] };
 const state: State = { todos: [] };
 ```
 
-続いて、`state` 変数をもとに UI を構築する関数 `render` を定義します。
+続いて、`state` 変数をもとにUIを構築する関数 `render` を定義します。
 
 ```typescript
 function render() {
@@ -67,13 +67,13 @@ function render() {
 
   for (const todo of state.todos) {
     const li = document.createElement("li");
-    // ここに li の中身を作る処理が入る
+    // ここにliの中身を作る処理が入る
     todoContainer.appendChild(li);
   }
 }
 ```
 
-最後に、状態を変化させる関数を定義します。状態を変化させたら、 `render` 関数を呼び出して、変更を UI に反映させます。
+最後に、状態を変化させる関数を定義します。状態を変化させたら、 `render` 関数を呼び出して、変更をUIに反映させます。
 
 ```typescript
 function addTodo(todo: string) {
@@ -92,19 +92,19 @@ function removeTodo(index: number) {
 
 ## React
 
-先ほどのプログラムはうまく動作しますが、一つ問題があります。それは、`render` 関数が呼ばれるたびに全ての要素が削除され、再構築される点です。一般的に、DOM に対する操作は非常にコストが高く、可能な限り減らすことがパフォーマンス改善のために有効です。
+先ほどのプログラムはうまく動作しますが、一つ問題があります。それは、`render` 関数が呼ばれるたびに全ての要素が削除され、再構築される点です。一般的に、DOMに対する操作は非常にコストが高く、可能な限り減らすことがパフォーマンス改善のために有効です。
 
-[React](https://ja.reactjs.org/) は、この問題を**仮想 DOM**を用いて解決します。React は、DOM に似たデータ構造を内部的に JavaScript オブジェクトの形式で保持し、実際に変更された部分のみを実際の 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 の使用に最低限必要なパッケージ]
+:::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>;
@@ -170,9 +170,9 @@ export default function App() {
 }
 ```
 
-:::tip[JSX 式のトランスパイル結果]
+:::tip[JSX式のトランスパイル結果]
 
-JSX 式は、Vite などの<Term>トランスパイラ</Term>により<Term>トランスパイル</Term>されると、関数呼び出しになります。例えば、
+JSX式は、Viteなどの<Term>トランスパイラ</Term>により<Term>トランスパイル</Term>されると、関数呼び出しになります。例えば、
 
 ```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() {
@@ -204,7 +204,7 @@ export default function App() {
 }
 ```
 
-JSX 式と JavaScript の間を行き来することもできます。
+JSX式とJavaScriptの間を行き来することもできます。
 
 ```tsx title="App.tsx"
 const age = 22;
@@ -215,7 +215,7 @@ export default function App() {
       {age >= 20 ? (
         <span>いらっしゃいませ！</span>
       ) : (
-        <strong>お酒は 20 歳になってから！</strong>
+        <strong>お酒は20歳になってから！</strong>
       )}
     </p>
   );
@@ -224,7 +224,7 @@ export default function App() {
 
 :::tip[条件演算子 (三項演算子)]
 
-`?` と `:` の組で表される演算子は、**条件演算子 (三項演算子)**です。条件式の評価結果が真なら 2 つめの式を、偽なら 3 つめの式を評価します。
+`?` と `:` の組で表される演算子は、**条件演算子 (三項演算子)**です。条件式の評価結果が真なら2つめの式を、偽なら3つめの式を評価します。
 
 ```javascript
 const a = 5;
@@ -234,19 +234,19 @@ const max = a > b ? a : b; // 6
 
 :::
 
-![JSX と JavaScript の入れ子構造](./jsx-and-javascript.png)
+![JSXとJavaScriptの入れ子構造](./jsx-and-javascript.png)
 
 ### 課題
 
-自分のテストの点数を表す変数 `score` を用意し、React で次を満たすプログラムを作成してください。
+自分のテストの点数を表す変数 `score` を用意し、Reactで次を満たすプログラムを作成してください。
 
-- `score` が 80 以上なら `大変よくできました。` と表示する。
-- `score` が 50 以上 80 未満なら `よくできました。` と表示する。
-- `score` が 50 未満なら `もう少し頑張りましょう。` と表示する。
+- `score` が80以上なら `大変よくできました。` と表示する。
+- `score` が50以上80未満なら `よくできました。` と表示する。
+- `score` が50未満なら `もう少し頑張りましょう。` と表示する。
 
 <Answer>
 
-解答例 1
+解答例1
 
 条件演算子をネストして、条件分岐を表現します。
 
@@ -270,9 +270,9 @@ export default function App() {
 
 <ViewSource url={import.meta.url} path="_samples/test-score" />
 
-解答例 2
+解答例2
 
-次のように変数に JSX 要素を代入しておき、最後にその変数を返すという方法もあります。
+次のように変数にJSX要素を代入しておき、最後にその変数を返すという方法もあります。
 
 ```tsx title="App.tsx"
 const score: number = 80;
@@ -294,11 +294,11 @@ export default function App() {
 
 </Answer>
 
-## JSX における条件分岐
+## 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;
@@ -314,34 +314,34 @@ export default function App() {
 }
 ```
 
-:::tip[JSX と閉じタグ]
+:::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
+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]
+:::tip[truthyとfalsy]
 
-JavaScript では、if 文や while 文などの制御構造も、条件式の結果が truthy であるかを確認しています。
+JavaScriptでは、if文やwhile文などの制御構造も、条件式の結果がtruthyであるかを確認しています。
 
 ```typescript
 if ("") {
-  // 空文字列は falsy なのでこの部分は実行されない
+  // 空文字列はfalsyなのでこの部分は実行されない
 }
 ```
 
-Boolean 関数は、truthy な値を `true` に、falsy な値を `false` に変換します。
+Boolean関数は、truthyな値を `true` に、falsyな値を `false` に変換します。
 
 ```typescript
 Boolean(null); // false
@@ -350,15 +350,15 @@ Boolean("Hello"); // true
 
 :::
 
-## JSX における繰り返し
+## JSXにおける繰り返し
 
-React では、JSX の子要素として配列を指定することができます。ただし、**配列の要素が `JSX.Element` 型である場合、各要素の `key` 属性に重複しない値を指定する必要があります**。
+Reactでは、JSXの子要素として配列を指定することができます。ただし、**配列の要素が `JSX.Element` 型である場合、各要素の `key` 属性に重複しない値を指定する必要があります**。
 
 ```tsx title="App.tsx"
 const listItems = [
-  <li key="1">要素 1</li>,
-  <li key="2">要素 2</li>,
-  <li key="3">要素 3</li>,
+  <li key="1">要素1</li>,
+  <li key="2">要素2</li>,
+  <li key="3">要素3</li>,
 ];
 
 export default function App() {
@@ -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 };
@@ -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 };
@@ -495,7 +495,7 @@ export default function App() {
 
 ## `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";
@@ -520,7 +520,7 @@ export default function App() {
 
 `useState` 関数は、**コンポーネントに持たせる状態の初期値を引数にとり、コンポーネントの状態を作成する関数**です。型パラメータを用いて、状態の型を指定できます。この例では、初期値が `0` であるような `number` 型の状態を作成しています。
 
-`useState` 関数の戻り値は、**要素数 2 の配列で、0 番目の要素が現在の状態を、1 番目の要素が状態を更新するための関数**になります。もう少し厳密な表現を用いるのであれば、`useState<T>` 関数の戻り値は `[T, (value: T) => void]` 型とみなせます。
+`useState` 関数の戻り値は、**要素数2の配列で、0番目の要素が現在の状態を、1番目の要素が状態を更新するための関数**になります。もう少し厳密な表現を用いるのであれば、`useState<T>` 関数の戻り値は `[T, (value: T) => void]` 型とみなせます。
 
 :::tip[配列の分割代入]
 
@@ -550,7 +550,7 @@ const setCount = useStateResult[1];
 
 :::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";
@@ -598,11 +598,11 @@ export default function 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() {
@@ -636,7 +636,7 @@ 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` 関数を用いて状態に反映させています。
 
@@ -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 とイミュータビリティ]
+:::tip[Reactとイミュータビリティ]
 
-[オブジェクトの参照](/docs/browser-apps/reference/)節で扱ったように、JavaScript オブジェクトは参照として扱われます。React では、**状態として保存されたオブジェクトの参照先への変更は許可されていません**。例えば、先ほどのプログラムの `addTodo` 関数と `removeTodo` 関数は、次のように書き換えることはできません。これは、この方法では React が状態が変化したことを検知できないからです。
+[オブジェクトの参照](/docs/browser-apps/reference/)節で扱ったように、JavaScriptオブジェクトは参照として扱われます。Reactでは、**状態として保存されたオブジェクトの参照先への変更は許可されていません**。例えば、先ほどのプログラムの `addTodo` 関数と `removeTodo` 関数は、次のように書き換えることはできません。これは、この方法ではReactが状態が変化したことを検知できないからです。
 
 ```tsx
 const addTodo = () => {
@@ -780,13 +780,13 @@ const object2 = { ...object1, age: 19, address: "東京" }; // { name: "田中",
 
 ## 課題
 
-- ToDo リストの要素を上下に移動させる機能を追加しましょう
+- ToDoリストの要素を上下に移動させる機能を追加しましょう
   <ViewSource url={import.meta.url} path="_samples/todo-up-down" />
-- ToDo リストの要素へ編集する機能を追加しましょう
+- ToDoリストの要素へ編集する機能を追加しましょう
   <ViewSource url={import.meta.url} path="_samples/todo-edit" />
-- データベースに永続化することができる ToDo リストアプリケーションを作成しましょう
+- データベースに永続化することができるToDoリストアプリケーションを作成しましょう
 
-  - ヒント: ページ読み込み時に Fetch API を用いてデータを保存済みの ToDo 一覧を取得します。リストが編集されたら再び Fetch API を用いてデータを保存しましょう。
+  - ヒント: ページ読み込み時にFetch APIを用いてデータを保存済みのToDo一覧を取得します。リストが編集されたら再びFetch APIを用いてデータを保存しましょう。
 
   解答例
 
diff --git a/docs/5-team-development/01-git-workflow/index.mdx b/docs/5-team-development/01-git-workflow/index.mdx
index 711848aad..054193728 100644
--- a/docs/5-team-development/01-git-workflow/index.mdx
+++ b/docs/5-team-development/01-git-workflow/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: Git と GitHub を用いたワークフロー
+title: GitとGitHubを用いたワークフロー
 ---
 
 import outdent from "outdent";
@@ -13,37 +13,37 @@ import pullAndMergeVideo from "./pull-and-merge.mp4";
 import pullRequestVideo from "./pull-request.mp4";
 import resolvePullRequestConflictVideo from "./resolve-pull-request-conflict.mp4";
 
-現代のチーム開発では、通常 Git が用いられます。Git の概念は複雑ですが、チーム開発で起こる様々な状況に適切に対処するためには、ある程度の理解が必要となります。この節では、Git の思想を解説したうえで、GitHub を用いてチーム開発を行う手法を示します。
+現代のチーム開発では、通常Gitが用いられます。Gitの概念は複雑ですが、チーム開発で起こる様々な状況に適切に対処するためには、ある程度の理解が必要となります。この節では、Gitの思想を解説したうえで、GitHubを用いてチーム開発を行う手法を示します。
 
 ## コミットが記録される仕組み
 
-Git の節では、Git のコミットに一意の ID が割り当てられることを説明しました。実は、**コミット ID は、次の情報から計算可能です**。つまり、次の情報が完全に一致しているのであれば、どのような環境でコミットを行なっても同じコミット ID が割り当てられます。逆に、次の情報のうち一つでも異なるものがあれば、全く違うコミット ID が割り当てられます。
+Gitの節では、Gitのコミットに一意のIDが割り当てられることを説明しました。実は、**コミットIDは、次の情報から計算可能です**。つまり、次の情報が完全に一致しているのであれば、どのような環境でコミットを行なっても同じコミットIDが割り当てられます。逆に、次の情報のうち一つでも異なるものがあれば、全く違うコミットIDが割り当てられます。
 
 - すべてのファイルやディレクトリの名前
 - コミットの作成者の名前やメールアドレス
 - コミットが作成された日時
 - コミットメッセージ
-- 親コミット (ひとつ前のコミット) の ID
+- 親コミット (ひとつ前のコミット) のID
 
 これらの情報の中に、**リポジトリは含まれていません**。コミットは、リポジトリとは独立して存在するものなのです。
 
-また、注目したいのは、コミットの情報の中に親コミットの ID が含まれているところです。つまり、歴史の流れの方向と、コミットグラフの参照の方向は逆向きになります。この性質により、一度作成されたコミットはその後の変更に影響を受けません。
+また、注目したいのは、コミットの情報の中に親コミットのIDが含まれているところです。つまり、歴史の流れの方向と、コミットグラフの参照の方向は逆向きになります。この性質により、一度作成されたコミットはその後の変更に影響を受けません。
 
 ![歴史の流れと参照の方向](./commit-history.drawio.svg)
 
-## ブランチと HEAD
+## ブランチとHEAD
 
 **ブランチ**は、ソースコードへの変更の枝分かれを扱うための仕組みです。ブランチはリポジトリの中に存在し、**コミットを指し示します**。
 
-各リポジトリには、**HEAD** と呼ばれる、**現在実際にディレクトリに表れている状態を表す**特殊なポインタがあります。作業中のブランチがある場合、HEAD はそのブランチを指し示します。`git init` コマンドによりリポジトリを新しく作成した場合、HEAD は自動的に `master` ブランチを指すように設定されます。
+各リポジトリには、**HEAD**と呼ばれる、**現在実際にディレクトリに表れている状態を表す**特殊なポインタがあります。作業中のブランチがある場合、HEADはそのブランチを指し示します。`git init` コマンドによりリポジトリを新しく作成した場合、HEADは自動的に `master` ブランチを指すように設定されます。
 
-HEAD が `master` ブランチを指している状態で、コミットを行った際に起こる変化を表したのが次の図です。直前まで `master` ブランチが指していたコミット `2ce3d099` を親とする新しいコミット `cee8a14f` が作成され、ブランチ `master` が指し示す先は新しく作成されたコミットに変更されます。
+HEADが `master` ブランチを指している状態で、コミットを行った際に起こる変化を表したのが次の図です。直前まで `master` ブランチが指していたコミット `2ce3d099` を親とする新しいコミット `cee8a14f` が作成され、ブランチ `master` が指し示す先は新しく作成されたコミットに変更されます。
 
 ![コミット](./commit.drawio.svg)
 
 ## 別のブランチで作業する
 
-新しいブランチを作成する場合には、`git checkout -b` コマンドを実行します。次の図は、HEAD がコミット `2ce3d099` を指している状態で、`git checkout -b feature` を実行した例です。直前まで HEAD が指していたコミットを指し示すブランチ `feature` が作成され、HEAD が指し示す先も新しいブランチに変更されます。
+新しいブランチを作成する場合には、`git checkout -b` コマンドを実行します。次の図は、HEADがコミット `2ce3d099` を指している状態で、`git checkout -b feature` を実行した例です。直前までHEADが指していたコミットを指し示すブランチ `feature` が作成され、HEADが指し示す先も新しいブランチに変更されます。
 
 ![チェックアウト](./checkout.drawio.svg)
 
@@ -51,9 +51,9 @@ HEAD が `master` ブランチを指している状態で、コミットを行
 
 ![作成したブランチでコミット](./commit-on-branch.drawio.svg)
 
-ここで `git checkout master` を実行すると、HEAD の指し示す先のみが `master` ブランチに変更され、ディレクトリ内のファイルはコミット `2ce3d099` のものに戻ります。
+ここで `git checkout master` を実行すると、HEADの指し示す先のみが `master` ブランチに変更され、ディレクトリ内のファイルはコミット `2ce3d099` のものに戻ります。
 
-![master ブランチに戻る](./re-checkout-master.drawio.svg)
+![masterブランチに戻る](./re-checkout-master.drawio.svg)
 
 このまま、さらにコミット `bfaaf878` を追加します。これにより、コミットグラフの枝分かれが生じます。これが、複数人で同時に開発が行われている状態です。
 
@@ -65,19 +65,19 @@ HEAD が `master` ブランチを指している状態で、コミットを行
 
 ## 枝分かれしたブランチをマージする
 
-`git merge` コマンドを用いると、現在のブランチに他のブランチの変更を取り込むことができます。次の例では、HEAD が `master` ブランチにある状態で、`git merge feature` を実行することで `feature` ブランチを `master` ブランチにマージしています。
+`git merge` コマンドを用いると、現在のブランチに他のブランチの変更を取り込むことができます。次の例では、HEADが `master` ブランチにある状態で、`git merge feature` を実行することで `feature` ブランチを `master` ブランチにマージしています。
 
 ![マージ](./merge.drawio.svg)
 
-このマージを実行すると、`bfaaf878` と `cee8a14f` の 2 つの親を持つ**マージコミット** `d021150b` が生成され、2 つのブランチ両方で行われた変更を含むコミットとなります。マージコミットのコミットメッセージは自分で指定することもできますが、Git 側で用意してくれる標準のメッセージ (この例では `Merge branch 'feature'`) をそのまま用いても良いでしょう。
+このマージを実行すると、`bfaaf878` と `cee8a14f` の2つの親を持つ**マージコミット** `d021150b` が生成され、2つのブランチ両方で行われた変更を含むコミットとなります。マージコミットのコミットメッセージは自分で指定することもできますが、Git側で用意してくれる標準のメッセージ (この例では `Merge branch 'feature'`) をそのまま用いても良いでしょう。
 
 <video src={mergeVideo} controls muted />
 
-:::tip[Git 標準のエディタ]
+:::tip[Git標準のエディタ]
 
-コマンドラインからコミットを作成する際、`-m` オプションを指定しなかった場合、コミットメッセージを編集するためのエディタが起動します。このエディタは自分で設定することができますが、上の例では [nano](https://www.nano-editor.org/) が起動しており、この場合は <kbd>control</kbd> + <kbd>X</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>X</kbd> (Windows) で終了します。
+コマンドラインからコミットを作成する際、`-m` オプションを指定しなかった場合、コミットメッセージを編集するためのエディタが起動します。このエディタは自分で設定することができますが、上の例では[nano](https://www.nano-editor.org/)が起動しており、この場合は<kbd>control</kbd> + <kbd>X</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>X</kbd> (Windows) で終了します。
 
-環境によっては [Vim](https://www.vim.org/) が起動する場合があります。この場合は、`:q` を入力して `Enter` を押下することにより終了できます。
+環境によっては[Vim](https://www.vim.org/)が起動する場合があります。この場合は、`:q` を入力して `Enter` を押下することにより終了できます。
 
 <video src={editCommitMessageWithVim} controls muted />
 
@@ -85,7 +85,7 @@ HEAD が `master` ブランチを指している状態で、コミットを行
 
 ## コンフリクト
 
-`git merge` コマンドが実行されると、Git はまずコミットグラフ上の共通の祖先を探します。例えば、コミットグラフが次のような状態であるとき、Git は `master` ブランチと `feature` ブランチの共通の祖先であるコミット `2ce3d099` を起点とした変更を取得します。
+`git merge` コマンドが実行されると、Gitはまずコミットグラフ上の共通の祖先を探します。例えば、コミットグラフが次のような状態であるとき、Gitは `master` ブランチと `feature` ブランチの共通の祖先であるコミット `2ce3d099` を起点とした変更を取得します。
 
 ```html title="共通の祖先 (2ce3d099)"
 <li>吾輩は猫である</li>
@@ -111,7 +111,7 @@ HEAD が `master` ブランチを指している状態で、コミットを行
 
 ![コンフリクト](./conflict.drawio.svg)
 
-この例の場合、共通の祖先に対して `master` は `<li>三四郎</li>` が、`feature` は `<li>こころ</li>` が**同じ場所に**追加されています。この状態で `git merge feature` を実行すると、Git は**コンフリクト**を報告し、マージを中断します。コンフリクトが発生したファイルには、Git により自動的に `<<<<<<<` や `=======`、`>>>>>>>` といったコンフリクトマーカーが挿入されます。
+この例の場合、共通の祖先に対して `master` は `<li>三四郎</li>` が、`feature` は `<li>こころ</li>` が**同じ場所に**追加されています。この状態で `git merge feature` を実行すると、Gitは**コンフリクト**を報告し、マージを中断します。コンフリクトが発生したファイルには、Gitにより自動的に `<<<<<<<` や `=======`、`>>>>>>>` といったコンフリクトマーカーが挿入されます。
 
 {/* 頭にインデントを入れておくことで Markdown ファイルのコンフリクトと認識させない */}
 
@@ -134,17 +134,17 @@ HEAD が `master` ブランチを指している状態で、コミットを行
 
 ## リモートブランチ
 
-Git と GitHub の節では、自分の PC に置かれたリポジトリ (ローカルリポジトリ) と GitHub 上のリポジトリ (リモートリポジトリ) を接続しました。`git push origin master` コマンドを行ったときの Git の動作を確認しておきましょう。
+GitとGitHubの節では、自分のPCに置かれたリポジトリ (ローカルリポジトリ) とGitHub上のリポジトリ (リモートリポジトリ) を接続しました。`git push origin master` コマンドを行ったときのGitの動作を確認しておきましょう。
 
 `git push origin master` コマンドは、ローカルリポジトリの `master` ブランチが指し示すコミットを、リモートリポジトリの `master` ブランチが指し示すコミットとして設定するためのコマンドです。次の図は、ローカルリポジトリの `master` ブランチがコミット `2ce3d099` を指している状態で、空のリモートリポジトリ `origin` に対して `git push origin master` を実行した際の様子を表しています。
 
 ![リモートブランチ](./remote-branch.drawio.svg)
 
-この状態でコミットを行うと、ローカルリポジトリの `master` ブランチが、リモートリポジトリの `master` ブランチより 1 コミット分進んでいる状態になります。
+この状態でコミットを行うと、ローカルリポジトリの `master` ブランチが、リモートリポジトリの `master` ブランチより1コミット分進んでいる状態になります。
 
-![1 コミット進んだ状態](./one-commit-ahead.drawio.svg)
+![1コミット進んだ状態](./one-commit-ahead.drawio.svg)
 
-再び `git push origin master` を実行 (最初の push 時に `-u` オプションを指定した場合は `git push`) することで、作成したコミットをリモートリポジトリに反映させられます。
+再び `git push origin master` を実行 (最初のpush時に `-u` オプションを指定した場合は `git push`) することで、作成したコミットをリモートリポジトリに反映させられます。
 
 ![再びプッシュする](./push-again.drawio.svg)
 
@@ -180,7 +180,7 @@ Git と GitHub の節では、自分の PC に置かれたリポジトリ (ロ
 
 ## プルリクエスト
 
-GitHub などのサービスを用いて共同開発を行う場合、通常は `master` ブランチへのマージを Web 画面上で行い、**Git のコマンドで `master` ブランチを操作することはありません**。これにより、プログラムの変更が無秩序に行われることを防ぐことができます。GitHub では、**プルリクエスト**と呼ばれる機能により実現できます。
+GitHubなどのサービスを用いて共同開発を行う場合、通常は `master` ブランチへのマージをWeb画面上で行い、**Gitのコマンドで `master` ブランチを操作することはありません**。これにより、プログラムの変更が無秩序に行われることを防ぐことができます。GitHubでは、**プルリクエスト**と呼ばれる機能により実現できます。
 
 次の図のようなコミットグラフがある状態を考えてみましょう。`master` ブランチから `feature` ブランチを切り出し、作成したコミットをリモートリポジトリにプッシュした状態です。`feature` ブランチから `master` ブランチに対してプルリクエストを作成することで、`feature` ブランチで行った変更を他のユーザーに確認してもらうことができます。
 
@@ -190,7 +190,7 @@ GitHub などのサービスを用いて共同開発を行う場合、通常は
 
 ![プルリクエストのマージ](./pull-request-merge.drawio.svg)
 
-ローカルリポジトリで再び `master` ブランチをチェックアウトし、`git pull origin master` で `master` ブランチを GitHub 上の最新のコミットに合わせれば、開発を再開できます。
+ローカルリポジトリで再び `master` ブランチをチェックアウトし、`git pull origin master` で `master` ブランチをGitHub上の最新のコミットに合わせれば、開発を再開できます。
 
 ![マージされたプルリクエストをプルする](./pull-merged-pull-request.drawio.svg)
 
@@ -202,17 +202,17 @@ GitHub などのサービスを用いて共同開発を行う場合、通常は
 
 プルリクエストでコンフリクトが発生した場合、ローカルではマージコミット作成前に修正をしていましたが、プルリクエストを用いた開発においては、`master` ブランチは直接操作できないため、代わりにプルリクエストを出した側のブランチを操作して `master` ブランチにマージ可能になるよう修正します。
 
-次のコミットグラフを考えてみましょう。`master` ブランチが `2ce3d099` だった際に `feature` ブランチを切り出し、コミット `f08f242a` を作成しましたが、他のチームメンバーの開発の結果 GitHub 上の `master` ブランチが `0d4cba5c` に進み、`feature` ブランチから `master` ブランチへのプルリクエストがコンフリクトしている状態です。
+次のコミットグラフを考えてみましょう。`master` ブランチが `2ce3d099` だった際に `feature` ブランチを切り出し、コミット `f08f242a` を作成しましたが、他のチームメンバーの開発の結果GitHub上の `master` ブランチが `0d4cba5c` に進み、`feature` ブランチから `master` ブランチへのプルリクエストがコンフリクトしている状態です。
 
 ![コンフリクトの発生したプルリクエスト](./pull-request-conflict.drawio.svg)
 
 この状態を解消するために、**ローカルで最新の `master` ブランチを `feature` ブランチにマージします**。まずは `master` ブランチをチェックアウトし、最新の `master` への変更を `git pull origin master` によりローカルリポジトリに取り込んだうえで、再び `feature` ブランチに戻ります。
 
-![master ブランチを最新にする](./pull-master-after-pull-request-conflict.drawio.svg)
+![masterブランチを最新にする](./pull-master-after-pull-request-conflict.drawio.svg)
 
 ここで `git merge master` を実行し、コンフリクトを解決して `master` ブランチとのマージコミット `d6d38e90` を作成してプッシュします。これにより、`feature` ブランチは `master` ブランチにマージ可能となり、コンフリクトが解消されます。
 
-![master ブランチを feature ブランチにマージ](./pull-request-conflict-resolved.drawio.svg)
+![masterブランチをfeatureブランチにマージ](./pull-request-conflict-resolved.drawio.svg)
 
 通常通りプルリクエストをマージすれば完了です。同じように作成されたマージコミットをローカルに取り込むことができます。
 
@@ -224,7 +224,7 @@ GitHub などのサービスを用いて共同開発を行う場合、通常は
 
 ## 課題
 
-1. 同一の GitHub リポジトリに対し、同じ行を変更するプルリクエストを 2 人で作成しましょう。
+1. 同一のGitHubリポジトリに対し、同じ行を変更するプルリクエストを2人で作成しましょう。
 2. 片方をマージすると、もう片方のプルリクエストがコンフリクト状態になることを確認しましょう。
 3. コンフリクトを解決しましょう。
 4. マージされたプルリクエストで行われた変更をプルしましょう。
diff --git a/docs/index.mdx b/docs/index.mdx
index 383841de8..230049a6b 100644
--- a/docs/index.mdx
+++ b/docs/index.mdx
@@ -3,17 +3,17 @@ title: ようこそ
 sidebar_position: 0
 ---
 
-## ut.code(); Learn へようこそ！
+## ut.code(); Learnへようこそ！
 
-ut.code(); Learn は、大きく 4 つの部に分かれています。また、これらを学習した方に向けた参考資料もあります。
+ut.code(); Learnは、大きく4つの部に分かれています。また、これらを学習した方に向けた参考資料もあります。
 
 ## 学習教材
 
-### 1. [Web プログラミングの基礎を学ぼう](/docs/trial-session/)
+### 1. [Webプログラミングの基礎を学ぼう](/docs/trial-session/)
 
 ### 2. [ブラウザで動作するアプリを構築しよう](/docs/browser-apps/)
 
-### 3. [Web サーバーが動作する仕組みを知ろう](/docs/web-servers/)
+### 3. [Webサーバーが動作する仕組みを知ろう](/docs/web-servers/)
 
 ### 4. [現代のアプリを支える技術を学ぼう](/docs/advanced/)
 
diff --git a/src/components/Term/definitions.js b/src/components/Term/definitions.js
index 2fac44bb6..743e01def 100644
--- a/src/components/Term/definitions.js
+++ b/src/components/Term/definitions.js
@@ -22,16 +22,16 @@ export default {
     "/docs/browser-apps/class/": "クラス",
     "/docs/browser-apps/array/": "配列",
     "/docs/browser-apps/anonymous-function/": "無名関数",
-    "/docs/browser-apps/git-github/": "Git と GitHub",
-    "/docs/web-servers/wsl-setup/": "WSL のセットアップ",
-    "/docs/web-servers/node-js/": "はじめての Node.js",
-    "/docs/web-servers/module/": "モジュールと npm",
-    "/docs/web-servers/server/": "Express によるサーバー構築",
+    "/docs/browser-apps/git-github/": "GitとGitHub",
+    "/docs/web-servers/wsl-setup/": "WSLのセットアップ",
+    "/docs/web-servers/node-js/": "はじめてのNode.js",
+    "/docs/web-servers/module/": "モジュールとnpm",
+    "/docs/web-servers/server/": "Expressによるサーバー構築",
     "/docs/web-servers/form/": "フォーム",
-    "/docs/web-servers/get-post/": "GET リクエストと POST リクエスト",
+    "/docs/web-servers/get-post/": "GETリクエストとPOSTリクエスト",
     "/docs/web-servers/database/": "データベース",
-    "/docs/web-servers/cookie/": "Cookie と認証",
-    "/docs/web-servers/deploy-on-render/": "Render へのデプロイ",
+    "/docs/web-servers/cookie/": "Cookieと認証",
+    "/docs/web-servers/deploy-on-render/": "Renderへのデプロイ",
     "/docs/advanced/fetch-api/": "Fetch API",
     "/docs/advanced/bundler/": "トランスパイラとモジュールバンドラ",
     "/docs/advanced/typescript/": "TypeScript",
@@ -41,13 +41,13 @@ export default {
     fileExtension: {
       name: "拡張子",
       definition:
-        "ファイル名のピリオド以降の部分。ファイルの種類を識別するために用いられる場合がある。Windows では標準では表示されないので、表示する設定にしておくと良い。",
+        "ファイル名のピリオド以降の部分。ファイルの種類を識別するために用いられる場合がある。Windowsでは標準では表示されないので、表示する設定にしておくと良い。",
       referencePage: "/docs/trial-session/html/",
     },
     fork: {
       name: "フォーク",
       definition:
-        "GitHub において、他人が公開しているリポジトリを複製すること。この操作により、元のリポジトリに対して影響を与えることなくソースコードを変更できる。",
+        "GitHubにおいて、他人が公開しているリポジトリを複製すること。この操作により、元のリポジトリに対して影響を与えることなくソースコードを変更できる。",
       referencePage: "/docs/trial-session/get-started/",
     },
     git: {
@@ -58,13 +58,13 @@ export default {
     github: {
       name: "GitHub",
       definition:
-        "Git を用いて、プログラムの保存、共有、公開などができる、開発者のための総合プラットフォーム。",
+        "Gitを用いて、プログラムの保存、共有、公開などができる、開発者のための総合プラットフォーム。",
       referencePage: "/docs/trial-session/get-started/",
     },
     gitpod: {
       name: "Gitpod",
       definition:
-        "GitHub 等に保存されているプログラムをブラウザ上で編集するためのサービス。",
+        "GitHub等に保存されているプログラムをブラウザ上で編集するためのサービス。",
       referencePage: "/docs/trial-session/get-started/",
     },
     repository: {
@@ -91,13 +91,13 @@ export default {
     startTag: {
       name: "開始タグ",
       definition:
-        "要素の先頭を表す。 <div>内容</div> ならば <div> が開始タグ。属性をつけることができる。",
+        "要素の先頭を表す。<div>内容</div>ならば<div>が開始タグ。属性をつけることができる。",
       referencePage: "/docs/trial-session/html/",
     },
     tag: {
       name: "タグ",
       definition:
-        "< から > までで囲まれた領域。<a> を「aタグ」のように読んでいる。",
+        "<から>までで囲まれた領域。<a>を「aタグ」のように読んでいる。",
       referencePage: "/docs/trial-session/html/",
     },
     attribute: {
@@ -106,32 +106,31 @@ export default {
       referencePage: "/docs/trial-session/html/",
     },
     element: {
-      name: "HTML 要素",
+      name: "HTML要素",
       definition: "HTMLの開始タグから終了タグまでの領域。",
       referencePage: "/docs/trial-session/html/",
     },
     endTag: {
       name: "終了タグ",
-      definition:
-        "要素の終端を表す。 <div>内容</div> ならば </div> が終了タグ。",
+      definition: "要素の終端を表す。<div>内容</div>ならば</div>が終了タグ。",
       referencePage: "/docs/trial-session/html/",
     },
     css: {
       name: "CSS",
       definition:
-        "ウェブサイトの見た目をカスタマイズするための言語。 HTML 要素 の style 属性は CSS を用いて記述する。",
+        "ウェブサイトの見た目をカスタマイズするための言語。HTML要素のstyle属性はCSSを用いて記述する。",
       referencePage: "/docs/trial-session/css/",
     },
     styleAttribute: {
       name: "style 属性",
       definition:
-        "表示可能な多くの HTML 要素に対して設定できる、見た目をカスタマイズするための属性。",
+        "表示可能な多くのHTML要素に対して設定できる、見た目をカスタマイズするための属性。",
       referencePage: "/docs/trial-session/css/",
     },
     cssProperty: {
       name: "プロパティ (CSS)",
       definition:
-        "CSS により設定できる見た目の種類。例えば color は文字色、font-size は文字の大きさ。",
+        "CSSにより設定できる見た目の種類。例えばcolorは文字色、font-sizeは文字の大きさ。",
       referencePage: "/docs/trial-session/css/",
     },
     javascriptStatement: {
@@ -160,12 +159,12 @@ export default {
     javascriptOperator: {
       name: "演算子 (JavaScript)",
       definition:
-        "JavaScript において、主に値に対して作用し、別の値を得るための記号。",
+        "JavaScriptにおいて、主に値に対して作用し、別の値を得るための記号。",
       referencePage: "/docs/trial-session/expressions/",
     },
     javascriptExpression: {
       name: "式 (JavaScript)",
-      definition: "JavaScript において、計算・処理されて値を生成するまとまり。",
+      definition: "JavaScriptにおいて、計算・処理されて値を生成するまとまり。",
       referencePage: "/docs/trial-session/expressions/",
     },
     javascriptEvaluation: {
@@ -176,7 +175,7 @@ export default {
     javascriptOperatorPriority: {
       name: "演算子の優先順位 (JavaScript)",
       definition:
-        "複数の演算子を含む式の評価順序を決定するための指標。例えば、乗算演算子は加算演算子より優先順位が高いため、 3 + 4 * 5 は 3 + (4 * 5) と評価される。",
+        "複数の演算子を含む式の評価順序を決定するための指標。例えば、乗算演算子は加算演算子より優先順位が高いため、3 + 4 * 5は3 + (4 * 5)と評価される。",
       referencePage: "/docs/trial-session/expressions/",
     },
     javascriptStringConcatenation: {
@@ -222,7 +221,7 @@ export default {
     javascriptBoolean: {
       name: "論理値 (JavaScript)",
       definition:
-        "JavaScriptにおける値の一種で、真偽を表すもの。true または false の2種類しかない。",
+        "JavaScriptにおける値の一種で、真偽を表すもの。trueまたはfalseの2種類しかない。",
       referencePage: "/docs/trial-session/boolean/",
     },
     javascriptIfStatement: {
@@ -248,7 +247,7 @@ export default {
       referencePage: "/docs/trial-session/functions/",
     },
     javascriptPass: {
-      name: "～ (値) を ～ (関数) に渡す",
+      name: "～ (値) を～ (関数) に渡す",
       definition: "JavaScriptの関数に値を引数として設定して実行すること。",
       referencePage: "/docs/trial-session/functions/",
     },
@@ -260,7 +259,7 @@ export default {
     javascriptReturn: {
       name: "～ (値) を返す (JavaScript)",
       definition:
-        "関数の実行が終了し、式の評価結果の値が確定すること。return 文により実現できる。",
+        "関数の実行が終了し、式の評価結果の値が確定すること。return文により実現できる。",
       referencePage: "/docs/trial-session/functions/",
     },
     javascriptScope: {
@@ -294,8 +293,7 @@ export default {
     },
     dom: {
       name: "DOM",
-      definition:
-        "HTML 構造を JavaScript のオブジェクトとして扱うための枠組み。",
+      definition: "HTML構造をJavaScriptのオブジェクトとして扱うための枠組み。",
       referencePage: "/docs/trial-session/dom/",
     },
     events: {
@@ -307,7 +305,7 @@ export default {
     eventHandler: {
       name: "イベントハンドラ",
       definition:
-        "イベント発生時の処理を行う仕組み。onclick 関数、onload 関数など、on キーワードにイベント名をつけた名称になっている。",
+        "イベント発生時の処理を行う仕組み。onclick関数、onload関数など、onキーワードにイベント名をつけた名称になっている。",
       referencePage: "/docs/trial-session/events/",
     },
     javascriptClass: {
@@ -318,25 +316,25 @@ export default {
     },
     javascriptInstance: {
       name: "インスタンス (JavaScript)",
-      definition: "new 演算子をクラスに適用して生成されるオブジェクトのこと。",
+      definition: "new演算子をクラスに適用して生成されるオブジェクトのこと。",
       referencePage: "/docs/browser-apps/class/",
     },
     javascriptConstructor: {
       name: "コンストラクタ (JavaScript)",
       definition:
-        "インスタンスを作成するタイミング（new 演算子をクラスに適用するタイミング）で実行される特殊なメソッド。constructor という名前で定義する必要がある。コンストラクタを定義すると、インスタンスを生成するときにプロパティの設定も同時に行うことができる。",
+        "インスタンスを作成するタイミング（new演算子をクラスに適用するタイミング）で実行される特殊なメソッド。constructorという名前で定義する必要がある。コンストラクタを定義すると、インスタンスを生成するときにプロパティの設定も同時に行うことができる。",
       referencePage: "/docs/browser-apps/class/",
     },
     javascriptMethod: {
       name: "メソッド (JavaScript)",
       definition:
-        "オブジェクトに対して定義された関数。メソッド内ではメソッドが定義されたオブジェクトを this キーワードを用いて参照できる。",
+        "オブジェクトに対して定義された関数。メソッド内ではメソッドが定義されたオブジェクトをthisキーワードを用いて参照できる。",
       referencePage: "/docs/browser-apps/class/",
     },
     arrowFunction: {
       name: "アロー関数",
       definition:
-        "JavaScript において関数を生成するための式のひとつ。=> という記号が矢のように見えることから命名された。",
+        "JavaScriptにおいて関数を生成するための式のひとつ。=>という記号が矢のように見えることから命名された。",
       referencePage: "/docs/browser-apps/anonymous-function/",
     },
     callbackFunction: {
@@ -347,7 +345,7 @@ export default {
     javascriptModule: {
       name: "モジュール (JavaScript)",
       definition:
-        "独立したプログラムの塊。JavaScript では、通常 1 つのファイルがモジュールとして扱われる。Node.js では、拡張子が .mjs の場合 import 文を用いてインポートして利用する。",
+        "独立したプログラムの塊。JavaScriptでは、通常1つのファイルがモジュールとして扱われる。Node.jsでは、拡張子が.mjsの場合import文を用いてインポートして利用する。",
       referencePage: "/docs/web-servers/module/",
     },
     library: {
@@ -358,13 +356,13 @@ export default {
     serverClient: {
       name: "サーバーとクライアント",
       definition:
-        "サービスを提供する側のコンピューターやソフトウェアをサーバー、提供される側のコンピューターやソフトウェアをクライアントと呼ぶ。例えば Google Chrome などの Web ブラウザは、Web における代表的なクライアントソフトウェアである。",
+        "サービスを提供する側のコンピューターやソフトウェアをサーバー、提供される側のコンピューターやソフトウェアをクライアントと呼ぶ。例えばGoogle ChromeなどのWebブラウザは、Webにおける代表的なクライアントソフトウェアである。",
       referencePage: "/docs/web-servers/server/",
     },
     json: {
       name: "JSON",
       definition:
-        "複雑なデータ構造を JavaScript オブジェクトに似た形式で文字列として表現するための記法。",
+        "複雑なデータ構造をJavaScriptオブジェクトに似た形式で文字列として表現するための記法。",
       referencePage: "/docs/web-servers/module/",
     },
     requestResponse: {
@@ -376,31 +374,31 @@ export default {
     queryString: {
       name: "クエリ文字列",
       definition:
-        "URL の末尾に付与することのできる追加のパラメーター。辞書型のデータを表すことができる。key1=value1&key2=value2 といった構造。日本語文字などはパーセントエンコーディングする必要がある。",
+        "URLの末尾に付与することのできる追加のパラメーター。辞書型のデータを表すことができる。key1=value1&key2=value2といった構造。日本語文字などはパーセントエンコーディングする必要がある。",
       referencePage: "/docs/web-servers/form/",
     },
     httpHeaderBody: {
       name: "リクエスト・レスポンスのヘッダ・ボディ (HTTP)",
       definition:
-        "HTTP においてリクエストやレスポンスは主にヘッダと呼ばれる領域とボディと呼ばれる領域に分かれている。リクエストやレスポンスの本体はボディの部分に格納されており、ヘッダは付加的な情報を与えるために用いられる。なお、GET リクエストではリクエストボディを使用できない。",
+        "HTTPにおいてリクエストやレスポンスは主にヘッダと呼ばれる領域とボディと呼ばれる領域に分かれている。リクエストやレスポンスの本体はボディの部分に格納されており、ヘッダは付加的な情報を与えるために用いられる。なお、GETリクエストではリクエストボディを使用できない。",
       referencePage: "/docs/web-servers/get-post/",
     },
     httpMethod: {
-      name: "HTTP メソッド",
+      name: "HTTPメソッド",
       definition:
-        "HTTP リクエストの種類。GET や POST などがある。GET リクエストにはリクエストボディが存在しないが、POST リクエストでは利用できる。",
+        "HTTPリクエストの種類。GETやPOSTなどがある。GETリクエストにはリクエストボディが存在しないが、POSTリクエストでは利用できる。",
       referencePage: "/docs/web-servers/get-post/",
     },
     npxCommand: {
       name: "npx コマンド",
       definition:
-        "npm 付属のコマンド。インストールした npm パッケージを直接実行する機能を持つ。",
+        "npm付属のコマンド。インストールしたnpmパッケージを直接実行する機能を持つ。",
       referencePage: "/docs/web-servers/database/",
     },
     asynchronousProcess: {
       name: "非同期処理",
       definition:
-        "処理を実行する際、その完了を待たずに呼び出し元の処理が続行されるような処理。JavaScript では、async キーワードをつけた関数は非同期処理を行うための関数となり、内部では await キーワードにより他の非同期処理を呼び出してその結果を待機できるようになる。",
+        "処理を実行する際、その完了を待たずに呼び出し元の処理が続行されるような処理。JavaScriptでは、asyncキーワードをつけた関数は非同期処理を行うための関数となり、内部ではawaitキーワードにより他の非同期処理を呼び出してその結果を待機できるようになる。",
       referencePage: "/docs/web-servers/database/",
     },
     api: {
@@ -412,37 +410,37 @@ export default {
     thread: {
       name: "スレッド",
       definition:
-        "コンピューターがプログラムの順番どおりに 1 つずつ処理を行う機構。JavaScriptではメインスレッドと呼ばれる単一のスレッドで主に処理が実行される。",
+        "コンピューターがプログラムの順番どおりに1つずつ処理を行う機構。JavaScriptではメインスレッドと呼ばれる単一のスレッドで主に処理が実行される。",
       referencePage: "/docs/web-servers/database/",
     },
     transpile: {
       name: "トランスパイル",
       definition:
-        "プログラムを同じ意味を持つ別のプログラムへと変換すること。Web 開発では、通常変換の結果ウェブブラウザが解釈できる JavaScript が生成される。Babel が有名。",
+        "プログラムを同じ意味を持つ別のプログラムへと変換すること。Web開発では、通常変換の結果ウェブブラウザが解釈できるJavaScriptが生成される。Babelが有名。",
       referencePage: "/docs/advanced/bundler/",
     },
     moduleBundler: {
       name: "モジュールバンドラ",
       definition:
-        "複数の JavaScript モジュールをまとめてひとつにするためのソフトウェア。webpack が有名。",
+        "複数のJavaScriptモジュールをまとめてひとつにするためのソフトウェア。webpackが有名。",
       referencePage: "/docs/advanced/bundler/",
     },
     jsx: {
       name: "JSX",
       definition:
-        "JavaScript の拡張構文で、React などと共に用いられる。JSX が有効な JavaScript では、 HTML に似た構文の式により特定の種類のオブジェクトを作成できる。拡張子は .jsx で、TypeScript とともに用いる場合は .tsx。",
+        "JavaScriptの拡張構文で、Reactなどと共に用いられる。JSXが有効なJavaScriptでは、HTMLに似た構文の式により特定の種類のオブジェクトを作成できる。拡張子は.jsxで、TypeScriptとともに用いる場合は.tsx。",
       referencePage: "/docs/advanced/react/",
     },
     javascriptTruthyFalsy: {
-      name: "truthy と falsy (JavaScript)",
+      name: "truthyとfalsy (JavaScript)",
       definition:
-        "JavaScript では、数値のゼロ、空文字列、null、undefined、NaN を falsy、それ以外の全ての値を truthy とみなす。if 文は条件式の結果が truthy であるか falsy であるかによって分岐を行う。",
+        "JavaScriptでは、数値のゼロ、空文字列、null、undefined、NaNをfalsy、それ以外の全ての値をtruthyとみなす。if文は条件式の結果がtruthyであるかfalsyであるかによって分岐を行う。",
       referencePage: "/docs/advanced/react/",
     },
     mutableImmutable: {
       name: "ミュータブルとイミュータブル",
       definition:
-        "オブジェクトの内部が変更可能であるとき、そのオブジェクトはミュータブルであるといい、変更不能である場合はイミュータブルであるという。React などのライブラリでは状態を表すオブジェクトはイミュータブルであることが求められる。これは、状態が変化する際に参照も変化することを保証するためである。",
+        "オブジェクトの内部が変更可能であるとき、そのオブジェクトはミュータブルであるといい、変更不能である場合はイミュータブルであるという。Reactなどのライブラリでは状態を表すオブジェクトはイミュータブルであることが求められる。これは、状態が変化する際に参照も変化することを保証するためである。",
       referencePage: "/docs/browser-apps/reference/",
     },
   },
diff --git a/src/components/Term/type-map.js b/src/components/Term/type-map.js
index 78adc8307..34cfc0204 100644
--- a/src/components/Term/type-map.js
+++ b/src/components/Term/type-map.js
@@ -33,7 +33,7 @@ const typeMap = new Map([
   ["開始タグ", "startTag"],
   ["タグ", "tag"],
   ["属性", "attribute"],
-  ["HTML 要素", "element"],
+  ["HTML要素", "element"],
   ["要素", "element"],
   ["終了タグ", "endTag"],
   ["CSS", "css"],
@@ -52,7 +52,7 @@ const typeMap = new Map([
   ["スネークケース", "snakeCase"],
   ["パスカルケース", "pascalCase"],
   ["論理値", "javascriptBoolean"],
-  ["if 文", "javascriptIfStatement"],
+  ["if文", "javascriptIfStatement"],
   ["制御構造", "javascriptControlFlow"],
   ["制御構文", "javascriptControlFlow"], // ここ 1-1 (Term以外では8-2) でした。とりあえず両方対応させます
   ["関数", "javascriptFunction"],
@@ -80,7 +80,7 @@ const typeMap = new Map([
   ["サーバー", "serverClient"],
   ["クライアント", "serverClient"],
   ["JSON", "json"],
-  ["HTTP リクエスト", "requestResponse"],
+  ["HTTPリクエスト", "requestResponse"],
   ["リクエスト", "requestResponse"],
   ["レスポンス", "requestResponse"],
   ["クエリ文字列", "queryString"],
@@ -88,9 +88,9 @@ const typeMap = new Map([
   ["リクエストヘッダ", "httpHeaderBody"],
   ["リクエストボディ", "httpHeaderBody"],
   ["レスポンスボディ", "httpHeaderBody"],
-  ["HTTP メソッド", "httpMethod"],
-  ["GET リクエスト", "httpMethod"],
-  ["POST リクエスト", "httpMethod"],
+  ["HTTPメソッド", "httpMethod"],
+  ["GETリクエスト", "httpMethod"],
+  ["POSTリクエスト", "httpMethod"],
   ["npx コマンド", "npxCommand"],
   ["非同期処理", "asynchronousProcess"],
   ["非同期関数", "asynchronousProcess"],