Merge pull request #403 from ut-code/rewrite-functions

Rewrite functions

Author: aster-void

docs/1-trial-session/09-functions/index.md

@@ -47,7 +47,7 @@ greet("morning", "佐藤");
 
 ## <Term type="javascriptReturnValue">戻り値</Term>
 
-<p><Term type="javascriptFunction">関数</Term>呼び出しは<Term type="javascriptExpression">式</Term>の一種です。<Term type="javascriptFunction">関数</Term>定義内で <strong>return 文</strong>を用いると、<Term type="javascriptFunction">関数</Term>の実行が停止され、<Term type="javascriptFunction">関数</Term>呼び出し<Term type="javascriptExpression">式</Term>の<Term type="javascriptEvaluation">評価</Term>結果が確定します。この値を<Term strong type="javascriptReturnValue">戻り値</Term>と呼びます。ある<Term type="javascriptValue">値</Term>を<Term type="javascriptReturnValue">戻り値</Term>として設定して関数の実行を終了することを、<Term type="javascriptFunction">関数</Term>がその<Term type="javascriptValue">値</Term>を<Term strong type="javascriptReturn">返す</Term>と表現します。</p>
+<p><Term type="javascriptFunction">関数</Term>呼び出しは<Term type="javascriptExpression">式</Term>の一種です。<Term type="javascriptFunction">関数</Term>定義内で <strong>return 文</strong> を用いると、<Term type="javascriptFunction">関数</Term>の実行が停止され、<Term type="javascriptFunction">関数</Term>呼び出し<Term type="javascriptExpression">式</Term>の<Term type="javascriptEvaluation">評価</Term>結果が確定します。この値を<Term strong type="javascriptReturnValue">戻り値</Term>と呼びます。ある<Term type="javascriptValue">値</Term>を<Term type="javascriptReturnValue">戻り値</Term>として設定して<Term type="javascriptFunction">関数</Term>の実行を終了することを、<Term type="javascriptFunction">関数</Term>がその<Term type="javascriptValue">値</Term>を<Term strong type="javascriptReturn">返す</Term>と表現します。</p>
 
 ```javascript
 function add(a, b) {
@@ -64,6 +64,24 @@ document.write(add(3, 4));
 
 <video src={returnValueVideo} controls autoPlay muted loop />
 
+:::tip
+**return 文** が実行された時点で<Term type="javascriptFunction">関数</Term>の処理が終了するため、次のように書くことで [if ~ else 文](../if-statement/#if--else) や [&& (AND) 演算子](../boolean/#論理演算子)の繰り返しを避けつつ、複数の条件のついた処理を実行することができます。
+
+```javascript
+let age = 21;
+let hasDriverLicense = true;
+let isDrunk = true;
+function tryToDrive() {
+  // if 構文で実行する式が一行だけの場合、{} を省略できます。
+  if (age < 18) return;
+  if (!hasDriverLicense) return;
+  if (isDrunk) return;
+  document.write("車を運転できます。");
+}
+```
+
+:::
+
 ## <Term type="javascriptVariable">変数</Term>の<Term type="javascriptScope">スコープ</Term>
 
 <p><Term type="javascriptFunction">関数</Term>内で<Term type="javascriptDeclaration">宣言</Term>された<Term type="javascriptVariable">変数</Term>は、<Term type="javascriptFunction">関数</Term>内でのみ有効です。<Term type="javascriptVariable">変数</Term>が有効な範囲のことを、その<Term type="javascriptVariable">変数</Term>の<Term type="javascriptScope" strong>スコープ</Term>と呼んでいます。</p>
@@ -105,23 +123,57 @@ increment();
 
 :::
 
+## モジュール化
+
+複雑な操作を <Term type="javascriptFunction">関数</Term> として <Term strong type="javascriptModularization">モジュール化</Term> して複数のブロックに分解することで、コードの可読性を上げることができます。
+
+モジュール化前:
+
+```javascript
+const stringToRepeat = "☆";
+for (let i = 0; i < 10; i += 1) {
+  let result = "";
+  for (let j = 0; j < i; j += 1) {
+    result += stringToRepeat;
+  }
+  document.write(result);
+  document.write("<br>");
+}
+```
+
+モジュール化後:
+
+```javascript
+function repeat(stringToRepeat, times) {
+  let result = "";
+  for (let j = 0; j < times; j += 1) {
+    result += stringToRepeat;
+  }
+  return result;
+}
+for (let i = 0; i < 10; i += 1) {
+  document.write(repeat("☆", i));
+  document.write("<br>");
+}
+```
+
+この例における`repeat`<Term type="javascriptFunction">関数</Term>は、第一<Term type="javascriptParameter">引数</Term>の<Term type="javascriptString">文字列</Term>を第二<Term type="javascriptParameter">引数</Term>回だけ繰り返し<Term type="javascriptStringConcatenation">足した</Term>ものを返します。
+
 ## 演習
 
 携帯電話料金を計算する<Term type="javascriptFunction">関数</Term>を作ってみましょう。
 
 ```javascript
