課題 -> 演習 (第３章まで) (#720)

aster-void · web-flow · commit d13006b91507 · 2024-04-28T18:09:14.000+09:00
diff --git a/docs/1-trial-session/06-boolean/index.mdx b/docs/1-trial-session/06-boolean/index.mdx
@@ -60,7 +60,7 @@ const canRideRollerCoasters = age >= 10 && height >= 140; // true
 
 `&&` や `||` よりも比較<Term>演算子</Term>の方が<Term type="javascriptOperatorPriority">優先順位</Term>が高いため、最後の例のように複数の条件を「かつ」「または」などで組み合わせることは容易です。
 
-## 課題
+## 演習
 
 次のコードは何を表示するでしょうか。そしてそれはなぜでしょうか。
 
diff --git a/docs/1-trial-session/09-loop/_samples/answer-for/index.html b/docs/1-trial-session/09-loop/_samples/answer-for/index.html
@@ -2,8 +2,9 @@
 <html lang="ja">
   <head>
     <meta charset="utf-8" />
-    <title>課題の解答</title>
+    <title>演習の解答</title>
   </head>
+
   <body>
     <script src="./script.js"></script>
   </body>
diff --git a/docs/1-trial-session/11-object/index.mdx b/docs/1-trial-session/11-object/index.mdx
@@ -97,9 +97,9 @@ document.write(studentNames["0"]); // 田中
 
 :::
 
-## 課題
+## 演習
 
-### 初級課題
+### 初級演習
 
 田中さんを表すオブジェクトを定義します。
 
@@ -133,7 +133,7 @@ document.write(tanaka.scores.japanese);
 
 </Answer>
 
-### 中級課題
+### 中級演習
 
 {/* prettier-ignore */}
 <Term>オブジェクト</Term>も<Term>値</Term>の一種なので、<Term>関数</Term>の<Term>引数</Term>や<Term>戻り値</Term>として使用できます。
diff --git a/docs/1-trial-session/12-css/index.mdx b/docs/1-trial-session/12-css/index.mdx
@@ -148,9 +148,9 @@ CSS の<Term type="cssProperty">プロパティ</Term>には `color` (文字色)
 
 :::
 
-## 課題
+## 演習
 
-### 基礎課題1 (セレクタ)
+### 基礎演習1 (セレクタ)
 
 次のような条件を満たす要素を選択するセレクタは何でしょうか。
 
@@ -164,7 +164,7 @@ CSS の<Term type="cssProperty">プロパティ</Term>には `color` (文字色)
 
 </Answer>
 
-### 基礎課題2 (Hello CSS!)
+### 基礎演習2 (Hello CSS!)
 
 下のような、文字色が黄色、背景色が好きな色 (この例では黒) の `Hello CSS!` をブラウザで表示してみましょう。
 
@@ -199,7 +199,7 @@ CSS の<Term type="cssProperty">プロパティ</Term>には `color` (文字色)
 
 </Answer>
 
-### 中級課題
+### 中級演習
 
 画像のようなシンプルなボックスを作ってみましょう。
 
diff --git a/docs/1-trial-session/13-dom/index.mdx b/docs/1-trial-session/13-dom/index.mdx
@@ -88,7 +88,7 @@ packingList.appendChild(newItem);
 
 これで、既存の `ul` 要素の子要素に新しい `li` 要素が追加され、「おやつ」が加わった持ち物リストが表示されます。
 
-## 初級課題
+## 初級演習
 
 ### 買い物リストの書き換え
 
@@ -114,7 +114,7 @@ targetItem.textContent = "レモン";
 
 </Answer>
 
-## 中級課題
+## 中級演習
 
 ### フルーツバスケット
 
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/01-inspector/index.mdx b/docs/2-browser-apps/01-inspector/index.mdx
@@ -27,7 +27,7 @@ Google Chrome 以外のブラウザにも開発者ツールは搭載されてい
 
 <video src={inspectElementsVideo} muted controls />
 
-### 課題
+### 演習
 
 あなたのお気に入りのニュースサイトの記事をひとつ選び、その中に現れる人物名を、 `Elements` タブの機能を用いて自分の名前に変えてみましょう。悪用厳禁です！
 
@@ -117,7 +117,7 @@ console.log("x + y は、", sum);
 
 :::
 
-### 課題
+### 演習
 
 次のプログラムの 5 行目では、`add` 関数は 3 回実行されます。どのような順番で関数が呼び出されているか、デバッガを用いて確認してみてください。
 
diff --git a/docs/2-browser-apps/02-reference/_samples/answer/index.html b/docs/2-browser-apps/02-reference/_samples/answer/index.html
@@ -2,8 +2,9 @@
 <html lang="ja">
   <head>
     <meta charset="utf-8" />
-    <title>課題の解答</title>
+    <title>演習の解答</title>
   </head>
+
   <body>
     <script src="./script.js"></script>
   </body>
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)
 
