diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx
index 6ec61b5f0..5d68cafa0 100644
--- a/docs/1-trial-session/03-css/index.mdx
+++ b/docs/1-trial-session/03-css/index.mdx
@@ -20,9 +20,9 @@ title: CSS
{/* prettier-ignore */}
-`style`属性には、**プロパティ**と呼ばれるスタイルの種類と、その値を、コロン記号で繋いだ形式で記述します。また、複数のプロパティを指定する場合は、セミコロンで区切ります。
+`style`属性には、**プロパティ**と呼ばれるスタイルの種類と、その値を、コロン記号で繋いだ形式で記述します。また、複数のプロパティを指定する場合は、セミコロンで区切ります。
-この例では、`color`というプロパティに`red`という値を設定し、`font-size`というプロパティに`24px`という値を設定しています。これにより、`Hello World!`という文字列が、赤色で、24ピクセルの大きさで表示されます。
+この例では、`color`というプロパティに`red`という値を設定し、`font-size`というプロパティに`24px`という値を設定しています。これにより、`Hello World!`という文字列が、赤色で、24ピクセルの大きさで表示されます。
:::tip[`div`要素]
diff --git a/docs/1-trial-session/05-expressions/index.mdx b/docs/1-trial-session/05-expressions/index.mdx
index 4bc4afb1e..4db31ff34 100644
--- a/docs/1-trial-session/05-expressions/index.mdx
+++ b/docs/1-trial-session/05-expressions/index.mdx
@@ -28,16 +28,16 @@ document.write(3);
document.write(3 + 4);
```
-## 演算子の優先順位
+## 演算子の優先順位
{/* prettier-ignore */}
-演算子には、優先順位が設定されています。
+演算子には、優先順位が設定されています。
```javascript title="script.js"
document.write(3 + 4 * 5);
```
-`*`（乗算演算子）は`+`より優先順位が高く設定されているため、上記のコードの実行結果は`23`となります。
+`*`（乗算演算子）は`+`より優先順位が高く設定されているため、上記のコードの実行結果は`23`となります。
このコードにおいて、`3 + 4 * 5`や、`4 * 5`、`4`を**式**と呼びます。また、式が計算され、その結果としての値が確定することを式が**評価**されるといいます。
diff --git a/docs/1-trial-session/07-boolean/index.mdx b/docs/1-trial-session/07-boolean/index.mdx
index 43397e484..09dc89bb4 100644
--- a/docs/1-trial-session/07-boolean/index.mdx
+++ b/docs/1-trial-session/07-boolean/index.mdx
@@ -77,7 +77,7 @@ const height = 155;
const canRideRollerCoasters = age >= 10 && height >= 120; // true
```
-`&&`や`||`よりも比較演算子の方が優先順位が高いため、複数の条件を「かつ」「または」などで組み合わせることは容易です。
+`&&`や`||`よりも比較演算子の方が優先順位が高いため、複数の条件を「かつ」「または」などで組み合わせることは容易です。
:::info
@@ -114,7 +114,7 @@ document.write(isTanakaWinner); // true
:::tip
-`+`, `-`, `*`, `/`などの算術演算子は、比較演算子よりも優先順位が高いです。
+`+`, `-`, `*`, `/`などの算術演算子は、比較演算子よりも優先順位が高いです。
```javascript
const isBig = 10 + 5 > 10 - 3; // 15 > 7 なので true
diff --git a/docs/1-trial-session/13-dom/index.mdx b/docs/1-trial-session/13-dom/index.mdx
index c636a8215..1e275479b 100644
--- a/docs/1-trial-session/13-dom/index.mdx
+++ b/docs/1-trial-session/13-dom/index.mdx
@@ -69,7 +69,7 @@ greetingType.textContent = "evening";
## HTML要素のスタイルを変更する
-`document.getElementById`関数が返すオブジェクトの`style`プロパティは、その要素の `style`属性と対応します。 **`style`プロパティに格納されている値自体もオブジェクト** となっており、その各プロパティがCSSのプロパティに対応します。
+`document.getElementById`関数が返すオブジェクトの`style`プロパティは、その要素の `style`属性と対応します。 **`style`プロパティに格納されている値自体もオブジェクト** となっており、その各プロパティがCSSのプロパティに対応します。
```js title="script.js"
element.style.backgroundColor = "red";
@@ -80,7 +80,7 @@ element.style.backgroundColor = "red";
{/* prettier-ignore */}
-CSSのプロパティ名である`background-color`は、内部にハイフンが含まれているため、`element.style.background-color`のように指定してしまうと、ハイフンが減算演算子として解釈されてしまいます。`style`プロパティでは、CSSのプロパティ名はキャメルケースとして指定する必要があることに注意してください。
+CSSのプロパティ名である`background-color`は、内部にハイフンが含まれているため、`element.style.background-color`のように指定してしまうと、ハイフンが減算演算子として解釈されてしまいます。`style`プロパティでは、CSSのプロパティ名はキャメルケースとして指定する必要があることに注意してください。
### 確認問題
diff --git a/docs/3-web-servers/07-fetch-api-post/index.mdx b/docs/3-web-servers/07-fetch-api-post/index.mdx
index 0f51eac50..a9eb8df64 100644
--- a/docs/3-web-servers/07-fetch-api-post/index.mdx
+++ b/docs/3-web-servers/07-fetch-api-post/index.mdx
@@ -12,7 +12,7 @@ Fetch APIを用いると、サーバーからデータを取得するだけで
[Expressによるサーバー構築](../server/)の節では、クライアントからサーバーへの要求をリクエストと呼び、その応答をレスポンスと呼ぶことを学びました。HTTPのリクエストやレスポンスは、主に3つの要素から構成されます。
-- **制御情報**: リクエストやレスポンスの基本的な情報を含む部分。リクエストには、**メソッド**と呼ばれるHTTPリクエストの種類を指定するための情報や、リクエストの対象となるパスなどが含まれます。レスポンスには、**ステータスコード**と呼ばれる、リクエストの結果を示すコードが含まれます。
+- **制御情報**: リクエストやレスポンスの基本的な情報を含む部分。リクエストには、**メソッド**と呼ばれるHTTPリクエストの種類を指定するための情報や、リクエストの対象となるパスなどが含まれます。レスポンスには、**ステータスコード**と呼ばれる、リクエストの結果を示すコードが含まれます。
- **ヘッダー**: リクエストやレスポンスに関する追加情報を含む部分。名前と値のペアで構成され、リクエストやレスポンスの内容をより詳細に説明します。
- **ボディ**: リクエストやレスポンスの実際のデータ。リクエストのボディには、サーバーに送信するデータが含まれ、レスポンスのボディには、サーバーからクライアントに返されるデータが含まれます。
diff --git a/docs/4-advanced/01-cookie/index.mdx b/docs/4-advanced/01-cookie/index.mdx
index 8db1f0fd0..3d128bbc0 100644
--- a/docs/4-advanced/01-cookie/index.mdx
+++ b/docs/4-advanced/01-cookie/index.mdx
@@ -24,7 +24,7 @@ IDとパスワードによる認証は、Webアプリケーションにおいて
Webアプリケーションのクライアントが、サーバーから発行された証明書を保管しておく手段として、もっともよく用いられるのが**Cookie**です。Cookieは、ブラウザ内に保存される小さなデータで、文字列のキーと値のペアとして保存されます。
-Cookieを操作するための最も基本的な方法は、HTTPリクエストやレスポンスのヘッダを用いて送受信することです。HTTPレスポンスヘッダに`Set-Cookie`ヘッダを含めることにより、次回以降のリクエストで、クライアントはそのデータを`Cookie`リクエストヘッダに入れて毎回送信します。例えば、
+Cookieを操作するための最も基本的な方法は、HTTPリクエストやレスポンスのヘッダを用いて送受信することです。HTTPレスポンスヘッダに`Set-Cookie`ヘッダを含めることにより、次回以降のリクエストで、クライアントはそのデータを`Cookie`リクエストヘッダに入れて毎回送信します。例えば、
- `Set-Cookie: name=tanaka`
- `Set-Cookie: age=20`
diff --git a/docs/4-advanced/02-bundler/index.mdx b/docs/4-advanced/02-bundler/index.mdx
index 1d084b755..3644df12f 100644
--- a/docs/4-advanced/02-bundler/index.mdx
+++ b/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`ディレクトリが作成され、トランスパイルとバンドルの結果が格納されます。
+これにより、カレントディレクトリに`dist`ディレクトリが作成され、トランスパイルとバンドルの結果が格納されます。
出力されたファイルを元のファイルと比較してみましょう。元の`index.html`や`main.js`が、変換された状態で出力されていることがわかります。ディレクトリごと[Netlify Drop](/docs/trial-session/deploy-application/)などにアップロードすれば使用可能になるでしょう。
diff --git a/src/components/Term/definitions.js b/src/components/Term/definitions.js
deleted file mode 100644
index 421606457..000000000
--- a/src/components/Term/definitions.js
+++ /dev/null
@@ -1,443 +0,0 @@
-export default {
- referencePageTitles: {
- "/docs/trial-session/get-started/": "はじめてのWeb開発",
- "/docs/trial-session/html/": "HTML",
- "/docs/trial-session/css/": "CSS",
- "/docs/trial-session/javascript/": "JavaScriptことはじめ",
- "/docs/trial-session/expressions/": "値と式と演算子",
- "/docs/trial-session/variables/": "変数",
- "/docs/trial-session/boolean/": "論理値と論理演算子",
- "/docs/trial-session/if-statement/": "条件分岐",
- "/docs/trial-session/functions/": "関数",
- "/docs/trial-session/loop/": "繰り返し",
- "/docs/trial-session/array/": "配列",
- "/docs/trial-session/object/": "オブジェクト",
- "/docs/trial-session/dom/": "DOM",
- "/docs/trial-session/events/": "イベント",
- "/docs/trial-session/project/": "プロジェクト",
- "/docs/trial-session/deploy-application/": "作ったウェブアプリを公開する",
- "/docs/browser-apps/inspector/": "ブラウザの開発者ツール",
- "/docs/browser-apps/reference/": "オブジェクトの参照",
- "/docs/browser-apps/class/": "クラス",
- "/docs/browser-apps/anonymous-function/": "無名関数",
- "/docs/browser-apps/css-arrangement/": "CSSによる配置",
- "/docs/browser-apps/project/": "プロジェクト",
- "/docs/web-servers/wsl-setup/": "WSLのセットアップ",
- "/docs/web-servers/linux-commands/": "Linuxコマンド",
- "/docs/web-servers/node-js/": "はじめてのNode.js",
- "/docs/web-servers/module/": "モジュールとnpm",
- "/docs/web-servers/server/": "Expressによるサーバー構築",
- "/docs/web-servers/fetch-api/": "Fetch APIによるデータの取得",
- "/docs/web-servers/fetch-api-post/": "Fetch APIによるデータの送信",
- "/docs/web-servers/database/": "データベース",
- "/docs/web-servers/git-github-init/": "GitとGitHubのセットアップ",
- "/docs/web-servers/git/": "Gitを用いたバージョン管理",
- "/docs/web-servers/github/": "GitとGitHubを用いた共同開発",
- "/docs/web-servers/deploy-on-render/": "Renderへのデプロイ",
- "/docs/advanced/cookie/": "Cookieと認証",
- "/docs/advanced/bundler/": "トランスパイラとモジュールバンドラ",
- "/docs/advanced/typescript/": "TypeScript",
- "/docs/advanced/react/": "React",
- },
- terms: {
- fileExtension: {
- name: "拡張子",
- definition:
- "ファイル名のピリオド以降の部分。ファイルの種類を識別するために用いられる場合がある。Windowsでは標準では表示されないので、表示する設定にしておくと良い。",
- referencePage: "/docs/trial-session/html/",
- },
- git: {
- name: "Git",
- definition: "分散型バージョン管理システムのひとつ。",
- referencePage: "/docs/web-servers/git-github-init/",
- },
- github: {
- name: "GitHub",
- definition:
- "Gitを用いて、プログラムの保存、共有、公開などができる、開発者のための総合プラットフォーム。",
- referencePage: "/docs/web-servers/git-github-init/",
- },
- repository: {
- name: "リポジトリ",
- definition: "ソースコードやそれに付随する情報のまとまり。",
- referencePage: "/docs/web-servers/git/",
- },
- html: {
- name: "HTML",
- definition: "ウェブページの構造を表すためのマークアップ言語。",
- referencePage: "/docs/trial-session/html/",
- },
- nest: {
- name: "ネスト",
- definition: "ある構造の中にある別の構造を入れること。",
- referencePage: "/docs/trial-session/html/",
- },
- javascript: {
- name: "JavaScript",
- definition:
- "ウェブサイトに動きを与えるために生まれたスクリプト言語。現在は機能が拡張され、ウェブサイト以外にも応用されるようになった。",
- referencePage: "/docs/trial-session/javascript/",
- },
- startTag: {
- name: "開始タグ",
- definition:
- "要素の先頭を表す。内容
ならばが開始タグ。属性をつけることができる。",
- referencePage: "/docs/trial-session/html/",
- },
- tag: {
- name: "タグ",
- definition:
- "<から>までで囲まれた領域。
を「aタグ」のように読んでいる。",
- referencePage: "/docs/trial-session/html/",
- },
- attribute: {
- name: "属性",
- definition: "HTML要素の特徴を指定する値。開始タグの中に含まれる。",
- referencePage: "/docs/trial-session/html/",
- },
- element: {
- name: "HTML要素",
- definition: "HTMLの開始タグから終了タグまでの領域。",
- referencePage: "/docs/trial-session/html/",
- },
- endTag: {
- name: "終了タグ",
- definition: "要素の終端を表す。内容
ならば内容
ならばが開始タグ。属性をつけることができる。",
+ referencePage: "/docs/trial-session/html/",
+ },
+ {
+ id: "tag",
+ name: "タグ",
+ aliases: [],
+ definition: "<から>までで囲まれた領域。
を「aタグ」のように読んでいる。",
+ referencePage: "/docs/trial-session/html/",
+ },
+ {
+ id: "attribute",
+ name: "属性",
+ aliases: [],
+ definition: "HTML要素の特徴を指定する値。開始タグの中に含まれる。",
+ referencePage: "/docs/trial-session/html/",
+ },
+ {
+ id: "element",
+ name: "HTML要素",
+ aliases: ["要素"],
+ definition: "HTMLの開始タグから終了タグまでの領域。",
+ referencePage: "/docs/trial-session/html/",
+ },
+ {
+ id: "end-tag",
+ name: "終了タグ",
+ aliases: [],
+ definition: "要素の終端を表す。内容
ならば{term.definition}
- {shouldLinkToReferencePage() && (
-
- {referencePageTitle} へ
-
-
- )}
-
- }
- >
- {content}
-
- );
- };
-
- const content = {children};
-
- return typeof window === "object" ? wrap(content) : content;
-}
diff --git a/src/components/Term/index.tsx b/src/components/Term/index.tsx
new file mode 100644
index 000000000..30c517f2e
--- /dev/null
+++ b/src/components/Term/index.tsx
@@ -0,0 +1,67 @@
+import { JSX } from "react";
+import Link from "@docusaurus/Link";
+import { useLocation } from "@docusaurus/router";
+import Tippy from "@tippyjs/react";
+import { MdArrowForward } from "react-icons/md";
+import "tippy.js/dist/tippy.css";
+import "tippy.js/themes/material.css";
+import { onlyText } from "react-children-utilities";
+import styles from "./styles.module.css";
+import { referencePageTitles, terms } from "./definitions";
+
+type TermProps = {
+ id?: string;
+ children: React.ReactNode;
+};
+
+export default function Term(props: TermProps) {
+ const term = props.id
+ ? terms.find((term) => term.id === props.id)
+ : terms.find(
+ (term) =>
+ term.name === onlyText(props.children) ||
+ term.aliases.includes(onlyText(props.children)),
+ );
+ if (!term)
+ throw new Error(
+ `${props.id ? props.id : onlyText(props.children)}という用語は定義されていません`,
+ );
+
+ const referencePageTitle = referencePageTitles[term.referencePage];
+
+ const location = useLocation();
+
+ const wrap = (content: JSX.Element) => {
+ // 現在のページで用語が初出であればリンクを表示する必要がない
+ const shouldLinkToReferencePage = Boolean(
+ location.pathname !== term.referencePage &&
+ location.pathname + "/" !== term.referencePage,
+ );
+
+ return (
+
+
+ {term.definition}
+ {shouldLinkToReferencePage && (
+
+ {referencePageTitle} へ
+
+
+ )}
+
+ }
+ >
+ {content}
+
+ );
+ };
+
+ const content = {props.children};
+
+ return typeof window === "object" ? wrap(content) : content;
+}
diff --git a/src/components/Term/type-map.js b/src/components/Term/type-map.js
deleted file mode 100644
index 22f00ec7b..000000000
--- a/src/components/Term/type-map.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/*
- * # term の追加
- * > 文字列そのままの Term しか match しないので、
- * 説明的な Term は対応していません。
- * 例: "演算子の優先順位"
- *
- * > 名前の同じ Term は、使用頻度の高そうな方を優先してください。
- * 例: "プロパティ" -> "javascriptProperty"
- * "メソッド" -> "jsMethod"
- *
- * > 英数字と日本語の間は半角スペースを入れることになっているので、
- * 半角が入っているもののみを記述してください。
- * 例: 〇 "HTML 要素" × "HTML要素"
- *
- *
- * # 使い方
- * > 説明的な Term (演算子の優先順位 など) や、
- * 名前の同じ Term (CSS のプロパティ -> JS のプロパティとして解釈する)
- * などは対応していないので、term を明示してください。
- * 例: CSS のプロパティ // /docs/
- *
- */
-
-const typeMap = new Map([
- ["拡張子", "fileExtension"],
- ["Git", "git"], // not found
- ["GitHub", "github"], // not found
- ["リポジトリ", "repository"], // not found
- ["HTML", "html"],
- ["ネスト", "nest"],
- ["JavaScript", "javascript"],
- ["開始タグ", "startTag"],
- ["タグ", "tag"],
- ["属性", "attribute"],
- ["HTML要素", "element"],
- ["要素", "element"],
- ["終了タグ", "endTag"],
- ["CSS", "css"],
- ["style属性", "styleAttribute"],
- ["文", "javascriptStatement"],
- ["値", "javascriptValue"],
- ["文字列", "javascriptString"],
- ["数値", "javascriptNumber"],
- ["演算子", "javascriptOperator"],
- ["式", "javascriptExpression"],
- ["評価", "javascriptEvaluation"],
- ["変数", "javascriptVariable"],
- ["宣言", "javascriptDeclaration"],
- ["代入", "javascriptAssignment"],
- ["キャメルケース", "camelCase"],
- ["スネークケース", "snakeCase"],
- ["パスカルケース", "pascalCase"],
- ["論理値", "javascriptBoolean"],
- ["if文", "javascriptIfStatement"],
- ["制御構造", "javascriptControlFlow"],
- ["制御構文", "javascriptControlFlow"], // ここ 1-1 (Term以外では8-2) でした。とりあえず両方対応させます
- ["関数", "javascriptFunction"],
- ["引数", "javascriptParameter"],
- ["渡す", "javascriptPass"],
- ["戻り値", "javascriptReturnValue"],
- ["返す", "javascriptReturn"],
- ["返し", "javascriptReturn"],
- ["スコープ", "javascriptScope"],
- ["配列", "javascriptArray"],
- ["オブジェクト", "javascriptObject"],
- ["プリミティブ", "javascriptPrimitive"],
- ["プロパティ", "javascriptProperty"],
- ["プロパティ名", "javascriptPropertyName"],
- ["プロパティ値", "javascriptPropertyValue"],
- ["DOM", "dom"],
- ["イベント", "events"],
- ["イベントハンドラ", "eventHandler"],
- ["クラス", "javascriptClass"],
- ["インスタンス", "javascriptInstance"],
- ["コンストラクタ", "javascriptConstructor"],
- ["メソッド", "javascriptMethod"],
- ["アロー関数", "arrowFunction"],
- ["コールバック関数", "callbackFunction"],
- ["モジュール", "javascriptModule"],
- ["ライブラリ", "library"],
- ["サーバー", "serverClient"],
- ["クライアント", "serverClient"],
- ["JSON", "json"],
- ["HTTPリクエスト", "requestResponse"],
- ["リクエスト", "requestResponse"],
- ["レスポンス", "requestResponse"],
- ["リクエストヘッダ", "httpHeaderBody"],
- ["リクエストボディ", "httpHeaderBody"],
- ["レスポンスボディ", "httpHeaderBody"],
- ["GETリクエスト", "httpMethod"],
- ["POSTリクエスト", "httpMethod"],
- ["ステータスコード", "httpStatusCode"],
- ["npxコマンド", "npxCommand"],
- ["非同期処理", "asynchronousProcess"],
- ["非同期関数", "asynchronousProcess"],
- ["環境変数", "environmentVariable"],
- ["デプロイ", "deploy"],
- ["トランスパイル", "transpile"],
- ["トランスパイラ", "transpile"],
- ["モジュールバンドラ", "moduleBundler"],
- ["JSX", "jsx"],
- ["truthy", "javascriptTruthyFalsy"],
- ["falsy", "javascriptTruthyFalsy"],
- ["ミュータブル", "mutableImmutable"],
- ["イミュータブル", "mutableImmutable"],
-]);
-
-export default typeMap;