Skip to content

Commit 1af77cd

Browse files
chvmvdchvmvd
authored
Merge pull request #541 from ut-code/migrate-to-docusaurus-3
Migrate to Docusaurus 3.0.0
2 parents 05c249c + 97a6e73 commit 1af77cd

File tree

21 files changed

+4864
-2375
lines changed

21 files changed

+4864
-2375
lines changed

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
18

‎docs/1-trial-session/02-html/index.mdx‎

Lines changed: 5 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -54,34 +54,11 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
5454

5555
`<strong>World</strong>` の部分に注目してください。
5656

57-
<p>
58-
<Term type="html">HTML</Term> ファイルは、文書に意味を持たせるために、
59-
<Term type="tag">
60-
<strong>タグ</strong>
61-
</Term>
62-
と呼ばれる構造を持つことができます。<Term type="tag">タグ</Term>は、
63-
<code>&lt;tag&gt;</code> のような、<code>&lt;</code>と<code>&gt;</code>
64-
で囲まれた英数字のまとまりです。
65-
</p>
66-
67-
<p>
68-
<Term type="tag">タグ</Term>は、 <code>&lt;tag&gt;内容&lt;/tag&gt;</code>{" "}
69-
のように、<Term type="tag">タグ</Term>
70-
名の先頭にスラッシュを付けるか否かの区別により
71-
<Term type="startTag">
72-
<strong>開始タグ</strong>
73-
</Term>
74-
と<Term type="endTag">
75-
<strong>終了タグ</strong>
76-
</Term>
77-
に分かれ、内部にテキストや別のタグを挟み込むことができます。
78-
<Term type="startTag">開始タグ</Term>から<Term type="endTag">終了タグ</Term>
79-
までのまとまりを
80-
<Term type="element">
81-
<strong>要素</strong>
82-
</Term>
83-
といいます。
84-
</p>
57+
<Term type="html">HTML</Term> ファイルは、文書に意味を持たせるために、<Term type="tag">**タグ**</Term>と呼ばれる構造を持つことができます。<Term type="tag">タグ</Term>は、`<tag>` のような、`<` と `>` で囲まれた英数字のまとまりです。
58+
59+
{/* prettier-ignore */}
60+
<Term type="tag">タグ</Term>は、`<tag>内容</tag>` のように、<Term type="tag">タグ</Term>名の先頭にスラッシュを付けるか否かの区別により<Term type="startTag">**開始タグ**</Term>と<Term type="endTag">**終了タグ**</Term>に分かれ、内部にテキストや別のタグを挟み込むことができます。
61+
<Term type="startTag">開始タグ</Term>から<Term type="endTag">終了タグ</Term>までのまとまりを<Term type="element">**要素**</Term>といいます。
8562

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

‎docs/1-trial-session/03-javascript/index.mdx‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,8 @@ import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4";
66

77
## <Term type="javascript">JavaScript</Term>
88

9-
<p>
10-
<Term type="html">HTML</Term> がウェブサイトの構造を表す言語だとすれば、
11-
<Term type="javascript">
12-
<strong>JavaScript</strong>
13-
</Term> はウェブサイトに振る舞いを与える言語といえます。ブラウザさえあれば環境に関係なく同じように実行可能な、強力なプログラミング言語です。
14-
</p>
9+
{/* prettier-ignore */}
10+
<Term type="html">HTML</Term> がウェブサイトの構造を表す言語だとすれば、<Term type="javascript">**JavaScript**</Term> はウェブサイトに振る舞いを与える言語といえます。ブラウザさえあれば環境に関係なく同じように実行可能な、強力なプログラミング言語です。
1511

1612
![Web開発で用いられる言語](../02-html/web-development-languages.drawio.svg)
1713

@@ -46,9 +42,7 @@ document.write("Hello World!");
4642

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

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

5347
```html title="index.html"
5448
<script src="./script.js"></script>
@@ -64,15 +58,10 @@ document.write("Hello World!");
6458

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

67-
<p>
68-
<Term type="javascript">JavaScript</Term>{" "}
69-
のプログラムで、セミコロンで区切られた部分を
70-
<Term type="javascriptStatement">文</Term>と呼びます。
71-
<Term type="javascript">JavaScript</Term> の実行環境は、プログラム中に含まれる
72-
<Term type="javascriptStatement">文</Term>
73-
を上から下に向けて順番に実行していきます。<code>document.write</code>
74-
はブラウザの画面に出力するための命令です。
75-
</p>
61+
{/* prettier-ignore */}
62+
<Term type="javascript">JavaScript</Term> のプログラムで、セミコロンで区切られた部分を<Term type="javascriptStatement">文</Term>と呼びます。
63+
<Term type="javascript">JavaScript</Term> の実行環境は、プログラム中に含まれる<Term type="javascriptStatement">文</Term>を上から下に向けて順番に実行していきます。
64+
`document.write` はブラウザの画面に出力するための命令です。
7665

7766
```javascript title="script.js"
7867
document.write("Hello World1");

