Skip to content

Commit

Permalink
Remove unnecessary p element
Browse files Browse the repository at this point in the history
  • Loading branch information
@chvmvd
chvmvd committed Nov 4, 2023
1 parent 3ebdc44 commit 1d83199
Show file tree
Hide file tree
Showing 15 changed files with 190 additions and 300 deletions.
19 changes: 7 additions & 12 deletions docs/1-trial-session/03-javascript/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,7 @@ document.write("Hello World!");

## <Term type="javascript">JavaScript</Term> が動く仕組み

<p>
<Term type="html">HTML</Term> ファイルの中に、以下のような記述があります。
</p>
<Term type="html">HTML</Term> ファイルの中に、以下のような記述があります。

```html title="index.html"
<script src="./script.js"></script>
Expand All @@ -61,15 +59,12 @@ document.write("Hello World!");

## <Term type="javascript">JavaScript</Term> の基本文法

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

```javascript title="script.js"
document.write("Hello World1");
Expand Down
38 changes: 14 additions & 24 deletions docs/1-trial-session/04-expressions/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,26 +26,19 @@ document.write("Hello World");
document.write(3);
```

<p>
<Term type="javascriptOperator">
<strong>演算子</strong>
</Term>
を用いると、<Term type="javascriptValue">値</Term>
を用いて計算をすることができます。例えば <code>+</code>（加算
<Term type="javascriptOperator">演算子</Term>
）で、足し算の計算を行うことができます。
</p>
<Term type="javascriptOperator">**演算子**</Term>を用いると、
<Term type="javascriptValue">値</Term>を用いて計算をすることができます。例えば `+`（加算
<Term type="javascriptOperator">演算子</Term>
）で、足し算の計算を行うことができます。

```javascript title="script.js"
document.write(3 + 4);
```

## <Term type="javascriptOperator">演算子</Term>の<Term type="javascriptOperatorPriority">優先順位</Term>

<p>
<Term type="javascriptOperator">演算子</Term>には、
<Term type="javascriptOperatorPriority">優先順位</Term>が設定されています。
</p>
<Term type="javascriptOperator">演算子</Term>には、
<Term type="javascriptOperatorPriority">優先順位</Term>が設定されています。

```javascript title="script.js"
document.write(3 + 4 * 5);
Expand All @@ -59,17 +52,14 @@ document.write(3 + 4 * 5);

## いろいろな<Term type="javascriptOperator">演算子</Term>

<p>
<Term type="javascriptOperator">演算子</Term>が適用できるのは、何も
<Term type="javascriptNumber">数値</Term>だけではありません。
<Term type="javascriptString">文字列</Term>に適用できる
<Term type="javascriptOperator">演算子</Term>もあります。先ほどの <code>
+
</code>（加算<Term type="javascriptOperator">演算子</Term>）は、
<Term type="javascriptString">文字列</Term>同士で使用された場合は、
<Term type="javascriptString">文字列</Term>結合
<Term type="javascriptOperator">演算子</Term>となります。
</p>
<Term type="javascriptOperator">演算子</Term>が適用できるのは、何も
<Term type="javascriptNumber">数値</Term>だけではありません。
<Term type="javascriptString">文字列</Term>に適用できる
<Term type="javascriptOperator">演算子</Term>もあります。 先ほどの `+`（加算
<Term type="javascriptOperator">演算子</Term>）は、
<Term type="javascriptString">文字列</Term>同士で使用された場合は、
<Term type="javascriptString">文字列</Term>結合
<Term type="javascriptOperator">演算子</Term>となります。

```javascript title="script.js"
document.write("Hello" + "World");
Expand Down
74 changes: 31 additions & 43 deletions docs/1-trial-session/05-variables/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,13 @@ title: 変数

## <Term type="javascriptVariable">変数</Term>とは

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

## <Term type="javascriptVariable">変数</Term>の<Term type="javascriptDeclaration">宣言</Term>と使用

Expand All @@ -29,13 +28,10 @@ document.write(myGreatName);

2 行目では、<Term type="javascriptVariable">変数</Term> `myGreatName` が<Term type="javascriptEvaluation">評価</Term>され、<Term type="javascriptAssignment">代入</Term>されていた<Term type="javascriptString">文字列</Term><Term type="javascriptValue">値</Term> `"Becky Jones"` が画面に表示されます。

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

```javascript title="script.js"
const myGreatName = "Becky Jones";
Expand All @@ -48,14 +44,12 @@ document.write(myGreatName);

