From 06cdf7dc0431e7bb0f9be576ff43c51021c9646c Mon Sep 17 00:00:00 2001 From: WATAHIKI YUTO Date: Sat, 22 Nov 2025 09:45:12 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=E4=B8=8D=E8=A6=81=E3=81=AA=E7=94=A8?= =?UTF-8?q?=E8=AA=9E=E3=81=AE=E5=AE=9A=E7=BE=A9=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Term/definitions.js | 51 ++++++++---------------------- src/components/Term/type-map.js | 5 --- 2 files changed, 13 insertions(+), 43 deletions(-) diff --git a/src/components/Term/definitions.js b/src/components/Term/definitions.js index c8d39e22..bc3a09bc 100644 --- a/src/components/Term/definitions.js +++ b/src/components/Term/definitions.js @@ -2,33 +2,37 @@ 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/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/css/": "CSS", "/docs/trial-session/object/": "オブジェクト", "/docs/trial-session/dom/": "DOM", "/docs/trial-session/events/": "イベント", "/docs/trial-session/project/": "プロジェクト", - "/docs/trial-session/deploy/": "作ったウェブアプリを公開する", + "/docs/trial-session/deploy-application/": "作ったウェブアプリを公開する", "/docs/browser-apps/inspector/": "ブラウザの開発者ツール", "/docs/browser-apps/reference/": "オブジェクトの参照", - "/docs/browser-apps/loop/": "繰り返し", "/docs/browser-apps/class/": "クラス", "/docs/browser-apps/anonymous-function/": "無名関数", - "/docs/browser-apps/git-github/": "GitとGitHub", + "/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/": "トランスパイラとモジュールバンドラ", @@ -42,33 +46,21 @@ export default { "ファイル名のピリオド以降の部分。ファイルの種類を識別するために用いられる場合がある。Windowsでは標準では表示されないので、表示する設定にしておくと良い。", referencePage: "/docs/trial-session/html/", }, - fork: { - name: "フォーク", - definition: - "GitHubにおいて、他人が公開しているリポジトリを複製すること。この操作により、元のリポジトリに対して影響を与えることなくソースコードを変更できる。", - referencePage: "/docs/trial-session/get-started/", - }, git: { name: "Git", definition: "分散型バージョン管理システムのひとつ。", - referencePage: "/docs/trial-session/get-started/", + referencePage: "/docs/web-servers/git-github-init/", }, github: { name: "GitHub", definition: "Gitを用いて、プログラムの保存、共有、公開などができる、開発者のための総合プラットフォーム。", - referencePage: "/docs/trial-session/get-started/", - }, - gitpod: { - name: "Gitpod", - definition: - "GitHub等に保存されているプログラムをブラウザ上で編集するためのサービス。", - referencePage: "/docs/trial-session/get-started/", + referencePage: "/docs/web-servers/git-github-init/", }, repository: { name: "リポジトリ", definition: "ソースコードやそれに付随する情報のまとまり。", - referencePage: "/docs/trial-session/get-started/", + referencePage: "/docs/web-servers/git/", }, html: { name: "HTML", @@ -176,12 +168,6 @@ export default { "複数の演算子を含む式の評価順序を決定するための指標。例えば、乗算演算子は加算演算子より優先順位が高いため、3 + 4 * 5は3 + (4 * 5)と評価される。", referencePage: "/docs/trial-session/expressions/", }, - javascriptStringConcatenation: { - name: "文字列の結合", - definition: - "文字列に加算演算子を使うと、一個目の文字列の後ろに二個目の文字列が追加される。", - referencePage: "/docs/trial-session/expressions/#いろいろな演算子", - }, javascriptVariable: { name: "変数", definition: "JavaScriptで値を一時的に保存しておくための入れ物。", @@ -361,6 +347,7 @@ export default { name: "ライブラリ", definition: "汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもの。基本的に他のプログラムから利用され、単体では実行できない。", + referencePage: "/docs/web-servers/module/", }, serverClient: { name: "サーバーとクライアント", @@ -380,12 +367,6 @@ export default { "クライアントからサーバーに対しサービスを要求する通信をリクエスト、リクエストに対してサーバーからクライアントに応答として返される通信をレスポンスと呼ぶ。", referencePage: "/docs/web-servers/server/", }, - queryString: { - name: "クエリ文字列", - definition: - "URLの末尾に付与することのできる追加のパラメーター。辞書型のデータを表すことができる。key1=value1&key2=value2といった構造。日本語文字などはパーセントエンコーディングする必要がある。", - referencePage: "/docs/web-servers/form/", - }, httpHeaderBody: { name: "リクエスト・レスポンスのヘッダ・ボディ (HTTP)", definition: @@ -416,12 +397,6 @@ export default { "処理を実行する際、その完了を待たずに呼び出し元の処理が続行されるような処理。JavaScriptでは、asyncキーワードをつけた関数は非同期処理を行うための関数となり、内部ではawaitキーワードにより他の非同期処理を呼び出してその結果を待機できるようになる。", referencePage: "/docs/web-servers/database/", }, - thread: { - name: "スレッド", - definition: - "コンピューターがプログラムの順番どおりに1つずつ処理を行う機構。JavaScriptではメインスレッドと呼ばれる単一のスレッドで主に処理が実行される。", - referencePage: "/docs/web-servers/database/", - }, environmentVariable: { name: "環境変数", definition: diff --git a/src/components/Term/type-map.js b/src/components/Term/type-map.js index 5a25a01a..22f00ec7 100644 --- a/src/components/Term/type-map.js +++ b/src/components/Term/type-map.js @@ -23,10 +23,8 @@ const typeMap = new Map([ ["拡張子", "fileExtension"], - ["フォーク", "fork"], // not found ["Git", "git"], // not found ["GitHub", "github"], // not found - ["Gitpod", "gitpod"], // not found ["リポジトリ", "repository"], // not found ["HTML", "html"], ["ネスト", "nest"], @@ -86,8 +84,6 @@ const typeMap = new Map([ ["HTTPリクエスト", "requestResponse"], ["リクエスト", "requestResponse"], ["レスポンス", "requestResponse"], - ["クエリ文字列", "queryString"], - ["クエリパラメータ", "queryString"], ["リクエストヘッダ", "httpHeaderBody"], ["リクエストボディ", "httpHeaderBody"], ["レスポンスボディ", "httpHeaderBody"], @@ -97,7 +93,6 @@ const typeMap = new Map([ ["npxコマンド", "npxCommand"], ["非同期処理", "asynchronousProcess"], ["非同期関数", "asynchronousProcess"], - ["スレッド", "thread"], // not found ["環境変数", "environmentVariable"], ["デプロイ", "deploy"], ["トランスパイル", "transpile"], From a234ddd4ea1c0b929294c5cf9da798d79e2eb65d Mon Sep 17 00:00:00 2001 From: WATAHIKI YUTO Date: Sat, 22 Nov 2025 11:10:17 +0900 Subject: [PATCH 2/5] =?UTF-8?q?`Term`=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?= =?UTF-8?q?=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92=E3=83=AA=E3=83=95=E3=82=A1?= =?UTF-8?q?=E3=82=AF=E3=82=BF=E3=83=AA=E3=83=B3=E3=82=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/03-css/index.mdx | 4 +- docs/1-trial-session/05-expressions/index.mdx | 6 +- docs/1-trial-session/07-boolean/index.mdx | 4 +- docs/1-trial-session/13-dom/index.mdx | 4 +- .../3-web-servers/07-fetch-api-post/index.mdx | 2 +- docs/4-advanced/01-cookie/index.mdx | 2 +- docs/4-advanced/02-bundler/index.mdx | 2 +- src/components/Term/definitions.js | 443 --------------- src/components/Term/definitions.ts | 517 ++++++++++++++++++ src/components/Term/index.jsx | 77 --- src/components/Term/index.tsx | 65 +++ src/components/Term/type-map.js | 108 ---- 12 files changed, 594 insertions(+), 640 deletions(-) delete mode 100644 src/components/Term/definitions.js create mode 100644 src/components/Term/definitions.ts delete mode 100644 src/components/Term/index.jsx create mode 100644 src/components/Term/index.tsx delete mode 100644 src/components/Term/type-map.js diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx index 6ec61b5f..cfc86d05 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 ![Hello World!](./red-hello-world.png) {/* 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 4bc4afb1..bd23a640 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 43397e48..0f6d665c 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 c636a821..1583c9d5 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"; ![JavaScriptからスタイルを操作する](./change-styles.png) {/* 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 0f51eac5..bae623b7 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 8db1f0fd..a3672f17 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 1d084b75..5ccae84d 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 bc3a09bc..00000000 --- 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/", - }, - css: { - name: "CSS", - definition: - "ウェブサイトの見た目をカスタマイズするための言語。HTML要素のstyle属性はCSSを用いて記述する。", - referencePage: "/docs/trial-session/css/", - }, - styleAttribute: { - name: "style属性", - definition: - "表示可能な多くのHTML要素に対して設定できる、見た目をカスタマイズするための属性。", - referencePage: "/docs/trial-session/css/", - }, - cssProperty: { - name: "プロパティ (CSS)", - definition: - "CSSにより設定できる見た目の種類。例えばcolorは文字色、font-sizeは文字の大きさ。", - referencePage: "/docs/trial-session/css/", - }, - javascriptStatement: { - name: "文", - definition: - "JavaScriptにおいて、セミコロンによって区切られた命令の単位。ただしセミコロンは省略可能。", - referencePage: "/docs/trial-session/javascript/", - }, - javascriptValue: { - name: "値 (JavaScript)", - definition: - "JavaScript上で扱われる単一のデータ。数値や文字列、論理値、オブジェクトなど。", - referencePage: "/docs/trial-session/expressions/", - }, - javascriptString: { - name: "文字列 (JavaScript)", - definition: - "JavaScriptにおける値の一種。ダブルクォーテーションで囲んでプログラム上に直接記述できる。", - referencePage: "/docs/trial-session/expressions/", - }, - javascriptNumber: { - name: "数値 (JavaScript)", - definition: "JavaScriptにおける値の一種。プログラム中に直接記述できる。", - referencePage: "/docs/trial-session/expressions/", - }, - javascriptOperator: { - name: "演算子 (JavaScript)", - definition: - "JavaScriptにおいて、主に値に対して作用し、別の値を得るための記号。", - referencePage: "/docs/trial-session/expressions/", - }, - javascriptExpression: { - name: "式 (JavaScript)", - definition: "JavaScriptにおいて、計算・処理されて値を生成するまとまり。", - referencePage: "/docs/trial-session/expressions/", - }, - javascriptEvaluation: { - name: "評価 (JavaScript)", - definition: "JavaScriptの実行エンジンが式から値を生成する動作。", - referencePage: "/docs/trial-session/expressions/", - }, - javascriptOperatorPriority: { - name: "演算子の優先順位 (JavaScript)", - definition: - "複数の演算子を含む式の評価順序を決定するための指標。例えば、乗算演算子は加算演算子より優先順位が高いため、3 + 4 * 5は3 + (4 * 5)と評価される。", - referencePage: "/docs/trial-session/expressions/", - }, - javascriptVariable: { - name: "変数", - definition: "JavaScriptで値を一時的に保存しておくための入れ物。", - referencePage: "/docs/trial-session/variables/", - }, - javascriptDeclaration: { - name: "宣言 (JavaScript)", - definition: "JavaScriptで変数を使用するために必要な記述。", - referencePage: "/docs/trial-session/variables/", - }, - javascriptAssignment: { - name: "代入 (JavaScript)", - definition: - "変数に値を設定する操作。それまで入っていた値は消えてしまう。", - referencePage: "/docs/trial-session/variables/", - }, - camelCase: { - name: "キャメルケース", - definition: - "複数の単語にわたるフレーズを、2語目以降の先頭の文字を大文字にして結合する命名規則。例: camelCase", - referencePage: "/docs/trial-session/variables/", - }, - snakeCase: { - name: "スネークケース", - definition: - "複数の単語にわたるフレーズを、アンダーバー (_) によって結合する命名規則。例: snake_case", - referencePage: "/docs/trial-session/variables/", - }, - pascalCase: { - name: "パスカルケース", - definition: - "複数の単語にわたるフレーズを、それぞれの単語の先頭の文字を大文字にして結合する命名規則。例: PascalCase", - referencePage: "/docs/trial-session/variables/", - }, - javascriptBoolean: { - name: "論理値 (JavaScript)", - definition: - "JavaScriptにおける値の一種で、真偽を表すもの。trueまたはfalseの2種類しかない。", - referencePage: "/docs/trial-session/boolean/", - }, - javascriptIfStatement: { - name: "if文", - definition: - "与えられた真偽値が真である場合のみ{}ブロックの中の処理を実行する制御構造。", - referencePage: "/docs/trial-session/if-statement/", - }, - javascriptControlFlow: { - name: "制御構造 (JavaScript)", - definition: - "JavaScriptにおいて、通常上から下に実行される文の実行順序を変化させるための言語構造。", - referencePage: "/docs/trial-session/if-statement/", - }, - javascriptFunction: { - name: "関数 (JavaScript)", - definition: "引数や返り値を持つ文のまとまり。", - referencePage: "/docs/trial-session/functions/", - }, - javascriptParameter: { - name: "引数 (JavaScript)", - definition: "JavaScriptの関数に対し、呼び出し時に与えることのできる値。", - referencePage: "/docs/trial-session/functions/", - }, - javascriptPass: { - name: "～ (値) を～ (関数) に渡す", - definition: "JavaScriptの関数に値を引数として設定して実行すること。", - referencePage: "/docs/trial-session/functions/", - }, - javascriptReturnValue: { - name: "戻り値 (JavaScript)", - definition: "JavaScriptの関数呼び出し式の評価結果となる値。", - referencePage: "/docs/trial-session/functions/", - }, - javascriptReturn: { - name: "～ (値) を返す (JavaScript)", - definition: - "関数の実行が終了し、式の評価結果の値が確定すること。return文により実現できる。", - referencePage: "/docs/trial-session/functions/", - }, - javascriptScope: { - name: "スコープ (JavaScript)", - definition: "変数が有効な範囲。", - referencePage: "/docs/trial-session/functions/", - }, - javascriptArray: { - name: "配列 (JavaScript)", - definition: "複数の値を並べて1つにまとめた値。", - referencePage: "/docs/trial-session/array/", - }, - javascriptObject: { - name: "オブジェクト (JavaScript)", - definition: - "JavaScriptにおける値の一種。関連する値をまとめて1つの値として扱うことができる。プリミティブでない値はすべてオブジェクト。", - referencePage: "/docs/trial-session/object/", - }, - javascriptPrimitive: { - name: "プリミティブ (JavaScript)", - definition: - "JavaScriptにおける値の種類。数値や文字列、論理値などの「それ以上分解できない」値。", - referencePage: "/docs/trial-session/object/", - }, - javascriptProperty: { - name: "プロパティ (JavaScript)", - definition: - "JavaScriptのオブジェクトに関連付けられた属性のこと。学生を表すオブジェクトであれば、名前や年齢などのプロパティが考えられる。", - referencePage: "/docs/trial-session/object/", - }, - javascriptPropertyName: { - name: "プロパティ名 (JavaScript)", - definition: - "JavaScriptのオブジェクトにおいて、プロパティを表す名前のこと。", - referencePage: "/docs/trial-session/object/", - }, - javascriptPropertyValue: { - name: "プロパティ値 (JavaScript)", - definition: - "JavaScriptのオブジェクトにおいて、プロパティに関連付けられた値のこと。", - referencePage: "/docs/trial-session/object/", - }, - dom: { - name: "DOM", - definition: "HTML構造をJavaScriptのオブジェクトとして扱うための枠組み。", - referencePage: "/docs/trial-session/dom/", - }, - events: { - name: "イベント", - definition: - "ボタンのクリック、フォームへの入力、ページの読み込みなど、Webページ上で発生するあらゆるアクションの総称。", - referencePage: "/docs/trial-session/events/", - }, - eventHandler: { - name: "イベントハンドラ", - definition: - "イベント発生時の処理を行う仕組み。onclick関数、onload関数など、onキーワードにイベント名をつけた名称になっている。", - referencePage: "/docs/trial-session/events/", - }, - javascriptClass: { - name: "クラス (JavaScript)", - definition: - "同じプロパティを持つオブジェクトを統一的に扱うための仕組み。プロパティや関数(メソッド)を予め設定できる。", - referencePage: "/docs/browser-apps/class/", - }, - javascriptInstance: { - name: "インスタンス (JavaScript)", - definition: "new演算子をクラスに適用して生成されるオブジェクトのこと。", - referencePage: "/docs/browser-apps/class/", - }, - javascriptConstructor: { - name: "コンストラクタ (JavaScript)", - definition: - "インスタンスを作成するタイミング（new演算子をクラスに適用するタイミング）で実行される特殊なメソッド。constructorという名前で定義する必要がある。コンストラクタを定義すると、インスタンスを生成するときにプロパティの設定も同時に行うことができる。", - referencePage: "/docs/browser-apps/class/", - }, - javascriptMethod: { - name: "メソッド (JavaScript)", - definition: - "オブジェクトに対して定義された関数。メソッド内ではメソッドが定義されたオブジェクトをthisキーワードを用いて参照できる。", - referencePage: "/docs/browser-apps/class/", - }, - arrowFunction: { - name: "アロー関数", - definition: - "JavaScriptにおいて関数を生成するための式のひとつ。=>という記号が矢のように見えることから命名された。", - referencePage: "/docs/browser-apps/anonymous-function/", - }, - callbackFunction: { - name: "コールバック関数", - definition: "他の関数の引数として呼び出される関数。", - referencePage: "/docs/browser-apps/anonymous-function/", - }, - javascriptModule: { - name: "モジュール (JavaScript)", - definition: - "独立したプログラムの塊。JavaScriptでは、通常1つのファイルがモジュールとして扱われる。Node.jsでは、拡張子が.mjsの場合import文を用いてインポートして利用する。", - referencePage: "/docs/web-servers/module/", - }, - library: { - name: "ライブラリ", - definition: - "汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもの。基本的に他のプログラムから利用され、単体では実行できない。", - referencePage: "/docs/web-servers/module/", - }, - serverClient: { - name: "サーバーとクライアント", - definition: - "サービスを提供する側のコンピューターやソフトウェアをサーバー、提供される側のコンピューターやソフトウェアをクライアントと呼ぶ。例えばGoogle ChromeなどのWebブラウザは、Webにおける代表的なクライアントソフトウェアである。", - referencePage: "/docs/web-servers/server/", - }, - json: { - name: "JSON", - definition: - "複雑なデータ構造をJavaScriptオブジェクトに似た形式で文字列として表現するための記法。", - referencePage: "/docs/web-servers/fetch-api/", - }, - requestResponse: { - name: "リクエストとレスポンス", - definition: - "クライアントからサーバーに対しサービスを要求する通信をリクエスト、リクエストに対してサーバーからクライアントに応答として返される通信をレスポンスと呼ぶ。", - referencePage: "/docs/web-servers/server/", - }, - httpHeaderBody: { - name: "リクエスト・レスポンスのヘッダ・ボディ (HTTP)", - definition: - "HTTPにおいてリクエストやレスポンスは主にヘッダと呼ばれる領域とボディと呼ばれる領域に分かれている。リクエストやレスポンスの本体はボディの部分に格納されており、ヘッダは付加的な情報を与えるために用いられる。なお、GETリクエストではリクエストボディを使用できない。", - referencePage: "/docs/web-servers/fetch-api-post/", - }, - httpMethod: { - name: "メソッド (HTTP)", - definition: - "HTTPリクエストの種類。GETやPOSTなどがある。GETリクエストではリクエストボディを利用できないが、POSTリクエストでは利用できるなどの違いがある。", - referencePage: "/docs/web-servers/fetch-api-post/", - }, - httpStatusCode: { - name: "ステータスコード (HTTP)", - definition: - "HTTPレスポンスに含まれる、リクエストの処理結果を表す3桁の数値。200番台は成功、400番台はクライアント側の問題での失敗、500番台はサーバー側の問題での失敗を表す。代表的なものに200 (OK)、400 (Bad Request)、401 (Unauthorized)、404 (Not Found)、500 (Internal Server Error)がある。", - referencePage: "/docs/web-servers/fetch-api-post/", - }, - npxCommand: { - name: "npxコマンド", - definition: - "npm付属のコマンド。インストールしたnpmパッケージを直接実行する機能を持つ。", - referencePage: "/docs/web-servers/database/", - }, - asynchronousProcess: { - name: "非同期処理", - definition: - "処理を実行する際、その完了を待たずに呼び出し元の処理が続行されるような処理。JavaScriptでは、asyncキーワードをつけた関数は非同期処理を行うための関数となり、内部ではawaitキーワードにより他の非同期処理を呼び出してその結果を待機できるようになる。", - referencePage: "/docs/web-servers/database/", - }, - environmentVariable: { - name: "環境変数", - definition: - "アプリケーションの実行時に、アプリケーション自体を変更することなく外側から動作を変更するために用いることができる仕組み。キーと値の組み合わせによって定義される。", - referencePage: "/docs/web-servers/database/", - }, - deploy: { - name: "デプロイ", - definition: - "開発したプログラムを実行可能な状態にして、実際に利用できるようにすること。Webアプリケーションの場合、サーバーにプログラムを配置して、インターネット上でアクセスできるようにすることを指す。", - referencePage: "/docs/web-servers/deploy-on-render/", - }, - transpile: { - name: "トランスパイル", - definition: - "プログラムを同じ意味を持つ別のプログラムへと変換すること。Web開発では、通常変換の結果ウェブブラウザが解釈できるJavaScriptが生成される。Babelが有名。", - referencePage: "/docs/advanced/bundler/", - }, - moduleBundler: { - name: "モジュールバンドラ", - definition: - "複数のJavaScriptモジュールをまとめてひとつにするためのソフトウェア。webpackが有名。", - referencePage: "/docs/advanced/bundler/", - }, - jsx: { - name: "JSX", - definition: - "JavaScriptの拡張構文で、Reactなどと共に用いられる。JSXが有効なJavaScriptでは、HTMLに似た構文の式により特定の種類のオブジェクトを作成できる。拡張子は.jsxで、TypeScriptとともに用いる場合は.tsx。", - referencePage: "/docs/advanced/react/", - }, - javascriptTruthyFalsy: { - name: "truthyとfalsy (JavaScript)", - definition: - "JavaScriptでは、数値のゼロ、空文字列、null、undefined、NaNをfalsy、それ以外の全ての値をtruthyとみなす。if文は条件式の結果がtruthyであるかfalsyであるかによって分岐を行う。", - referencePage: "/docs/advanced/react/", - }, - mutableImmutable: { - name: "ミュータブルとイミュータブル", - definition: - "オブジェクトの内部が変更可能であるとき、そのオブジェクトはミュータブルであるといい、変更不能である場合はイミュータブルであるという。Reactなどのライブラリでは状態を表すオブジェクトはイミュータブルであることが求められる。これは、状態が変化する際に参照も変化することを保証するためである。", - referencePage: "/docs/browser-apps/reference/", - }, - }, -}; diff --git a/src/components/Term/definitions.ts b/src/components/Term/definitions.ts new file mode 100644 index 00000000..2c608e89 --- /dev/null +++ b/src/components/Term/definitions.ts @@ -0,0 +1,517 @@ +export const 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", +}; + +type Term = { + name: string; + aliases: string[]; + definition: string; + referencePage: keyof typeof referencePageTitles; +}; + +export const terms: Term[] = [ + { + name: "拡張子", + aliases: [], + definition: + "ファイル名のピリオド以降の部分。ファイルの種類を識別するために用いられる場合がある。Windowsでは標準では表示されないので、表示する設定にしておくと良い。", + referencePage: "/docs/trial-session/html/", + }, + { + name: "Git", + aliases: [], + definition: "分散型バージョン管理システムのひとつ。", + referencePage: "/docs/web-servers/git-github-init/", + }, + { + name: "GitHub", + aliases: [], + definition: + "Gitを用いて、プログラムの保存、共有、公開などができる、開発者のための総合プラットフォーム。", + referencePage: "/docs/web-servers/git-github-init/", + }, + { + name: "リポジトリ", + aliases: [], + definition: "ソースコードやそれに付随する情報のまとまり。", + referencePage: "/docs/web-servers/git/", + }, + { + name: "HTML", + aliases: [], + definition: "ウェブページの構造を表すためのマークアップ言語。", + referencePage: "/docs/trial-session/html/", + }, + { + name: "ネスト", + aliases: [], + definition: "ある構造の中にある別の構造を入れること。", + referencePage: "/docs/trial-session/html/", + }, + { + name: "JavaScript", + aliases: [], + definition: + "ウェブサイトに動きを与えるために生まれたスクリプト言語。現在は機能が拡張され、ウェブサイト以外にも応用されるようになった。", + referencePage: "/docs/trial-session/javascript/", + }, + { + name: "開始タグ", + aliases: [], + definition: + "要素の先頭を表す。
内容
ならば
が開始タグ。属性をつけることができる。", + referencePage: "/docs/trial-session/html/", + }, + { + name: "タグ", + aliases: [], + definition: "<から>までで囲まれた領域。を「aタグ」のように読んでいる。", + referencePage: "/docs/trial-session/html/", + }, + { + name: "属性", + aliases: [], + definition: "HTML要素の特徴を指定する値。開始タグの中に含まれる。", + referencePage: "/docs/trial-session/html/", + }, + { + name: "HTML要素", + aliases: ["要素"], + definition: "HTMLの開始タグから終了タグまでの領域。", + referencePage: "/docs/trial-session/html/", + }, + { + name: "終了タグ", + aliases: [], + definition: "要素の終端を表す。
内容
ならば
が終了タグ。", + referencePage: "/docs/trial-session/html/", + }, + { + name: "CSS", + aliases: [], + definition: + "ウェブサイトの見た目をカスタマイズするための言語。HTML要素のstyle属性はCSSを用いて記述する。", + referencePage: "/docs/trial-session/css/", + }, + { + name: "style属性", + aliases: [], + definition: + "表示可能な多くのHTML要素に対して設定できる、見た目をカスタマイズするための属性。", + referencePage: "/docs/trial-session/css/", + }, + { + name: "プロパティ (CSS)", + aliases: [], + definition: + "CSSにより設定できる見た目の種類。例えばcolorは文字色、font-sizeは文字の大きさ。", + referencePage: "/docs/trial-session/css/", + }, + { + name: "文", + aliases: [], + definition: + "JavaScriptにおいて、セミコロンによって区切られた命令の単位。ただしセミコロンは省略可能。", + referencePage: "/docs/trial-session/javascript/", + }, + { + name: "値 (JavaScript)", + aliases: ["値"], + definition: + "JavaScript上で扱われる単一のデータ。数値や文字列、論理値、オブジェクトなど。", + referencePage: "/docs/trial-session/expressions/", + }, + { + name: "文字列 (JavaScript)", + aliases: ["文字列"], + definition: + "JavaScriptにおける値の一種。ダブルクォーテーションで囲んでプログラム上に直接記述できる。", + referencePage: "/docs/trial-session/expressions/", + }, + { + name: "数値 (JavaScript)", + aliases: ["数値"], + definition: "JavaScriptにおける値の一種。プログラム中に直接記述できる。", + referencePage: "/docs/trial-session/expressions/", + }, + { + name: "演算子 (JavaScript)", + aliases: ["演算子"], + definition: + "JavaScriptにおいて、主に値に対して作用し、別の値を得るための記号。", + referencePage: "/docs/trial-session/expressions/", + }, + { + name: "式 (JavaScript)", + aliases: ["式"], + definition: "JavaScriptにおいて、計算・処理されて値を生成するまとまり。", + referencePage: "/docs/trial-session/expressions/", + }, + { + name: "評価 (JavaScript)", + aliases: ["評価"], + definition: "JavaScriptの実行エンジンが式から値を生成する動作。", + referencePage: "/docs/trial-session/expressions/", + }, + { + name: "演算子の優先順位 (JavaScript)", + aliases: [], + definition: + "複数の演算子を含む式の評価順序を決定するための指標。例えば、乗算演算子は加算演算子より優先順位が高いため、3 + 4 * 5は3 + (4 * 5)と評価される。", + referencePage: "/docs/trial-session/expressions/", + }, + { + name: "変数", + aliases: [], + definition: "JavaScriptで値を一時的に保存しておくための入れ物。", + referencePage: "/docs/trial-session/variables/", + }, + { + name: "宣言 (JavaScript)", + aliases: ["宣言"], + definition: "JavaScriptで変数を使用するために必要な記述。", + referencePage: "/docs/trial-session/variables/", + }, + { + name: "代入 (JavaScript)", + aliases: ["代入"], + definition: "変数に値を設定する操作。それまで入っていた値は消えてしまう。", + referencePage: "/docs/trial-session/variables/", + }, + { + name: "キャメルケース", + aliases: [], + definition: + "複数の単語にわたるフレーズを、2語目以降の先頭の文字を大文字にして結合する命名規則。例: camelCase", + referencePage: "/docs/trial-session/variables/", + }, + { + name: "スネークケース", + aliases: [], + definition: + "複数の単語にわたるフレーズを、アンダーバー (_) によって結合する命名規則。例: snake_case", + referencePage: "/docs/trial-session/variables/", + }, + { + name: "パスカルケース", + aliases: [], + definition: + "複数の単語にわたるフレーズを、それぞれの単語の先頭の文字を大文字にして結合する命名規則。例: PascalCase", + referencePage: "/docs/trial-session/variables/", + }, + { + name: "論理値 (JavaScript)", + aliases: ["論理値"], + definition: + "JavaScriptにおける値の一種で、真偽を表すもの。trueまたはfalseの2種類しかない。", + referencePage: "/docs/trial-session/boolean/", + }, + { + name: "if文", + aliases: [], + definition: + "与えられた真偽値が真である場合のみ{}ブロックの中の処理を実行する制御構造。", + referencePage: "/docs/trial-session/if-statement/", + }, + { + name: "制御構造 (JavaScript)", + aliases: ["制御構造", "制御構文"], + definition: + "JavaScriptにおいて、通常上から下に実行される文の実行順序を変化させるための言語構造。", + referencePage: "/docs/trial-session/if-statement/", + }, + { + name: "関数 (JavaScript)", + aliases: ["関数"], + definition: "引数や返り値を持つ文のまとまり。", + referencePage: "/docs/trial-session/functions/", + }, + { + name: "引数 (JavaScript)", + aliases: ["引数"], + definition: "JavaScriptの関数に対し、呼び出し時に与えることのできる値。", + referencePage: "/docs/trial-session/functions/", + }, + { + name: "～ (値) を～ (関数) に渡す", + aliases: ["渡す"], + definition: "JavaScriptの関数に値を引数として設定して実行すること。", + referencePage: "/docs/trial-session/functions/", + }, + { + name: "戻り値 (JavaScript)", + aliases: ["戻り値"], + definition: "JavaScriptの関数呼び出し式の評価結果となる値。", + referencePage: "/docs/trial-session/functions/", + }, + { + name: "～ (値) を返す (JavaScript)", + aliases: ["返す", "返し"], + definition: + "関数の実行が終了し、式の評価結果の値が確定すること。return文により実現できる。", + referencePage: "/docs/trial-session/functions/", + }, + { + name: "スコープ (JavaScript)", + aliases: ["スコープ"], + definition: "変数が有効な範囲。", + referencePage: "/docs/trial-session/functions/", + }, + { + name: "配列 (JavaScript)", + aliases: ["配列"], + definition: "複数の値を並べて1つにまとめた値。", + referencePage: "/docs/trial-session/array/", + }, + { + name: "オブジェクト (JavaScript)", + aliases: ["オブジェクト"], + definition: + "JavaScriptにおける値の一種。関連する値をまとめて1つの値として扱うことができる。プリミティブでない値はすべてオブジェクト。", + referencePage: "/docs/trial-session/object/", + }, + { + name: "プリミティブ (JavaScript)", + aliases: ["プリミティブ"], + definition: + "JavaScriptにおける値の種類。数値や文字列、論理値などの「それ以上分解できない」値。", + referencePage: "/docs/trial-session/object/", + }, + { + name: "プロパティ (JavaScript)", + aliases: ["プロパティ"], + definition: + "JavaScriptのオブジェクトに関連付けられた属性のこと。学生を表すオブジェクトであれば、名前や年齢などのプロパティが考えられる。", + referencePage: "/docs/trial-session/object/", + }, + { + name: "プロパティ名 (JavaScript)", + aliases: ["プロパティ名"], + definition: + "JavaScriptのオブジェクトにおいて、プロパティを表す名前のこと。", + referencePage: "/docs/trial-session/object/", + }, + { + name: "プロパティ値 (JavaScript)", + aliases: ["プロパティ値"], + definition: + "JavaScriptのオブジェクトにおいて、プロパティに関連付けられた値のこと。", + referencePage: "/docs/trial-session/object/", + }, + { + name: "DOM", + aliases: [], + definition: "HTML構造をJavaScriptのオブジェクトとして扱うための枠組み。", + referencePage: "/docs/trial-session/dom/", + }, + { + name: "イベント", + aliases: [], + definition: + "ボタンのクリック、フォームへの入力、ページの読み込みなど、Webページ上で発生するあらゆるアクションの総称。", + referencePage: "/docs/trial-session/events/", + }, + { + name: "イベントハンドラ", + aliases: [], + definition: + "イベント発生時の処理を行う仕組み。onclick関数、onload関数など、onキーワードにイベント名をつけた名称になっている。", + referencePage: "/docs/trial-session/events/", + }, + { + name: "クラス (JavaScript)", + aliases: ["クラス"], + definition: + "同じプロパティを持つオブジェクトを統一的に扱うための仕組み。プロパティや関数(メソッド)を予め設定できる。", + referencePage: "/docs/browser-apps/class/", + }, + { + name: "インスタンス (JavaScript)", + aliases: ["インスタンス"], + definition: "new演算子をクラスに適用して生成されるオブジェクトのこと。", + referencePage: "/docs/browser-apps/class/", + }, + { + name: "コンストラクタ (JavaScript)", + aliases: ["コンストラクタ"], + definition: + "インスタンスを作成するタイミング（new演算子をクラスに適用するタイミング）で実行される特殊なメソッド。constructorという名前で定義する必要がある。コンストラクタを定義すると、インスタンスを生成するときにプロパティの設定も同時に行うことができる。", + referencePage: "/docs/browser-apps/class/", + }, + { + name: "メソッド (JavaScript)", + aliases: ["メソッド"], + definition: + "オブジェクトに対して定義された関数。メソッド内ではメソッドが定義されたオブジェクトをthisキーワードを用いて参照できる。", + referencePage: "/docs/browser-apps/class/", + }, + { + name: "アロー関数", + aliases: [], + definition: + "JavaScriptにおいて関数を生成するための式のひとつ。=>という記号が矢のように見えることから命名された。", + referencePage: "/docs/browser-apps/anonymous-function/", + }, + { + name: "コールバック関数", + aliases: [], + definition: "他の関数の引数として呼び出される関数。", + referencePage: "/docs/browser-apps/anonymous-function/", + }, + { + name: "モジュール (JavaScript)", + aliases: ["モジュール"], + definition: + "独立したプログラムの塊。JavaScriptでは、通常1つのファイルがモジュールとして扱われる。Node.jsでは、拡張子が.mjsの場合import文を用いてインポートして利用する。", + referencePage: "/docs/web-servers/module/", + }, + { + name: "ライブラリ", + aliases: [], + definition: + "汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもの。基本的に他のプログラムから利用され、単体では実行できない。", + referencePage: "/docs/web-servers/module/", + }, + { + name: "サーバーとクライアント", + aliases: ["サーバー", "クライアント"], + definition: + "サービスを提供する側のコンピューターやソフトウェアをサーバー、提供される側のコンピューターやソフトウェアをクライアントと呼ぶ。例えばGoogle ChromeなどのWebブラウザは、Webにおける代表的なクライアントソフトウェアである。", + referencePage: "/docs/web-servers/server/", + }, + { + name: "JSON", + aliases: [], + definition: + "複雑なデータ構造をJavaScriptオブジェクトに似た形式で文字列として表現するための記法。", + referencePage: "/docs/web-servers/fetch-api/", + }, + { + name: "リクエストとレスポンス", + aliases: ["HTTPリクエスト", "リクエスト", "レスポンス"], + definition: + "クライアントからサーバーに対しサービスを要求する通信をリクエスト、リクエストに対してサーバーからクライアントに応答として返される通信をレスポンスと呼ぶ。", + referencePage: "/docs/web-servers/server/", + }, + { + name: "リクエスト・レスポンスのヘッダ・ボディ (HTTP)", + aliases: ["リクエストヘッダ", "リクエストボディ", "レスポンスボディ"], + definition: + "HTTPにおいてリクエストやレスポンスは主にヘッダと呼ばれる領域とボディと呼ばれる領域に分かれている。リクエストやレスポンスの本体はボディの部分に格納されており、ヘッダは付加的な情報を与えるために用いられる。なお、GETリクエストではリクエストボディを使用できない。", + referencePage: "/docs/web-servers/fetch-api-post/", + }, + { + name: "メソッド (HTTP)", + aliases: ["GETリクエスト", "POSTリクエスト"], + definition: + "HTTPリクエストの種類。GETやPOSTなどがある。GETリクエストではリクエストボディを利用できないが、POSTリクエストでは利用できるなどの違いがある。", + referencePage: "/docs/web-servers/fetch-api-post/", + }, + { + name: "ステータスコード (HTTP)", + aliases: ["ステータスコード"], + definition: + "HTTPレスポンスに含まれる、リクエストの処理結果を表す3桁の数値。200番台は成功、400番台はクライアント側の問題での失敗、500番台はサーバー側の問題での失敗を表す。代表的なものに200 (OK)、400 (Bad Request)、401 (Unauthorized)、404 (Not Found)、500 (Internal Server Error)がある。", + referencePage: "/docs/web-servers/fetch-api-post/", + }, + { + name: "npxコマンド", + aliases: [], + definition: + "npm付属のコマンド。インストールしたnpmパッケージを直接実行する機能を持つ。", + referencePage: "/docs/web-servers/database/", + }, + { + name: "非同期処理", + aliases: ["非同期関数"], + definition: + "処理を実行する際、その完了を待たずに呼び出し元の処理が続行されるような処理。JavaScriptでは、asyncキーワードをつけた関数は非同期処理を行うための関数となり、内部ではawaitキーワードにより他の非同期処理を呼び出してその結果を待機できるようになる。", + referencePage: "/docs/web-servers/database/", + }, + { + name: "環境変数", + aliases: [], + definition: + "アプリケーションの実行時に、アプリケーション自体を変更することなく外側から動作を変更するために用いることができる仕組み。キーと値の組み合わせによって定義される。", + referencePage: "/docs/web-servers/database/", + }, + { + name: "デプロイ", + aliases: [], + definition: + "開発したプログラムを実行可能な状態にして、実際に利用できるようにすること。Webアプリケーションの場合、サーバーにプログラムを配置して、インターネット上でアクセスできるようにすることを指す。", + referencePage: "/docs/web-servers/deploy-on-render/", + }, + { + name: "トランスパイル", + aliases: ["トランスパイラ"], + definition: + "プログラムを同じ意味を持つ別のプログラムへと変換すること。Web開発では、通常変換の結果ウェブブラウザが解釈できるJavaScriptが生成される。Babelが有名。", + referencePage: "/docs/advanced/bundler/", + }, + { + name: "モジュールバンドラ", + aliases: [], + definition: + "複数のJavaScriptモジュールをまとめてひとつにするためのソフトウェア。webpackが有名。", + referencePage: "/docs/advanced/bundler/", + }, + { + name: "JSX", + aliases: [], + definition: + "JavaScriptの拡張構文で、Reactなどと共に用いられる。JSXが有効なJavaScriptでは、HTMLに似た構文の式により特定の種類のオブジェクトを作成できる。拡張子は.jsxで、TypeScriptとともに用いる場合は.tsx。", + referencePage: "/docs/advanced/react/", + }, + { + name: "truthyとfalsy (JavaScript)", + aliases: ["truthy", "falsy"], + definition: + "JavaScriptでは、数値のゼロ、空文字列、null、undefined、NaNをfalsy、それ以外の全ての値をtruthyとみなす。if文は条件式の結果がtruthyであるかfalsyであるかによって分岐を行う。", + referencePage: "/docs/advanced/react/", + }, + { + name: "ミュータブルとイミュータブル", + aliases: ["ミュータブル", "イミュータブル"], + definition: + "オブジェクトの内部が変更可能であるとき、そのオブジェクトはミュータブルであるといい、変更不能である場合はイミュータブルであるという。Reactなどのライブラリでは状態を表すオブジェクトはイミュータブルであることが求められる。これは、状態が変化する際に参照も変化することを保証するためである。", + referencePage: "/docs/browser-apps/reference/", + }, +]; diff --git a/src/components/Term/index.jsx b/src/components/Term/index.jsx deleted file mode 100644 index 86372353..00000000 --- a/src/components/Term/index.jsx +++ /dev/null @@ -1,77 +0,0 @@ -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 definitions from "./definitions"; -import typeMap from "./type-map.js"; - -/** - * @param {Object} props - * @param {keyof typeof definitions | null} props.type - * @param {React.ReactNode} props.children - */ -export default function Term({ type = null, children }) { - if (type === null) type = typeMap.get(onlyText(children)); - if (!type) - throw new Error( - `Problem: Term ${onlyText(children)} is not defined in type-map.js . - Solution: explicitly specify term type, or add type definition to type-map.js`, - ); - - const term = definitions.terms[type]; - if (!term) throw new Error(`Type ${type} is not defined.`); - const referencePageTitle = - definitions.referencePageTitles[term.referencePage]; - const location = useLocation(); - - const wrap = (content) => { - const shouldLinkToReferencePage = () => { - // referencePageがundefinedならばリンクを表示しない - if (term.referencePage === undefined) return false; - - // referencePageTitleがundefinedならばエラーを投げる (明らかに人的ミスのため) - if (referencePageTitle === undefined) { - throw new Error( - `The page title of the reference "${term.referencePage}" is not defined in referencePageTitles in "src/components/Term/definition.js"`, - ); - } - - // referencePageの#アンカーを除外 - const referenceLink = term.referencePage.split("#")[0]; - // 現在のページで用語が初出であればリンクを表示する必要がない - if (location.pathname === referenceLink) return false; - if (location.pathname + "/" === referenceLink) return false; - return true; - }; - - return ( - -
{term.name}
-
{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 00000000..134456ee --- /dev/null +++ b/src/components/Term/index.tsx @@ -0,0 +1,65 @@ +import { JSX } from "react"; +// TypeScriptのセットアップをしていないことでエラーになるので無視する +// @ts-ignore +import Link from "@docusaurus/Link"; +// @ts-ignore +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"; +// @ts-ignore +import styles from "./styles.module.css"; +import { referencePageTitles, terms } from "./definitions"; + +type TermProps = { + name?: string; + children: React.ReactNode; +}; + +export default function Term(props: TermProps) { + const name = props.name ? props.name : onlyText(props.children); + const term = terms.find( + (term) => term.name === name || term.aliases.includes(name), + ); + if (!term) throw new Error(`${name}という用語は定義されていません`); + + 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.name}
+
{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 22f00ec7..00000000 --- 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; From a26b2f59b45b770af9dd82a15d9f3cccd0b5e43f Mon Sep 17 00:00:00 2001 From: WATAHIKI YUTO Date: Sun, 21 Dec 2025 15:00:27 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=E5=AE=9A=E7=BE=A9=E3=81=ABid=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Term/definitions.ts | 71 ++++++++++++++++++++++++++++++ src/components/Term/index.tsx | 22 ++++----- 2 files changed, 83 insertions(+), 10 deletions(-) diff --git a/src/components/Term/definitions.ts b/src/components/Term/definitions.ts index 2c608e89..6da7a131 100644 --- a/src/components/Term/definitions.ts +++ b/src/components/Term/definitions.ts @@ -40,6 +40,7 @@ export const referencePageTitles = { }; type Term = { + id: string; name: string; aliases: string[]; definition: string; @@ -48,6 +49,7 @@ type Term = { export const terms: Term[] = [ { + id: "file-extension", name: "拡張子", aliases: [], definition: @@ -55,12 +57,14 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/html/", }, { + id: "git", name: "Git", aliases: [], definition: "分散型バージョン管理システムのひとつ。", referencePage: "/docs/web-servers/git-github-init/", }, { + id: "github", name: "GitHub", aliases: [], definition: @@ -68,24 +72,28 @@ export const terms: Term[] = [ referencePage: "/docs/web-servers/git-github-init/", }, { + id: "repository", name: "リポジトリ", aliases: [], definition: "ソースコードやそれに付随する情報のまとまり。", referencePage: "/docs/web-servers/git/", }, { + id: "html", name: "HTML", aliases: [], definition: "ウェブページの構造を表すためのマークアップ言語。", referencePage: "/docs/trial-session/html/", }, { + id: "nest", name: "ネスト", aliases: [], definition: "ある構造の中にある別の構造を入れること。", referencePage: "/docs/trial-session/html/", }, { + id: "javascript", name: "JavaScript", aliases: [], definition: @@ -93,6 +101,7 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/javascript/", }, { + id: "start-tag", name: "開始タグ", aliases: [], definition: @@ -100,30 +109,35 @@ export const terms: Term[] = [ 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: "要素の終端を表す。
内容
ならばが終了タグ。", referencePage: "/docs/trial-session/html/", }, { + id: "css", name: "CSS", aliases: [], definition: @@ -131,6 +145,7 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/css/", }, { + id: "style-attribute", name: "style属性", aliases: [], definition: @@ -138,6 +153,7 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/css/", }, { + id: "css-property", name: "プロパティ (CSS)", aliases: [], definition: @@ -145,6 +161,7 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/css/", }, { + id: "javascript-statement", name: "文", aliases: [], definition: @@ -152,6 +169,7 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/javascript/", }, { + id: "javascript-value", name: "値 (JavaScript)", aliases: ["値"], definition: @@ -159,6 +177,7 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/expressions/", }, { + id: "javascript-string", name: "文字列 (JavaScript)", aliases: ["文字列"], definition: @@ -166,12 +185,14 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/expressions/", }, { + id: "javascript-number", name: "数値 (JavaScript)", aliases: ["数値"], definition: "JavaScriptにおける値の一種。プログラム中に直接記述できる。", referencePage: "/docs/trial-session/expressions/", }, { + id: "javascript-operator", name: "演算子 (JavaScript)", aliases: ["演算子"], definition: @@ -179,18 +200,21 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/expressions/", }, { + id: "javascript-expression", name: "式 (JavaScript)", aliases: ["式"], definition: "JavaScriptにおいて、計算・処理されて値を生成するまとまり。", referencePage: "/docs/trial-session/expressions/", }, { + id: "javascript-evaluation", name: "評価 (JavaScript)", aliases: ["評価"], definition: "JavaScriptの実行エンジンが式から値を生成する動作。", referencePage: "/docs/trial-session/expressions/", }, { + id: "javascript-operator-priority", name: "演算子の優先順位 (JavaScript)", aliases: [], definition: @@ -198,24 +222,28 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/expressions/", }, { + id: "javascript-variable", name: "変数", aliases: [], definition: "JavaScriptで値を一時的に保存しておくための入れ物。", referencePage: "/docs/trial-session/variables/", }, { + id: "javascript-declaration", name: "宣言 (JavaScript)", aliases: ["宣言"], definition: "JavaScriptで変数を使用するために必要な記述。", referencePage: "/docs/trial-session/variables/", }, { + id: "javascript-assignment", name: "代入 (JavaScript)", aliases: ["代入"], definition: "変数に値を設定する操作。それまで入っていた値は消えてしまう。", referencePage: "/docs/trial-session/variables/", }, { + id: "camel-case", name: "キャメルケース", aliases: [], definition: @@ -223,6 +251,7 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/variables/", }, { + id: "snake-case", name: "スネークケース", aliases: [], definition: @@ -230,6 +259,7 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/variables/", }, { + id: "pascal-case", name: "パスカルケース", aliases: [], definition: @@ -237,6 +267,7 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/variables/", }, { + id: "javascript-boolean", name: "論理値 (JavaScript)", aliases: ["論理値"], definition: @@ -244,6 +275,7 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/boolean/", }, { + id: "javascript-if-statement", name: "if文", aliases: [], definition: @@ -251,6 +283,7 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/if-statement/", }, { + id: "javascript-control-flow", name: "制御構造 (JavaScript)", aliases: ["制御構造", "制御構文"], definition: @@ -258,30 +291,35 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/if-statement/", }, { + id: "javascript-function", name: "関数 (JavaScript)", aliases: ["関数"], definition: "引数や返り値を持つ文のまとまり。", referencePage: "/docs/trial-session/functions/", }, { + id: "javascript-parameter", name: "引数 (JavaScript)", aliases: ["引数"], definition: "JavaScriptの関数に対し、呼び出し時に与えることのできる値。", referencePage: "/docs/trial-session/functions/", }, { + id: "javascript-pass", name: "～ (値) を～ (関数) に渡す", aliases: ["渡す"], definition: "JavaScriptの関数に値を引数として設定して実行すること。", referencePage: "/docs/trial-session/functions/", }, { + id: "javascript-return-value", name: "戻り値 (JavaScript)", aliases: ["戻り値"], definition: "JavaScriptの関数呼び出し式の評価結果となる値。", referencePage: "/docs/trial-session/functions/", }, { + id: "javascript-return", name: "～ (値) を返す (JavaScript)", aliases: ["返す", "返し"], definition: @@ -289,18 +327,21 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/functions/", }, { + id: "javascript-scope", name: "スコープ (JavaScript)", aliases: ["スコープ"], definition: "変数が有効な範囲。", referencePage: "/docs/trial-session/functions/", }, { + id: "javascript-array", name: "配列 (JavaScript)", aliases: ["配列"], definition: "複数の値を並べて1つにまとめた値。", referencePage: "/docs/trial-session/array/", }, { + id: "javascript-object", name: "オブジェクト (JavaScript)", aliases: ["オブジェクト"], definition: @@ -308,6 +349,7 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/object/", }, { + id: "javascript-primitive", name: "プリミティブ (JavaScript)", aliases: ["プリミティブ"], definition: @@ -315,6 +357,7 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/object/", }, { + id: "javascript-property", name: "プロパティ (JavaScript)", aliases: ["プロパティ"], definition: @@ -322,6 +365,7 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/object/", }, { + id: "javascript-property-name", name: "プロパティ名 (JavaScript)", aliases: ["プロパティ名"], definition: @@ -329,6 +373,7 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/object/", }, { + id: "javascript-property-value", name: "プロパティ値 (JavaScript)", aliases: ["プロパティ値"], definition: @@ -336,12 +381,14 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/object/", }, { + id: "dom", name: "DOM", aliases: [], definition: "HTML構造をJavaScriptのオブジェクトとして扱うための枠組み。", referencePage: "/docs/trial-session/dom/", }, { + id: "events", name: "イベント", aliases: [], definition: @@ -349,6 +396,7 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/events/", }, { + id: "event-handler", name: "イベントハンドラ", aliases: [], definition: @@ -356,6 +404,7 @@ export const terms: Term[] = [ referencePage: "/docs/trial-session/events/", }, { + id: "javascript-class", name: "クラス (JavaScript)", aliases: ["クラス"], definition: @@ -363,12 +412,14 @@ export const terms: Term[] = [ referencePage: "/docs/browser-apps/class/", }, { + id: "javascript-instance", name: "インスタンス (JavaScript)", aliases: ["インスタンス"], definition: "new演算子をクラスに適用して生成されるオブジェクトのこと。", referencePage: "/docs/browser-apps/class/", }, { + id: "javascript-constructor", name: "コンストラクタ (JavaScript)", aliases: ["コンストラクタ"], definition: @@ -376,6 +427,7 @@ export const terms: Term[] = [ referencePage: "/docs/browser-apps/class/", }, { + id: "javascript-method", name: "メソッド (JavaScript)", aliases: ["メソッド"], definition: @@ -383,6 +435,7 @@ export const terms: Term[] = [ referencePage: "/docs/browser-apps/class/", }, { + id: "arrow-function", name: "アロー関数", aliases: [], definition: @@ -390,12 +443,14 @@ export const terms: Term[] = [ referencePage: "/docs/browser-apps/anonymous-function/", }, { + id: "callback-function", name: "コールバック関数", aliases: [], definition: "他の関数の引数として呼び出される関数。", referencePage: "/docs/browser-apps/anonymous-function/", }, { + id: "javascript-module", name: "モジュール (JavaScript)", aliases: ["モジュール"], definition: @@ -403,6 +458,7 @@ export const terms: Term[] = [ referencePage: "/docs/web-servers/module/", }, { + id: "library", name: "ライブラリ", aliases: [], definition: @@ -410,6 +466,7 @@ export const terms: Term[] = [ referencePage: "/docs/web-servers/module/", }, { + id: "server-client", name: "サーバーとクライアント", aliases: ["サーバー", "クライアント"], definition: @@ -417,6 +474,7 @@ export const terms: Term[] = [ referencePage: "/docs/web-servers/server/", }, { + id: "json", name: "JSON", aliases: [], definition: @@ -424,6 +482,7 @@ export const terms: Term[] = [ referencePage: "/docs/web-servers/fetch-api/", }, { + id: "request-response", name: "リクエストとレスポンス", aliases: ["HTTPリクエスト", "リクエスト", "レスポンス"], definition: @@ -431,6 +490,7 @@ export const terms: Term[] = [ referencePage: "/docs/web-servers/server/", }, { + id: "http-header-body", name: "リクエスト・レスポンスのヘッダ・ボディ (HTTP)", aliases: ["リクエストヘッダ", "リクエストボディ", "レスポンスボディ"], definition: @@ -438,6 +498,7 @@ export const terms: Term[] = [ referencePage: "/docs/web-servers/fetch-api-post/", }, { + id: "http-method", name: "メソッド (HTTP)", aliases: ["GETリクエスト", "POSTリクエスト"], definition: @@ -445,6 +506,7 @@ export const terms: Term[] = [ referencePage: "/docs/web-servers/fetch-api-post/", }, { + id: "http-status-code", name: "ステータスコード (HTTP)", aliases: ["ステータスコード"], definition: @@ -452,6 +514,7 @@ export const terms: Term[] = [ referencePage: "/docs/web-servers/fetch-api-post/", }, { + id: "npx-command", name: "npxコマンド", aliases: [], definition: @@ -459,6 +522,7 @@ export const terms: Term[] = [ referencePage: "/docs/web-servers/database/", }, { + id: "asynchronous-process", name: "非同期処理", aliases: ["非同期関数"], definition: @@ -466,6 +530,7 @@ export const terms: Term[] = [ referencePage: "/docs/web-servers/database/", }, { + id: "environment-variable", name: "環境変数", aliases: [], definition: @@ -473,6 +538,7 @@ export const terms: Term[] = [ referencePage: "/docs/web-servers/database/", }, { + id: "deploy", name: "デプロイ", aliases: [], definition: @@ -480,6 +546,7 @@ export const terms: Term[] = [ referencePage: "/docs/web-servers/deploy-on-render/", }, { + id: "transpile", name: "トランスパイル", aliases: ["トランスパイラ"], definition: @@ -487,6 +554,7 @@ export const terms: Term[] = [ referencePage: "/docs/advanced/bundler/", }, { + id: "module-bundler", name: "モジュールバンドラ", aliases: [], definition: @@ -494,6 +562,7 @@ export const terms: Term[] = [ referencePage: "/docs/advanced/bundler/", }, { + id: "jsx", name: "JSX", aliases: [], definition: @@ -501,6 +570,7 @@ export const terms: Term[] = [ referencePage: "/docs/advanced/react/", }, { + id: "javascript-truthy-falsy", name: "truthyとfalsy (JavaScript)", aliases: ["truthy", "falsy"], definition: @@ -508,6 +578,7 @@ export const terms: Term[] = [ referencePage: "/docs/advanced/react/", }, { + id: "mutable-immutable", name: "ミュータブルとイミュータブル", aliases: ["ミュータブル", "イミュータブル"], definition: diff --git a/src/components/Term/index.tsx b/src/components/Term/index.tsx index 134456ee..30c517f2 100644 --- a/src/components/Term/index.tsx +++ b/src/components/Term/index.tsx @@ -1,29 +1,31 @@ import { JSX } from "react"; -// TypeScriptのセットアップをしていないことでエラーになるので無視する -// @ts-ignore import Link from "@docusaurus/Link"; -// @ts-ignore 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"; -// @ts-ignore import styles from "./styles.module.css"; import { referencePageTitles, terms } from "./definitions"; type TermProps = { - name?: string; + id?: string; children: React.ReactNode; }; export default function Term(props: TermProps) { - const name = props.name ? props.name : onlyText(props.children); - const term = terms.find( - (term) => term.name === name || term.aliases.includes(name), - ); - if (!term) throw new Error(`${name}という用語は定義されていません`); + 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]; From fd1c64658673f6a59a957051d843ddb9390975f8 Mon Sep 17 00:00:00 2001 From: WATAHIKI YUTO Date: Sun, 21 Dec 2025 15:08:56 +0900 Subject: [PATCH 4/5] =?UTF-8?q?`id`=E3=83=97=E3=83=AD=E3=83=91=E3=83=86?= =?UTF-8?q?=E3=82=A3=E3=82=92=E4=BD=BF=E7=94=A8=E3=81=99=E3=82=8B=E3=82=88?= =?UTF-8?q?=E3=81=86=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/03-css/index.mdx | 4 ++-- docs/1-trial-session/05-expressions/index.mdx | 6 +++--- docs/1-trial-session/07-boolean/index.mdx | 4 ++-- docs/1-trial-session/13-dom/index.mdx | 4 ++-- docs/3-web-servers/07-fetch-api-post/index.mdx | 2 +- docs/4-advanced/01-cookie/index.mdx | 2 +- docs/4-advanced/02-bundler/index.mdx | 2 +- 7 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx index cfc86d05..5d68cafa 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 ![Hello World!](./red-hello-world.png) {/* 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 bd23a640..4db31ff3 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 0f6d665c..09dc89bb 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 1583c9d5..1e275479 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"; ![JavaScriptからスタイルを操作する](./change-styles.png) {/* 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 bae623b7..a9eb8df6 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 a3672f17..3d128bbc 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 5ccae84d..3644df12 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/)などにアップロードすれば使用可能になるでしょう。 From 60bffa305a13d6706adf6ed468f96103649f53c0 Mon Sep 17 00:00:00 2001 From: WATAHIKI YUTO Date: Sun, 21 Dec 2025 15:43:44 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=E8=AA=A4=E3=81=A3=E3=81=A6=E5=A4=89?= =?UTF-8?q?=E6=9B=B4=E3=81=95=E3=82=8C=E3=81=9F=E3=83=91=E3=82=B9=E3=82=92?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Term/definitions.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Term/definitions.ts b/src/components/Term/definitions.ts index 6da7a131..879bf539 100644 --- a/src/components/Term/definitions.ts +++ b/src/components/Term/definitions.ts @@ -527,7 +527,7 @@ export const terms: Term[] = [ aliases: ["非同期関数"], definition: "処理を実行する際、その完了を待たずに呼び出し元の処理が続行されるような処理。JavaScriptでは、asyncキーワードをつけた関数は非同期処理を行うための関数となり、内部ではawaitキーワードにより他の非同期処理を呼び出してその結果を待機できるようになる。", - referencePage: "/docs/web-servers/database/", + referencePage: "/docs/web-servers/fetch-api/", }, { id: "environment-variable",