Skip to content

Commit

Permalink
不要な改行を削除 (#821)
Browse files Browse the repository at this point in the history
  • Loading branch information
chvmvd authored Sep 29, 2024
1 parent d61cd78 commit a39a1fd
Show file tree
Hide file tree
Showing 21 changed files with 100 additions and 254 deletions.
3 changes: 1 addition & 2 deletions docs/1-trial-session/02-html/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,7 @@ VS Code上で作成したファイルは`index.html`でした。しかしなが
<Term>HTML</Term>ファイルは、文書に意味を持たせるために、<Term>**タグ**</Term>と呼ばれる構造を持つことができます。<Term>タグ</Term>は、`<tag>`のような、`<``>`で囲まれた英数字のまとまりです。

{/* prettier-ignore */}
<Term>タグ</Term>は、`<tag>内容</tag>`のように、<Term>タグ</Term>名の先頭にスラッシュを付けるか否かの区別により<Term>**開始タグ**</Term>と<Term>**終了タグ**</Term>に分かれ、内部にテキストや別のタグを挟み込むことができます。
<Term>開始タグ</Term>から<Term>終了タグ</Term>までのまとまりを<Term>**要素**</Term>といいます。
<Term>タグ</Term>は、`<tag>内容</tag>`のように、<Term>タグ</Term>名の先頭にスラッシュを付けるか否かの区別により<Term>**開始タグ**</Term>と<Term>**終了タグ**</Term>に分かれ、内部にテキストや別のタグを挟み込むことができます。<Term>開始タグ</Term>から<Term>終了タグ</Term>までのまとまりを<Term>**要素**</Term>といいます。

`body`要素の中身を書き換え、次のようにしてみましょう。

Expand Down
3 changes: 1 addition & 2 deletions docs/1-trial-session/04-javascript/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,7 @@ document.write("Hello World!");
## <Term>JavaScript</Term> の基本文法

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

```javascript title="script.js"
Expand Down
10 changes: 3 additions & 7 deletions docs/1-trial-session/05-expressions/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ document.write("Hello World");
`"Hello World"`のように`"`(ダブルクォーテーション)で囲まれた<Term>****</Term>を、<Term>**文字列**</Term>と呼びます。

{/* prettier-ignore */}
<Term>文字列</Term>は<Term>値</Term>の一種です。
<Term>数値</Term>は<Term>文字列</Term>と同じ<Term>値</Term>の一種ですが、プログラムの中に直接記述することができます。
<Term>文字列</Term>は<Term>値</Term>の一種です。<Term>数値</Term>は<Term>文字列</Term>と同じ<Term>値</Term>の一種ですが、プログラムの中に直接記述することができます。

![値の種類](./value-types.drawio.svg)

Expand All @@ -23,8 +22,7 @@ document.write(3);
```

{/* prettier-ignore */}
<Term>**演算子**</Term>を用いると、<Term>値</Term>を用いて計算をすることができます。
例えば`+`(加算<Term>演算子</Term>)で、足し算の計算を行うことができます。
<Term>**演算子**</Term>を用いると、<Term>値</Term>を用いて計算をすることができます。例えば`+`(加算<Term>演算子</Term>)で、足し算の計算を行うことができます。

```javascript title="script.js"
document.write(3 + 4);
Expand All @@ -48,9 +46,7 @@ document.write(3 + 4 * 5);
## いろいろな<Term>演算子</Term>

{/* prettier-ignore */}
<Term>演算子</Term>が適用できるのは、何も<Term>数値</Term>だけではありません。
<Term>文字列</Term>に適用できる<Term>演算子</Term>もあります。
先ほどの`+`(加算<Term>演算子</Term>)は、<Term>文字列</Term>同士で使用された場合は、<Term>文字列</Term>結合<Term>演算子</Term>となります。
<Term>演算子</Term>が適用できるのは、何も<Term>数値</Term>だけではありません。<Term>文字列</Term>に適用できる<Term>演算子</Term>もあります。 先ほどの`+`(加算<Term>演算子</Term>)は、<Term>文字列</Term>同士で使用された場合は、<Term>文字列</Term>結合<Term>演算子</Term>となります。

```javascript title="script.js"
document.write("Hello" + "World");
Expand Down
23 changes: 7 additions & 16 deletions docs/1-trial-session/06-variables/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ title: 変数
## <Term>変数</Term>とは

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

## <Term>変数</Term>の<Term>宣言</Term>と使用

Expand All @@ -23,9 +22,7 @@ document.write(myName);
2行目では、<Term>変数</Term>`myName`が<Term>評価</Term>され、<Term>代入</Term>されていた<Term>文字列</Term><Term>値</Term>`"John Doe"`が画面に表示されます。

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

```javascript title="script.js"
const myName = "John Doe";
Expand All @@ -39,16 +36,14 @@ document.write(myName);
:::info

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

:::

:::tip

{/* prettier-ignore */}
<Term>変数</Term>に適切な命名をすることは非常に重要です。
以下の例を見てみましょう。
<Term>変数</Term>に適切な命名をすることは非常に重要です。以下の例を見てみましょう。

```javascript
const a = 500;
Expand Down Expand Up @@ -80,8 +75,7 @@ document.write(mysteriousNumber); // 2
```

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

一方、`const`で<Term>宣言</Term>された<Term>変数</Term>には、再<Term>代入</Term>ができません。そのため、上記のコードの`let``const`に置き換えることはできません。

Expand All @@ -96,16 +90,13 @@ document.write(price);
<ViewSource url={import.meta.url} path="_samples/compound-assignment" />

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

![変数の再代入](./reassignment-evaluation.png)

## 演習問題

`counter`という名前の変数を作成し初期値を`0`としてください。
その後、`counter``1`を加え、その結果を表示してください。
`counter`という名前の変数を作成し初期値を`0`としてください。その後、`counter``1`を加え、その結果を表示してください。

<Answer title="カウンター">

Expand Down
12 changes: 4 additions & 8 deletions docs/1-trial-session/07-boolean/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ title: 論理値と論理演算子
## <Term>論理値</Term>

{/* prettier-ignore */}
<Term>JavaScript</Term>で利用できる「<Term>値</Term>」として、これまで<Term>文字列</Term>と<Term>数値</Term>を扱いました。
JavaScriptではこの他に、<Term>**論理値**</Term>と呼ばれる、「正しいか、正しくないか」を表すための<Term>値</Term>が存在します。
<Term>JavaScript</Term>で利用できる「<Term>値</Term>」として、これまで<Term>文字列</Term>と<Term>数値</Term>を扱いました。JavaScriptではこの他に、<Term>**論理値**</Term>と呼ばれる、「正しいか、正しくないか」を表すための<Term>値</Term>が存在します。

{/* prettier-ignore */}
<Term>論理値</Term>は、`true`(真)または`false`(偽)の2つだけです。ダブルクォーテーション`"`は必要ありません。通常の<Term>値</Term>ですので、<Term>変数</Term>に<Term>代入</Term>したり、計算に使ったりすることができます。
Expand Down Expand Up @@ -55,8 +54,7 @@ document.write(age === 15); // false
document.write(age === 14); // true
```

`===`は左辺と右辺が等しいかどうか判定する比較<Term>演算子</Term>です。
2行目では`age`と15とは等しくないので`false`が、3行目では`age`と14とは等しいので`true`が表示されます。
`===`は左辺と右辺が等しいかどうか判定する比較<Term>演算子</Term>です。2行目では`age`と15とは等しくないので`false`が、3行目では`age`と14とは等しいので`true`が表示されます。

各<Term>演算子</Term>の意味は次の通りです。

Expand Down Expand Up @@ -103,11 +101,9 @@ document.write(takaoHeight = everestHeight);

## 演習問題

クイズ番組で田中さんと佐藤さんが戦っています。
田中さんの点数が`tanakaScore`で、佐藤さんの点数が`satoScore`で用意されています。
クイズ番組で田中さんと佐藤さんが戦っています。田中さんの点数が`tanakaScore`で、佐藤さんの点数が`satoScore`で用意されています。

点数が100点以上で、かつ相手より20点以上高い点数の場合に勝ちとします。
田中さんが勝ちかどうかを表す変数`isTanakaWinner`を作成してください。
点数が100点以上で、かつ相手より20点以上高い点数の場合に勝ちとします。田中さんが勝ちかどうかを表す変数`isTanakaWinner`を作成してください。

```javascript
const tanakaScore = 120;
Expand Down
19 changes: 5 additions & 14 deletions docs/1-trial-session/09-functions/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,7 @@ greet();
## <Term>**引数**</Term>

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

```javascript
function greet(greetingType, myName) {
Expand All @@ -41,9 +40,7 @@ greet("morning", "佐藤");
```

{/* prettier-ignore */}
<Term>関数</Term>定義では、<Term>関数</Term>名直後のかっこ内に<Term>引数</Term>名をコンマ区切りで設定できます。
上のプログラムで`greet`<Term>関数</Term>は、`greetingType``myName`という名前の<Term>引数</Term>をとります。
<Term>関数</Term>定義の中では、これらは<Term>変数</Term>のように振舞います。
<Term>関数</Term>定義では、<Term>関数</Term>名直後のかっこ内に<Term>引数</Term>名をコンマ区切りで設定できます。上のプログラムで`greet`<Term>関数</Term>は、`greetingType``myName`という名前の<Term>引数</Term>をとります。<Term>関数</Term>定義の中では、これらは<Term>変数</Term>のように振舞います。

呼び出し側では、括弧の中に<Term>関数</Term>に<Term>渡す</Term><Term>引数</Term>を指定します。このプログラムを実行すると、ブラウザに`Good morning, 佐藤!`が表示されるでしょう。

Expand All @@ -52,10 +49,7 @@ greet("morning", "佐藤");
## <Term>戻り値</Term>

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

```javascript
function add(a, b) {
Expand All @@ -66,9 +60,7 @@ function add(a, b) {
document.write(add(3, 4));
```

上の例の6行目で、<Term>式</Term>`add(3, 4)`が<Term>評価</Term>されると、`a = 3, b = 4`として`add`<Term>関数</Term>が実行されます。`add`<Term>関数</Term>の中で<Term>文</Term>`const sum = a + b;`が実行されると、<Term>式</Term>`a + b`が<Term>評価</Term>され、`7`になります。これにより、`sum``7`が代入されます。
次の行`return sum;``add`<Term>関数</Term>は<Term>変数</Term>`sum`を<Term>評価</Term>した結果である、`7`を<Term>返し</Term>ます。
そして<Term>式</Term>`add(3, 4)`の<Term>評価</Term>結果が`7`となります。
上の例の6行目で、<Term>式</Term>`add(3, 4)`が<Term>評価</Term>されると、`a = 3, b = 4`として`add`<Term>関数</Term>が実行されます。`add`<Term>関数</Term>の中で<Term>文</Term>`const sum = a + b;`が実行されると、<Term>式</Term>`a + b`が<Term>評価</Term>され、`7`になります。これにより、`sum``7`が代入されます。次の行`return sum;``add`<Term>関数</Term>は<Term>変数</Term>`sum`を<Term>評価</Term>した結果である、`7`を<Term>返し</Term>ます。そして<Term>式</Term>`add(3, 4)`の<Term>評価</Term>結果が`7`となります。

<video src={returnValueVideo} controls muted />

Expand Down Expand Up @@ -112,8 +104,7 @@ document.write(multiply(3, 4));
## <Term>変数</Term>の<Term>スコープ</Term>

{/* prettier-ignore */}
<Term>関数</Term>内で<Term>宣言</Term>された<Term>変数</Term>は、<Term>関数</Term>内でのみ有効です。
<Term>変数</Term>が有効な範囲のことを、その<Term>変数</Term>の<Term>**スコープ**</Term>と呼んでいます。
<Term>関数</Term>内で<Term>宣言</Term>された<Term>変数</Term>は、<Term>関数</Term>内でのみ有効です。<Term>変数</Term>が有効な範囲のことを、その<Term>変数</Term>の<Term>**スコープ**</Term>と呼んでいます。

{/* prettier-ignore */}
<Term>関数</Term>外で<Term>宣言</Term>された<Term>変数</Term>は<Term>関数</Term>内でも利用できます。
Expand Down
Loading

0 comments on commit a39a1fd

Please sign in to comment.