不要な半角スペースを削除 (#801)

Author: chvmvd

docs/1-trial-session/05-variables/index.mdx

@@ -46,8 +46,9 @@ document.write(myName);
 
 :::tip
 
-<Term>変数</Term>
-に適切な命名をすることは非常に重要です。以下の例を見てみましょう。
+{/* prettier-ignore */}
+<Term>変数</Term>に適切な命名をすることは非常に重要です。
+以下の例を見てみましょう。
 
 ```javascript
 const a = 500;

docs/2-browser-apps/01-inspector/index.mdx

@@ -38,14 +38,14 @@ Google Chrome以外のブラウザにも開発者ツールは搭載されてい
 
 ## デバッガ
 
-**デバッガ** は、プログラムのバグを探し、解決するために役立つソフトウェアです。ブラウザの開発者ツールには、通常JavaScriptのデバッガが搭載されています。
+**デバッガ**は、プログラムのバグを探し、解決するために役立つソフトウェアです。ブラウザの開発者ツールには、通常JavaScriptのデバッガが搭載されています。
 
 :::info
 
 デバッガを使うために知っておくべきことは以下の4つです。
 
 - **ブレークポイント**  
-  設置した行でプログラムの実行が一時停止するもので、Google Chromeの開発者ツールではSourcesタブからファイルを開くと表示される行番号をクリックすると設置できます。
+  設置した行でプログラムの実行が一時停止するもので、Google Chromeの開発者ツールでは`Sources`タブからファイルを開くと表示される行番号をクリックすると設置できます。
 
 - **ステップオーバーボタン** (<VscDebugStepOver style={{ verticalAlign: "middle" }} />)  
   現在の行を実行し、次の行に進む操作です。現在止まっている行で関数が呼び出される場合は、その関数内の処理を全て実行して次の行で止まるものです。

docs/3-web-servers/03-node-js/index.mdx

@@ -105,7 +105,7 @@ console.log("Hello World!");
 
 ## 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`タブに出力されるので注意しましょう。
 

docs/3-web-servers/04-module/index.mdx

@@ -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";

docs/3-web-servers/05-server/index.mdx

@@ -8,7 +8,7 @@ import RequestResponseSlideShow from "./request-response-slide-show";
 
 ## ウェブサイトが動作する仕組み
 
-[「Webプログラミングの基礎を学ぼう」](/docs/trial-session/) の章では、ウェブサイトを表示するためにHTMLファイルとJavaScriptファイルを作成し、ブラウザから開きました。
+[「Webプログラミングの基礎を学ぼう」](/docs/trial-session/)の章では、ウェブサイトを表示するためにHTMLファイルとJavaScriptファイルを作成し、ブラウザから開きました。
 しかし、一般的なウェブサイトを閲覧する際は、HTMLファイルやJavaScriptファイルの存在を意識することはありません。
 これは、Webでは、通常インターネットを介してデータをやり取りするためです。
 
@@ -41,7 +41,7 @@ Webにおいて、HTML、CSS、JavaScriptは、サーバーがクライアント
 
 ## Expressパッケージを用いてWebサーバーを構築する
 
-[Expressパッケージ](https://www.npmjs.com/package/express) を用いると、簡単にWebサーバーを構築できます。
+[Expressパッケージ](https://www.npmjs.com/package/express)を用いると、簡単にWebサーバーを構築できます。
 
 まずは`express`パッケージをnpmでインストールします。
 
@@ -151,7 +151,7 @@ app.listen(3000);
 
 1. 利用者が、ブラウザのアドレスバーに`http://localhost:3000/`というURLを入力します。
 2. ブラウザは、`localhost:3000`で起動しているExpressのサーバーに対して、`/`というパスに対するHTTPリクエストを送信します。
-3. Expressは`/`に対するHTTPリクエストを受け取り、**[4行目]** の関数を実行します。引数として、Expressは次に示す2つのオブジェクトを生成して渡します。
+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>という文字列をレスポンスとして送信します。

docs/3-web-servers/09-cookie/index.mdx

@@ -14,7 +14,7 @@ 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)
 
@@ -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 />
 

docs/4-advanced/01-fetch-api/index.mdx

@@ -8,7 +8,7 @@ import chatAppVideo from "./chat-app.mp4";
 
 これまで、ブラウザが<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なのかに注意しながら、次のプログラムを実行してみましょう。
@@ -153,7 +153,7 @@ app.listen(3000);
 
 ### ヒント
 
-[掲示板を作ったとき](/docs/web-servers/get-post/) と同じく、`messages`という配列をサーバー側に用意し、メッセージが送信されたらその配列に要素を追加するようにしましょう。
+[掲示板を作ったとき](/docs/web-servers/get-post/)と同じく、`messages`という配列をサーバー側に用意し、メッセージが送信されたらその配列に要素を追加するようにしましょう。
 
 ```javascript title="main.mjs"
 const messages = [];

docs/4-advanced/02-bundler/index.mdx

@@ -13,8 +13,9 @@ JavaScriptは、当初はWebサイトに簡易的な動きを追加させるた
 
 ### <Term>トランスパイラ</Term>
 
-<Term>**トランスパイラ**</Term>
-は、ソースコードを別のソースコードに変換するためのプログラムです。JavaScriptにおいてトランスパイラが必要になるのは、主に2つの理由によります。
+{/* prettier-ignore */}
+<Term>**トランスパイラ**</Term>は、ソースコードを別のソースコードに変換するためのプログラムです。
+JavaScriptにおいてトランスパイラが必要になるのは、主に2つの理由によります。
 
 ひとつは、**最新の機能を使用するため**です。JavaScriptの言語仕様は、[Ecma International](https://www.ecma-international.org/)の[TC39](https://tc39.es/)によって作成されていますが、新しく策定された仕様は、まだブラウザなどによって実装されていない場合があります。[Babel](https://babeljs.io/)は、そういった最新の言語仕様に沿って書かれたプログラムを変換し、古い仕様の範囲内で解釈できるプログラムに変換するための、最も有名な<Term>トランスパイラ</Term>です。
 

docs/4-advanced/03-typescript/index.mdx

@@ -340,7 +340,7 @@ Viteは、標準でTypeScriptのトランスパイラが内蔵されています
 
 この方法でプロジェクトを作成すると、`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`コマンドによりこのファイルを生成できます。
 
 :::
 

docs/4-advanced/04-react/index.mdx

@@ -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";