From 1d8319970c92de58075ad4fbbcd27cd0a4454519 Mon Sep 17 00:00:00 2001 From: chvmvd <104971044+chvmvd@users.noreply.github.com> Date: Sat, 4 Nov 2023 21:15:54 +0900 Subject: [PATCH] Remove unnecessary `p` element --- docs/1-trial-session/03-javascript/index.mdx | 19 ++-- docs/1-trial-session/04-expressions/index.mdx | 38 +++---- docs/1-trial-session/05-variables/index.mdx | 74 ++++++------- docs/1-trial-session/06-boolean/index.mdx | 16 ++- .../1-trial-session/07-if-statement/index.mdx | 8 +- docs/1-trial-session/09-functions/index.mdx | 104 +++++++----------- docs/1-trial-session/11-object/index.mdx | 54 ++++----- docs/1-trial-session/12-css/index.mdx | 10 +- docs/1-trial-session/13-dom/index.mdx | 47 +++----- docs/1-trial-session/14-events/index.mdx | 51 ++++----- docs/2-browser-apps/03-class/index.mdx | 28 ++--- docs/3-web-servers/06-get-post/index.mdx | 13 +-- docs/3-web-servers/07-database/index.mdx | 10 +- docs/4-advanced/02-bundler/index.mdx | 10 +- docs/4-advanced/03-typescript/index.mdx | 8 +- 15 files changed, 190 insertions(+), 300 deletions(-) diff --git a/docs/1-trial-session/03-javascript/index.mdx b/docs/1-trial-session/03-javascript/index.mdx index 7cf91f524..3351ed9ff 100644 --- a/docs/1-trial-session/03-javascript/index.mdx +++ b/docs/1-trial-session/03-javascript/index.mdx @@ -43,9 +43,7 @@ document.write("Hello World!"); ## JavaScript が動く仕組み -

- HTML ファイルの中に、以下のような記述があります。 -

+HTML ファイルの中に、以下のような記述があります。 ```html title="index.html" @@ -61,15 +59,12 @@ document.write("Hello World!"); ## JavaScript の基本文法 -

- JavaScript{" "} - のプログラムで、セミコロンで区切られた部分を - 文と呼びます。 - JavaScript の実行環境は、プログラム中に含まれる - 文 - を上から下に向けて順番に実行していきます。document.write - はブラウザの画面に出力するための命令です。 -

+JavaScript のプログラムで、セミコロンで区切られた部分を +文と呼びます。 +JavaScript の実行環境は、プログラム中に含まれる +文 +を上から下に向けて順番に実行していきます。 `document.write` +はブラウザの画面に出力するための命令です。 ```javascript title="script.js" document.write("Hello World1"); diff --git a/docs/1-trial-session/04-expressions/index.mdx b/docs/1-trial-session/04-expressions/index.mdx index 5dbac4997..e69d6372b 100644 --- a/docs/1-trial-session/04-expressions/index.mdx +++ b/docs/1-trial-session/04-expressions/index.mdx @@ -26,15 +26,10 @@ document.write("Hello World"); document.write(3); ``` -

- - 演算子 - - を用いると、値 - を用いて計算をすることができます。例えば +（加算 - 演算子 - ）で、足し算の計算を行うことができます。 -

+**演算子**を用いると、 +値を用いて計算をすることができます。例えば `+`（加算 +演算子 +）で、足し算の計算を行うことができます。 ```javascript title="script.js" document.write(3 + 4); @@ -42,10 +37,8 @@ document.write(3 + 4); ## 演算子の優先順位 -

- 演算子には、 - 優先順位が設定されています。 -

+演算子には、 +優先順位が設定されています。 ```javascript title="script.js" document.write(3 + 4 * 5); @@ -59,17 +52,14 @@ document.write(3 + 4 * 5); ## いろいろな演算子 -

- 演算子が適用できるのは、何も - 数値だけではありません。 - 文字列に適用できる - 演算子もあります。先ほどの - + - （加算演算子）は、 - 文字列同士で使用された場合は、 - 文字列結合 - 演算子となります。 -

+演算子が適用できるのは、何も +数値だけではありません。 +文字列に適用できる +演算子もあります。 先ほどの `+`（加算 +演算子）は、 +文字列同士で使用された場合は、 +文字列結合 +演算子となります。 ```javascript title="script.js" document.write("Hello" + "World"); diff --git a/docs/1-trial-session/05-variables/index.mdx b/docs/1-trial-session/05-variables/index.mdx index 0820adf1a..39bd01169 100644 --- a/docs/1-trial-session/05-variables/index.mdx +++ b/docs/1-trial-session/05-variables/index.mdx @@ -4,14 +4,13 @@ title: 変数 ## 変数とは -

