From a39a1fd7684bb842e5ef39b1b3b51b79610bb868 Mon Sep 17 00:00:00 2001 From: WATAHIKI Yuto Date: Sun, 29 Sep 2024 19:54:12 +0700 Subject: [PATCH] =?UTF-8?q?=E4=B8=8D=E8=A6=81=E3=81=AA=E6=94=B9=E8=A1=8C?= =?UTF-8?q?=E3=82=92=E5=89=8A=E9=99=A4=20(#821)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/02-html/index.mdx | 3 +- docs/1-trial-session/04-javascript/index.mdx | 3 +- docs/1-trial-session/05-expressions/index.mdx | 10 +-- docs/1-trial-session/06-variables/index.mdx | 23 ++---- docs/1-trial-session/07-boolean/index.mdx | 12 +-- docs/1-trial-session/09-functions/index.mdx | 19 ++--- docs/1-trial-session/13-dom/index.mdx | 16 ++-- docs/1-trial-session/14-events/index.mdx | 9 +-- docs/2-browser-apps/02-reference/index.mdx | 3 +- docs/2-browser-apps/03-class/index.mdx | 9 +-- .../05-css-arrangement/index.mdx | 3 +- docs/2-browser-apps/06-project/index.mdx | 18 ++--- docs/3-web-servers/01-wsl-setup/index.mdx | 3 +- .../3-web-servers/02-linux-commands/index.mdx | 23 ++---- docs/3-web-servers/05-server/index.mdx | 52 ++++--------- docs/3-web-servers/07-get-post/index.mdx | 3 +- .../10-git-github-init/index.mdx | 9 +-- docs/3-web-servers/11-git/index.mdx | 53 ++++--------- docs/3-web-servers/12-github/index.mdx | 77 +++++-------------- .../13-deploy-on-render/index.mdx | 3 +- docs/4-advanced/02-bundler/index.mdx | 3 +- 21 files changed, 100 insertions(+), 254 deletions(-) diff --git a/docs/1-trial-session/02-html/index.mdx b/docs/1-trial-session/02-html/index.mdx index 84e778cc4..de23bedd4 100644 --- a/docs/1-trial-session/02-html/index.mdx +++ b/docs/1-trial-session/02-html/index.mdx @@ -57,8 +57,7 @@ VS Code上で作成したファイルは`index.html`でした。しかしなが HTMLファイルは、文書に意味を持たせるために、**タグ**と呼ばれる構造を持つことができます。タグは、``のような、`<`と`>`で囲まれた英数字のまとまりです。 {/* prettier-ignore */} -タグは、`内容`のように、タグ名の先頭にスラッシュを付けるか否かの区別により**開始タグ**と**終了タグ**に分かれ、内部にテキストや別のタグを挟み込むことができます。 -開始タグから終了タグまでのまとまりを**要素**といいます。 +タグは、`内容`のように、タグ名の先頭にスラッシュを付けるか否かの区別により**開始タグ**と**終了タグ**に分かれ、内部にテキストや別のタグを挟み込むことができます。開始タグから終了タグまでのまとまりを**要素**といいます。 `body`要素の中身を書き換え、次のようにしてみましょう。 diff --git a/docs/1-trial-session/04-javascript/index.mdx b/docs/1-trial-session/04-javascript/index.mdx index d7d40737d..790162f7f 100644 --- a/docs/1-trial-session/04-javascript/index.mdx +++ b/docs/1-trial-session/04-javascript/index.mdx @@ -59,8 +59,7 @@ document.write("Hello World!"); ## JavaScript の基本文法 {/* prettier-ignore */} -JavaScriptのプログラムで、セミコロンで区切られた部分を文と呼びます。 -JavaScriptの実行環境は、プログラム中に含まれる文を上から下に向けて順番に実行していきます。 +JavaScriptのプログラムで、セミコロンで区切られた部分を文と呼びます。JavaScriptの実行環境は、プログラム中に含まれる文を上から下に向けて順番に実行していきます。 `document.write`はブラウザの画面に出力するための命令です。 ```javascript title="script.js" diff --git a/docs/1-trial-session/05-expressions/index.mdx b/docs/1-trial-session/05-expressions/index.mdx index 4a1932f99..4bc4afb1e 100644 --- a/docs/1-trial-session/05-expressions/index.mdx +++ b/docs/1-trial-session/05-expressions/index.mdx @@ -13,8 +13,7 @@ document.write("Hello World"); `"Hello World"`のように`"`（ダブルクォーテーション）で囲まれた**値**を、**文字列**と呼びます。 {/* prettier-ignore */} -文字列は値の一種です。 -数値は文字列と同じ値の一種ですが、プログラムの中に直接記述することができます。 +文字列は値の一種です。数値は文字列と同じ値の一種ですが、プログラムの中に直接記述することができます。 ![値の種類](./value-types.drawio.svg) @@ -23,8 +22,7 @@ document.write(3); ``` {/* prettier-ignore */} -**演算子**を用いると、値を用いて計算をすることができます。 -例えば`+`（加算演算子）で、足し算の計算を行うことができます。 +**演算子**を用いると、値を用いて計算をすることができます。例えば`+`（加算演算子）で、足し算の計算を行うことができます。 ```javascript title="script.js" document.write(3 + 4); @@ -48,9 +46,7 @@ document.write(3 + 4 * 5); ## いろいろな演算子 {/* prettier-ignore */} -演算子が適用できるのは、何も数値だけではありません。 -文字列に適用できる演算子もあります。 -先ほどの`+`（加算演算子）は、文字列同士で使用された場合は、文字列結合演算子となります。 +演算子が適用できるのは、何も数値だけではありません。文字列に適用できる演算子もあります。 先ほどの`+`（加算演算子）は、文字列同士で使用された場合は、文字列結合演算子となります。 ```javascript title="script.js" document.write("Hello" + "World"); diff --git a/docs/1-trial-session/06-variables/index.mdx b/docs/1-trial-session/06-variables/index.mdx index 52026de0b..6ab73f3dd 100644 --- a/docs/1-trial-session/06-variables/index.mdx +++ b/docs/1-trial-session/06-variables/index.mdx @@ -5,8 +5,7 @@ title: 変数 ## 変数とは {/* prettier-ignore */} -変数を用いると、値を一時的に保存し、再利用することができます。 -数学における変数は通常数値を表すものですが、プログラムにおける変数は、文字列等を含め、全ての種類の「値」を格納することができます。 +変数を用いると、値を一時的に保存し、再利用することができます。数学における変数は通常数値を表すものですが、プログラムにおける変数は、文字列等を含め、全ての種類の「値」を格納することができます。 ## 変数の宣言と使用 @@ -23,9 +22,7 @@ document.write(myName); 2行目では、変数`myName`が評価され、代入されていた文字列値`"John Doe"`が画面に表示されます。 {/* prettier-ignore */} -変数を宣言するキーワードには、`let`以外にも`const`があります。 -記法自体は`let`と同様ですが、少し違いがあります。 -違いについては、次の節で説明します。 +変数を宣言するキーワードには、`let`以外にも`const`があります。記法自体は`let`と同様ですが、少し違いがあります。違いについては、次の節で説明します。 ```javascript title="script.js" const myName = "John Doe"; @@ -39,16 +36,14 @@ document.write(myName); :::info {/* prettier-ignore */} -JavaScriptの変数名には、通常キャメルケースが用いられます。 -スネークケースやパスカルケースなどの命名規則が利用される文法もあります。 +JavaScriptの変数名には、通常キャメルケースが用いられます。スネークケースやパスカルケースなどの命名規則が利用される文法もあります。 ::: :::tip {/* prettier-ignore */} -変数に適切な命名をすることは非常に重要です。 -以下の例を見てみましょう。 +変数に適切な命名をすることは非常に重要です。以下の例を見てみましょう。 ```javascript const a = 500; @@ -80,8 +75,7 @@ document.write(mysteriousNumber); // 2 ``` {/* prettier-ignore */} -変数には、最後に代入された値のみを保持する性質があります。 -そのため、変数`mysteriousNumber`は3回代入が行われていますが、最後に代入された`2`が表示されます。 +変数には、最後に代入された値のみを保持する性質があります。そのため、変数`mysteriousNumber`は3回代入が行われていますが、最後に代入された`2`が表示されます。 一方、`const`で宣言された変数には、再代入ができません。そのため、上記のコードの`let`を`const`に置き換えることはできません。 @@ -96,16 +90,13 @@ document.write(price); {/* prettier-ignore */} -代入演算子は、まず右辺の式を評価します。 -これにより、右辺は`100 / 2`となります。 -よって、最終的に変数`price`の値は`50`となり、これは`price`を半分にする操作に対応します。 +代入演算子は、まず右辺の式を評価します。これにより、右辺は`100 / 2`となります。よって、最終的に変数`price`の値は`50`となり、これは`price`を半分にする操作に対応します。 ![変数の再代入](./reassignment-evaluation.png) ## 演習問題 -`counter`という名前の変数を作成し初期値を`0`としてください。 -その後、`counter`に`1`を加え、その結果を表示してください。 +`counter`という名前の変数を作成し初期値を`0`としてください。その後、`counter`に`1`を加え、その結果を表示してください。 diff --git a/docs/1-trial-session/07-boolean/index.mdx b/docs/1-trial-session/07-boolean/index.mdx index a1e8662ed..43397e484 100644 --- a/docs/1-trial-session/07-boolean/index.mdx +++ b/docs/1-trial-session/07-boolean/index.mdx @@ -5,8 +5,7 @@ title: 論理値と論理演算子 ## 論理値 {/* prettier-ignore */} -JavaScriptで利用できる「値」として、これまで文字列と数値を扱いました。 -JavaScriptではこの他に、**論理値**と呼ばれる、「正しいか、正しくないか」を表すための値が存在します。 +JavaScriptで利用できる「値」として、これまで文字列と数値を扱いました。JavaScriptではこの他に、**論理値**と呼ばれる、「正しいか、正しくないか」を表すための値が存在します。 {/* prettier-ignore */} 論理値は、`true`（真）または`false`（偽）の2つだけです。ダブルクォーテーション`"`は必要ありません。通常の値ですので、変数に代入したり、計算に使ったりすることができます。 @@ -55,8 +54,7 @@ document.write(age === 15); // false document.write(age === 14); // true ``` -`===`は左辺と右辺が等しいかどうか判定する比較演算子です。 -2行目では`age`と15とは等しくないので`false`が、3行目では`age`と14とは等しいので`true`が表示されます。 +`===`は左辺と右辺が等しいかどうか判定する比較演算子です。2行目では`age`と15とは等しくないので`false`が、3行目では`age`と14とは等しいので`true`が表示されます。 各演算子の意味は次の通りです。 @@ -103,11 +101,9 @@ document.write(takaoHeight = everestHeight); ## 演習問題 -クイズ番組で田中さんと佐藤さんが戦っています。 -田中さんの点数が`tanakaScore`で、佐藤さんの点数が`satoScore`で用意されています。 +クイズ番組で田中さんと佐藤さんが戦っています。田中さんの点数が`tanakaScore`で、佐藤さんの点数が`satoScore`で用意されています。 -点数が100点以上で、かつ相手より20点以上高い点数の場合に勝ちとします。 -田中さんが勝ちかどうかを表す変数`isTanakaWinner`を作成してください。 +点数が100点以上で、かつ相手より20点以上高い点数の場合に勝ちとします。田中さんが勝ちかどうかを表す変数`isTanakaWinner`を作成してください。 ```javascript const tanakaScore = 120; diff --git a/docs/1-trial-session/09-functions/index.mdx b/docs/1-trial-session/09-functions/index.mdx index 3aa75f89a..ece756de6 100644 --- a/docs/1-trial-session/09-functions/index.mdx +++ b/docs/1-trial-session/09-functions/index.mdx @@ -29,8 +29,7 @@ greet(); ## **引数** {/* prettier-ignore */} -関数の振る舞いを呼び出し時に変更するため、関数に**引数**を与えることができます。 -引数には任意の値が指定できます。 +関数の振る舞いを呼び出し時に変更するため、関数に**引数**を与えることができます。引数には任意の値が指定できます。 ```javascript function greet(greetingType, myName) { @@ -41,9 +40,7 @@ greet("morning", "佐藤"); ``` {/* prettier-ignore */} -関数定義では、関数名直後のかっこ内に引数名をコンマ区切りで設定できます。 -上のプログラムで`greet`関数は、`greetingType`や`myName`という名前の引数をとります。 -関数定義の中では、これらは変数のように振舞います。 +関数定義では、関数名直後のかっこ内に引数名をコンマ区切りで設定できます。上のプログラムで`greet`関数は、`greetingType`や`myName`という名前の引数をとります。関数定義の中では、これらは変数のように振舞います。 呼び出し側では、括弧の中に関数に渡す引数を指定します。このプログラムを実行すると、ブラウザに`Good morning, 佐藤!`が表示されるでしょう。 @@ -52,10 +49,7 @@ greet("morning", "佐藤"); ## 戻り値 {/* prettier-ignore */} -関数呼び出しは式の一種です。 -関数定義内で**return文**を用いると、関数の実行が停止され、関数呼び出し式の評価結果が確定します。 -この値を**戻り値**と呼びます。 -ある値を戻り値として設定して関数の実行を終了することを、関数がその値を**返す**と表現します。 +関数呼び出しは式の一種です。関数定義内で**return文**を用いると、関数の実行が停止され、関数呼び出し式の評価結果が確定します。この値を**戻り値**と呼びます。ある値を戻り値として設定して関数の実行を終了することを、関数がその値を**返す**と表現します。 ```javascript function add(a, b) { @@ -66,9 +60,7 @@ function add(a, b) { document.write(add(3, 4)); ``` -上の例の6行目で、式`add(3, 4)`が評価されると、`a = 3, b = 4`として`add`関数が実行されます。`add`関数の中で文`const sum = a + b;`が実行されると、式`a + b`が評価され、`7`になります。これにより、`sum`に`7`が代入されます。 -次の行`return sum;`で`add`関数は変数`sum`を評価した結果である、`7`を返します。 -そして式`add(3, 4)`の評価結果が`7`となります。 +上の例の6行目で、式`add(3, 4)`が評価されると、`a = 3, b = 4`として`add`関数が実行されます。`add`関数の中で文`const sum = a + b;`が実行されると、式`a + b`が評価され、`7`になります。これにより、`sum`に`7`が代入されます。次の行`return sum;`で`add`関数は変数`sum`を評価した結果である、`7`を返します。そして式`add(3, 4)`の評価結果が`7`となります。