確認問題および演習問題のフォーマットを統一

ut-code · Sep 14, 2024 · be8db19 · be8db19
1 parent 5da1aa5
commit be8db19
Show file tree

Hide file tree

Showing 29 changed files with 85 additions and 113 deletions.
diff --git 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`でした。しかしなが
 
 </Answer>
 
-### 問題2 (時間が余った場合)
+## 演習問題2（発展）
 
 下のようなフォームを作成してみましょう。いきなり飛躍した感がありますが、やることは単純で、ひたすらHTMLタグを並べるのみです。
 

diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx
@@ -147,9 +147,7 @@ CSSの<Term type="cssProperty">プロパティ</Term>には`color` (文字色)
 
 :::
 
-## 演習
-
-### 基礎演習1 (セレクタ)
+## 演習問題1
 
 次のような条件を満たす要素を選択するセレクタは何でしょうか。
 
@@ -163,7 +161,7 @@ CSSの<Term type="cssProperty">プロパティ</Term>には`color` (文字色)
 
 </Answer>
 
-### 基礎演習2 (Hello CSS!)
+## 演習問題2
 
 下のような、文字色が黄色、背景色が好きな色 (この例では黒) の`Hello CSS!`をブラウザで表示してみましょう。
 
@@ -198,7 +196,7 @@ CSSの<Term type="cssProperty">プロパティ</Term>には`color` (文字色)
 
 </Answer>
 
-### 中級演習
+## 演習問題3（発展）
 
 画像のようなシンプルなボックスを作ってみましょう。
 

diff --git 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
@@ -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
@@ -71,7 +71,7 @@ if (式1) {
 
 ![if文のフローチャート](./flowchart.drawio.svg)
 
-## 演習
+## 演習問題
 
 自分の年齢を<Term>変数</Term>に入れておきます。
 

diff --git 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 */}
 <Term>引数</Term>を2つとり、そのうち大きい数を<Term>返す</Term><Term>関数</Term>`max`を定義してください。
@@ -221,9 +217,7 @@ function max(a, b) {
 
 </Answer>
 
-## 中級演習
-
-### 携帯電話料金
+## 演習問題2（発展）
 
 携帯電話料金を計算する<Term>関数</Term>を作ってみましょう。
 

diff --git 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);
 
 <ViewSource url={import.meta.url} path="_samples/product" />
 
-### 別解
+別解
 
 複合代入演算子を使うと次のようにも書けます。
 
@@ -171,9 +167,7 @@ document.write(product);
 
 </Answer>
 
-## 中級演習
-
-### 素数判定
+## 演習問題2（発展）
 
 ある整数の変数`n`が与えられたとき、その値が素数であるかどうか判定するプログラムを作成してください。
 

diff --git 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} です。`);
 
 <ViewSource url={import.meta.url} path="_samples/array-sum-for-of" />
 
-### 別解
+別解
 
 `for〜of`文を使わず、次のように書くこともできます。
 
@@ -154,9 +150,7 @@ document.write(`配列の合計値は ${sum} です。`);
 
 </Answer>
 
-## 中級演習
-
-### 配列の最大値
+## 演習問題2（発展）
 
 引数に配列を一つ取り、その配列の最大値を求める関数`findMaxNumber`を作成しましょう。
 

diff --git 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);
 
 </Answer>
 
-## 初級演習
-
-### 買い物リストの書き換え
+## 演習問題1
 
 次のHTMLファイルから読み込んでいるJavaScriptファイルを書き換えて、「トマト」「レモン」「バジル」と表示されるようにしてみましょう。
 
@@ -194,9 +192,7 @@ targetItem.textContent = "レモン";
 
 </Answer>
 
-## 中級演習
-
-### フルーツバスケット
+## 演習問題2（発展）
 
 購入する予定の果物を表す文字列が格納された配列が次のように用意されています。
 

diff --git 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
@@ -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
@@ -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();
 
 </Answer>
 
-### 図形クラス
+## 演習問題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
@@ -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
 
 </Answer>
 
-### 問題2
+## 演習問題2
 
 `scores`変数には、各必修科目の点数が格納されているとします。全ての要素が50点以上であることを確認するには、何というメソッドを使うのが適切か調べてみてください。また、実際にそのメソッドを用いて点数を確認してみてください。
 
@@ -161,7 +159,7 @@ if (scores.every((score) => score >= 50)) {
 
 </Answer>
 
-### 問題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
@@ -123,7 +123,7 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
 
 また、インライン要素の場合、`width`や`height`は適用されません。
 
-### 演習
+### 確認問題
 
 `display`プロパティを操作することで要素の挙動を変更することができます。
 
@@ -480,7 +480,7 @@ HTMLの要素は、ブロックレベル要素とインライン要素に分類
 
 <video src={maxMinWidth} controls />
 
-## 演習
+## 演習問題
 
 これまでの知識を活用して、料金プランの説明をするページを作ってみましょう。
 ![料金プランのページを作ってみる](./exercise.png)

diff --git 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
@@ -113,6 +113,6 @@ Node.jsのデバッグを開始するには、ブレークポイント等を設
 
 <video src={debuggingVideo} controls />
 
-### 演習
+### 確認問題
 
 Node.jsのデバッガを用いて、`console`オブジェクトにどのようなプロパティがあるのか調べてみましょう。
diff --git 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:!"));
 
 </Answer>
 
-## 中級演習
-
-### `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
@@ -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);
 
 </Answer>
 
-### サーバー側とクライアント側
+## 演習問題2（発展）
 
 (重要) アクセスされた時刻をウェブサーバー側で求めて表示するウェブサーバーと、ブラウザに求めさせるウェブサーバーをそれぞれ作成してください。また、この2つの違いは何でしょうか。どういった場合にどちらの手法を使うのが適切でしょうか。
 

diff --git 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);
 
 </Answer>
 
-## 中級演習
+## 演習問題2（発展）
 
 書籍検索システムを作ってみましょう。まずは、配列に本のデータを登録します。
 

diff --git 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
@@ -206,7 +206,7 @@ debugger;
 
 ![createの戻り値](./create-result.png)
 
-## 演習
+## 演習問題
 
 PostgreSQLにデータを保存する掲示板サービスを作ってみましょう。
-Original file line number
+Diff line change
@@ Expand Up / @@ -77,7 +77,7 @@ greetButton.onclick = clicked(); @@
     :::
-    ## 演習
+    ## 演習問題
     押すと大きく赤文字が表示される「びっくり箱」のようなボタンを作ってみましょう。
@@ Expand Down @@