‎docs/1-trial-session/04-expressions/index.mdx‎

Lines changed: 12 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -12,40 +12,28 @@ document.write("Hello World");
1212

1313
`"Hello World"` のように `"`（ダブルクォーテーション）で囲まれた<Term type="javascriptValue">**値**</Term>を、<Term type="javascriptString">**文字列**</Term>と呼びます。
1414

15-
<Term type="javascriptString">文字列</Term>は
16-
<Term type="javascriptValue">値</Term>の一種です。
17-
<Term type="javascriptNumber">数値</Term>は<Term type="javascriptString">
18-
文字列
19-
</Term>と同じ
20-
<Term type="javascriptValue">値</Term>
21-
の一種ですが、プログラムの中に直接記述することができます。
15+
{/* prettier-ignore */}
16+
<Term type="javascriptString">文字列</Term>は<Term type="javascriptValue">値</Term>の一種です。
17+
<Term type="javascriptNumber">数値</Term>は<Term type="javascriptString">文字列</Term>と同じ<Term type="javascriptValue">値</Term>の一種ですが、プログラムの中に直接記述することができます。
2218

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

2521
```javascript title="script.js"
2622
document.write(3);
2723
```
2824

29-
<p>
30-
<Term type="javascriptOperator">
31-
<strong>演算子</strong>
32-
</Term>
33-
を用いると、<Term type="javascriptValue">値</Term>
34-
を用いて計算をすることができます。例えば <code>+</code>（加算
35-
<Term type="javascriptOperator">演算子</Term>
36-
）で、足し算の計算を行うことができます。
37-
</p>
25+
{/* prettier-ignore */}
26+
<Term type="javascriptOperator">**演算子**</Term>を用いると、<Term type="javascriptValue">値</Term>を用いて計算をすることができます。
27+
例えば `+`（加算<Term type="javascriptOperator">演算子</Term>）で、足し算の計算を行うことができます。
3828

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

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

45-
<p>
46-
<Term type="javascriptOperator">演算子</Term>には、
47-
<Term type="javascriptOperatorPriority">優先順位</Term>が設定されています。
48-
</p>
35+
{/* prettier-ignore */}
36+
<Term type="javascriptOperator">演算子</Term>には、<Term type="javascriptOperatorPriority">優先順位</Term>が設定されています。
4937

5038
```javascript title="script.js"
5139
document.write(3 + 4 * 5);
@@ -59,17 +47,10 @@ document.write(3 + 4 * 5);
5947

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

62-
<p>
63-
<Term type="javascriptOperator">演算子</Term>が適用できるのは、何も
64-
<Term type="javascriptNumber">数値</Term>だけではありません。
65-
<Term type="javascriptString">文字列</Term>に適用できる
66-
<Term type="javascriptOperator">演算子</Term>もあります。先ほどの <code>
67-
+
68-
</code>（加算<Term type="javascriptOperator">演算子</Term>）は、
69-
<Term type="javascriptString">文字列</Term>同士で使用された場合は、
70-
<Term type="javascriptString">文字列</Term>結合
71-
<Term type="javascriptOperator">演算子</Term>となります。
72-
</p>
50+
{/* prettier-ignore */}
51+
<Term type="javascriptOperator">演算子</Term>が適用できるのは、何も<Term type="javascriptNumber">数値</Term>だけではありません。
52+
<Term type="javascriptString">文字列</Term>に適用できる<Term type="javascriptOperator">演算子</Term>もあります。
53+
先ほどの `+`（加算<Term type="javascriptOperator">演算子</Term>）は、<Term type="javascriptString">文字列</Term>同士で使用された場合は、<Term type="javascriptString">文字列</Term>結合<Term type="javascriptOperator">演算子</Term>となります。
7354

7455
```javascript title="script.js"
7556
document.write("Hello" + "World");

‎docs/1-trial-session/05-variables/index.mdx‎

Lines changed: 19 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,14 @@ title: 変数
44

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

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

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

