Merge pull request #490 from ut-code/change-arg-name-of-ans-tag

aster-void · web-flow · commit 8cf7e729b2c1 · 2023-10-19T10:20:14.000+09:00
Answerタグの引数をtypeからtitleに変更
diff --git a/docs/1-trial-session/02-html/index.md b/docs/1-trial-session/02-html/index.md
@@ -133,7 +133,7 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
 
 箇条書きを作るときには、単に「・」と書くのではなく箇条書き用のタグを使います。「HTML 箇条書き」などと検索してみましょう。
 
-<Answer type="持ち物リスト">
+<Answer title="持ち物リスト">
 
 ```html
 <!doctype html>
@@ -170,7 +170,7 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
 - テキストボックスは `input` タグで作成できます。
 - 最後の箇条書きには `ul` タグや `li` タグを使用しています。
 
-<Answer type="フォーム">
+<Answer title="フォーム">
 
 ```html
 <!doctype html>
diff --git a/docs/1-trial-session/07-if-statement/index.md b/docs/1-trial-session/07-if-statement/index.md
@@ -88,7 +88,7 @@ const age = 20;
 - 18 歳以上 ～ 25 歳未満なら `投票に行けます` と表示する
 - 25 歳以上なら `衆議院議員に立候補できます` と表示する
 
-<Answer type="選挙権">
+<Answer title="選挙権">
 
 if ～ else if ～ else 構文を使うと、次のように書くことができます。
 
diff --git a/docs/1-trial-session/08-loop/index.md b/docs/1-trial-session/08-loop/index.md
@@ -191,7 +191,7 @@ const string2 = `10から2を引くと${10 - 2}です。`;
 いくつにすればよいでしょうか？
 :::
 
-<Answer type="10の階乗">
+<Answer title="10の階乗">
 
 ```javascript
 let product = 1;
@@ -239,7 +239,7 @@ document.write(product);
 自然数`n`を`i`で割ったあまりは `n % i`で求められます。
 :::
 
-<Answer type="素数判定">
+<Answer title="素数判定">
 
 変数の、最後に代入した値のみを保持する性質を利用します。
 
diff --git a/docs/1-trial-session/09-functions/index.md b/docs/1-trial-session/09-functions/index.md
@@ -194,7 +194,7 @@ for (let i = 0; i < 10; i += 1) {
 <p><Term type="javascriptIfStatement">if 文</Term>を使って、<code>a</code> が大きい場合と <code>b</code> が大きい場合で処理を書き分けます。</p>
 :::
 
-<Answer type="大きい数">
+<Answer title="大きい数">
 
 ```javascript
 function max(a, b) {
@@ -246,7 +246,7 @@ document.write(calculateCost(3.5));
 > - 月間転送量 < 5.0 (GB) のとき、携帯電話料金は 月間転送量 × 600 (円/GB)
 > - 月間転送量 >= 5.0 (GB) のとき、携帯電話料金は 3000 (円)
 
-<Answer type="携帯電話料金">
+<Answer title="携帯電話料金">
 
 ```javascript
 function calculateCost(monthlyDataUsage) {
diff --git a/docs/1-trial-session/10-array/index.md b/docs/1-trial-session/10-array/index.md
@@ -129,7 +129,7 @@ const numbers = [-3, -1, 9, -10, 3, 7, 6, 1, 0, 5];
 
 :::
 
-<Answer type="配列の要素の和">
+<Answer title="配列の要素の和">
 
 ```javascript
 const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
@@ -190,7 +190,7 @@ const array4 = [-878, -40, -324, -410, -592, -610, -880, -65, -423, -32];
 
 :::
 
-<Answer type="配列の最大値">
+<Answer title="配列の最大値">
 
 配列の最初の値を初期値に設定することで解消します。
 
diff --git a/docs/1-trial-session/11-object/index.md b/docs/1-trial-session/11-object/index.md
@@ -72,7 +72,7 @@ const nextYearTanaka = incrementAge(tanaka);
 document.write(nextYearTanaka.age); // 19 と表示されてほしい
 ```
 
-<Answer type="年齢を増やす">
+<Answer title="年齢を増やす">
 
 ```javascript
 function incrementAge(person) {
diff --git a/docs/1-trial-session/12-css/index.md b/docs/1-trial-session/12-css/index.md
@@ -74,7 +74,7 @@ CSS の<Term type="cssProperty">プロパティ</Term>には `color` (文字色)
 - 枠線の内側にも余白があります (padding)
 - ボックスに影がついています (box-shadow)
 
-<Answer type="シンプルなボックス">
+<Answer title="シンプルなボックス">
 
 ```html
 <!doctype html>
diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md
@@ -56,7 +56,7 @@ element.style.backgroundColor = "red";
 
 [CSS の節](../12-css/index.md)の課題を、<Term type="styleAttribute">style 属性</Term>を使用せずに JavaScript のみで実現してみましょう。
 
-<Answer type="JSを用いたCSSスタイリング">
+<Answer title="JavaScriptを用いたCSSスタイリング">
 
 ```html
 <!doctype html>
diff --git a/docs/2-browser-apps/03-class/index.md b/docs/2-browser-apps/03-class/index.md
@@ -114,7 +114,7 @@ tanaka.introduceSelf();
 
 自分自身の年齢を 1 増やすメソッド `incrementAge` を定義して、実行してみてください。
 
-<Answer>
+<Answer title="年齢を増やすメソッド">
 
 ```javascript
 class Student {
@@ -275,7 +275,7 @@ tanaka.introduceSelf(); // 私の名前は田中です。18歳です。ドイツ
 
 `Student` クラスを継承して `SeniorStudent` クラスを作ってみましょう。`SeniorStudent` クラスのインスタンスは `researchQuestion` プロパティを持ち、`introduceSelf` メソッドを実行すると自分の名前を出力した後に自分の研究内容を紹介するようにしてみましょう。
 
-<Answer>
+<Answer title="学生のClassの定義">
 
 ```javascript
 class Student {
diff --git a/docs/2-browser-apps/04-anonymous-function/index.md b/docs/2-browser-apps/04-anonymous-function/index.md
@@ -133,7 +133,7 @@ const students = ["Hazel", "Dorian", "Scarlett", "Daisy"];
 
 :::
 
-<Answer type="箇条書き">
+<Answer title="箇条書き">
 
 ```javascript
 const students = ["Hazel", "Dorian", "Scarlett", "Daisy"];
@@ -162,7 +162,7 @@ if (/* すべての点数が 50 点以上なら */) {
 
 :::
 
-<Answer type="進級可能？">
+<Answer title="進級可能？">
 
 `Array#every` メソッドを使うと、配列の全要素が指定された関数でテストできます
 
@@ -185,7 +185,7 @@ const minScore = scores.reduce(/* コールバック関数 */);
 document.write(minScore); // 55
 ```
 
-<Answer type="Array#reduceの使い方">
+<Answer title="Array#reduceの使い方">
 
 ```javascript
 const scores = [90, 65, 70, 55, 80];
diff --git a/src/components/Answer/index.jsx b/src/components/Answer/index.jsx
@@ -4,11 +4,11 @@ import Details from "@theme/Details";
 /**
  * component that hide an answer
  */
-export default function Answer({ type = undefined, children }) {
+export default function Answer({ title = undefined, children }) {
   return (
     <Details
       summary={
-        type ? <summary>解答例: {type}</summary> : <summary>解答例</summary>
+        title ? <summary>解答例: {title}</summary> : <summary>解答例</summary>
       }
     >
       {children}