-## 課題
+## 演習
 
 参照の仕組みが特に問題になってくる場合として、オブジェクトの参照先が別の関数によって書き換えられる場合があります。次のコードを実行してみましょう。
 
@@ -80,7 +80,7 @@ document.write(tanaka.age); // 19 と表示されてしまう
 
 <ViewSource url={import.meta.url} path="_samples/object-mutated-by-function" />
 
-このコードは、[オブジェクト](/docs/trial-session/object/)の項で扱った課題でした。実はこのコードには問題があり、`tanaka` に対して `incrementAge` を適用すると、関数が適用された `tanaka` にも影響が及んでしまいます。これは、関数に渡される値はオブジェクトへの参照で、このオブジェクトは呼び出し元の変数が参照するものと同一のものだからです。
+このコードは、[オブジェクト](/docs/trial-session/object/)の項で扱った演習でした。実はこのコードには問題があり、`tanaka` に対して `incrementAge` を適用すると、関数が適用された `tanaka` にも影響が及んでしまいます。これは、関数に渡される値はオブジェクトへの参照で、このオブジェクトは呼び出し元の変数が参照するものと同一のものだからです。
 
 `incrementAge` 関数の実装を変更し、関数に渡したオブジェクトが書き換えられないようにしてください。
 
diff --git a/docs/2-browser-apps/03-class/index.mdx b/docs/2-browser-apps/03-class/index.mdx
@@ -60,7 +60,7 @@ document.write(emptyFunction()); // 値を返さない関数の戻り値は unde
 
 :::
 
-### 課題
+### 演習
 
 `weightInTons` と `cost` をプロパティとして持ち、 `weightInTons` のデフォルト値が `1` であるクラス `Car` を作成し、 `cost` に好きな値を代入してみましょう。
 
@@ -109,7 +109,7 @@ tanaka.introduceSelf();
 
 :::
 
-### 課題
+### 演習
 
 自分自身の年齢を 1 増やすメソッド `incrementAge` を定義して、実行してみてください。
 
@@ -273,7 +273,7 @@ const tanaka = new FreshmanStudent("田中", "18", "ドイツ語");
 tanaka.introduceSelf(); // 私の名前は田中です。18歳です。ドイツ語選択です。
 ```
 
-### 課題
+### 演習
 
 `Student` クラスを継承して `SeniorStudent` クラスを作ってみましょう。`SeniorStudent` クラスのインスタンスは `researchQuestion` プロパティを持ち、`introduceSelf` メソッドを実行すると自分の名前を出力した後に自分の研究内容を紹介するようにしてみましょう。
 
@@ -380,7 +380,7 @@ document.write(false.toString()); // false
 
 :::
 
-## 課題
+## 演習
 
 ### `Date` クラス
 
diff --git a/docs/2-browser-apps/04-anonymous-function/index.mdx b/docs/2-browser-apps/04-anonymous-function/index.mdx
@@ -110,7 +110,7 @@ document.write(pricesWithTax); // 120,240,360,480,600
 const pricesWithTax = pricesWithoutTax.map((price) => price * (1 + taxRate));
 ```
 
-## 課題
+## 演習
 
 先ほどの[`Array#map` メソッド](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)を用いてみましょう。`students` 変数に格納されている名前を箇条書きにしてください。
 
diff --git a/docs/2-browser-apps/05-css-arrangement/index.mdx b/docs/2-browser-apps/05-css-arrangement/index.mdx
@@ -19,7 +19,7 @@ HTML の要素はすべて、一定の高さと幅を持った四角形だと考
 
 の 4 重構造になっています。
 
