Termコンポーネントをリファクタリング

Author: chvmvd

docs/1-trial-session/03-css/index.mdx

@@ -20,9 +20,9 @@ title: CSS
 ![Hello World!](./red-hello-world.png)
 
 {/* prettier-ignore */}
-<Term>`style`属性</Term>には、<Term type="cssProperty">**プロパティ**</Term>と呼ばれるスタイルの種類と、その値を、コロン記号で繋いだ形式で記述します。また、複数のプロパティを指定する場合は、セミコロンで区切ります。
+<Term>`style`属性</Term>には、<Term name="プロパティ (CSS)">**プロパティ**</Term>と呼ばれるスタイルの種類と、その値を、コロン記号で繋いだ形式で記述します。また、複数のプロパティを指定する場合は、セミコロンで区切ります。
 
-この例では、`color`という<Term type="cssProperty">プロパティ</Term>に`red`という値を設定し、`font-size`という<Term type="cssProperty">プロパティ</Term>に`24px`という値を設定しています。これにより、`Hello World!`という文字列が、赤色で、24ピクセルの大きさで表示されます。
+この例では、`color`という<Term name="プロパティ (CSS)">プロパティ</Term>に`red`という値を設定し、`font-size`という<Term name="プロパティ (CSS)">プロパティ</Term>に`24px`という値を設定しています。これにより、`Hello World!`という文字列が、赤色で、24ピクセルの大きさで表示されます。
 
 :::tip[`div`要素]
 

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

@@ -28,16 +28,16 @@ document.write(3);
 document.write(3 + 4);
 ```
 
-## <Term>演算子</Term>の<Term type="javascriptOperatorPriority">優先順位</Term>
+## <Term>演算子</Term>の<Term name="演算子の優先順位 (JavaScript)">優先順位</Term>
 
 {/* prettier-ignore */}
-<Term>演算子</Term>には、<Term type="javascriptOperatorPriority">優先順位</Term>が設定されています。
+<Term>演算子</Term>には、<Term name="演算子の優先順位 (JavaScript)">優先順位</Term>が設定されています。
 
 ```javascript title="script.js"
 document.write(3 + 4 * 5);
 ```
 
-`*`（乗算<Term>演算子</Term>）は`+`より<Term type="javascriptOperatorPriority">優先順位</Term>が高く設定されているため、上記のコードの実行結果は`23`となります。
+`*`（乗算<Term>演算子</Term>）は`+`より<Term name="演算子の優先順位 (JavaScript)">優先順位</Term>が高く設定されているため、上記のコードの実行結果は`23`となります。
 
 このコードにおいて、`3 + 4 * 5`や、`4 * 5`、`4`を<Term>**式**</Term>と呼びます。また、<Term>式</Term>が計算され、その結果としての<Term>値</Term>が確定することを式が<Term>**評価**</Term>されるといいます。
 

docs/1-trial-session/07-boolean/index.mdx

@@ -77,7 +77,7 @@ const height = 155;
 const canRideRollerCoasters = age >= 10 && height >= 120; // true
 ```
 
-`&&`や`||`よりも比較<Term>演算子</Term>の方が<Term type="javascriptOperatorPriority">優先順位</Term>が高いため、複数の条件を「かつ」「または」などで組み合わせることは容易です。
+`&&`や`||`よりも比較<Term>演算子</Term>の方が<Term name="演算子の優先順位 (JavaScript)">優先順位</Term>が高いため、複数の条件を「かつ」「または」などで組み合わせることは容易です。
 
 :::info
 
@@ -114,7 +114,7 @@ document.write(isTanakaWinner); // true
 
 :::tip
 
-`+`, `-`, `*`, `/`などの算術演算子は、比較演算子よりも<Term type="javascriptOperatorPriority">優先順位</Term>が高いです。
+`+`, `-`, `*`, `/`などの算術演算子は、比較演算子よりも<Term name="演算子の優先順位 (JavaScript)">優先順位</Term>が高いです。
 
 ```javascript
 const isBig = 10 + 5 > 10 - 3; // 15 > 7 なので true

docs/1-trial-session/13-dom/index.mdx

@@ -69,7 +69,7 @@ greetingType.textContent = "evening";
 
 ## <Term>HTML要素</Term>のスタイルを変更する
 
-`document.getElementById`<Term>関数</Term>が返す<Term>オブジェクト</Term>の`style`<Term>プロパティ</Term>は、その要素の <Term>`style`属性</Term>と対応します。 **`style`<Term>プロパティ</Term>に格納されている<Term>値</Term>自体も<Term>オブジェクト</Term>** となっており、その各<Term>プロパティ</Term>がCSSの<Term type="cssProperty">プロパティ</Term>に対応します。
+`document.getElementById`<Term>関数</Term>が返す<Term>オブジェクト</Term>の`style`<Term>プロパティ</Term>は、その要素の <Term>`style`属性</Term>と対応します。 **`style`<Term>プロパティ</Term>に格納されている<Term>値</Term>自体も<Term>オブジェクト</Term>** となっており、その各<Term>プロパティ</Term>がCSSの<Term name="プロパティ (CSS)">プロパティ</Term>に対応します。
 
 ```js title="script.js"
 element.style.backgroundColor = "red";
