Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate to Docusaurus 3.0.0 #541

Merged
merged 5 commits into from
Nov 5, 2023
Merged

Migrate to Docusaurus 3.0.0 #541

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
44dd0e6
Migrate to Docusaurus 3.0.0
chvmvd Nov 4, 2023
3ebdc44
Add `.nvmrc` to specify version of Node.js
chvmvd Nov 4, 2023
1d83199
Remove unnecessary `p` element
chvmvd Nov 4, 2023
0f5d1ff
Update math packages
chvmvd Nov 4, 2023
97a6e73
Add `prettier-ignore` to parse correctly
chvmvd Nov 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .nvmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
18
33 changes: 5 additions & 28 deletions docs/1-trial-session/02-html/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,34 +54,11 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな

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

<p>
<Term type="html">HTML</Term> ファイルは、文書に意味を持たせるために、
<Term type="tag">
<strong>タグ</strong>
</Term>
と呼ばれる構造を持つことができます。<Term type="tag">タグ</Term>は、
<code>&lt;tag&gt;</code> のような、<code>&lt;</code>と<code>&gt;</code>
で囲まれた英数字のまとまりです。
</p>

<p>
<Term type="tag">タグ</Term>は、 <code>&lt;tag&gt;内容&lt;/tag&gt;</code>{" "}
のように、<Term type="tag">タグ</Term>
名の先頭にスラッシュを付けるか否かの区別により
<Term type="startTag">
<strong>開始タグ</strong>
</Term>
と<Term type="endTag">
<strong>終了タグ</strong>
</Term>
に分かれ、内部にテキストや別のタグを挟み込むことができます。
<Term type="startTag">開始タグ</Term>から<Term type="endTag">終了タグ</Term>
までのまとまりを
<Term type="element">
<strong>要素</strong>
</Term>
といいます。
</p>
<Term type="html">HTML</Term> ファイルは、文書に意味を持たせるために、<Term type="tag">**タグ**</Term>と呼ばれる構造を持つことができます。<Term type="tag">タグ</Term>は、`<tag>` のような、`<` と `>` で囲まれた英数字のまとまりです。

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

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

Expand Down
25 changes: 7 additions & 18 deletions docs/1-trial-session/03-javascript/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,8 @@ import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4";

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

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

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

Expand Down Expand Up @@ -46,9 +42,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 @@ -64,15 +58,10 @@ 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>
{/* prettier-ignore */}
<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
43 changes: 12 additions & 31 deletions docs/1-trial-session/04-expressions/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,40 +12,28 @@ document.write("Hello World");

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

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

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

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

<p>
<Term type="javascriptOperator">
<strong>演算子</strong>
</Term>
を用いると、<Term type="javascriptValue">値</Term>
を用いて計算をすることができます。例えば <code>+</code>（加算
<Term type="javascriptOperator">演算子</Term>
）で、足し算の計算を行うことができます。
</p>
{/* prettier-ignore */}
<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>
{/* prettier-ignore */}
<Term type="javascriptOperator">演算子</Term>には、<Term type="javascriptOperatorPriority">優先順位</Term>が設定されています。

```javascript title="script.js"
document.write(3 + 4 * 5);
Expand All @@ -59,17 +47,10 @@ 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>
{/* prettier-ignore */}
<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
69 changes: 19 additions & 50 deletions docs/1-trial-session/05-variables/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,14 @@ 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>
{/* prettier-ignore */}
<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>と使用

<p>
<Term type="javascriptVariable">変数</Term>を使用するには、まず
<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">
<strong>宣言</strong>
</Term>
する必要があります。
</p>
{/* prettier-ignore */}
<Term type="javascriptVariable">変数</Term>を使用するには、まず<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">**宣言**</Term>する必要があります。

```javascript title="script.js"
let myGreatName = "Becky Jones";
Expand All @@ -32,13 +22,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>
{/* prettier-ignore */}
<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>するキーワードには、`let` 以外にも `const` があります。
記法自体は `let` と同様ですが、少し違いがあります。
違いについては、次の節で説明します。

```javascript title="script.js"
const myGreatName = "Becky Jones";
Expand All @@ -51,14 +38,9 @@ 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>
{/* prettier-ignore */}
<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 @@ -96,15 +78,9 @@ 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>
{/* prettier-ignore */}
<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 @@ -118,16 +94,9 @@ 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>
{/* prettier-ignore */}
<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)
43 changes: 13 additions & 30 deletions docs/1-trial-session/06-boolean/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,36 +4,19 @@ title: 論理値と論理演算子

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

<p>
<Term type="javascript">JavaScript</Term> で利用できる「
<Term type="javascriptValue">値</Term>」として、これまで
<Term type="javascriptString">文字列</Term>と
<Term type="javascriptNumber">数値</Term>を扱いました。JavaScript
ではこの他に、
<Term type="javascriptBoolean">
<strong>論理値</strong>
</Term> と呼ばれる、「正しいか、正しくないか」を表すための
<Term type="javascriptValue">値</Term>が存在します。
</p>

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

{/* prettier-ignore */}
<Term type="javascriptBoolean">論理値</Term>は、`true`（真）または `false`（偽）の 2 つだけです。ダブルクォーテーション `"` は必要ありません。通常の<Term type="javascriptValue">値</Term>ですので、<Term type="javascriptVariable">変数</Term>に<Term type="javascriptAssignment">代入</Term>したり、計算に使ったりすることができます。

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

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

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

```javascript
const isMonsterBig = true;
Expand All @@ -45,11 +28,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
Open in desktop
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>
{/* prettier-ignore */}
<Term type="javascriptExpression">式</Term>の<Term type="javascriptEvaluation">評価</Term>結果が `true` であれば処理 1
が、`false` であれば処理 2 が実行されます。

```javascript
const age = 18;
Expand Down
Loading