:::info

<p>
<Term type="javascript">JavaScript</Term> の
<Term type="javascriptVariable">変数</Term>名には、通常
<Term type="camelCase">キャメルケース</Term>が用いられます。
<Term type="snakeCase">スネークケース</Term>や
<Term type="pascalCase">パスカルケース</Term>
などの命名規則が利用される文法もあります。
</p>
<Term type="javascript">JavaScript</Term> の<Term type="javascriptVariable">
変数
</Term>名には、通常<Term type="camelCase">キャメルケース</Term>が用いられます。
<Term type="snakeCase">スネークケース</Term>や
<Term type="pascalCase">パスカルケース</Term>
などの命名規則が利用される文法もあります。

:::

Expand Down Expand Up @@ -93,15 +87,12 @@ mysteriousNumber = 2;
document.write(mysteriousNumber); // 2
```

<p>
<Term type="javascriptVariable">変数</Term>には、最後に
<Term type="javascriptAssignment">代入</Term>された
<Term type="javascriptValue">値</Term>のみを保持する性質があります。そのため、
<Term type="javascriptVariable">変数</Term> <code>mysteriousNumber</code> は 3
回<Term type="javascriptAssignment">代入</Term>が行われていますが、最後に
<Term type="javascriptAssignment">代入</Term>された <code> 2</code>{" "}
が表示されます。
</p>
<Term type="javascriptVariable">変数</Term>には、最後に
<Term type="javascriptAssignment">代入</Term>された
<Term type="javascriptValue">値</Term>のみを保持する性質があります。そのため、
<Term type="javascriptVariable">変数</Term> `mysteriousNumber` は 3 回
<Term type="javascriptAssignment">代入</Term>が行われていますが、最後に
<Term type="javascriptAssignment">代入</Term>された `2` が表示されます。

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

Expand All @@ -115,16 +106,13 @@ document.write(price);

<ViewSource url={import.meta.url} path="_samples/compound-assignment" />

<p>
<Term type="javascriptAssignment">代入</Term>
<Term type="javascriptOperator">演算子</Term>は、まず右辺の<Term type="javascriptExpression">
式
</Term>を<Term type="javascriptEvaluation">評価</Term>します。これにより、右辺は{" "}
<code>100 / 2</code> となります。よって、最終的に<Term type="javascriptVariable">
変数
</Term> <code>price</code> の<Term type="javascriptValue">値</Term>は <code>
50
</code> となり、これは <code>price</code> を半分にする操作に対応します。
</p>
<Term type="javascriptAssignment">代入</Term>
<Term type="javascriptOperator">演算子</Term>は、まず右辺の<Term type="javascriptExpression">
式
</Term>を<Term type="javascriptEvaluation">評価</Term>します。これにより、右辺は
`100 / 2` となります。よって、最終的に<Term type="javascriptVariable">
変数
</Term> `price` の<Term type="javascriptValue">値</Term>は `50` となり、これは
`price` を半分にする操作に対応します。

![変数の再代入](./reassignment-evaluation.png)
16 changes: 7 additions & 9 deletions docs/1-trial-session/06-boolean/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,8 @@ title: 論理値と論理演算子

## 論理<Term type="javascriptOperator">演算子</Term>

<p>
<Term type="javascriptBoolean">論理値</Term>に対して適用できる
<Term type="javascriptOperator">演算子</Term>が存在します。
</p>
<Term type="javascriptBoolean">論理値</Term>に対して適用できる
<Term type="javascriptOperator">演算子</Term>が存在します。

```javascript
const isMonsterBig = true;
Expand All @@ -35,11 +33,11 @@ const shouldFight = isHunterStrong || isMonsterSmall; // false

詳細は以下の通りです。 `!` のみが作用する対象を 1 つしかとらないことに注意してください。