-function calculateCost(monthlyBandwidth) {
+function calculateCost(monthlyDataUsage) {
   // ここに処理を書く
 }
 
 document.write(calculateCost(3.5));
 ```
 
-`calculateCost` は、<Term type="javascriptParameter">引数</Term>に月間転送量 `monthlyBandwidth` を取り、その月の携帯電話料金を<Term type="javascriptReturnValue">戻り値</Term>として<Term type="javascriptReturn">返す</Term><Term type="javascriptFunction">関数</Term>です。携帯電話料金は、下のルールで決定されるとします。
+`calculateCost` は、<Term type="javascriptParameter">引数</Term>に月間転送量 `monthlyDataUsage` を取り、その月の携帯電話料金を<Term type="javascriptReturnValue">戻り値</Term>として<Term type="javascriptReturn">返す</Term><Term type="javascriptFunction">関数</Term>です。携帯電話料金は、下のルールで決定されるとします。
 
-> 月間転送量を _monthlyBandwidth_ (GB) とします。
->
-> - _monthlyBandwidth_ < 5.0 のとき、携帯電話料金は _monthlyBandwidth_ × 600 (円)
-> - _monthlyBandwidth_ >= 5.0 のとき、携帯電話料金は 3000 (円)
+> - 月間転送量 < 5.0 (GB) のとき、携帯電話料金は 月間転送量 × 600 (円/GB)
+> - 月間転送量 >= 5.0 (GB) のとき、携帯電話料金は 3000 (円)
 
 <ViewSource url={import.meta.url} path="_samples/mobile-phone-bill" />

src/components/Term/definitions.js

@@ -4,10 +4,12 @@ export default {
     "/docs/trial-session/html/": "HTML",
     "/docs/trial-session/javascript/": "JavaScriptことはじめ",
     "/docs/trial-session/expressions/": "値と式と演算子",
+    "/docs/trial-session/expressions/#いろいろな演算子": "いろいろな演算子",
     "/docs/trial-session/variables/": "変数",
     "/docs/trial-session/boolean/": "論理値と論理演算子",
     "/docs/trial-session/if-statement/": "条件分岐",
     "/docs/trial-session/functions/": "関数",
+    "/docs/trial-session/functions/#モジュール化": "モジュール化",
     "/docs/trial-session/css/": "ウェブサイトの見た目を整える",
     "/docs/trial-session/object/": "オブジェクト",
     "/docs/trial-session/dom/": "DOM",
@@ -164,7 +166,7 @@ export default {
     },
     javascriptExpression: {
       name: "式 (JavaScript)",
-      definition: "JavaScript において、値を生成するまとまり。",
+      definition: "JavaScript において、計算・処理されて値を生成するまとまり。",
       referencePage: "/docs/trial-session/expressions/",
     },
     javascriptEvaluation: {
@@ -178,6 +180,11 @@ export default {
         "複数の演算子を含む式の評価順序を決定するための指標。例えば、乗算演算子は加算演算子より優先順位が高いため、 3 + 4 * 5 は 3 + (4 * 5) と評価される。",
       referencePage: "/docs/trial-session/expressions/",
     },
+    javascriptStringConcatenation: {
+      name: "文字列の結合",
+      definition: "文字列に加算演算子を使うと、一個目の文字列の後ろに二個目の文字列が追加される。",
+      referencePage: "/docs/trial-session/expressions/#いろいろな演算子",
+    },
     javascriptVariable: {
       name: "変数",
       definition: "JavaScriptで値を一時的に保存しておくための入れ物。",
@@ -255,6 +262,11 @@ export default {
       definition: "変数が有効な範囲",
       referencePage: "/docs/trial-session/functions/",
     },
+    javascriptModularization: {
+      name: "モジュール化",
+      definition: "ひとまとまりの煩雑なものや操作を一つにまとめて、コードを複数のブロックに分解すること。",
+      referencePage: "/docs/trial-session/functions/#モジュール化",
+    },
     javascriptObject: {
       name: "オブジェクト (JavaScript)",
       definition: