Skip to content

Commit 8793fa1

Browse files
chvmvdchvmvd
committed
Format all codes
1 parent 27194de commit 8793fa1

File tree

35 files changed

+491
-89
lines changed

35 files changed

+491
-89
lines changed

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

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

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

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

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

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

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,16 @@
22
title: JavaScript ことはじめ
33
---
44

5-
import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4"
5+
import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4";
66

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

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

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

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

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

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

4653
```html title="index.html"
4754
<script src="./script.js"></script>
@@ -57,7 +64,15 @@ document.write("Hello World!");
5764

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

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

6277
```javascript title="script.js"
6378
document.write("Hello World1");

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

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

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

15-
<Term type="javascriptString">文字列</Term>は<Term type="javascriptValue">値</Term>の一種です。<Term type="javascriptNumber">数値</Term>は<Term type="javascriptString">文字列</Term>と同じ<Term type="javascriptValue">値</Term>の一種ですが、プログラムの中に直接記述することができます。
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+
の一種ですが、プログラムの中に直接記述することができます。
1622

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

1925
```javascript title="script.js"
2026
document.write(3);
2127
```
2228

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

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

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

31-
<p><Term type="javascriptOperator">演算子</Term>には、<Term type="javascriptOperatorPriority">優先順位</Term>が設定されています。</p>
45+
<p>
46+
<Term type="javascriptOperator">演算子</Term>には、
47+
<Term type="javascriptOperatorPriority">優先順位</Term>が設定されています。
48+
</p>
3249

3350
```javascript title="script.js"
3451
document.write(3 + 4 * 5);
@@ -42,7 +59,17 @@ document.write(3 + 4 * 5);
4259

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

45-
<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>
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>
4673

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

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

Lines changed: 55 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,27 @@ title: 変数
44

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

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

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

11-
<p><Term type="javascriptVariable">変数</Term>を使用するには、まず<Term type="javascriptVariable">変数</Term>を<Term strong type="javascriptDeclaration">宣言</Term>する必要があります。</p>
18+
<p>
19+
<Term type="javascriptVariable">変数</Term>を使用するには、まず
20+
<Term type="javascriptVariable">変数</Term>を<Term
21+
strong
22+
type="javascriptDeclaration"
23+
>
24+
宣言
25+
</Term>
26+
する必要があります。
27+
</p>
1228

1329
```javascript title="script.js"
1430
let myGreatName = "Becky Jones";
@@ -19,7 +35,13 @@ document.write(myGreatName);
1935

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

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

2446
```javascript title="script.js"
2547
const myGreatName = "Becky Jones";
@@ -32,13 +54,21 @@ document.write(myGreatName);
3254

3355
:::info
3456

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

3766
:::
3867

3968
:::tip
4069

41-
<Term type="javascriptVariable">変数</Term>に適切な命名をすることは非常に重要です。以下の例を見てみましょう。
70+
<Term type="javascriptVariable">変数</Term>
71+
に適切な命名をすることは非常に重要です。以下の例を見てみましょう。
4272

4373
```javascript
4474
const a = 500;
@@ -69,7 +99,15 @@ mysteriousNumber = 2;
6999
document.write(mysteriousNumber); // 2
70100
```
71101

72-
<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>
102+
<p>
103+
<Term type="javascriptVariable">変数</Term>には、最後に
104+
<Term type="javascriptAssignment">代入</Term>された
105+
<Term type="javascriptValue">値</Term>のみを保持する性質があります。そのため、
106+
<Term type="javascriptVariable">変数</Term> <code>mysteriousNumber</code> は 3
107+
回<Term type="javascriptAssignment">代入</Term>が行われていますが、最後に
108+
<Term type="javascriptAssignment">代入</Term>された <code> 2</code>{" "}
109+
が表示されます。
110+
</p>
73111

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

@@ -83,6 +121,16 @@ document.write(price);
83121

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

86-
<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>
124+
<p>
125+
<Term type="javascriptAssignment">代入</Term>
126+
<Term type="javascriptOperator">演算子</Term>は、まず右辺の<Term type="javascriptExpression">
127+
式
128+
</Term>を<Term type="javascriptEvaluation">評価</Term>します。これにより、右辺は{" "}
129+
<code>100 / 2</code> となります。よって、最終的に<Term type="javascriptVariable">
130+
変数
131+
</Term> <code>price</code> の<Term type="javascriptValue">値</Term>は <code>
132+
50
133+
</code> となり、これは <code>price</code> を半分にする操作に対応します。
134+
</p>
87135

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

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

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

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

7-
<p><Term type="javascript">JavaScript</Term> で利用できる「<Term type="javascriptValue">値</Term>」として、これまで<Term type="javascriptString">文字列</Term>と<Term type="javascriptNumber">数値</Term>を扱いました。JavaScript ではこの他に、<Term strong type="javascriptBoolean">論理値</Term> と呼ばれる、「正しいか、正しくないか」を表すための<Term type="javascriptValue">値</Term>が存在します。</p>
8-
9-
<p><Term type="javascriptBoolean">論理値</Term>は、<code>true</code>（真）または <code>false</code>（偽）の２つだけです。ダブルクォーテーション <code>"</code> は必要ありません。通常の<Term type="javascriptValue">値</Term>ですので、<Term type="javascriptVariable">変数</Term>に<Term type="javascriptAssignment">代入</Term>したり、計算に使ったりすることができます。</p>
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 strong type="javascriptBoolean">
14+
論理値
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>
1028

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

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

15-
<p><Term type="javascriptBoolean">論理値</Term>に対して適用できる<Term type="javascriptOperator">演算子</Term>が存在します。</p>
33+
<p>
34+
<Term type="javascriptBoolean">論理値</Term>に対して適用できる
35+
<Term type="javascriptOperator">演算子</Term>が存在します。
36+
</p>
1637

1738
```javascript
1839
const isMonsterBig = true;

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

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

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

4650
```javascript
4751
const age = 18;

‎docs/1-trial-session/08-loop/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ for (let i = 1; i <= 10; i += 1) {
211211
document.write(product);
212212
```
213213

214-
<ViewSource url = {import.meta.url} path="_samples/product-alt" />
214+
<ViewSource url={import.meta.url} path="_samples/product-alt" />
215215

216216
</Answer>
217217

0 commit comments

Comments
 (0)