diff --git a/docs/1-trial-session/01-get-started/index.md b/docs/1-trial-session/01-get-started/index.mdx similarity index 100% rename from docs/1-trial-session/01-get-started/index.md rename to docs/1-trial-session/01-get-started/index.mdx diff --git a/docs/1-trial-session/02-html/index.md b/docs/1-trial-session/02-html/index.mdx similarity index 90% rename from docs/1-trial-session/02-html/index.md rename to docs/1-trial-session/02-html/index.mdx index e019368d2..a269341c8 100644 --- a/docs/1-trial-session/02-html/index.md +++ b/docs/1-trial-session/02-html/index.mdx @@ -54,9 +54,34 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな `World` の部分に注目してください。 -

HTML ファイルは、文書に意味を持たせるために、タグと呼ばれる構造を持つことができます。タグは、<tag> のような、<と>で囲まれた英数字のまとまりです。

- -

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

+

+ HTML ファイルは、文書に意味を持たせるために、 + + タグ + + と呼ばれる構造を持つことができます。タグは、 + <tag> のような、<と> + で囲まれた英数字のまとまりです。 +

+ +

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

`body` 要素の中身を書き換え、次のようにしてみましょう。 diff --git a/docs/1-trial-session/03-javascript/index.md b/docs/1-trial-session/03-javascript/index.mdx similarity index 74% rename from docs/1-trial-session/03-javascript/index.md rename to docs/1-trial-session/03-javascript/index.mdx index 6c081ef96..67814b9d9 100644 --- a/docs/1-trial-session/03-javascript/index.md +++ b/docs/1-trial-session/03-javascript/index.mdx @@ -2,11 +2,16 @@ title: JavaScript ことはじめ --- -import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4" +import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4"; ## JavaScript -

HTML がウェブサイトの構造を表す言語だとすれば、JavaScript はウェブサイトに振る舞いを与える言語といえます。ブラウザさえあれば環境に関係なく同じように実行可能な、強力なプログラミング言語です。

+

+ HTML がウェブサイトの構造を表す言語だとすれば、 + + JavaScript + はウェブサイトに振る舞いを与える言語といえます。ブラウザさえあれば環境に関係なく同じように実行可能な、強力なプログラミング言語です。 +

![Web開発で用いられる言語](../02-html/web-development-languages.drawio.svg) @@ -41,7 +46,9 @@ document.write("Hello World!"); ## JavaScript が動く仕組み -

HTML ファイルの中に、以下のような記述があります。

+

+ HTML ファイルの中に、以下のような記述があります。 +

```html title="index.html" @@ -57,7 +64,15 @@ document.write("Hello World!"); ## JavaScript の基本文法 -

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

+

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

```javascript title="script.js" document.write("Hello World1"); diff --git a/docs/1-trial-session/04-expressions/index.md b/docs/1-trial-session/04-expressions/index.mdx similarity index 71% rename from docs/1-trial-session/04-expressions/index.md rename to docs/1-trial-session/04-expressions/index.mdx index 813199e13..47a18db88 100644 --- a/docs/1-trial-session/04-expressions/index.md +++ b/docs/1-trial-session/04-expressions/index.mdx @@ -12,7 +12,13 @@ document.write("Hello World"); `"Hello World"` のように `"`（ダブルクォーテーション）で囲まれた値を、文字列と呼びます。 -文字列は値の一種です。数値は文字列と同じ値の一種ですが、プログラムの中に直接記述することができます。 +文字列は +値の一種です。 +数値は + 文字列 +と同じ +値 +の一種ですが、プログラムの中に直接記述することができます。 ![値の種類](./value-types.drawio.svg) @@ -20,7 +26,15 @@ document.write("Hello World"); document.write(3); ``` -

演算子を用いると、値を用いて計算をすることができます。例えば +（加算演算子）で、足し算の計算を行うことができます。

+

+ + 演算子 + + を用いると、値 + を用いて計算をすることができます。例えば +（加算 + 演算子 + ）で、足し算の計算を行うことができます。 +

```javascript title="script.js" document.write(3 + 4); @@ -28,7 +42,10 @@ document.write(3 + 4); ## 演算子の優先順位 -

演算子には、優先順位が設定されています。

+

+ 演算子には、 + 優先順位が設定されています。 +

```javascript title="script.js" document.write(3 + 4 * 5); @@ -42,7 +59,17 @@ document.write(3 + 4 * 5); ## いろいろな演算子 -

演算子が適用できるのは、何も数値だけではありません。文字列に適用できる演算子もあります。先ほどの +（加算演算子）は、文字列同士で使用された場合は、文字列結合演算子となります。

+

+ 演算子が適用できるのは、何も + 数値だけではありません。 + 文字列に適用できる + 演算子もあります。先ほどの + + + （加算演算子）は、 + 文字列同士で使用された場合は、 + 文字列結合 + 演算子となります。 +

```javascript title="script.js" document.write("Hello" + "World"); diff --git a/docs/1-trial-session/05-variables/index.md b/docs/1-trial-session/05-variables/index.mdx similarity index 59% rename from docs/1-trial-session/05-variables/index.md rename to docs/1-trial-session/05-variables/index.mdx index ee3c24daa..e5b879ef3 100644 --- a/docs/1-trial-session/05-variables/index.md +++ b/docs/1-trial-session/05-variables/index.mdx @@ -4,11 +4,27 @@ title: 変数 ## 変数とは -

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

+

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

## 変数の宣言と使用 -

変数を使用するには、まず変数を宣言する必要があります。

+

+ 変数を使用するには、まず + 変数を + 宣言 + + する必要があります。 +