- 変数を用いると、 - 値 - を一時的に保存し、再利用することができます。数学における変数は通常数値を表すものですが、プログラムにおける - 変数は、 - 文字列等を含め、全ての種類の「 - 値」を格納することができます。 -

+変数を用いると、 +値 +を一時的に保存し、再利用することができます。 +数学における変数は通常数値を表すものですが、プログラムにおける +変数は、 +文字列等を含め、全ての種類の「 +値」を格納することができます。 ## 変数の宣言と使用 @@ -29,13 +28,10 @@ document.write(myGreatName); 2 行目では、変数 `myGreatName` が評価され、代入されていた文字列値 `"Becky Jones"` が画面に表示されます。 -

- 変数を - 宣言するキーワードには、 - let 以外にも const があります。記法自体は - let{" "} - と同様ですが、少し違いがあります。違いについては、次の節で説明します。 -

+変数を +宣言するキーワードには、`let` 以外にも +`const` があります。記法自体は `let` +と同様ですが、少し違いがあります。違いについては、次の節で説明します。 ```javascript title="script.js" const myGreatName = "Becky Jones"; @@ -48,14 +44,12 @@ document.write(myGreatName); :::info -

- JavaScript の - 変数名には、通常 - キャメルケースが用いられます。 - スネークケースや - パスカルケース - などの命名規則が利用される文法もあります。 -

+JavaScript の + 変数 +名には、通常キャメルケースが用いられます。 +スネークケースや +パスカルケース +などの命名規則が利用される文法もあります。 ::: @@ -93,15 +87,12 @@ mysteriousNumber = 2; document.write(mysteriousNumber); // 2 ``` -

- 変数には、最後に - 代入された - 値のみを保持する性質があります。そのため、 - 変数 mysteriousNumber は 3 - 回代入が行われていますが、最後に - 代入された 2{" "} - が表示されます。 -

+変数には、最後に +代入された +値のみを保持する性質があります。そのため、 +変数 `mysteriousNumber` は 3 回 +代入が行われていますが、最後に +代入された `2` が表示されます。 一方、`const` で宣言された変数には、再代入ができません。そのため、上記のコードの `let` を `const` に置き換えることはできません。 @@ -115,16 +106,13 @@ document.write(price); -

- 代入 - 演算子は、まず右辺の - 式 - を評価します。これにより、右辺は{" "} - 100 / 2 となります。よって、最終的に - 変数 - price の値は - 50 - となり、これは price を半分にする操作に対応します。 -

+代入 +演算子は、まず右辺の + 式 +を評価します。これにより、右辺は +`100 / 2` となります。よって、最終的に + 変数 + `price` の値は `50` となり、これは +`price` を半分にする操作に対応します。 ![変数の再代入](./reassignment-evaluation.png) diff --git a/docs/1-trial-session/06-boolean/index.mdx b/docs/1-trial-session/06-boolean/index.mdx index 20d73e296..8f77b8f61 100644 --- a/docs/1-trial-session/06-boolean/index.mdx +++ b/docs/1-trial-session/06-boolean/index.mdx @@ -20,10 +20,8 @@ title: 論理値と論理演算子 ## 論理演算子 -

- 論理値に対して適用できる - 演算子が存在します。 -

