diff --git a/docs/1-trial-session/02-html/index.mdx b/docs/1-trial-session/02-html/index.mdx
index c14808a99..a6c4755cc 100644
--- a/docs/1-trial-session/02-html/index.mdx
+++ b/docs/1-trial-session/02-html/index.mdx
@@ -122,9 +122,7 @@ VS Code上で作成したファイルは`index.html`でした。しかしなが
:::
-## 演習問題
-
-### 問題1
+## 演習問題1
単一のHTMLファイルのみを使用して、下のような遠足の持ち物リストを作成してみましょう。お弁当は何よりも重要なので太字にしましょう。
@@ -162,7 +160,7 @@ VS Code上で作成したファイルは`index.html`でした。しかしなが
-### 問題2 (時間が余った場合)
+## 演習問題2(発展)
下のようなフォームを作成してみましょう。いきなり飛躍した感がありますが、やることは単純で、ひたすらHTMLタグを並べるのみです。
diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx
index 1ae9d0c9c..f63020c8f 100644
--- a/docs/1-trial-session/03-css/index.mdx
+++ b/docs/1-trial-session/03-css/index.mdx
@@ -147,9 +147,7 @@ CSSのプロパティには`color` (文字色)
:::
-## 演習
-
-### 基礎演習1 (セレクタ)
+## 演習問題1
次のような条件を満たす要素を選択するセレクタは何でしょうか。
@@ -163,7 +161,7 @@ CSSのプロパティには`color` (文字色)
-### 基礎演習2 (Hello CSS!)
+## 演習問題2
下のような、文字色が黄色、背景色が好きな色 (この例では黒) の`Hello CSS!`をブラウザで表示してみましょう。
@@ -198,7 +196,7 @@ CSSのプロパティには`color` (文字色)
-### 中級演習
+## 演習問題3(発展)
画像のようなシンプルなボックスを作ってみましょう。
diff --git a/docs/1-trial-session/06-variables/index.mdx b/docs/1-trial-session/06-variables/index.mdx
index e63d926eb..52026de0b 100644
--- a/docs/1-trial-session/06-variables/index.mdx
+++ b/docs/1-trial-session/06-variables/index.mdx
@@ -102,7 +102,7 @@ document.write(price);
![変数の再代入](./reassignment-evaluation.png)
-## 確認問題
+## 演習問題
`counter`という名前の変数を作成し初期値を`0`としてください。
その後、`counter`に`1`を加え、その結果を表示してください。
diff --git a/docs/1-trial-session/07-boolean/index.mdx b/docs/1-trial-session/07-boolean/index.mdx
index b91050f61..a1e8662ed 100644
--- a/docs/1-trial-session/07-boolean/index.mdx
+++ b/docs/1-trial-session/07-boolean/index.mdx
@@ -101,7 +101,7 @@ document.write(takaoHeight = everestHeight);
:::
-## 演習
+## 演習問題
クイズ番組で田中さんと佐藤さんが戦っています。
田中さんの点数が`tanakaScore`で、佐藤さんの点数が`satoScore`で用意されています。
diff --git a/docs/1-trial-session/08-if-statement/index.mdx b/docs/1-trial-session/08-if-statement/index.mdx
index 1fe248498..d01d31bed 100644
--- a/docs/1-trial-session/08-if-statement/index.mdx
+++ b/docs/1-trial-session/08-if-statement/index.mdx
@@ -71,7 +71,7 @@ if (式1) {
![if文のフローチャート](./flowchart.drawio.svg)
-## 演習
+## 演習問題
自分の年齢を変数に入れておきます。
diff --git a/docs/1-trial-session/09-functions/index.mdx b/docs/1-trial-session/09-functions/index.mdx
index 49d8edbde..3aa75f89a 100644
--- a/docs/1-trial-session/09-functions/index.mdx
+++ b/docs/1-trial-session/09-functions/index.mdx
@@ -172,11 +172,7 @@ increment();
:::
----
-
-## 基礎演習
-
-### 最大値
+## 演習問題1
{/* prettier-ignore */}
引数を2つとり、そのうち大きい数を返す関数`max`を定義してください。
@@ -221,9 +217,7 @@ function max(a, b) {
-## 中級演習
-
-### 携帯電話料金
+## 演習問題2(発展)
携帯電話料金を計算する関数を作ってみましょう。
diff --git a/docs/1-trial-session/10-loop/index.mdx b/docs/1-trial-session/10-loop/index.mdx
index 17d1d267b..3f5f8f2c7 100644
--- a/docs/1-trial-session/10-loop/index.mdx
+++ b/docs/1-trial-session/10-loop/index.mdx
@@ -135,11 +135,7 @@ const string2 = `10から2を引くと${10 - 2}です。`;
:::
----
-
-## 基礎演習
-
-### 1~10の積
+## 演習問題1
`1`から`10`までの数の積を求めて画面に表示する、`for`文を含むコードを書いてみましょう。
@@ -155,7 +151,7 @@ document.write(product);
-### 別解
+別解
複合代入演算子を使うと次のようにも書けます。
@@ -171,9 +167,7 @@ document.write(product);
-## 中級演習
-
-### 素数判定
+## 演習問題2(発展)
ある整数の変数`n`が与えられたとき、その値が素数であるかどうか判定するプログラムを作成してください。
diff --git a/docs/1-trial-session/11-array/index.mdx b/docs/1-trial-session/11-array/index.mdx
index 98fc6055a..e6dd24f84 100644
--- a/docs/1-trial-session/11-array/index.mdx
+++ b/docs/1-trial-session/11-array/index.mdx
@@ -35,7 +35,7 @@ const six = 6;
document.write(studentNames[six / 2 - 1]); // 鈴木
```
-### 問題
+### 確認問題
次のプログラムを実行すると何と表示されるでしょうか。
@@ -99,11 +99,7 @@ studentNames.push("内藤");
document.write(studentNames); // 田中,佐藤,鈴木,内藤
```
----
-
-## 基礎演習
-
-### 要素の和
+## 演習問題1
- 配列があります。その配列の要素の和を求めてみましょう。
@@ -135,7 +131,7 @@ document.write(`配列の合計値は ${sum} です。`);
-### 別解
+別解
`for〜of`文を使わず、次のように書くこともできます。
@@ -154,9 +150,7 @@ document.write(`配列の合計値は ${sum} です。`);
-## 中級演習
-
-### 配列の最大値
+## 演習問題2(発展)
引数に配列を一つ取り、その配列の最大値を求める関数`findMaxNumber`を作成しましょう。
diff --git a/docs/1-trial-session/13-dom/index.mdx b/docs/1-trial-session/13-dom/index.mdx
index ebe10685b..29197d684 100644
--- a/docs/1-trial-session/13-dom/index.mdx
+++ b/docs/1-trial-session/13-dom/index.mdx
@@ -168,9 +168,7 @@ packingList.appendChild(capElement);
-## 初級演習
-
-### 買い物リストの書き換え
+## 演習問題1
次のHTMLファイルから読み込んでいるJavaScriptファイルを書き換えて、「トマト」「レモン」「バジル」と表示されるようにしてみましょう。
@@ -194,9 +192,7 @@ targetItem.textContent = "レモン";
-## 中級演習
-
-### フルーツバスケット
+## 演習問題2(発展)
購入する予定の果物を表す文字列が格納された配列が次のように用意されています。
diff --git a/docs/1-trial-session/14-events/index.mdx b/docs/1-trial-session/14-events/index.mdx
index 21d6f80cb..39a6fb5ea 100644
--- a/docs/1-trial-session/14-events/index.mdx
+++ b/docs/1-trial-session/14-events/index.mdx
@@ -77,7 +77,7 @@ greetButton.onclick = clicked();
:::
-## 演習
+## 演習問題
押すと大きく赤文字が表示される「びっくり箱」のようなボタンを作ってみましょう。
diff --git a/docs/2-browser-apps/02-reference/index.mdx b/docs/2-browser-apps/02-reference/index.mdx
index 3e2c7725b..614840332 100644
--- a/docs/2-browser-apps/02-reference/index.mdx
+++ b/docs/2-browser-apps/02-reference/index.mdx
@@ -62,7 +62,7 @@ const person = {
![ネストされた参照](./nested-reference.drawio.svg)
-## 演習
+## 演習問題
参照の仕組みが特に問題になってくる場合として、オブジェクトの参照先が別の関数によって書き換えられる場合があります。次のコードを実行してみましょう。
diff --git a/docs/2-browser-apps/03-class/index.mdx b/docs/2-browser-apps/03-class/index.mdx
index 9eddf6f40..7fdba3d63 100644
--- a/docs/2-browser-apps/03-class/index.mdx
+++ b/docs/2-browser-apps/03-class/index.mdx
@@ -391,9 +391,7 @@ document.write(false.toString()); // false
:::
-## 演習
-
-### `Date`クラス
+## 演習問題1
[`Date`クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)を使って、現在時刻を表示してみましょう。`Date`クラスのドキュメントを読んで、現在時刻を表示するのに必要なメソッドを探してみましょう。
@@ -425,7 +423,7 @@ currentTime.textContent = getCurrentTime();
-### 図形クラス
+## 演習問題2
色を表す`color`プロパティを持つ`Shape`クラスを実装してみましょう。
diff --git a/docs/2-browser-apps/04-anonymous-function/index.mdx b/docs/2-browser-apps/04-anonymous-function/index.mdx
index 935113151..20681615b 100644
--- a/docs/2-browser-apps/04-anonymous-function/index.mdx
+++ b/docs/2-browser-apps/04-anonymous-function/index.mdx
@@ -96,9 +96,7 @@ document.write(pricesWithTax); // 120,240,360,480,600
const pricesWithTax = pricesWithoutTax.map((price) => price * (1 + taxRate));
```
-## 演習
-
-### 問題1
+## 演習問題1
先ほどの[`Array#map`メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)を用いてみましょう。`students`変数に格納されている名前を箇条書きにしてください。
@@ -129,7 +127,7 @@ studentList.innerHTML = students
-### 問題2
+## 演習問題2
`scores`変数には、各必修科目の点数が格納されているとします。全ての要素が50点以上であることを確認するには、何というメソッドを使うのが適切か調べてみてください。また、実際にそのメソッドを用いて点数を確認してみてください。
@@ -161,7 +159,7 @@ if (scores.every((score) => score >= 50)) {
-### 問題3 (発展)
+## 演習問題3(発展)
[`Array#reduce`メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)は、`Array`クラスのメソッドの中でも特に使い方の難しいメソッドです。ドキュメントをよく読み、このメソッドを用いて配列の最小値を求めてみましょう。
diff --git a/docs/2-browser-apps/05-css-arrangement/index.mdx b/docs/2-browser-apps/05-css-arrangement/index.mdx
index d1fe96ae9..617e208bd 100644
--- a/docs/2-browser-apps/05-css-arrangement/index.mdx
+++ b/docs/2-browser-apps/05-css-arrangement/index.mdx
@@ -123,7 +123,7 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
また、インライン要素の場合、`width`や`height`は適用されません。
-### 演習
+### 確認問題
`display`プロパティを操作することで要素の挙動を変更することができます。
@@ -480,7 +480,7 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
-## 演習
+## 演習問題
これまでの知識を活用して、料金プランの説明をするページを作ってみましょう。
![料金プランのページを作ってみる](./exercise.png)
diff --git a/docs/3-web-servers/02-linux-commands/index.mdx b/docs/3-web-servers/02-linux-commands/index.mdx
index 6155574b9..5552868fe 100644
--- a/docs/3-web-servers/02-linux-commands/index.mdx
+++ b/docs/3-web-servers/02-linux-commands/index.mdx
@@ -82,7 +82,7 @@ Ubuntuの場合は、標準状態でカレントディレクトリがターミ
他にも`curl`や`cat`などの便利なコマンドが多数あります。気になる方は調べてみましょう。
-## 演習
+## 演習問題
現在VS Codeで開いているフォルダの中に、コマンドを用いて次のファイルとディレクトリの構造を作成してください。
diff --git a/docs/3-web-servers/03-node-js/index.mdx b/docs/3-web-servers/03-node-js/index.mdx
index 18509da90..4c4f32f1c 100644
--- a/docs/3-web-servers/03-node-js/index.mdx
+++ b/docs/3-web-servers/03-node-js/index.mdx
@@ -113,6 +113,6 @@ Node.jsのデバッグを開始するには、ブレークポイント等を設
-### 演習
+### 確認問題
Node.jsのデバッガを用いて、`console`オブジェクトにどのようなプロパティがあるのか調べてみましょう。
diff --git a/docs/3-web-servers/04-module/index.mdx b/docs/3-web-servers/04-module/index.mdx
index 63ab55c5d..444a8d177 100644
--- a/docs/3-web-servers/04-module/index.mdx
+++ b/docs/3-web-servers/04-module/index.mdx
@@ -111,7 +111,7 @@ Hello World!
:::
-### 演習
+### 確認問題
`fs`モジュールの[`writeFileSync`関数](https://nodejs.org/api/fs.html#fswritefilesyncfile-data-options)を用いて、ファイルに文字列を書き出してみましょう。
@@ -196,9 +196,7 @@ console.log(format(new Date(), "yyyy年MM月dd日"));
![date-fnsパッケージの利用](./use-package.png)
-## 初級演習
-
-### `node-emoji`パッケージ
+## 演習問題1
[`node-emoji`パッケージ](https://www.npmjs.com/package/node-emoji)は、Node.jsで絵文字を扱うことができるパッケージです。このパッケージを用いて、`I ❤️ ☕!`と出力してください。
@@ -215,9 +213,7 @@ console.log(emojify("I :heart: :coffee:!"));
-## 中級演習
-
-### `mathjs`パッケージ
+## 演習問題2(発展)
[`mathjs`パッケージ](https://www.npmjs.com/package/mathjs)は、JavaScriptで複雑な計算を行うためのライブラリです。このライブラリを用いて、$\log(x)$を$x$について微分した式を求めてください。
diff --git a/docs/3-web-servers/05-server/index.mdx b/docs/3-web-servers/05-server/index.mdx
index 1a17b85f4..ad5b4e49b 100644
--- a/docs/3-web-servers/05-server/index.mdx
+++ b/docs/3-web-servers/05-server/index.mdx
@@ -311,9 +311,7 @@ console.log(["Apple", "Banana", "Orange"].join("/")); // Apple/Banana/Orange
このようにテンプレートリテラルを用いることで、複雑なウェブページの内容を表すことができます。
-## 演習
-
-### 訪問者カウンター
+## 演習問題1
Expressを用いて、`あなたはn人目のお客様です。`とレスポンスするWebサーバーを作成してください。`n`はアクセスされるたびに1ずつ増えるようにしてください。
@@ -336,7 +334,7 @@ app.listen(3000);
-### サーバー側とクライアント側
+## 演習問題2(発展)
(重要) アクセスされた時刻をウェブサーバー側で求めて表示するウェブサーバーと、ブラウザに求めさせるウェブサーバーをそれぞれ作成してください。また、この2つの違いは何でしょうか。どういった場合にどちらの手法を使うのが適切でしょうか。
diff --git a/docs/3-web-servers/06-form/index.mdx b/docs/3-web-servers/06-form/index.mdx
index 74268616b..d670459cb 100644
--- a/docs/3-web-servers/06-form/index.mdx
+++ b/docs/3-web-servers/06-form/index.mdx
@@ -117,9 +117,7 @@ app.listen(3000);
このページのURLを見てみましょう。特に、クエリパラメータの部分に注目してみましょう。
![URLのクエリパラメータ](form-url.png)
-## 初級演習
-
-### node-emoji
+## 演習問題1
[npmの章](/docs/web-servers/module/#node-emoji-%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8)で扱った`node-emoji`パッケージの`emojify`関数を使って、送られた文字列に`emojify`関数を適用するサーバーを作ってみましょう。
@@ -165,7 +163,7 @@ app.listen(3000);
-## 中級演習
+## 演習問題2(発展)
書籍検索システムを作ってみましょう。まずは、配列に本のデータを登録します。
diff --git a/docs/3-web-servers/07-get-post/index.mdx b/docs/3-web-servers/07-get-post/index.mdx
index 9142a2e34..a21f03bae 100644
--- a/docs/3-web-servers/07-get-post/index.mdx
+++ b/docs/3-web-servers/07-get-post/index.mdx
@@ -92,7 +92,7 @@ app.listen(3000);
![GETリクエストとPOSTリクエスト](requestAndResponse.png)
-## 演習
+## 演習問題
古き良き掲示板システムを作ってみましょう。次のようなページを作成してください。
diff --git a/docs/3-web-servers/08-database/index.mdx b/docs/3-web-servers/08-database/index.mdx
index 4f269d468..67f5d9662 100644
--- a/docs/3-web-servers/08-database/index.mdx
+++ b/docs/3-web-servers/08-database/index.mdx
@@ -206,7 +206,7 @@ debugger;
![createの戻り値](./create-result.png)
-## 演習
+## 演習問題
PostgreSQLにデータを保存する掲示板サービスを作ってみましょう。
diff --git a/docs/3-web-servers/09-cookie/index.mdx b/docs/3-web-servers/09-cookie/index.mdx
index 865176a7f..cce19e5f3 100644
--- a/docs/3-web-servers/09-cookie/index.mdx
+++ b/docs/3-web-servers/09-cookie/index.mdx
@@ -63,7 +63,7 @@ app.listen(3000);
![プログラムの流れ](./cookie-counter-timeline.png)
-### 演習
+### 確認問題
- Chromeの開発者ツールを用いて、リクエストヘッダとレスポンスヘッダの内容を確認してみましょう。
- シークレットモードでページを開くと値はどうなるでしょうか。
@@ -76,7 +76,7 @@ app.listen(3000);
![セッション](./session.png)
-### 演習
+### 演習問題
ユーザーが自分のユーザー名とパスワードでログインし、プロフィールを表示できるウェブアプリケーションを作成してみましょう。
diff --git a/docs/3-web-servers/11-git/index.mdx b/docs/3-web-servers/11-git/index.mdx
index 05ca99336..5e7c95c47 100644
--- a/docs/3-web-servers/11-git/index.mdx
+++ b/docs/3-web-servers/11-git/index.mdx
@@ -188,7 +188,7 @@ git commit -m "コミットメッセージ"
:::
-## 演習
+## 演習問題
大学の学部一覧ページを作成することで、Gitの基本的な操作を学びましょう。
まずは、法学部、医学部、工学部、文学部、理学部、農学部、経済学部を含めた学部一覧を作成しましょう。
diff --git a/docs/3-web-servers/12-github/index.mdx b/docs/3-web-servers/12-github/index.mdx
index 68e10df08..028176efb 100644
--- a/docs/3-web-servers/12-github/index.mdx
+++ b/docs/3-web-servers/12-github/index.mdx
@@ -287,7 +287,7 @@ git pull origin main
:::
-## 演習
+## 演習問題
Gitを用いたバージョン管理の練習問題で、学部一覧ページを作成しました。
このリポジトリをGitHubに保存して、各学部のウェブサイトのURLを追加するプルリクエストを作成してください。
diff --git a/docs/4-advanced/01-fetch-api/index.mdx b/docs/4-advanced/01-fetch-api/index.mdx
index 4d96241bd..4d52aa11d 100644
--- a/docs/4-advanced/01-fetch-api/index.mdx
+++ b/docs/4-advanced/01-fetch-api/index.mdx
@@ -145,7 +145,7 @@ app.listen(3000);
:::
-## 課題
+## 演習問題
`Fetch API`を用いてチャットアプリを作成してみましょう。
diff --git a/docs/4-advanced/02-bundler/index.mdx b/docs/4-advanced/02-bundler/index.mdx
index 2fa0ed3db..f024508f1 100644
--- a/docs/4-advanced/02-bundler/index.mdx
+++ b/docs/4-advanced/02-bundler/index.mdx
@@ -171,10 +171,12 @@ app.use(express.static("dist"));
app.listen(3000);
```
-## 課題
+## 演習問題1
-- [`chart.js`](https://www.npmjs.com/package/chart.js)を用いると、ブラウザ上に非常に美しいグラフを描画することができます。このパッケージを用いて、適当なデータをビジュアライズしてみましょう。
+[`chart.js`](https://www.npmjs.com/package/chart.js)を用いると、ブラウザ上に非常に美しいグラフを描画することができます。このパッケージを用いて、適当なデータをビジュアライズしてみましょう。
-
+
-- Viteを用いて作成したWebフロントエンドと、Node.jsのバックエンドが協調して動作するアプリケーションをRenderにデプロイしてみましょう。
+## 演習問題2(発展)
+
+Viteを用いて作成したWebフロントエンドと、Node.jsのバックエンドが協調して動作するアプリケーションをRenderにデプロイしてみましょう。
diff --git a/docs/4-advanced/03-typescript/index.mdx b/docs/4-advanced/03-typescript/index.mdx
index 2b45f9809..49f839519 100644
--- a/docs/4-advanced/03-typescript/index.mdx
+++ b/docs/4-advanced/03-typescript/index.mdx
@@ -344,7 +344,7 @@ Viteは、標準でTypeScriptのトランスパイラが内蔵されています
:::
-## 課題
+## 演習問題1
1. `string & number`型は何型と等しいでしょうか。
2. 次のように定義される型`T`に対して使用可能なプロパティは何でしょうか。
@@ -366,8 +366,6 @@ Viteは、標準でTypeScriptのトランスパイラが内蔵されています
}
```
-5. フロントエンド・バックエンドともにTypeScriptを利用するアプリケーションを作成し、公開してみてください。
-
1. `never`型
@@ -413,3 +411,7 @@ Viteは、標準でTypeScriptのトランスパイラが内蔵されています
+
+## 演習問題2(発展)
+
+フロントエンド・バックエンドともにTypeScriptを利用するアプリケーションを作成し、公開してみてください。
diff --git a/docs/4-advanced/04-react/index.mdx b/docs/4-advanced/04-react/index.mdx
index 23a25a093..2bd999e61 100644
--- a/docs/4-advanced/04-react/index.mdx
+++ b/docs/4-advanced/04-react/index.mdx
@@ -778,26 +778,32 @@ const object2 = { ...object1, age: 19, address: "東京" }; // { name: "田中",
:::
-## 課題
-
-- ToDoリストの要素を上下に移動させる機能を追加しましょう
-
-- ToDoリストの要素へ編集する機能を追加しましょう
-
-- データベースに永続化することができるToDoリストアプリケーションを作成しましょう
-
- - ヒント: ページ読み込み時にFetch APIを用いてデータを保存済みのToDo一覧を取得します。リストが編集されたら再びFetch APIを用いてデータを保存しましょう。
-
- 解答例
-
-
- 別解
-
+## 演習問題1
+
+ToDoリストの要素を上下に移動させる機能を追加しましょう
+
+
+
+## 演習問題2
+
+ToDoリストの要素へ編集する機能を追加しましょう
+
+
+
+## 演習問題3(発展)
+
+データベースに永続化することができるToDoリストアプリケーションを作成しましょう
+
+ヒント: ページ読み込み時にFetch APIを用いてデータを保存済みのToDo一覧を取得します。リストが編集されたら再びFetch APIを用いてデータを保存しましょう。
+
+解答例
+
+
+
+別解
+
+
diff --git a/docs/5-team-development/01-git-workflow/index.mdx b/docs/5-team-development/01-git-workflow/index.mdx
index 054193728..f05718c14 100644
--- a/docs/5-team-development/01-git-workflow/index.mdx
+++ b/docs/5-team-development/01-git-workflow/index.mdx
@@ -222,7 +222,7 @@ GitHubなどのサービスを用いて共同開発を行う場合、通常は `
-## 課題
+## 演習問題
1. 同一のGitHubリポジトリに対し、同じ行を変更するプルリクエストを2人で作成しましょう。
2. 片方をマージすると、もう片方のプルリクエストがコンフリクト状態になることを確認しましょう。