```javascript title="script.js" let myGreatName = "Becky Jones"; @@ -19,7 +35,13 @@ document.write(myGreatName); 2 行目では、変数 `myGreatName` が評価され、代入されていた文字列値 `"Becky Jones"` が画面に表示されます。 -

変数を宣言するキーワードには、let 以外にも const があります。記法自体はlet と同様ですが、少し違いがあります。違いについては、次の節で説明します。

+

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

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

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

+

+ JavaScript の + 変数名には、通常 + キャメルケースが用いられます。 + スネークケースや + パスカルケース + などの命名規則が利用される文法もあります。 +

::: :::tip -変数に適切な命名をすることは非常に重要です。以下の例を見てみましょう。 +変数 +に適切な命名をすることは非常に重要です。以下の例を見てみましょう。 ```javascript const a = 500; @@ -69,7 +99,15 @@ mysteriousNumber = 2; document.write(mysteriousNumber); // 2 ``` -

変数には、最後に代入された値のみを保持する性質があります。そのため、変数 mysteriousNumber は 3 回代入が行われていますが、最後に代入された 2 が表示されます。

+

+ 変数には、最後に + 代入された + 値のみを保持する性質があります。そのため、 + 変数 mysteriousNumber は 3 + 回代入が行われていますが、最後に + 代入された 2{" "} + が表示されます。 +

一方、`const` で宣言された変数には、再代入ができません。そのため、上記のコードの `let` を `const` に置き換えることはできません。 @@ -83,6 +121,16 @@ document.write(price); -

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

+

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

![変数の再代入](./reassignment-evaluation.png) diff --git a/docs/1-trial-session/06-boolean/index.md b/docs/1-trial-session/06-boolean/index.mdx similarity index 75% rename from docs/1-trial-session/06-boolean/index.md rename to docs/1-trial-session/06-boolean/index.mdx index 36a799871..af37a2c8d 100644 --- a/docs/1-trial-session/06-boolean/index.md +++ b/docs/1-trial-session/06-boolean/index.mdx @@ -4,15 +4,36 @@ title: 論理値と論理演算子 ## 論理値 -

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

- -

論理値は、true（真）または false（偽）の２つだけです。ダブルクォーテーション " は必要ありません。通常の値ですので、変数に代入したり、計算に使ったりすることができます。

+

+ JavaScript で利用できる「 + 値」として、これまで + 文字列と + 数値を扱いました。JavaScript + ではこの他に、 + + 論理値 + と呼ばれる、「正しいか、正しくないか」を表すための + 値が存在します。 +

+ +

+ 論理値は、true（真）または{" "} + false（偽）の２つだけです。ダブルクォーテーション "{" "} + は必要ありません。通常の値ですので、 + 変数に + 代入 + + したり、計算に使ったりすることができます。 +

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

論理値に対して適用できる演算子が存在します。

+

+ 論理値に対して適用できる + 演算子が存在します。 +

```javascript const isMonsterBig = true; diff --git a/docs/1-trial-session/07-if-statement/index.md b/docs/1-trial-session/07-if-statement/index.mdx similarity index 93% rename from docs/1-trial-session/07-if-statement/index.md rename to docs/1-trial-session/07-if-statement/index.mdx index e939d0f69..492d9a9ce 100644 --- a/docs/1-trial-session/07-if-statement/index.md +++ b/docs/1-trial-session/07-if-statement/index.mdx @@ -41,7 +41,11 @@ if (式) { } ``` -

式の評価結果が true であれば処理 1 が、false であれば処理 2 が実行されます。

+

+ 式の + 評価結果が true{" "} + であれば処理 1 が、false であれば処理 2 が実行されます。 +

```javascript const age = 18; diff --git a/docs/1-trial-session/08-loop/index.md b/docs/1-trial-session/08-loop/index.mdx similarity index 99% rename from docs/1-trial-session/08-loop/index.md rename to docs/1-trial-session/08-loop/index.mdx index 6d02a8fdd..939beee36 100644 --- a/docs/1-trial-session/08-loop/index.md +++ b/docs/1-trial-session/08-loop/index.mdx @@ -211,7 +211,7 @@ for (let i = 1; i <= 10; i += 1) { document.write(product); ``` - + diff --git a/docs/1-trial-session/09-functions/index.md b/docs/1-trial-session/09-functions/index.mdx similarity index 70% rename from docs/1-trial-session/09-functions/index.md rename to docs/1-trial-session/09-functions/index.mdx index 163dc0921..2e11f11df 100644 --- a/docs/1-trial-session/09-functions/index.md +++ b/docs/1-trial-session/09-functions/index.mdx @@ -21,13 +21,27 @@ greet(); 上のプログラムにおいて、`function` キーワードから始まる部分は関数を定義するための制御構文です。関数定義では、 `function` キーワードに続けて関数名、かっこを記述します。この後、関数内で実行したい処理を波かっこの中に記述していきます。 -

関数を定義すると、関数名に続けてかっこを記述することにより、その関数を実行できるようになります。

+

+ 関数を定義すると、 + 関数 + 名に続けてかっこを記述することにより、その + 関数を実行できるようになります。 +

このプログラムでは、 `greet` 関数が 2 回呼び出されているので、ブラウザに `Hello World!` が 2 つ表示されます。 ## 引数 -

関数の振る舞いを呼び出し時に変更するため、関数に引数を与えることができます。引数には任意の値が指定できます。

+

+ 関数 + の振る舞いを呼び出し時に変更するため、 + 関数に + + 引数 + + を与えることができます。引数には任意の + 値が指定できます。 +

```javascript function greet(greetingType, myName) { @@ -37,7 +51,18 @@ function greet(greetingType, myName) { greet("morning", "佐藤"); ``` -

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

+