+論理値に対して適用できる +演算子が存在します。 ```javascript const isMonsterBig = true; @@ -35,11 +33,11 @@ const shouldFight = isHunterStrong || isMonsterSmall; // false 詳細は以下の通りです。 `!` のみが作用する対象を 1 つしかとらないことに注意してください。 -| 演算子 | 意味 | 詳細 | -| ------------------------- | ---------- | -------------------------------------------------------------------- | -| `!` | ～ではない | `true` ならば `false`、`false` ならば `true` | -| `&&` | かつ | 両方 `true` ならば `true`、どちらか 1 つでも `false` ならば `false` | -| || | または | 両方 `false` ならば `false` 、どちらか 1 つでも `true` ならば `true` | +| 演算子 | 意味 | 詳細 | +| ------ | ---------- | -------------------------------------------------------------------- | +| `!` | ～ではない | `true` ならば `false`、`false` ならば `true` | +| `&&` | かつ | 両方 `true` ならば `true`、どちらか 1 つでも `false` ならば `false` | +| `\|\|` | または | 両方 `false` ならば `false` 、どちらか 1 つでも `true` ならば `true` | ## 比較演算子 diff --git a/docs/1-trial-session/07-if-statement/index.mdx b/docs/1-trial-session/07-if-statement/index.mdx index e646c933f..a9d91f664 100644 --- a/docs/1-trial-session/07-if-statement/index.mdx +++ b/docs/1-trial-session/07-if-statement/index.mdx @@ -41,11 +41,9 @@ if (式) { } ``` -

- 式の - 評価結果が true{" "} - であれば処理 1 が、false であれば処理 2 が実行されます。 -