-[「CSS」のページの課題](https://learn.utcode.net/docs/trial-session/css/#%E8%AA%B2%E9%A1%8C-%E6%99%82%E9%96%93%E3%81%8C%E4%BD%99%E3%81%A3%E3%81%9F%E5%A0%B4%E5%90%88)を例に構造を見てみましょう（構造がわかりやすいよう、`border` を `10px` に変更しています）。
+[「CSS」のページの演習](https://learn.utcode.net/docs/trial-session/css/#%E8%AA%B2%E9%A1%8C-%E6%99%82%E9%96%93%E3%81%8C%E4%BD%99%E3%81%A3%E3%81%9F%E5%A0%B4%E5%90%88)を例に構造を見てみましょう（構造がわかりやすいよう、`border` を `10px` に変更しています）。
 
 ```html title="index.html"
 <!doctype html>
@@ -123,7 +123,7 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 
 また、インライン要素の場合、`width` や `height` は適用されません。
 
-### 課題
+### 演習
 
 `display` プロパティを操作することで要素の挙動を変更することができます。
 
diff --git a/docs/3-web-servers/02-node-js/index.mdx b/docs/3-web-servers/02-node-js/index.mdx
@@ -130,6 +130,6 @@ Node.js のデバッグを開始するには、ブレークポイント等を設
 
 <video src={debuggingVideo} controls />
 
-### 課題
+### 演習
 
 Node.js のデバッガを用いて、`console` オブジェクトにどのようなプロパティがあるのか調べてみましょう。
diff --git a/docs/3-web-servers/03-module/index.mdx b/docs/3-web-servers/03-module/index.mdx
@@ -37,7 +37,7 @@ Ubuntu の場合は、標準状態でカレントディレクトリがターミ
 | mkdir [名前] | 新しいディレクトリを作成     |
 | touch [名前] | 新しいファイルを作成         |
 
-### 課題
+### 演習
 
 現在 VS Code で開いているフォルダの中に、コマンドを用いて次のファイルとディレクトリの構造を作成してください。
 
@@ -164,7 +164,7 @@ Hello World
 
 :::
 
-### 課題
+### 演習
 
 `fs` モジュールの [`writeFileSync` 関数](https://nodejs.org/api/fs.html#fswritefilesyncfile-data-options)を用いて、ファイルに文字列を書き出してみましょう。
 
@@ -249,7 +249,7 @@ console.log(format(new Date(), "yyyy年MM月dd日"));
 
 ![date-fns パッケージの利用](./use-package.png)
 
-## 初級課題
+## 初級演習
 
 ### `node-emoji` パッケージ
 
@@ -268,7 +268,7 @@ console.log(emojify("I :heart: :coffee:!"));
 
 </Answer>
 
-## 中級課題
+## 中級演習
 
 ### `mathjs` パッケージ
 
diff --git a/docs/3-web-servers/04-server/index.mdx b/docs/3-web-servers/04-server/index.mdx
@@ -249,7 +249,7 @@ app.listen(3000);
 
 :::
 
-## 課題
+## 演習
 
 ### 訪問者カウンター
 
diff --git a/docs/3-web-servers/05-form/index.mdx b/docs/3-web-servers/05-form/index.mdx
@@ -117,7 +117,7 @@ app.listen(3000);
 このページの URL を見てみましょう。特に、クエリパラメータの部分に注目してみましょう。
 ![URLのクエリパラメータ](form-url.png)
 
-## 初級課題
+## 初級演習
 
 ログイン画面を作ってみましょう。以下のような画面を作成してください。
 
@@ -185,7 +185,7 @@ app.listen(3000);
 
 </Answer>
 
-## 中級課題
+## 中級演習
 
 書籍検索システムを作ってみましょう。まずは、配列に本のデータを登録します。
 
diff --git a/docs/3-web-servers/06-get-post/index.mdx b/docs/3-web-servers/06-get-post/index.mdx
@@ -92,7 +92,7 @@ app.listen(3000);
 
 ![GETリクエストとPOSTリクエスト](requestAndResponse.png)
 
-## 課題
+## 演習
 
 古き良き掲示板システムを作ってみましょう。次のようなページを作成してください。
 
diff --git a/docs/3-web-servers/07-database/index.mdx b/docs/3-web-servers/07-database/index.mdx
@@ -207,7 +207,7 @@ debugger;
 
 ![create の戻り値](./create-result.png)
 
-## 課題
+## 演習
 
 PostgreSQL にデータを保存する掲示板サービスを作ってみましょう。
 
diff --git a/docs/3-web-servers/08-cookie/index.mdx b/docs/3-web-servers/08-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/10-git/index.mdx b/docs/3-web-servers/10-git/index.mdx
@@ -188,7 +188,7 @@ git commit -m "コミットメッセージ"
 
 :::
 
-## 課題
+## 演習
 
 大学の学部一覧ページを作成することで、Git の基本的な操作を学びましょう。
 まずは、法学部、医学部、工学部、文学部、理学部、農学部、経済学部を含めた学部一覧を作成しましょう。
diff --git a/docs/3-web-servers/11-github/index.mdx b/docs/3-web-servers/11-github/index.mdx
@@ -301,7 +301,7 @@ git pull origin main
 
 :::
 
-## 課題
+## 演習
 
 Git を用いたバージョン管理の練習問題で、学部一覧ページを作成しました。
 このリポジトリを GitHub に保存して、各学部のウェブサイトの URL を追加するプルリクエストを作成してください。