+ 関数定義では、 + 関数名直後のかっこ内に + 引数 + 名をコンマ区切りで設定できます。上のプログラムで greet + 関数 + は、 greetingType や myName という名前の + 引数 + + をとります。関数定義の中では、これらは + 変数のように振舞います。 +

呼び出し側では、括弧の中に関数に渡す引数を指定します。このプログラムを実行すると、ブラウザに `Good morning, 佐藤!` が表示されるでしょう。 @@ -45,7 +70,29 @@ greet("morning", "佐藤"); ## 戻り値 -

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

+

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

```javascript function add(a, b) { @@ -101,9 +148,27 @@ document.write(multiply(3, 4)); ## 変数のスコープ -

関数内で宣言された変数は、関数内でのみ有効です。変数が有効な範囲のことを、その変数のスコープと呼んでいます。

- -

関数外で宣言された変数は関数内でも利用できます。

+

+ 関数内で + 宣言された + 変数は、 + 関数内でのみ有効です。 + 変数が有効な範囲のことを、その + 変数の + スコープ + + と呼んでいます。 +

+ +

+ 関数外で + 宣言された + 変数は + 関数内でも利用できます。 +

```javascript let guestCount = 0; @@ -121,7 +186,10 @@ greet(); :::caution 変数のスコープ -

スコープが終わった変数は、その時点で破棄されます。

+

+ スコープが終わった + 変数は、その時点で破棄されます。 +

```javascript let outer = 0; @@ -142,7 +210,10 @@ increment(); ## 処理の分割 -

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

+

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

長い処理をパーツに分割すると、次のようなメリットがあります。 @@ -218,11 +289,19 @@ function showProbabilityAsGraph(probability) { ### 最大値 -

引数を 2 つとり、そのうち大きい数を返す関数 max を定義してください。

+

+ 引数を 2 つとり、そのうち大きい数を + 返す + 関数 max{" "} + を定義してください。 +

:::tip -

if 文を使って、a が大きい場合と b が大きい場合で処理を書き分けます。

+

+ if 文を使って、a{" "} + が大きい場合と b が大きい場合で処理を書き分けます。 +

::: diff --git a/docs/1-trial-session/10-array/index.md b/docs/1-trial-session/10-array/index.mdx similarity index 100% rename from docs/1-trial-session/10-array/index.md rename to docs/1-trial-session/10-array/index.mdx diff --git a/docs/1-trial-session/11-object/index.md b/docs/1-trial-session/11-object/index.mdx similarity index 78% rename from docs/1-trial-session/11-object/index.md rename to docs/1-trial-session/11-object/index.mdx index a98429474..c729125ca 100644 --- a/docs/1-trial-session/11-object/index.md +++ b/docs/1-trial-session/11-object/index.mdx @@ -6,11 +6,30 @@ title: オブジェクト JavaScript で扱うことのできる値の種類として、これまで数値、文字列、論理値を扱ってきました。オブジェクトもまた、JavaScript の値ですが、今まで扱ってきた値とは少し性質が異なります。 -

オブジェクトを用いると、これまで扱ってきたような単純な値を複数まとめて一つの値として扱うことができます。

+

+ オブジェクト + を用いると、これまで扱ってきたような単純な + 値を複数まとめて一つの + 値として扱うことができます。 +

## オブジェクトの作成 -

オブジェクトは、複数のプロパティと呼ばれる値を持ちます。プロパティにはそれぞれ名前がついています。プロパティの名前には文字列しか指定できませんが、プロパティの値としては JavaScript で使用できるすべての値が使用可能です。

+

+ オブジェクトは、複数の + + プロパティ + + と呼ばれる値を持ちます。 + プロパティ + にはそれぞれ名前がついています。 + プロパティ + の名前には文字列しか指定できませんが、 + プロパティの + 値 + としては JavaScript で使用できるすべての + 値が使用可能です。 +

```javascript const person = { name: "田中", age: 18 }; @@ -24,7 +43,10 @@ JavaScript のオブジェクトは、ほ ::: -

オブジェクトの中にオブジェクトを入れることもできます。

+

+ オブジェクトの中に + オブジェクトを入れることもできます。 +