+式の +評価結果が `true` であれば処理 1 +が、`false` であれば処理 2 が実行されます。 ```javascript const age = 18; diff --git a/docs/1-trial-session/09-functions/index.mdx b/docs/1-trial-session/09-functions/index.mdx index eeb9127da..45c767c17 100644 --- a/docs/1-trial-session/09-functions/index.mdx +++ b/docs/1-trial-session/09-functions/index.mdx @@ -21,27 +21,21 @@ greet(); 上のプログラムにおいて、`function` キーワードから始まる部分は関数を定義するための制御構文です。関数定義では、 `function` キーワードに続けて関数名、かっこを記述します。この後、関数内で実行したい処理を波かっこの中に記述していきます。 -

- 関数を定義すると、 - 関数 - 名に続けてかっこを記述することにより、その - 関数を実行できるようになります。 -

+関数を定義すると、 +関数 +名に続けてかっこを記述することにより、その +関数を実行できるようになります。 このプログラムでは、 `greet` 関数が 2 回呼び出されているので、ブラウザに `Hello World!` が 2 つ表示されます。 ## **引数** -

- 関数 - の振る舞いを呼び出し時に変更するため、 - 関数に - - 引数 - - を与えることができます。引数には任意の - 値が指定できます。 -

+関数 +の振る舞いを呼び出し時に変更するため、 +関数に +**引数** +を与えることができます。引数には任意の +値が指定できます。 ```javascript function greet(greetingType, myName) { @@ -62,29 +56,23 @@ greet("morning", "佐藤"); ## 戻り値 -

- 関数呼び出しは - 式の一種です。 - 関数定義内で return 文 - を用いると、関数の実行が停止され、 - 関数呼び出し - 式の - 評価 - 結果が確定します。この値を - - 戻り値 - - と呼びます。ある値を - 戻り値 - として設定して - 関数の実行を終了することを、 - 関数がその - 値を - - 返す - - と表現します。 -

+関数呼び出しは +式の一種です。 +関数定義内で **return 文** を用いると、 +関数の実行が停止され、 +関数呼び出し +式の + 評価 +結果が確定します。この値を +**戻り値** +と呼びます。ある値を + 戻り値 +として設定して +関数の実行を終了することを、 +関数がその +値を +**返す** +と表現します。 ```javascript function add(a, b) { @@ -149,12 +137,10 @@ document.write(multiply(3, 4)); **スコープ** と呼んでいます。 -

- 関数外で - 宣言された - 変数は - 関数内でも利用できます。 -

+関数外で +宣言された +変数は +関数内でも利用できます。 ```javascript let guestCount = 0; @@ -172,10 +158,8 @@ greet(); :::caution 変数の**スコープ** -

- スコープが終わった - 変数は、その時点で破棄されます。 -

+スコープが終わった +変数は、その時点で破棄されます。 ```javascript let outer = 0; @@ -196,10 +180,8 @@ increment(); ## 処理の分割 -

- 関数 - は、複数回使用する処理を簡便に記述するためだけでなく、複雑で長い処理の一部を切り出すことにも用いることができます。 -

+関数 +は、複数回使用する処理を簡便に記述するためだけでなく、複雑で長い処理の一部を切り出すことにも用いることができます。 長い処理をパーツに分割すると、次のようなメリットがあります。 @@ -275,19 +257,15 @@ function showProbabilityAsGraph(probability) { ### 最大値 -

- 引数を 2 つとり、そのうち大きい数を - 返す - 関数 max{" "} - を定義してください。 -

+引数を 2 つとり、そのうち大きい数を +返す +関数 `max` を定義してください。 :::tip -

- if 文を使って、a{" "} - が大きい場合と b が大きい場合で処理を書き分けます。 -

+if 文を使って、`a` が大きい場合と `b` +が大きい場合で処理を書き分けます。 + ::: diff --git a/docs/1-trial-session/11-object/index.mdx b/docs/1-trial-session/11-object/index.mdx index ea92ca308..4f5973b65 100644 --- a/docs/1-trial-session/11-object/index.mdx +++ b/docs/1-trial-session/11-object/index.mdx @@ -6,30 +6,24 @@ title: オブジェクト JavaScript で扱うことのできる値の種類として、これまで数値、文字列、論理値を扱ってきました。**オブジェクト**もまた、JavaScript の値ですが、今まで扱ってきた値とは少し性質が異なります。 -

- オブジェクト - を用いると、これまで扱ってきたような単純な - 値を複数まとめて一つの - 値として扱うことができます。 -

+オブジェクト +を用いると、これまで扱ってきたような単純な +値を複数まとめて一つの +値として扱うことができます。 ## オブジェクトの作成 -

- オブジェクトは、複数の - - プロパティ - - と呼ばれる値を持ちます。 - プロパティ - にはそれぞれ名前がついています。 - プロパティ - の名前には文字列しか指定できませんが、 - プロパティの - 値 - としては JavaScript で使用できるすべての - 値が使用可能です。 -

+オブジェクトは、複数の +**プロパティ** +と呼ばれる値を持ちます。 +プロパティ +にはそれぞれ名前がついています。 +プロパティ +の名前には文字列しか指定できませんが、 +プロパティの + 値 +としては JavaScript で使用できるすべての +値が使用可能です。 ```javascript const person = { name: "田中", age: 18 }; @@ -43,10 +37,8 @@ JavaScript のオブジェクトは、ほ ::: -

- オブジェクトの中に - オブジェクトを入れることもできます。 -

+オブジェクトの中に +オブジェクトを入れることもできます。 ```javascript const person = { @@ -149,13 +141,11 @@ document.write(tanaka.scores.japanese); ### 中級課題 -

- オブジェクトも - 値の一種なので、 - 関数の - 引数 - や戻り値として使用できます。 -

+オブジェクトも +値の一種なので、 +関数の + 引数 +や戻り値として使用できます。 `age` プロパティに 1 を加えたオブジェクトを返す関数 `incrementAge` を定義してみましょう。 diff --git a/docs/1-trial-session/12-css/index.mdx b/docs/1-trial-session/12-css/index.mdx index 4f20245a1..3cbc073fb 100644 --- a/docs/1-trial-session/12-css/index.mdx +++ b/docs/1-trial-session/12-css/index.mdx @@ -98,12 +98,10 @@ CSS の `{` から `}` で囲まれたブロックの中に、CSS のプロパティは、 - オブジェクトにおける - プロパティ - と似ているものの、全く異なるものです。文脈により何を意味しているのかが変わるので注意してください。 -

+CSS のプロパティは、 +オブジェクトにおける +プロパティ +と似ているものの、全く異なるものです。文脈により何を意味しているのかが変わるので注意してください。 ::: diff --git a/docs/1-trial-session/13-dom/index.mdx b/docs/1-trial-session/13-dom/index.mdx index 7ec28da5a..a88e930d4 100644 --- a/docs/1-trial-session/13-dom/index.mdx +++ b/docs/1-trial-session/13-dom/index.mdx @@ -4,17 +4,14 @@ title: DOM ## HTML 要素を JavaScript で取得する -

- - DOM - - （Document Object Model）は、HTML 構造を - JavaScript - のオブジェクトとして扱うための枠組みです。 - HTML と CSS{" "} - のほとんどの機能は JavaScript{" "} - から制御することができます。 -

+**DOM** +（Document Object Model）は、 + HTML + 構造を JavaScript の +オブジェクトとして扱うための枠組みです。 +HTML と CSS のほとんどの機能は + JavaScript + から制御することができます。 `document.getElementById` 関数は、引数として HTML 要素の `id` 属性に指定された値を文字列として渡すことで、その要素を表すオブジェクトを返します。 @@ -29,14 +26,11 @@ element.textContent = "Hello DOM"; -

- 変数 element には、 - index.html に記述された div - 要素 - に対応する - オブジェクトが - 代入されています。 -

+変数 `element` には、 `index.html` に記述された +`div` 要素に対応する +オブジェクトが + 代入 +されています。 ![DOM](./dom.png) @@ -63,18 +57,9 @@ element.style.backgroundColor = "red"; ![JavaScriptからスタイルを操作する](./change-styles.png) -

- CSS のプロパティ - 名である background-color は、内部にハイフンが含まれているため、 - element.style.background-color - のように指定してしまうと、ハイフンが減算 - 演算子として解釈されてしまいます。 - style プロパティでは、 - CSS - のプロパティ名は - キャメルケース - として指定する必要があることに注意してください。 -

+{/* prettier-ignore */} +CSS のプロパティ名である `background-color` は、内部にハイフンが含まれているため、`element.style.background-color` のように指定してしまうと、ハイフンが減算演算子として解釈されてしまいます。 +`style` プロパティでは、CSS のプロパティ名はキャメルケースとして指定する必要があることに注意してください。 ## DOM を用いて要素を追加する diff --git a/docs/1-trial-session/14-events/index.mdx b/docs/1-trial-session/14-events/index.mdx index 6c5af5442..aa58529fa 100644 --- a/docs/1-trial-session/14-events/index.mdx +++ b/docs/1-trial-session/14-events/index.mdx @@ -7,20 +7,16 @@ import projectMovieForDom from "./project-movie-for-dom.mp4"; ## 値としての関数 -

- JavaScript では、 - 関数も - 値 - の一種です。したがって、他の - 値と同じように、 - 変数に - 代入 - したり、 - 関数の - 引数や - 戻り値 - として使用したりすることができます。 -

+JavaScript では、 +関数も +値の一種です。したがって、他の +値と同じように、 +変数に +代入したり、 +関数の + 引数 +や戻り値 +として使用したりすることができます。 ```javascript function greet() { @@ -35,21 +31,18 @@ func(); ## イベントハンドラ -

- オブジェクトの - プロパティとして - 関数を利用することもできます。 - document.getElementById - が返す - オブジェクトの onclick{" "} - プロパティには、 - 要素がクリックされたときに実行される - 関数を指定できます。 -

-ボタンのクリック、フォームへの入力、ページの読み込みなど、Web ページ上で発生するあらゆるアクションを総称して -イベントと呼びます。このような -イベントの処理を行うのが -イベントハンドラで、onclick 関数はその一例です。 +オブジェクトの +プロパティとして +関数を利用することもできます。`document.getElementById` +が返す +オブジェクトの `onclick` + プロパティ +には、 +要素がクリックされたときに実行される +関数を指定できます。 + +ボタンのクリック、フォームへの入力、ページの読み込みなど、Web ページ上で発生するあらゆるアクションを総称してイベントと呼びます。 +このようなイベントの処理を行うのがイベントハンドラで、`onclick` 関数はその一例です。 ```html title="index.html" diff --git a/docs/2-browser-apps/03-class/index.mdx b/docs/2-browser-apps/03-class/index.mdx index da307eba9..a5ea11e2b 100644 --- a/docs/2-browser-apps/03-class/index.mdx +++ b/docs/2-browser-apps/03-class/index.mdx @@ -86,23 +86,17 @@ class Student { } ``` -

- クラス - 自体は単なる設計図でしかないため、実際の - オブジェクト - が存在するわけではありません。そこで、 - メソッド内では、設計図から作成された - インスタンス自身を指す特殊な変数 - this - が使用できます。 -

- -

- メソッドを使用するには、 - プロパティへのアクセス時と同じく、 - インスタンスに対して . - （ドット）記号を用います。 -

+クラス +自体は単なる設計図でしかないため、実際の +オブジェクト +が存在するわけではありません。そこで、 +メソッド内では、設計図から作成された +インスタンス自身を指す特殊な変数 `this` が使用できます。 + +メソッドを使用するには、 +プロパティへのアクセス時と同じく、 +インスタンスに対して `.` +（ドット）記号を用います。 ```javascript const tanaka = new Student(); diff --git a/docs/3-web-servers/06-get-post/index.mdx b/docs/3-web-servers/06-get-post/index.mdx index 97495b9b4..ab8d39174 100644 --- a/docs/3-web-servers/06-get-post/index.mdx +++ b/docs/3-web-servers/06-get-post/index.mdx @@ -57,17 +57,8 @@ app.listen(3000); これまで利用していた `app.get` ([`express.Application#get` メソッド](https://expressjs.com/ja/api.html#app.get.method)) では、GET メソッドのリクエストしか受け付けられないため、`/send` への POST リクエストを受け付けるために `app.post` ([`express.Application#post` メソッド](https://expressjs.com/ja/api.html#app.post.method)) を利用しています。 -

- クエリパラメータにアクセスするには、 - request.query ( - express.Request#query プロパティ - ) を使用しましたが、リクエストボディ - を使用するには、request.body ( - - express.Request#body プロパティ - - ) を使用します。 -

+{/* prettier-ignore */} +クエリパラメータにアクセスするには、`request.query` (`express.Request#query` プロパティ)を使用しましたが、リクエストボディを使用するには、`request.body` (`express.Request#body` プロパティ)を使用します。 `app.use(express.urlencoded({ extended: true }));` は、リクエストボディの解釈方法を定めています。HTML のフォームが送信されたとき、ブラウザが発行する POST リクエストのリクエストボディは、クエリパラメータと同じく URL エンコードされた形式で記述されます。[`express.urlencoded` 関数](https://expressjs.com/ja/api.html#express.urlencoded)は、URL エンコードされたリクエストボディを読み取り、`request.body` にオブジェクトの形式でデータを保存する役割を担っています。 diff --git a/docs/3-web-servers/07-database/index.mdx b/docs/3-web-servers/07-database/index.mdx index c27e0897c..2b8834efa 100644 --- a/docs/3-web-servers/07-database/index.mdx +++ b/docs/3-web-servers/07-database/index.mdx @@ -88,13 +88,9 @@ npx prisma init :::tip `npx` コマンド -

- - npx コマンド - - は、npm のパッケージを、プログラムからではなく直接実行するためのコマンドです。npm - には prisma パッケージのように、直接実行専用のパッケージも存在します。 -

+`npx` コマンドは、npm +のパッケージを、プログラムからではなく直接実行するためのコマンドです。npm には +`prisma` パッケージのように、直接実行専用のパッケージも存在します。 ::: diff --git a/docs/4-advanced/02-bundler/index.mdx b/docs/4-advanced/02-bundler/index.mdx index 153161ae9..c0c3b02d0 100644 --- a/docs/4-advanced/02-bundler/index.mdx +++ b/docs/4-advanced/02-bundler/index.mdx @@ -13,13 +13,9 @@ JavaScript は、当初は Web サイトに簡易的な動きを追加させる ### トランスパイラ -

- - トランスパイラ - - は、ソースコードを別のソースコードに変換するためのプログラムです。JavaScript においてトランスパイラが必要になるのは、主に - 2 つの理由によります。 -

+**トランスパイラ** +は、ソースコードを別のソースコードに変換するためのプログラムです。JavaScript においてトランスパイラが必要になるのは、主に +2 つの理由によります。 ひとつは、**最新の機能を使用するため**です。JavaScript の言語仕様は、[Ecma International](https://www.ecma-international.org/) の [TC39](https://tc39.es/) によって作成されていますが、新しく策定された仕様は、まだブラウザなどによって実装されていない場合があります。[Babel](https://babeljs.io/) は、そういった最新の言語仕様に沿って書かれたプログラムを変換し、古い仕様の範囲内で解釈できるプログラムに変換するための、最も有名なトランスパイラです。 diff --git a/docs/4-advanced/03-typescript/index.mdx b/docs/4-advanced/03-typescript/index.mdx index c9cbf599e..accf3281f 100644 --- a/docs/4-advanced/03-typescript/index.mdx +++ b/docs/4-advanced/03-typescript/index.mdx @@ -221,10 +221,10 @@ const operator2: BinaryNumberOperator = increment; 2 つの型に対し、集合の和や積 (共通部分)を求める記号が利用できます。 -| 記号 | 意味 | -| ------------------- | -------- | -| `&` | 共通部分 | -| | | 合併 | +| 記号 | 意味 | +| ---- | -------- | +| `&` | 共通部分 | +| `\|` | 合併 | ```typescript type Student = { name: string; major: string };