| 演算子 | 意味 | 詳細 |
| ------------------------- | ---------- | -------------------------------------------------------------------- |
| `!` | ～ではない | `true` ならば `false`、`false` ならば `true` |
| `&&` | かつ | 両方 `true` ならば `true`、どちらか 1 つでも `false` ならば `false` |
| <code>&#124;&#124;</code> | または | 両方 `false` ならば `false` 、どちらか 1 つでも `true` ならば `true` |
| 演算子 | 意味 | 詳細 |
| ------ | ---------- | -------------------------------------------------------------------- |
| `!` | ～ではない | `true` ならば `false`、`false` ならば `true` |
| `&&` | かつ | 両方 `true` ならば `true`、どちらか 1 つでも `false` ならば `false` |
| `\|\|` | または | 両方 `false` ならば `false` 、どちらか 1 つでも `true` ならば `true` |

## 比較<Term type="javascriptOperator">演算子</Term>

Expand Down
8 changes: 3 additions & 5 deletions docs/1-trial-session/07-if-statement/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,9 @@ if (式) {
}
```

<p>
<Term type="javascriptExpression">式</Term>の
<Term type="javascriptEvaluation">評価</Term>結果が <code>true</code>{" "}
であれば処理 1 が、<code>false</code> であれば処理 2 が実行されます。
</p>
<Term type="javascriptExpression">式</Term>の
<Term type="javascriptEvaluation">評価</Term>結果が `true` であれば処理 1
が、`false` であれば処理 2 が実行されます。

```javascript
const age = 18;
Expand Down
104 changes: 41 additions & 63 deletions docs/1-trial-session/09-functions/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,27 +21,21 @@ greet();

上のプログラムにおいて、`function` キーワードから始まる部分は<Term type="javascriptFunction">関数</Term>を定義するための<Term type="javascriptControlFlow">制御構文</Term>です。<Term type="javascriptFunction">関数</Term>定義では、 `function` キーワードに続けて<Term type="javascriptFunction">関数</Term>名、かっこを記述します。この後、<Term type="javascriptFunction">関数</Term>内で実行したい処理を波かっこの中に記述していきます。

<p>
<Term type="javascriptFunction">関数</Term>を定義すると、
<Term type="javascriptFunction">関数</Term>
名に続けてかっこを記述することにより、その
<Term type="javascriptFunction">関数</Term>を実行できるようになります。
</p>
<Term type="javascriptFunction">関数</Term>を定義すると、
<Term type="javascriptFunction">関数</Term>
名に続けてかっこを記述することにより、その
<Term type="javascriptFunction">関数</Term>を実行できるようになります。

このプログラムでは、 `greet` <Term type="javascriptFunction">関数</Term>が 2 回呼び出されているので、ブラウザに `Hello World!` が 2 つ表示されます。

## <Term type="javascriptParameter">**引数**</Term>

<p>
<Term type="javascriptFunction">関数</Term>
の振る舞いを呼び出し時に変更するため、
<Term type="javascriptFunction">関数</Term>に
<Term type="javascriptParameter">
<strong>引数</strong>
</Term>
を与えることができます。<Term type="javascriptParameter">引数</Term>には任意の
<Term type="javascriptValue">値</Term>が指定できます。
</p>
<Term type="javascriptFunction">関数</Term>
の振る舞いを呼び出し時に変更するため、
<Term type="javascriptFunction">関数</Term>に
<Term type="javascriptParameter">**引数**</Term>
を与えることができます。<Term type="javascriptParameter">引数</Term>には任意の
<Term type="javascriptValue">値</Term>が指定できます。