```javascript const person = { @@ -127,7 +149,13 @@ document.write(tanaka.scores.japanese); ### 中級課題 -

オブジェクトも値の一種なので、関数の引数や戻り値として使用できます。

+

+ オブジェクトも + 値の一種なので、 + 関数の + 引数 + や戻り値として使用できます。 +

`age` プロパティに 1 を加えたオブジェクトを返す関数 `incrementAge` を定義してみましょう。 diff --git a/docs/1-trial-session/12-css/index.md b/docs/1-trial-session/12-css/index.mdx similarity index 96% rename from docs/1-trial-session/12-css/index.md rename to docs/1-trial-session/12-css/index.mdx index f53ab0165..e6a14b4cb 100644 --- a/docs/1-trial-session/12-css/index.md +++ b/docs/1-trial-session/12-css/index.mdx @@ -98,7 +98,12 @@ CSS の `{` から `}` で囲まれたブロックの中に、CSS のプロパティは、オブジェクトにおけるプロパティと似ているものの、全く異なるものです。文脈により何を意味しているのかが変わるので注意してください。

+

+ CSS のプロパティは、 + オブジェクトにおける + プロパティ + と似ているものの、全く異なるものです。文脈により何を意味しているのかが変わるので注意してください。 +

::: diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.mdx similarity index 80% rename from docs/1-trial-session/13-dom/index.md rename to docs/1-trial-session/13-dom/index.mdx index db7e095df..a02f7e29f 100644 --- a/docs/1-trial-session/13-dom/index.md +++ b/docs/1-trial-session/13-dom/index.mdx @@ -4,7 +4,17 @@ title: DOM ## HTML 要素を JavaScript で取得する -

DOM（Document Object Model）は、HTML 構造を JavaScript のオブジェクトとして扱うための枠組みです。HTML と CSS のほとんどの機能は JavaScript から制御することができます。

+

+ + DOM + + （Document Object Model）は、HTML 構造を + JavaScript + のオブジェクトとして扱うための枠組みです。 + HTML と CSS{" "} + のほとんどの機能は JavaScript{" "} + から制御することができます。 +

`document.getElementById` 関数は、引数として HTML 要素の `id` 属性に指定された値を文字列として渡すことで、その要素を表すオブジェクトを返します。 @@ -19,7 +29,14 @@ element.textContent = "Hello DOM"; -

変数 element には、index.html に記述された div 要素に対応するオブジェクトが代入されています。

+

+ 変数 element には、 + index.html に記述された div + 要素 + に対応する + オブジェクトが + 代入されています。 +

![DOM](./dom.png) @@ -46,8 +63,18 @@ element.style.backgroundColor = "red"; ![JavaScriptからスタイルを操作する](./change-styles.png) -

CSS のプロパティ名である background-color は、内部にハイフンが含まれているため、element.style.background-colorのように指定してしまうと、ハイフンが減算演算子として解釈されてしまいます。 -style プロパティでは、CSS のプロパティ名はキャメルケースとして指定する必要があることに注意してください。

+

+ CSS のプロパティ + 名である background-color は、内部にハイフンが含まれているため、 + element.style.background-color + のように指定してしまうと、ハイフンが減算 + 演算子として解釈されてしまいます。 + style プロパティでは、 + CSS + のプロパティ名は + キャメルケース + として指定する必要があることに注意してください。 +

## DOM を用いて要素を追加する diff --git a/docs/1-trial-session/14-events/index.md b/docs/1-trial-session/14-events/index.mdx similarity index 77% rename from docs/1-trial-session/14-events/index.md rename to docs/1-trial-session/14-events/index.mdx index cecd124ca..6c5af5442 100644 --- a/docs/1-trial-session/14-events/index.md +++ b/docs/1-trial-session/14-events/index.mdx @@ -7,7 +7,20 @@ import projectMovieForDom from "./project-movie-for-dom.mp4"; ## 値としての関数 -

JavaScript では、関数も値の一種です。したがって、他の値と同じように、変数に代入したり、関数の引数や戻り値として使用したりすることができます。

+

+ JavaScript では、 + 関数も + 値 + の一種です。したがって、他の + 値と同じように、 + 変数に + 代入 + したり、 + 関数の + 引数や + 戻り値 + として使用したりすることができます。 +

```javascript function greet() { @@ -22,8 +35,21 @@ func(); ## イベントハンドラ -

オブジェクトのプロパティとして関数を利用することもできます。 document.getElementById が返すオブジェクトの onclick プロパティには、要素がクリックされたときに実行される関数を指定できます。

-ボタンのクリック、フォームへの入力、ページの読み込みなど、Web ページ上で発生するあらゆるアクションを総称してイベントと呼びます。このようなイベントの処理を行うのがイベントハンドラで、onclick 関数はその一例です。 +

+ オブジェクトの + プロパティとして + 関数を利用することもできます。 + document.getElementById + が返す + オブジェクトの onclick{" "} + プロパティには、 + 要素がクリックされたときに実行される + 関数を指定できます。 +

+ボタンのクリック、フォームへの入力、ページの読み込みなど、Web ページ上で発生するあらゆるアクションを総称して +イベントと呼びます。このような +イベントの処理を行うのが +イベントハンドラで、onclick 関数はその一例です。 ```html title="index.html" diff --git a/docs/1-trial-session/15-project/index.md b/docs/1-trial-session/15-project/index.mdx similarity index 100% rename from docs/1-trial-session/15-project/index.md rename to docs/1-trial-session/15-project/index.mdx diff --git a/docs/1-trial-session/16-deploy-application/index.md b/docs/1-trial-session/16-deploy-application/index.mdx similarity index 100% rename from docs/1-trial-session/16-deploy-application/index.md rename to docs/1-trial-session/16-deploy-application/index.mdx diff --git a/docs/1-trial-session/index.md b/docs/1-trial-session/index.mdx similarity index 82% rename from docs/1-trial-session/index.md rename to docs/1-trial-session/index.mdx index 0601532c4..31517b840 100644 --- a/docs/1-trial-session/index.md +++ b/docs/1-trial-session/index.mdx @@ -2,7 +2,7 @@ title: Web プログラミングの基礎を学ぼう --- -import DocCardList from '@theme/DocCardList'; +import DocCardList from "@theme/DocCardList"; このセクションでは、HTML、CSS、JavaScript の基礎を学び、簡単なウェブアプリケーションを作ってみます。 diff --git a/docs/2-browser-apps/01-inspector/index.md b/docs/2-browser-apps/01-inspector/index.mdx similarity index 100% rename from docs/2-browser-apps/01-inspector/index.md rename to docs/2-browser-apps/01-inspector/index.mdx diff --git a/docs/2-browser-apps/02-reference/index.md b/docs/2-browser-apps/02-reference/index.mdx similarity index 100% rename from docs/2-browser-apps/02-reference/index.md rename to docs/2-browser-apps/02-reference/index.mdx diff --git a/docs/2-browser-apps/03-class/index.md b/docs/2-browser-apps/03-class/index.mdx similarity index 92% rename from docs/2-browser-apps/03-class/index.md rename to docs/2-browser-apps/03-class/index.mdx index 355295ccd..79b89a3a3 100644 --- a/docs/2-browser-apps/03-class/index.md +++ b/docs/2-browser-apps/03-class/index.mdx @@ -26,7 +26,9 @@ class Student { :::info -クラスの名前は、通常のキャメルケースの最初の文字を大文字にしたパスカルケースで記述するのが普通です。 +クラスの名前は、通常の +キャメルケースの最初の文字を大文字にした +パスカルケースで記述するのが普通です。 ::: @@ -84,9 +86,23 @@ class Student { } ``` -

クラス自体は単なる設計図でしかないため、実際のオブジェクトが存在するわけではありません。そこで、メソッド内では、設計図から作成されたインスタンス自身を指す特殊な変数 this が使用できます。

- -

メソッドを使用するには、プロパティへのアクセス時と同じく、インスタンスに対して .（ドット）記号を用います。

+

+ クラス + 自体は単なる設計図でしかないため、実際の + オブジェクト + が存在するわけではありません。そこで、 + メソッド内では、設計図から作成された + インスタンス自身を指す特殊な変数 + this + が使用できます。 +

+ +

+ メソッドを使用するには、 + プロパティへのアクセス時と同じく、 + インスタンスに対して . + （ドット）記号を用います。 +

```javascript const tanaka = new Student(); @@ -161,7 +177,14 @@ const tanaka = new Student("田中", 2004, 2022); tanaka.introduceSelf(); ``` -クラスとコンストラクタのメリットを理解するために、クラスのインスタンスを複数生成する場合を考えましょう。例えば、田中さん、鈴木さん、佐藤さんが続けて自己紹介する場合、クラスを使わないでコードを書くと以下のようになります。 +クラスと +コンストラクタ +のメリットを理解するために、クラスの + インスタンス + +を複数生成する場合を考えましょう。例えば、田中さん、鈴木さん、佐藤さんが続けて自己紹介する場合、 +クラス +を使わないでコードを書くと以下のようになります。 ```javascript const tanaka = { @@ -296,7 +319,10 @@ tanaka.researchQuestion = "量子力学"; tanaka.introduceSelf(); ``` - + diff --git a/docs/2-browser-apps/04-anonymous-function/index.md b/docs/2-browser-apps/04-anonymous-function/index.mdx similarity index 100% rename from docs/2-browser-apps/04-anonymous-function/index.md rename to docs/2-browser-apps/04-anonymous-function/index.mdx diff --git a/docs/2-browser-apps/05-css-arrangement/index.md b/docs/2-browser-apps/05-css-arrangement/index.mdx similarity index 98% rename from docs/2-browser-apps/05-css-arrangement/index.md rename to docs/2-browser-apps/05-css-arrangement/index.mdx index 904cb7d63..4c462efb9 100644 --- a/docs/2-browser-apps/05-css-arrangement/index.md +++ b/docs/2-browser-apps/05-css-arrangement/index.mdx @@ -2,11 +2,11 @@ title: CSS による配置（発展） --- -import absoluteScroll from "./position-absolute-scroll.mp4" -import fixedScroll from "./position-fixed-scroll.mp4" -import percentCss from "./percent-css.mp4" -import maxMinWidth from "./max-width-min-width.mp4" -import mediaQuery from "./mediaquery.mp4" +import absoluteScroll from "./position-absolute-scroll.mp4"; +import fixedScroll from "./position-fixed-scroll.mp4"; +import percentCss from "./percent-css.mp4"; +import maxMinWidth from "./max-width-min-width.mp4"; +import mediaQuery from "./mediaquery.mp4"; ## CSS のボックスモデル diff --git a/docs/2-browser-apps/06-project/index.md b/docs/2-browser-apps/06-project/index.mdx similarity index 100% rename from docs/2-browser-apps/06-project/index.md rename to docs/2-browser-apps/06-project/index.mdx diff --git a/docs/2-browser-apps/index.md b/docs/2-browser-apps/index.mdx similarity index 81% rename from docs/2-browser-apps/index.md rename to docs/2-browser-apps/index.mdx index 3233818e1..31d642a0c 100644 --- a/docs/2-browser-apps/index.md +++ b/docs/2-browser-apps/index.mdx @@ -2,7 +2,7 @@ title: ブラウザで動作するアプリを構築しよう --- -import DocCardList from '@theme/DocCardList'; +import DocCardList from "@theme/DocCardList"; JavaScript を用いて開発を行うにあたり、JavaScript をより深く学んでいきましょう。 diff --git a/docs/3-web-servers/01-wsl-setup/index.md b/docs/3-web-servers/01-wsl-setup/index.mdx similarity index 100% rename from docs/3-web-servers/01-wsl-setup/index.md rename to docs/3-web-servers/01-wsl-setup/index.mdx diff --git a/docs/3-web-servers/02-node-js/index.md b/docs/3-web-servers/02-node-js/index.mdx similarity index 100% rename from docs/3-web-servers/02-node-js/index.md rename to docs/3-web-servers/02-node-js/index.mdx diff --git a/docs/3-web-servers/03-module/index.md b/docs/3-web-servers/03-module/index.mdx similarity index 98% rename from docs/3-web-servers/03-module/index.md rename to docs/3-web-servers/03-module/index.mdx index d53de0c73..4e4e09c33 100644 --- a/docs/3-web-servers/03-module/index.md +++ b/docs/3-web-servers/03-module/index.mdx @@ -152,7 +152,11 @@ console.log(readFileSync("sample.txt", "utf-8")); Hello World ``` - + :::tip 文字コード @@ -173,7 +177,11 @@ import { writeFileSync } from "fs"; writeFileSync("./sample.txt", "Hello World"); ``` - + @@ -245,6 +253,7 @@ console.log(format(new Date(), "yyyy年MM月dd日")); 1. サンプルコードの `dateFns` 変数の中身をデバッガで観察してみましょう。 2. [`mathjs` パッケージ](https://www.npmjs.com/package/mathjs)は、JavaScript で複雑な計算を行うためのライブラリです。このライブラリを用いて、$\log(x)$ を $x$ について微分した式を求めてください。 + [`mathjs.derivative` 関数](https://mathjs.org/docs/reference/functions/derivative.html)を用いると、微分した式を求めることができます。 diff --git a/docs/3-web-servers/04-server/index.md b/docs/3-web-servers/04-server/index.mdx similarity index 100% rename from docs/3-web-servers/04-server/index.md rename to docs/3-web-servers/04-server/index.mdx diff --git a/docs/3-web-servers/05-form/index.md b/docs/3-web-servers/05-form/index.mdx similarity index 100% rename from docs/3-web-servers/05-form/index.md rename to docs/3-web-servers/05-form/index.mdx diff --git a/docs/3-web-servers/06-get-post/index.md b/docs/3-web-servers/06-get-post/index.mdx similarity index 92% rename from docs/3-web-servers/06-get-post/index.md rename to docs/3-web-servers/06-get-post/index.mdx index 892144dc7..45eeda9e8 100644 --- a/docs/3-web-servers/06-get-post/index.md +++ b/docs/3-web-servers/06-get-post/index.mdx @@ -57,7 +57,17 @@ app.listen(3000); これまで利用していた `app.get` ([`express.Application#get` メソッド](https://expressjs.com/ja/api.html#app.get.method)) では、GET メソッドのリクエストしか受け付けられないため、`/send` への POST リクエストを受け付けるために `app.post` ([`express.Application#post` メソッド](https://expressjs.com/ja/api.html#app.post.method)) を利用しています。 -

クエリパラメータにアクセスするには、request.query (express.Request#query プロパティ) を使用しましたが、リクエストボディを使用するには、request.body (express.Request#body プロパティ) を使用します。

+

+ クエリパラメータにアクセスするには、 + request.query ( + express.Request#query プロパティ + ) を使用しましたが、リクエストボディ + を使用するには、request.body ( + + express.Request#body プロパティ + + ) を使用します。 +

`app.use(express.urlencoded({ extended: true }));` は、リクエストボディの解釈方法を定めています。HTML のフォームが送信されたとき、ブラウザが発行する POST リクエストのリクエストボディは、クエリパラメータと同じく URL エンコードされた形式で記述されます。[`express.urlencoded` 関数](https://expressjs.com/ja/api.html#express.urlencoded)は、URL エンコードされたリクエストボディを読み取り、`request.body` にオブジェクトの形式でデータを保存する役割を担っています。 diff --git a/docs/3-web-servers/07-database/index.md b/docs/3-web-servers/07-database/index.mdx similarity index 97% rename from docs/3-web-servers/07-database/index.md rename to docs/3-web-servers/07-database/index.mdx index c4d890efb..c27e0897c 100644 --- a/docs/3-web-servers/07-database/index.md +++ b/docs/3-web-servers/07-database/index.mdx @@ -88,7 +88,13 @@ npx prisma init :::tip `npx` コマンド -

npx コマンドは、npm のパッケージを、プログラムからではなく直接実行するためのコマンドです。npm には prisma パッケージのように、直接実行専用のパッケージも存在します。

+

+ + npx コマンド + + は、npm のパッケージを、プログラムからではなく直接実行するためのコマンドです。npm + には prisma パッケージのように、直接実行専用のパッケージも存在します。 +

::: diff --git a/docs/3-web-servers/08-cookie/index.md b/docs/3-web-servers/08-cookie/index.mdx similarity index 100% rename from docs/3-web-servers/08-cookie/index.md rename to docs/3-web-servers/08-cookie/index.mdx diff --git a/docs/3-web-servers/09-git-github-init/index.md b/docs/3-web-servers/09-git-github-init/index.mdx similarity index 100% rename from docs/3-web-servers/09-git-github-init/index.md rename to docs/3-web-servers/09-git-github-init/index.mdx diff --git a/docs/3-web-servers/10-git-github/index.md b/docs/3-web-servers/10-git-github/index.mdx similarity index 100% rename from docs/3-web-servers/10-git-github/index.md rename to docs/3-web-servers/10-git-github/index.mdx diff --git a/docs/3-web-servers/11-team-development/index.md b/docs/3-web-servers/11-team-development/index.mdx similarity index 100% rename from docs/3-web-servers/11-team-development/index.md rename to docs/3-web-servers/11-team-development/index.mdx diff --git a/docs/3-web-servers/12-deploy-on-render/index.md b/docs/3-web-servers/12-deploy-on-render/index.mdx similarity index 100% rename from docs/3-web-servers/12-deploy-on-render/index.md rename to docs/3-web-servers/12-deploy-on-render/index.mdx diff --git a/docs/3-web-servers/index.md b/docs/3-web-servers/index.mdx similarity index 65% rename from docs/3-web-servers/index.md rename to docs/3-web-servers/index.mdx index 292cf9629..9ca291586 100644 --- a/docs/3-web-servers/index.md +++ b/docs/3-web-servers/index.mdx @@ -2,6 +2,6 @@ title: Web サーバーが動作する仕組みを知ろう --- -import DocCardList from '@theme/DocCardList'; +import DocCardList from "@theme/DocCardList"; diff --git a/docs/4-advanced/01-fetch-api/index.md b/docs/4-advanced/01-fetch-api/index.mdx similarity index 98% rename from docs/4-advanced/01-fetch-api/index.md rename to docs/4-advanced/01-fetch-api/index.mdx index 258a44dea..538ef5954 100644 --- a/docs/4-advanced/01-fetch-api/index.md +++ b/docs/4-advanced/01-fetch-api/index.mdx @@ -9,7 +9,10 @@ import chatAppVideo from "./chat-app.mp4"; これまで、ブラウザがサーバーに対してリクエストを送信するのは、リンクがクリックされたときや、フォームが送信されたときなど、ページの再読み込みが起こる場合のみでした。 しかしながら、ブラウザ上で動く JavaScript から利用できる **Fetch API** を用いると、任意のタイミングでリクエストが発行できるようになります。API は、アプリケーションプログラミングインターフェース(Application Programming Interface)の略で、あるソフトウェアの機能や管理するデータを、外部の他のソフトウェアで利用するための手順やデータ形式を定めた規約のことです。多くのソフトウェアが共通して利用する機能がまとめて提供されており、API に従い短いコードを記述するだけでその機能を利用することができます。 -サーバーとクライアント、どちらで動く JavaScript なのかに注意しながら、次のプログラムを実行してみましょう。 + +サーバーと +クライアント、どちらで動く JavaScript +なのかに注意しながら、次のプログラムを実行してみましょう。 ```html title="static/index.html の body 内" diff --git a/docs/4-advanced/02-bundler/index.md b/docs/4-advanced/02-bundler/index.mdx similarity index 96% rename from docs/4-advanced/02-bundler/index.md rename to docs/4-advanced/02-bundler/index.mdx index ef9626cf8..3c70713f6 100644 --- a/docs/4-advanced/02-bundler/index.md +++ b/docs/4-advanced/02-bundler/index.mdx @@ -13,7 +13,13 @@ JavaScript は、当初は Web サイトに簡易的な動きを追加させる ### トランスパイラ -

トランスパイラは、ソースコードを別のソースコードに変換するためのプログラムです。JavaScript においてトランスパイラが必要になるのは、主に 2 つの理由によります。

+

+ + トランスパイラ + + は、ソースコードを別のソースコードに変換するためのプログラムです。JavaScript においてトランスパイラが必要になるのは、主に + 2 つの理由によります。 +

ひとつは、**最新の機能を使用するため**です。JavaScript の言語仕様は、[Ecma International](https://www.ecma-international.org/) の [TC39](https://tc39.es/) によって作成されていますが、新しく策定された仕様は、まだブラウザなどによって実装されていない場合があります。[Babel](https://babeljs.io/) は、そういった最新の言語仕様に沿って書かれたプログラムを変換し、古い仕様の範囲内で解釈できるプログラムに変換するための、最も有名なトランスパイラです。 diff --git a/docs/4-advanced/03-typescript/index.md b/docs/4-advanced/03-typescript/index.mdx similarity index 100% rename from docs/4-advanced/03-typescript/index.md rename to docs/4-advanced/03-typescript/index.mdx diff --git a/docs/4-advanced/04-react/index.md b/docs/4-advanced/04-react/index.mdx similarity index 99% rename from docs/4-advanced/04-react/index.md rename to docs/4-advanced/04-react/index.mdx index 1e2c242c6..c0230c7eb 100644 --- a/docs/4-advanced/04-react/index.md +++ b/docs/4-advanced/04-react/index.mdx @@ -789,6 +789,15 @@ const object2 = { ...object1, age: 19, address: "東京" }; // { name: "田中", - ヒント: ページ読み込み時に Fetch API を用いてデータを保存済みの ToDo 一覧を取得します。リストが編集されたら再び Fetch API を用いてデータを保存しましょう。 解答例 - + + 別解 - + diff --git a/docs/4-advanced/index.md b/docs/4-advanced/index.mdx similarity index 88% rename from docs/4-advanced/index.md rename to docs/4-advanced/index.mdx index 771e39440..081b18dff 100644 --- a/docs/4-advanced/index.md +++ b/docs/4-advanced/index.mdx @@ -2,7 +2,7 @@ title: 現代のアプリを支える技術を学ぼう（発展） --- -import DocCardList from '@theme/DocCardList'; +import DocCardList from "@theme/DocCardList"; これまでのカリキュラムで、ウェブアプリが動作する基本的な仕組みを学んできました。このセクションでは、複雑化する現代のアプリケーションを構築するためによく用いられる技術について学びます。 diff --git a/docs/5-team-development/01-git-workflow/index.md b/docs/5-team-development/01-git-workflow/index.mdx similarity index 100% rename from docs/5-team-development/01-git-workflow/index.md rename to docs/5-team-development/01-git-workflow/index.mdx diff --git a/docs/5-team-development/index.md b/docs/5-team-development/index.mdx similarity index 80% rename from docs/5-team-development/index.md rename to docs/5-team-development/index.mdx index f9bf586aa..b1f0921f1 100644 --- a/docs/5-team-development/index.md +++ b/docs/5-team-development/index.mdx @@ -2,7 +2,7 @@ title: チーム開発を始める前に（発展） --- -import DocCardList from '@theme/DocCardList'; +import DocCardList from "@theme/DocCardList"; この章では、チーム開発を行う上で必要となる知識について学んでいきます。 diff --git a/docs/6-exercise/1-basis-of-web/index.md b/docs/6-exercise/1-basis-of-web/index.mdx similarity index 98% rename from docs/6-exercise/1-basis-of-web/index.md rename to docs/6-exercise/1-basis-of-web/index.mdx index a1038d116..bc1c9dc7a 100644 --- a/docs/6-exercise/1-basis-of-web/index.md +++ b/docs/6-exercise/1-basis-of-web/index.mdx @@ -352,7 +352,13 @@ function bubbleSort(array) { :::tip -副作用と純粋関数の話 + + 副作用 + +と + 純粋関数 + +の話 本解答例では返り値をarrayに代入していないにも関わらず、arrayの中身が変わってしまいます。なぜでしょうか？ diff --git a/docs/6-exercise/10-typescript/index.md b/docs/6-exercise/10-typescript/index.mdx similarity index 100% rename from docs/6-exercise/10-typescript/index.md rename to docs/6-exercise/10-typescript/index.mdx diff --git a/docs/6-exercise/11-react/index.md b/docs/6-exercise/11-react/index.mdx similarity index 98% rename from docs/6-exercise/11-react/index.md rename to docs/6-exercise/11-react/index.mdx index cebcdebcd..7f9972a65 100644 --- a/docs/6-exercise/11-react/index.md +++ b/docs/6-exercise/11-react/index.mdx @@ -3,7 +3,7 @@ title: React を用いたアプリ作成 sidebar_position: 10 --- -import todoAppVideo from "./todo-app.mp4" +import todoAppVideo from "./todo-app.mp4"; import ViewSource from "@site/src/components/ViewSource"; この章では教材の「[React](/docs/advanced/react/)」の内容を扱っています。 diff --git a/docs/6-exercise/2-easy-apps/index.md b/docs/6-exercise/2-easy-apps/index.mdx similarity index 100% rename from docs/6-exercise/2-easy-apps/index.md rename to docs/6-exercise/2-easy-apps/index.mdx diff --git a/docs/6-exercise/3-javascript/index.md b/docs/6-exercise/3-javascript/index.mdx similarity index 100% rename from docs/6-exercise/3-javascript/index.md rename to docs/6-exercise/3-javascript/index.mdx diff --git a/docs/6-exercise/4-css/index.md b/docs/6-exercise/4-css/index.mdx similarity index 99% rename from docs/6-exercise/4-css/index.md rename to docs/6-exercise/4-css/index.mdx index 37ecc4a92..a9eee928f 100644 --- a/docs/6-exercise/4-css/index.md +++ b/docs/6-exercise/4-css/index.mdx @@ -5,9 +5,9 @@ sidebar_position: 4 import Answer from "@site/src/components/Answer"; import ViewSource from "@site/src/components/ViewSource"; -import transitionVideo from "./transition.mp4" -import headerScrollVideo from "./header-scroll.mp4" -import placeScrollVideo from "./place-scroll.mp4" +import transitionVideo from "./transition.mp4"; +import headerScrollVideo from "./header-scroll.mp4"; +import placeScrollVideo from "./place-scroll.mp4"; import Details from "@theme/Details"; この章では教材の「[CSS](/docs/trial-session/css)」「[CSS による配置](/docs/browser-apps/css-arrangement)」の内容を扱っています。 diff --git a/docs/6-exercise/5-browser-apps/index.md b/docs/6-exercise/5-browser-apps/index.mdx similarity index 100% rename from docs/6-exercise/5-browser-apps/index.md rename to docs/6-exercise/5-browser-apps/index.mdx diff --git a/docs/6-exercise/6-express-and-ejs/index.md b/docs/6-exercise/6-express-and-ejs/index.mdx similarity index 96% rename from docs/6-exercise/6-express-and-ejs/index.md rename to docs/6-exercise/6-express-and-ejs/index.mdx index 273942ffe..0dc7f3d79 100644 --- a/docs/6-exercise/6-express-and-ejs/index.md +++ b/docs/6-exercise/6-express-and-ejs/index.mdx @@ -166,7 +166,11 @@ app.get("/", (request, response) => { app.listen(3000); ``` - + @@ -245,8 +249,16 @@ app.listen(3000); ### 解答例 1 (`http` 標準モジュール) - + ### 解答例 2 (Express) - + diff --git a/docs/6-exercise/7-get-and-post/index.md b/docs/6-exercise/7-get-and-post/index.mdx similarity index 98% rename from docs/6-exercise/7-get-and-post/index.md rename to docs/6-exercise/7-get-and-post/index.mdx index 328cc1545..5d5d95d91 100644 --- a/docs/6-exercise/7-get-and-post/index.md +++ b/docs/6-exercise/7-get-and-post/index.mdx @@ -3,7 +3,7 @@ title: GET リクエストと POST リクエスト sidebar_position: 6 --- -import CodeBlock from '@theme/CodeBlock'; +import CodeBlock from "@theme/CodeBlock"; import Term from "@site/src/components/Term"; import ViewSource from "@site/src/components/ViewSource"; import Answer from "@site/src/components/Answer"; diff --git a/docs/6-exercise/8-database-and-cookie/index.md b/docs/6-exercise/8-database-and-cookie/index.mdx similarity index 97% rename from docs/6-exercise/8-database-and-cookie/index.md rename to docs/6-exercise/8-database-and-cookie/index.mdx index 046c3c72a..97eb53e90 100644 --- a/docs/6-exercise/8-database-and-cookie/index.md +++ b/docs/6-exercise/8-database-and-cookie/index.mdx @@ -3,7 +3,7 @@ title: データベースと Cookie sidebar_position: 7 --- -import trackingVideo from "./tracking.mp4" +import trackingVideo from "./tracking.mp4"; import ViewSource from "@site/src/components/ViewSource"; import Answer from "@site/src/components/Answer"; @@ -191,7 +191,11 @@ app.post("/add-teacher", async (request, response) => { app.listen(3000); ``` - + @@ -219,7 +223,11 @@ app.get("/users/:id", (request, response) => { 以下解答例となります。 - + @@ -228,6 +236,7 @@ app.get("/users/:id", (request, response) => { ## 2. Cookie ショッピングサイトのトラッキングシステムを作ってみましょう。購入した回数が一番多い商品のおすすめが表示されるようにしてみましょう。 +