18-
<p>
19-
<Term type="javascriptVariable">変数</Term>を使用するには、まず
20-
<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">
21-
<strong>宣言</strong>
22-
</Term>
23-
する必要があります。
24-
</p>
13+
{/* prettier-ignore */}
14+
<Term type="javascriptVariable">変数</Term>を使用するには、まず<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">**宣言**</Term>する必要があります。
2515

2616
```javascript title="script.js"
2717
let myGreatName = "Becky Jones";
@@ -32,13 +22,10 @@ document.write(myGreatName);
3222

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

35-
<p>
36-
<Term type="javascriptVariable">変数</Term>を
37-
<Term type="javascriptDeclaration">宣言</Term>するキーワードには、
38-
<code>let</code> 以外にも <code>const</code> があります。記法自体は
39-
<code>let</code>{" "}
40-
と同様ですが、少し違いがあります。違いについては、次の節で説明します。
41-
</p>
25+
{/* prettier-ignore */}
26+
<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>するキーワードには、`let` 以外にも `const` があります。
27+
記法自体は `let` と同様ですが、少し違いがあります。
28+
違いについては、次の節で説明します。
4229

4330
```javascript title="script.js"
4431
const myGreatName = "Becky Jones";
@@ -51,14 +38,9 @@ document.write(myGreatName);
5138

5239
:::info
5340

54-
<p>
55-
<Term type="javascript">JavaScript</Term> の
56-
<Term type="javascriptVariable">変数</Term>名には、通常
57-
<Term type="camelCase">キャメルケース</Term>が用いられます。
58-
<Term type="snakeCase">スネークケース</Term>や
59-
<Term type="pascalCase">パスカルケース</Term>
60-
などの命名規則が利用される文法もあります。
61-
</p>
41+
{/* prettier-ignore */}
42+
<Term type="javascript">JavaScript</Term> の<Term type="javascriptVariable">変数</Term>名には、通常<Term type="camelCase">キャメルケース</Term>が用いられます。
43+
<Term type="snakeCase">スネークケース</Term>や<Term type="pascalCase">パスカルケース</Term>などの命名規則が利用される文法もあります。
6244

6345
:::
6446

@@ -96,15 +78,9 @@ mysteriousNumber = 2;
9678
document.write(mysteriousNumber); // 2
9779
```
9880

99-
<p>
100-
<Term type="javascriptVariable">変数</Term>には、最後に
101-
<Term type="javascriptAssignment">代入</Term>された
102-
<Term type="javascriptValue">値</Term>のみを保持する性質があります。そのため、
103-
<Term type="javascriptVariable">変数</Term> <code>mysteriousNumber</code> は 3
104-
回<Term type="javascriptAssignment">代入</Term>が行われていますが、最後に
105-
<Term type="javascriptAssignment">代入</Term>された <code> 2</code>{" "}
106-
が表示されます。
107-
</p>
81+
{/* prettier-ignore */}
82+
<Term type="javascriptVariable">変数</Term>には、最後に<Term type="javascriptAssignment">代入</Term>された<Term type="javascriptValue">値</Term>のみを保持する性質があります。
83+
そのため、<Term type="javascriptVariable">変数</Term> `mysteriousNumber` は 3 回<Term type="javascriptAssignment">代入</Term>が行われていますが、最後に<Term type="javascriptAssignment">代入</Term>された `2` が表示されます。
10884

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

@@ -118,16 +94,9 @@ document.write(price);
11894

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

121-
<p>
122-
<Term type="javascriptAssignment">代入</Term>
123-
<Term type="javascriptOperator">演算子</Term>は、まず右辺の<Term type="javascriptExpression">
124-
式
125-
</Term>を<Term type="javascriptEvaluation">評価</Term>します。これにより、右辺は{" "}
126-
<code>100 / 2</code> となります。よって、最終的に<Term type="javascriptVariable">
127-
変数
128-
</Term> <code>price</code> の<Term type="javascriptValue">値</Term>は <code>
129-
50
130-
</code> となり、これは <code>price</code> を半分にする操作に対応します。
131-
</p>
97+
{/* prettier-ignore */}
98+
<Term type="javascriptAssignment">代入</Term><Term type="javascriptOperator">演算子</Term>は、まず右辺の<Term type="javascriptExpression">式</Term>を<Term type="javascriptEvaluation">評価</Term>します。
99+
これにより、右辺は `100 / 2` となります。
100+
よって、最終的に<Term type="javascriptVariable">変数</Term> `price` の<Term type="javascriptValue">値</Term>は `50` となり、これは `price` を半分にする操作に対応します。
132101

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

‎docs/1-trial-session/06-boolean/index.mdx‎

Lines changed: 13 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,19 @@ title: 論理値と論理演算子
44

55
## <Term type="javascriptBoolean">論理値</Term>
66

7-
<p>
8-
<Term type="javascript">JavaScript</Term> で利用できる「
9-
<Term type="javascriptValue">値</Term>」として、これまで
10-
<Term type="javascriptString">文字列</Term>と
11-
<Term type="javascriptNumber">数値</Term>を扱いました。JavaScript
12-
ではこの他に、
13-
<Term type="javascriptBoolean">
14-
<strong>論理値</strong>
15-
</Term> と呼ばれる、「正しいか、正しくないか」を表すための
16-
<Term type="javascriptValue">値</Term>が存在します。
17-
</p>
18-
19-
<p>
20-
<Term type="javascriptBoolean">論理値</Term>は、<code>true</code>（真）または{" "}
21-
<code>false</code>（偽）の２つだけです。ダブルクォーテーション <code>"</code>{" "}
22-
は必要ありません。通常の<Term type="javascriptValue">値</Term>ですので、
23-
<Term type="javascriptVariable">変数</Term>に<Term type="javascriptAssignment">
24-
代入
25-
</Term>
26-
したり、計算に使ったりすることができます。
27-
</p>
7+
{/* prettier-ignore */}
8+
<Term type="javascript">JavaScript</Term> で利用できる「<Term type="javascriptValue">値</Term>」として、これまで<Term type="javascriptString">文字列</Term>と<Term type="javascriptNumber">数値</Term>を扱いました。
9+
JavaScript ではこの他に、<Term type="javascriptBoolean">**論理値**</Term> と呼ばれる、「正しいか、正しくないか」を表すための<Term type="javascriptValue">値</Term>が存在します。
10+
11+
{/* prettier-ignore */}
12+
<Term type="javascriptBoolean">論理値</Term>は、`true`（真）または `false`（偽）の 2 つだけです。ダブルクォーテーション `"` は必要ありません。通常の<Term type="javascriptValue">値</Term>ですので、<Term type="javascriptVariable">変数</Term>に<Term type="javascriptAssignment">代入</Term>したり、計算に使ったりすることができます。
2813