```javascript
function greet(greetingType, myName) {
Expand All @@ -62,29 +56,23 @@ greet("morning", "佐藤");

## <Term type="javascriptReturnValue">戻り値</Term>

<p>
<Term type="javascriptFunction">関数</Term>呼び出しは
<Term type="javascriptExpression">式</Term>の一種です。
<Term type="javascriptFunction">関数</Term>定義内で <strong>return 文</strong>
を用いると、<Term type="javascriptFunction">関数</Term>の実行が停止され、
<Term type="javascriptFunction">関数</Term>呼び出し
<Term type="javascriptExpression">式</Term>の<Term type="javascriptEvaluation">
評価
</Term>結果が確定します。この値を
<Term type="javascriptReturnValue">
<strong>戻り値</strong>
</Term>
と呼びます。ある<Term type="javascriptValue">値</Term>を<Term type="javascriptReturnValue">
戻り値
</Term>として設定して
<Term type="javascriptFunction">関数</Term>の実行を終了することを、
<Term type="javascriptFunction">関数</Term>がその
<Term type="javascriptValue">値</Term>を
<Term type="javascriptReturn">
<strong>返す</strong>
</Term>
と表現します。
</p>
<Term type="javascriptFunction">関数</Term>呼び出しは
<Term type="javascriptExpression">式</Term>の一種です。
<Term type="javascriptFunction">関数</Term>定義内で **return 文** を用いると、
<Term type="javascriptFunction">関数</Term>の実行が停止され、
<Term type="javascriptFunction">関数</Term>呼び出し
<Term type="javascriptExpression">式</Term>の<Term type="javascriptEvaluation">
評価
</Term>結果が確定します。この値を
<Term type="javascriptReturnValue">**戻り値**</Term>
と呼びます。ある<Term type="javascriptValue">値</Term>を<Term type="javascriptReturnValue">
戻り値
</Term>として設定して
<Term type="javascriptFunction">関数</Term>の実行を終了することを、
<Term type="javascriptFunction">関数</Term>がその
<Term type="javascriptValue">値</Term>を
<Term type="javascriptReturn">**返す**</Term>
と表現します。

```javascript
function add(a, b) {
Expand Down Expand Up @@ -149,12 +137,10 @@ document.write(multiply(3, 4));
**スコープ**
</Term>と呼んでいます。

<p>
<Term type="javascriptFunction">関数</Term>外で
<Term type="javascriptDeclaration">宣言</Term>された
<Term type="javascriptVariable">変数</Term>は
<Term type="javascriptFunction">関数</Term>内でも利用できます。
</p>
<Term type="javascriptFunction">関数</Term>外で
<Term type="javascriptDeclaration">宣言</Term>された
<Term type="javascriptVariable">変数</Term>は
<Term type="javascriptFunction">関数</Term>内でも利用できます。

```javascript
let guestCount = 0;
Expand All @@ -172,10 +158,8 @@ greet();

:::caution <Term type="javascriptVariable">変数</Term>の<Term type="javascriptScope">**スコープ**</Term>

<p>
<Term type="javascriptScope">スコープ</Term>が終わった
<Term type="javascriptVariable">変数</Term>は、その時点で破棄されます。
</p>
<Term type="javascriptScope">スコープ</Term>が終わった
<Term type="javascriptVariable">変数</Term>は、その時点で破棄されます。

```javascript
let outer = 0;
Expand All @@ -196,10 +180,8 @@ increment();

## 処理の分割

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

長い処理をパーツに分割すると、次のようなメリットがあります。

Expand Down Expand Up @@ -275,19 +257,15 @@ function showProbabilityAsGraph(probability) {

### 最大値

<p>
<Term type="javascriptParameter">引数</Term>を 2 つとり、そのうち大きい数を
<Term type="javascriptReturn">返す</Term>
<Term type="javascriptFunction">関数</Term> <code>max</code>{" "}
を定義してください。
</p>
<Term type="javascriptParameter">引数</Term>を 2 つとり、そのうち大きい数を
<Term type="javascriptReturn">返す</Term>
<Term type="javascriptFunction">関数</Term> `max` を定義してください。

:::tip

<p>
<Term type="javascriptIfStatement">if 文</Term>を使って、<code>a</code>{" "}
が大きい場合と <code>b</code> が大きい場合で処理を書き分けます。
</p>
<Term type="javascriptIfStatement">if 文</Term>を使って、`a` が大きい場合と `b`
が大きい場合で処理を書き分けます。

:::

<Answer title="大きい数">
Expand Down
Loading

0 comments on commit 1d83199

Please sign in to comment.