@@ -80,7 +80,7 @@ element.style.backgroundColor = "red";
 ![JavaScriptからスタイルを操作する](./change-styles.png)
 
 {/* prettier-ignore */}
-<Term>CSS</Term>の<Term type="cssProperty">プロパティ</Term>名である`background-color`は、内部にハイフンが含まれているため、`element.style.background-color`のように指定してしまうと、ハイフンが減算<Term>演算子</Term>として解釈されてしまいます。`style`<Term>プロパティ</Term>では、<Term>CSS</Term>の<Term type="cssProperty">プロパティ</Term>名は<Term>キャメルケース</Term>として指定する必要があることに注意してください。
+<Term>CSS</Term>の<Term name="プロパティ (CSS)">プロパティ</Term>名である`background-color`は、内部にハイフンが含まれているため、`element.style.background-color`のように指定してしまうと、ハイフンが減算<Term>演算子</Term>として解釈されてしまいます。`style`<Term>プロパティ</Term>では、<Term>CSS</Term>の<Term name="プロパティ (CSS)">プロパティ</Term>名は<Term>キャメルケース</Term>として指定する必要があることに注意してください。
 
 ### 確認問題
 

docs/3-web-servers/07-fetch-api-post/index.mdx

@@ -12,7 +12,7 @@ Fetch APIを用いると、サーバーからデータを取得するだけで
 
 [Expressによるサーバー構築](../server/)の節では、<Term>クライアント</Term>から<Term>サーバー</Term>への要求を<Term>リクエスト</Term>と呼び、その応答を<Term>レスポンス</Term>と呼ぶことを学びました。HTTPのリクエストやレスポンスは、主に3つの要素から構成されます。
 
-- **制御情報**: リクエストやレスポンスの基本的な情報を含む部分。リクエストには、<Term type="httpMethod">**メソッド**</Term>と呼ばれるHTTPリクエストの種類を指定するための情報や、リクエストの対象となるパスなどが含まれます。レスポンスには、<Term>**ステータスコード**</Term>と呼ばれる、リクエストの結果を示すコードが含まれます。
+- **制御情報**: リクエストやレスポンスの基本的な情報を含む部分。リクエストには、<Term name="メソッド (HTTP)">**メソッド**</Term>と呼ばれるHTTPリクエストの種類を指定するための情報や、リクエストの対象となるパスなどが含まれます。レスポンスには、<Term>**ステータスコード**</Term>と呼ばれる、リクエストの結果を示すコードが含まれます。
 - **ヘッダー**: リクエストやレスポンスに関する追加情報を含む部分。名前と値のペアで構成され、リクエストやレスポンスの内容をより詳細に説明します。
 - **ボディ**: リクエストやレスポンスの実際のデータ。リクエストのボディには、サーバーに送信するデータが含まれ、レスポンスのボディには、サーバーからクライアントに返されるデータが含まれます。
 

docs/4-advanced/01-cookie/index.mdx

@@ -24,7 +24,7 @@ IDとパスワードによる認証は、Webアプリケーションにおいて
 
 Webアプリケーションのクライアントが、サーバーから発行された証明書を保管しておく手段として、もっともよく用いられるのが**Cookie**です。Cookieは、ブラウザ内に保存される小さなデータで、文字列のキーと値のペアとして保存されます。
 
-Cookieを操作するための最も基本的な方法は、HTTPリクエストやレスポンスの<Term type="httpHeaderBody">ヘッダ</Term>を用いて送受信することです。HTTPレスポンスヘッダに`Set-Cookie`ヘッダを含めることにより、次回以降のリクエストで、クライアントはそのデータを`Cookie`リクエストヘッダに入れて毎回送信します。例えば、
+Cookieを操作するための最も基本的な方法は、HTTPリクエストやレスポンスの<Term name="リクエスト・レスポンスのヘッダ・ボディ (HTTP)">ヘッダ</Term>を用いて送受信することです。HTTPレスポンスヘッダに`Set-Cookie`ヘッダを含めることにより、次回以降のリクエストで、クライアントはそのデータを`Cookie`リクエストヘッダに入れて毎回送信します。例えば、
 
 - `Set-Cookie: name=tanaka`
 - `Set-Cookie: age=20`

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

@@ -88,7 +88,7 @@ dist/assets/index-_AYE_jbl.js   2.58 kB │ gzip: 1.40 kB
 ✓ built in 130ms
 ```
 
-これにより、カレントディレクトリに`dist`ディレクトリが作成され、<Term>トランスパイル</Term>と<Term type="moduleBundler">バンドル</Term>の結果が格納されます。
+これにより、カレントディレクトリに`dist`ディレクトリが作成され、<Term>トランスパイル</Term>と<Term name="モジュールバンドラ">バンドル</Term>の結果が格納されます。
 
 出力されたファイルを元のファイルと比較してみましょう。元の`index.html`や`main.js`が、変換された状態で出力されていることがわかります。ディレクトリごと[Netlify Drop](/docs/trial-session/deploy-application/)などにアップロードすれば使用可能になるでしょう。