2914
![値の種類・論理値付き](./value-types-with-boolean.drawio.svg)
3015

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

33-
<p>
34-
<Term type="javascriptBoolean">論理値</Term>に対して適用できる
35-
<Term type="javascriptOperator">演算子</Term>が存在します。
36-
</p>
18+
{/* prettier-ignore */}
19+
<Term type="javascriptBoolean">論理値</Term>に対して適用できる<Term type="javascriptOperator">演算子</Term>が存在します。
3720

3821
```javascript
3922
const isMonsterBig = true;
@@ -45,11 +28,11 @@ const shouldFight = isHunterStrong || isMonsterSmall; // false
4528

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

48-
| 演算子 | 意味 | 詳細 |
49-
| ------------------------- | ---------- | -------------------------------------------------------------------- |
50-
| `!` | ～ではない | `true` ならば `false`、`false` ならば `true` |
51-
| `&&` | かつ | 両方 `true` ならば `true`、どちらか 1 つでも `false` ならば `false` |
52-
| <code>&#124;&#124;</code> | または | 両方 `false` ならば `false` 、どちらか 1 つでも `true` ならば `true` |
31+
| 演算子 | 意味 | 詳細 |
32+
| ------ | ---------- | -------------------------------------------------------------------- |
33+
| `!` | ～ではない | `true` ならば `false`、`false` ならば `true` |
34+
| `&&` | かつ | 両方 `true` ならば `true`、どちらか 1 つでも `false` ならば `false` |
35+
| `\|\|` | または | 両方 `false` ならば `false` 、どちらか 1 つでも `true` ならば `true` |
5336

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

‎docs/1-trial-session/07-if-statement/index.mdx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,9 @@ if (式) {
4141
}
4242
```
4343

44-
<p>
45-
<Term type="javascriptExpression">式</Term>の
46-
<Term type="javascriptEvaluation">評価</Term>結果が <code>true</code>{" "}
47-
であれば処理 1 が、<code>false</code> であれば処理 2 が実行されます。
48-
</p>
44+
{/* prettier-ignore */}
45+
<Term type="javascriptExpression">式</Term>の<Term type="javascriptEvaluation">評価</Term>結果が `true` であれば処理 1
46+
が、`false` であれば処理 2 が実行されます。
4947

5048
```javascript
5149
const age = 18;

0 commit comments

Comments
 (0)