基礎から学ぶJavaScript入門 90日コース | JavaScriptを動かして慣れる － Day 12：引数と戻り値

JavaScript 90日で身につけるJavaScript
スポンサーリンク
スポンサーリンク
  1. Day 12：引数と戻り値で「入力→処理→結果」の流れをつかむ
  2. 引数・戻り値・returnの基本を整理する
    1. 引数とは何か
    2. 戻り値とは何か
    3. return の役割
  3. 実践1：足し算関数で「引数と戻り値の流れ」を体験する
    1. 足し算関数を言葉で整理する
    2. 足し算関数のコード例（基本）
    3. 重要ポイントの深掘り
  4. 実践2：割引計算関数で「現実的な計算」を扱う
    1. 割引計算を言葉で整理する
    2. 割引計算関数のコード例（基本）
    3. 重要ポイントの深掘り
  5. 実践3：BMI計算関数で「複数の引数と計算」を扱う
    1. BMIとは何か（簡単に）
    2. BMI計算関数を言葉で整理する
    3. BMI計算関数のコード例（身長cm入力）
    4. 重要ポイントの深掘り
  6. 引数と戻り値を意識した関数設計のポイント
    1. 1. 「何を受け取って、何を返すか」を先に決める
    2. 2. 関数の名前を「役割＋結果」でつける
    3. 3. 「表示」と「計算」を分ける意識を持つ
  7. Day 12 前半の練習テンプレート
  8. Day 12 前半のまとめ
  9. Day 12：引数と戻り値（後半）で「関数を組み合わせて使う」感覚を育てる
  10. 引数・戻り値を「関数同士をつなぐ接点」として考える
    1. 関数は「入力→処理→結果」の箱であり、箱同士をつなげられる
  11. 足し算関数を「部品」として再利用する
    1. 足し算関数の基本形を再確認する
    2. 足し算関数を別の計算の一部として使う
    3. 重要ポイントの深掘り
  12. 割引計算関数に「チェック」と「拡張」の考え方を加える
    1. 割引計算関数の基本形を再確認する
    2. 割引率の範囲チェックを追加する
    3. 重要ポイントの深掘り
    4. 割引計算結果を「詳細情報」として返す
    5. 重要ポイントの深掘り
  13. BMI計算関数を「評価ロジック」と組み合わせる
    1. BMI計算関数の基本形を再確認する
    2. BMI値を評価する関数を作る
    3. 重要ポイントの深掘り
  14. 関数同士をつなげる「処理のパイプライン」を意識する
    1. 例：価格 → 割引 → 消費税 → 最終価格
    2. 重要ポイントの深掘り
  15. Day 12 後半の練習テンプレート
  16. Day 12 後半のまとめ
  17. Day 12：複数の計算処理を関数化して「部品として使う」感覚を身につける
  18. 計算処理を「関数の箱」に分けて考える
    1. 関数は「1つの役割を持つ小さな計算の箱」
  19. ミニ課題の設計方針を決める
    1. どんな計算を関数化するかを言葉で整理する
  20. 複数の計算処理を関数化する実践コード
    1. 全体テンプレート（HTML＋JavaScript）
  21. 各関数をステップバイステップで深掘りする
    1. 足し算関数：最もシンプルな「入力→結果」の箱
    2. 割引計算関数：引数が増えても考え方は同じ
    3. BMI計算関数：少し複雑でも「流れ」は同じ
    4. 平均値計算関数：複数の値をまとめて扱う
  22. 複数の計算処理を関数化するときの設計ポイント
    1. 1. 関数ごとに「役割」を1つに絞る
    2. 2. 「何を受け取って何を返すか」を先に決める
    3. 3. 関数名で「役割＋結果」を表す
  23. Day 12 ミニ課題のまとめ

Day 12：引数と戻り値で「入力→処理→結果」の流れをつかむ

Day 12では、関数の中でもとても重要な要素である 引数・戻り値・return を学びます。 関数を「入力→処理→結果」を扱う小さな箱として考えられるようになると、 プログラム全体の設計が一気にわかりやすくなります。

ここでは、

  • 引数とは何か
  • 戻り値とは何か
  • return の役割
  • 足し算関数
  • 割引計算関数
  • BMI計算関数

を題材に、ステップバイステップでかみ砕いて説明していきます。

引数・戻り値・returnの基本を整理する

引数とは何か

引数（ひきすう）とは、 「関数に渡す値」「関数の外から中に渡される入力」のことです。

function add(a, b) {
  // a と b が「引数」です
}
JavaScript

ここでの a と b は、関数 add が受け取る値の名前です。 呼び出し側で、

add(3, 5);
JavaScript

と書くと、

  • a には 3
  • b には 5

が渡されます。

戻り値とは何か

戻り値とは、 「関数が処理した結果として、外に返す値」のことです。

function add(a, b) {
  const result = a + b;
  return result; // これが「戻り値」です
}
JavaScript

呼び出し側で、

const sum = add(3, 5);
JavaScript

と書くと、

  • add(3, 5) の結果（戻り値）が sum に代入されます。
  • この場合、sum は 8 になります。

return の役割

return は、関数の中で次の2つの役割を持ちます。

  1. 戻り値を返す
  2. その時点で関数の処理を終了する
function add(a, b) {
  const result = a + b;
  return result; // ここで関数は終了します
  console.log('この行は実行されません'); // return の後は実行されません
}
JavaScript

return が実行された瞬間に、 関数は「結果を返して終了する」と覚えておくとよいです。

実践1：足し算関数で「引数と戻り値の流れ」を体験する

足し算関数を言葉で整理する

足し算関数は、次のような流れになります。

  • 入力：2つの数値（例：3と5）
  • 処理：2つの数値を足す
  • 結果：足し算の結果（例：8）を戻り値として返す

これを関数として書くと、「入力→処理→結果」の流れがはっきり見えます。

足し算関数のコード例（基本）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 12 前半：足し算関数</title>
</head>
<body>
  <h1>足し算関数で引数と戻り値を理解する</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    // 2つの数値を受け取って、その合計を返す関数です
    function add(a, b) {
      // a と b が「引数」です（入力）
      const result = a + b; // 足し算の処理を行います
      return result;        // 計算結果を「戻り値」として返します
    }

    // 関数を呼び出して、戻り値を変数に受け取ります
    const sum1 = add(3, 5);   // 3 + 5 = 8
    const sum2 = add(10, 20); // 10 + 20 = 30

    console.log(`3 + 5 の結果は ${sum1} です`);
    console.log(`10 + 20 の結果は ${sum2} です`);

    console.log('足し算関数の動作確認が完了しました。');
  </script>
</body>
</html>

重要ポイントの深掘り

  • add(3, 5) の呼び出しで、a = 3、b = 5 が渡されます。
  • 関数の中で result = a + b が計算されます。
  • return result; によって、計算結果が関数の外に渡されます。
  • 呼び出し側では、戻り値を変数に受け取って、好きなように使えます。

実践2：割引計算関数で「現実的な計算」を扱う

割引計算を言葉で整理する

割引計算は、次のような処理です。

  • 入力：元の価格（例：1000円）、割引率（例：20%）
  • 処理：割引額を計算し、割引後の価格を求める
  • 結果：割引後の価格を戻り値として返す

これを関数にすると、 「価格と割引率を変えながら何度でも使える部品」になります。

割引計算関数のコード例（基本）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 12 前半：割引計算関数</title>
</head>
<body>
  <h1>割引計算関数で引数と戻り値を練習する</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    // 元の価格と割引率を受け取って、割引後の価格を返す関数です
    function calcDiscount(price, discountRate) {
      // price：元の価格（税抜きなど）
      // discountRate：割引率（例：0.2 は 20% 割引）

      const discountAmount = price * discountRate; // 割引額を計算します
      const discountedPrice = price - discountAmount; // 割引後の価格を計算します

      return discountedPrice; // 割引後の価格を戻り値として返します
    }

    // 関数を呼び出して、割引後の価格を計算します
    const originalPrice = 1000;
    const discounted20 = calcDiscount(originalPrice, 0.2); // 20%割引
    const discounted50 = calcDiscount(originalPrice, 0.5); // 50%割引

    console.log(`元の価格：${originalPrice} 円`);
    console.log(`20%割引後の価格：${discounted20} 円`);
    console.log(`50%割引後の価格：${discounted50} 円`);

    console.log('割引計算関数の動作確認が完了しました。');
  </script>
</body>
</html>

重要ポイントの深掘り

  • price と discountRate が「引数（入力）」です。
  • 関数の中で、割引額と割引後の価格を計算しています。
  • return discountedPrice; によって、割引後の価格だけを外に返しています。
  • 呼び出し側では、同じ関数を使って、割引率だけ変えながら何度でも計算できます。

実践3：BMI計算関数で「複数の引数と計算」を扱う

BMIとは何か（簡単に）

BMI（Body Mass Index）は、 体重と身長から体格を評価する指標です。

計算式は次の通りです。

BMI=体重(kg)身長(m)2

例えば、

  • 体重：60kg
  • 身長：1.7m

なら、

BMI=601.72≈20.76

となります。

BMI計算関数を言葉で整理する

BMI計算関数は、次のような流れになります。

  • 入力：体重（kg）、身長（cm または m）
  • 処理：身長をメートルに変換し、BMIを計算する
  • 結果：BMI値を戻り値として返す

BMI計算関数のコード例（身長cm入力）

身長を「cm」で受け取り、関数の中で「m」に変換してから計算する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 12 前半：BMI計算関数</title>
</head>
<body>
  <h1>BMI計算関数で複数の引数と戻り値を練習する</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    // 体重(kg)と身長(cm)を受け取って、BMIを計算して返す関数です
    function calcBMI(weightKg, heightCm) {
      // 身長(cm)をメートル(m)に変換します
      const heightM = heightCm / 100;

      // BMIの計算式：体重(kg) / 身長(m)^2
      const bmi = weightKg / (heightM * heightM);

      return bmi; // BMI値を戻り値として返します
    }

    // 関数を呼び出して、BMIを計算します
    const bmi1 = calcBMI(60, 170); // 体重60kg・身長170cm
    const bmi2 = calcBMI(75, 180); // 体重75kg・身長180cm

    console.log(`体重60kg・身長170cmのBMI：${bmi1}`);
    console.log(`体重75kg・身長180cmのBMI：${bmi2}`);

    console.log('BMI計算関数の動作確認が完了しました。');
  </script>
</body>
</html>

重要ポイントの深掘り

  • weightKg と heightCm の2つが「引数（入力）」です。
  • 関数の中で、身長をメートルに変換し、BMIを計算しています。
  • return bmi; によって、計算結果だけを外に返しています。
  • 呼び出し側では、体重と身長を変えながら、同じ関数でBMIを何度でも計算できます。

引数と戻り値を意識した関数設計のポイント

1. 「何を受け取って、何を返すか」を先に決める

関数を書く前に、

  • この関数は 何を入力として受け取るのか
  • この関数は 何を結果として返すのか

を言葉で整理しておくと、 コードが自然に「引数」と「戻り値」を中心にした形になります。

2. 関数の名前を「役割＋結果」でつける

  • add → 足し算して結果を返す
  • calcDiscount → 割引を計算して結果を返す
  • calcBMI → BMIを計算して結果を返す

名前を見ただけで「何をする関数か」「何を返しそうか」がわかるようにしておくと、 自分も他人もコードを理解しやすくなります。

3. 「表示」と「計算」を分ける意識を持つ

  • 計算専用の関数（戻り値で結果を返す）
  • 表示専用の関数（引数で結果を受け取って表示する）

というように役割を分けると、 関数がより再利用しやすくなります。

Day 12 前半の練習テンプレート

最後に、Day 12前半の内容をまとめた練習用テンプレートを示します。 このファイルを保存してブラウザで開くと、足し算・割引計算・BMI計算の関数をまとめて試せます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 12 前半：引数と戻り値 練習テンプレート</title>
</head>
<body>
  <h1>Day 12 前半：引数と戻り値（足し算・割引・BMI）</h1>
  <p>ブラウザのコンソールを開いて、出力結果を確認してください。</p>

  <script>
    console.log('--- 足し算関数 ---');

    function add(a, b) {
      const result = a + b;
      return result;
    }

    const sumA = add(3, 5);
    const sumB = add(10, 20);

    console.log(`3 + 5 = ${sumA}`);
    console.log(`10 + 20 = ${sumB}`);

    console.log('--- 割引計算関数 ---');

    function calcDiscount(price, discountRate) {
      const discountAmount = price * discountRate;
      const discountedPrice = price - discountAmount;
      return discountedPrice;
    }

    const originalPrice = 1000;
    const discounted20 = calcDiscount(originalPrice, 0.2);
    const discounted50 = calcDiscount(originalPrice, 0.5);

    console.log(`元の価格：${originalPrice} 円`);
    console.log(`20%割引後の価格：${discounted20} 円`);
    console.log(`50%割引後の価格：${discounted50} 円`);

    console.log('--- BMI計算関数 ---');

    function calcBMI(weightKg, heightCm) {
      const heightM = heightCm / 100;
      const bmi = weightKg / (heightM * heightM);
      return bmi;
    }

    const bmiA = calcBMI(60, 170);
    const bmiB = calcBMI(75, 180);

    console.log(`体重60kg・身長170cmのBMI：${bmiA}`);
    console.log(`体重75kg・身長180cmのBMI：${bmiB}`);

    console.log('--- Day 12 前半の練習が完了しました ---');
  </script>
</body>
</html>

Day 12 前半のまとめ

Day 12前半では、次のことを学びました。

  • 引数は「関数に渡す入力」、戻り値は「関数から返す結果」であること
  • return は「結果を返して関数を終了する」ためのキーワードであること
  • 足し算関数で、引数と戻り値の基本的な流れを体験したこと
  • 割引計算関数で、現実的な計算を関数として再利用する感覚をつかんだこと
  • BMI計算関数で、複数の引数と少し複雑な計算を扱う練習をしたこと

この「入力→処理→結果」の流れが見えるようになると、 関数はただの「便利なまとまり」ではなく、 プログラム全体を組み立てるための部品として扱えるようになっていきます。 ぜひ、身近な計算や処理をどんどん関数化しながら、 引数と戻り値の感覚を自分のものにしていってください。

Day 12：引数と戻り値（後半）で「関数を組み合わせて使う」感覚を育てる

Day 12後半では、前半で学んだ 引数・戻り値・return をさらに深掘りして、 関数を「組み合わせて使う」視点を身につけていきます。

ここでは、

  • 引数・戻り値を意識した関数設計のレベルアップ
  • 足し算関数を「部品」として使い回す
  • 割引計算関数にチェックや拡張の考え方を加える
  • BMI計算関数を「評価ロジック」と組み合わせる
  • 関数同士をつなげて処理の流れを作る

という流れで、初心者向けにステップバイステップで解説していきます。

引数・戻り値を「関数同士をつなぐ接点」として考える

関数は「入力→処理→結果」の箱であり、箱同士をつなげられる

前半では、1つの関数の中で、

  • 引数：入力
  • 処理：計算やロジック
  • 戻り値：結果

という流れを見てきました。

後半では、「ある関数の戻り値を、別の関数の引数として渡す」という使い方を意識します。

例えば、

  • 足し算関数 add の結果を、割引計算関数 calcDiscount に渡す
  • BMI計算関数 calcBMI の結果を、評価関数 judgeBMI に渡す

といった形で、関数同士をつなげていくと、 プログラム全体が「関数のネットワーク」として見えてきます。

足し算関数を「部品」として再利用する

足し算関数の基本形を再確認する

まずは、前半で作った足し算関数をもう一度確認します。

function add(a, b) {
  const result = a + b;
  return result;
}
JavaScript

この関数は、

  • 2つの数値を受け取る（引数）
  • 足し算する（処理）
  • 結果を返す（戻り値）

という、とてもシンプルな箱です。

足し算関数を別の計算の一部として使う

例えば、「3つの数値の合計」を求めたいとします。 もちろん、直接 a + b + c と書いてもよいですが、 あえて足し算関数を使ってみると、「部品としての再利用」が見えてきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 12 後半：足し算関数の再利用</title>
</head>
<body>
  <h1>足し算関数を別の計算の部品として使う</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    // 2つの数値を足して結果を返す関数
    function add(a, b) {
      const result = a + b;
      return result;
    }

    // 3つの数値の合計を求める関数（中で add を再利用します）
    function sumThree(a, b, c) {
      const firstTwo = add(a, b);   // まず a + b を計算
      const total = add(firstTwo, c); // その結果に c を足す
      return total;                 // 3つの合計を返す
    }

    const result1 = sumThree(1, 2, 3);   // 1 + 2 + 3 = 6
    const result2 = sumThree(10, 20, 30); // 10 + 20 + 30 = 60

    console.log(`1, 2, 3 の合計：${result1}`);
    console.log(`10, 20, 30 の合計：${result2}`);

    console.log('足し算関数を部品として再利用する例の動作確認が完了しました。');
  </script>
</body>
</html>

重要ポイントの深掘り

  • sumThree 関数は、自分の中で add 関数を呼び出しています。
  • add の戻り値（結果）を、次の add の引数として渡しています。
  • このように、戻り値は「次の処理への入力」として使えることがわかります。

割引計算関数に「チェック」と「拡張」の考え方を加える

割引計算関数の基本形を再確認する

前半で作った割引計算関数は、次のような形でした。

function calcDiscount(price, discountRate) {
  const discountAmount = price * discountRate;
  const discountedPrice = price - discountAmount;
  return discountedPrice;
}
JavaScript

ここから、少しだけ「安全性」と「拡張性」を意識した形にしてみます。

割引率の範囲チェックを追加する

割引率が 0〜1 の範囲（0%〜100%）を超えていたら、おかしな値になります。 そこで、簡単なチェックを入れてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 12 後半：チェック付き割引計算関数</title>
</head>
<body>
  <h1>割引率のチェックを追加した割引計算関数</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    // 元の価格と割引率から割引後の価格を返す関数（簡単なチェック付き）
    function calcDiscount(price, discountRate) {
      // 割引率が 0〜1 の範囲かチェックします
      if (discountRate < 0 || discountRate > 1) {
        console.log('割引率が不正です。0〜1の範囲で指定してください。');
        return price; // 不正な場合は元の価格をそのまま返します
      }

      const discountAmount = price * discountRate;
      const discountedPrice = price - discountAmount;

      return discountedPrice;
    }

    const price = 1000;

    const validDiscount = calcDiscount(price, 0.2);  // 正常な割引率
    const invalidDiscount = calcDiscount(price, 1.5); // 不正な割引率

    console.log(`正常な割引率の場合の価格：${validDiscount} 円`);
    console.log(`不正な割引率の場合の価格（元の価格のまま）：${invalidDiscount} 円`);

    console.log('チェック付き割引計算関数の動作確認が完了しました。');
  </script>
</body>
</html>

重要ポイントの深掘り

  • if (discountRate < 0 || discountRate > 1) で、割引率の範囲をチェックしています。
  • 不正な場合は return price; で、元の価格をそのまま返しています。
  • return は「結果を返す」と同時に「そこで関数を終了する」ので、 不正な場合の処理を早めに終わらせることができます（早期リターン）。

割引計算結果を「詳細情報」として返す

割引後の価格だけでなく、

  • 元の価格
  • 割引率
  • 割引額
  • 割引後の価格

などをまとめて返したい場合は、オブジェクトを戻り値にするのが便利です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 12 後半：詳細情報付き割引計算関数</title>
</head>
<body>
  <h1>詳細情報をまとめて返す割引計算関数</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    // 割引計算の詳細情報をまとめて返す関数です
    function calcDiscountDetail(price, discountRate) {
      const discountAmount = price * discountRate;
      const discountedPrice = price - discountAmount;

      // 複数の値をオブジェクトにまとめて戻り値として返します
      return {
        price,
        discountRate,
        discountAmount,
        discountedPrice
      };
    }

    const result = calcDiscountDetail(1000, 0.2);

    console.log('--- 割引計算の詳細 ---');
    console.log(`元の価格：${result.price} 円`);
    console.log(`割引率：${result.discountRate * 100} %`);
    console.log(`割引額：${result.discountAmount} 円`);
    console.log(`割引後の価格：${result.discountedPrice} 円`);

    console.log('詳細情報付き割引計算関数の動作確認が完了しました。');
  </script>
</body>
</html>

重要ポイントの深掘り

  • 戻り値としてオブジェクトを返すことで、複数の情報をまとめて扱えます。
  • 呼び出し側では、result.price や result.discountedPrice のように、 必要な情報だけを取り出して使えます。
  • 戻り値は「1つの値」ですが、その中身をオブジェクトにすることで、実質的に複数の値を返せるという考え方が重要です。

BMI計算関数を「評価ロジック」と組み合わせる

BMI計算関数の基本形を再確認する

前半で作ったBMI計算関数は、次のような形でした。

function calcBMI(weightKg, heightCm) {
  const heightM = heightCm / 100;
  const bmi = weightKg / (heightM * heightM);
  return bmi;
}
JavaScript

ここから、BMI値に応じて「判定」を行う関数を組み合わせてみます。

BMI値を評価する関数を作る

BMI値に対して、簡単な判定を行う関数を作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 12 後半：BMI判定関数</title>
</head>
<body>
  <h1>BMI計算関数と判定関数を組み合わせる</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    // BMIを計算する関数（前半で作ったもの）
    function calcBMI(weightKg, heightCm) {
      const heightM = heightCm / 100;
      const bmi = weightKg / (heightM * heightM);
      return bmi;
    }

    // BMI値に応じて判定を返す関数
    function judgeBMI(bmi) {
      if (bmi < 18.5) {
        return '低体重';
      } else if (bmi < 25) {
        return '普通体重';
      } else if (bmi < 30) {
        return '肥満（1度）';
      } else {
        return '肥満（2度以上）';
      }
    }

    // 関数同士を組み合わせて使います
    const bmiA = calcBMI(60, 170);
    const judgeA = judgeBMI(bmiA);

    const bmiB = calcBMI(80, 170);
    const judgeB = judgeBMI(bmiB);

    console.log(`体重60kg・身長170cmのBMI：${bmiA}（判定：${judgeA}）`);
    console.log(`体重80kg・身長170cmのBMI：${bmiB}（判定：${judgeB}）`);

    console.log('BMI計算関数と判定関数の組み合わせの動作確認が完了しました。');
  </script>
</body>
</html>

重要ポイントの深掘り

  • calcBMI は「計算専用」の関数です。
  • judgeBMI は「判定専用」の関数です。
  • calcBMI の戻り値（BMI値）を、judgeBMI の引数として渡しています。
  • このように、関数同士をつなげることで、処理の流れを段階的に作れるようになります。

関数同士をつなげる「処理のパイプライン」を意識する

例：価格 → 割引 → 消費税 → 最終価格

少し応用的な例として、次のような流れを考えてみます。

  1. 元の価格に割引を適用する
  2. 割引後の価格に消費税をかける
  3. 最終的な支払額を求める

これを関数同士の組み合わせで書いてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 12 後半：関数をつないで処理の流れを作る</title>
</head>
<body>
  <h1>割引→消費税→最終価格の流れを関数でつなぐ</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    // 割引後の価格を計算する関数
    function calcDiscount(price, discountRate) {
      const discountAmount = price * discountRate;
      const discountedPrice = price - discountAmount;
      return discountedPrice;
    }

    // 消費税を計算して税込価格を返す関数
    function calcTax(price, taxRate) {
      const tax = price * taxRate;
      const total = price + tax;
      return total;
    }

    // 割引と消費税をまとめて適用して最終価格を返す関数
    function calcFinalPrice(originalPrice, discountRate, taxRate) {
      const discounted = calcDiscount(originalPrice, discountRate); // 割引後の価格
      const finalPrice = calcTax(discounted, taxRate);              // 割引後価格に消費税を適用
      return finalPrice;
    }

    const originalPrice = 1000;
    const final = calcFinalPrice(originalPrice, 0.2, 0.1); // 20%割引＋10%消費税

    console.log(`元の価格：${originalPrice} 円`);
    console.log(`20%割引＋10%消費税後の最終価格：${final} 円`);

    console.log('関数をつないで処理の流れを作る例の動作確認が完了しました。');
  </script>
</body>
</html>

重要ポイントの深掘り

  • calcDiscount の戻り値を calcTax の引数として渡しています。
  • calcFinalPrice は、「割引→消費税」という流れをまとめて表現する関数です。
  • このように、小さな関数を組み合わせて大きな処理を作るのが、関数設計の基本的な考え方です。

Day 12 後半の練習テンプレート

最後に、Day 12後半の内容をまとめた練習用テンプレートを示します。 このファイルを保存してブラウザで開くと、足し算・割引・BMI・複合処理の関数をまとめて試せます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 12 後半：引数と戻り値 応用練習テンプレート</title>
</head>
<body>
  <h1>Day 12 後半：引数と戻り値の応用（関数の組み合わせ）</h1>
  <p>ブラウザのコンソールを開いて、出力結果を確認してください。</p>

  <script>
    console.log('--- 足し算関数の再利用 ---');

    function add(a, b) {
      const result = a + b;
      return result;
    }

    function sumThree(a, b, c) {
      const firstTwo = add(a, b);
      const total = add(firstTwo, c);
      return total;
    }

    console.log(`1, 2, 3 の合計：${sumThree(1, 2, 3)}`);
    console.log(`10, 20, 30 の合計：${sumThree(10, 20, 30)}`);

    console.log('--- チェック付き割引計算関数 ---');

    function calcDiscount(price, discountRate) {
      if (discountRate < 0 || discountRate > 1) {
        console.log('割引率が不正です。0〜1の範囲で指定してください。');
        return price;
      }
      const discountAmount = price * discountRate;
      const discountedPrice = price - discountAmount;
      return discountedPrice;
    }

    console.log(`1000円の20%割引：${calcDiscount(1000, 0.2)} 円`);
    console.log(`1000円の150%割引（不正）：${calcDiscount(1000, 1.5)} 円`);

    console.log('--- 詳細情報付き割引計算関数 ---');

    function calcDiscountDetail(price, discountRate) {
      const discountAmount = price * discountRate;
      const discountedPrice = price - discountAmount;
      return {
        price,
        discountRate,
        discountAmount,
        discountedPrice
      };
    }

    const discountResult = calcDiscountDetail(1000, 0.2);
    console.log(`元の価格：${discountResult.price} 円`);
    console.log(`割引率：${discountResult.discountRate * 100} %`);
    console.log(`割引額：${discountResult.discountAmount} 円`);
    console.log(`割引後の価格：${discountResult.discountedPrice} 円`);

    console.log('--- BMI計算＋判定関数 ---');

    function calcBMI(weightKg, heightCm) {
      const heightM = heightCm / 100;
      const bmi = weightKg / (heightM * heightM);
      return bmi;
    }

    function judgeBMI(bmi) {
      if (bmi < 18.5) {
        return '低体重';
      } else if (bmi < 25) {
        return '普通体重';
      } else if (bmi < 30) {
        return '肥満（1度）';
      } else {
        return '肥満（2度以上）';
      }
    }

    const bmiA = calcBMI(60, 170);
    const judgeA = judgeBMI(bmiA);

    console.log(`体重60kg・身長170cmのBMI：${bmiA}（判定：${judgeA}）`);

    console.log('--- 割引→消費税→最終価格 ---');

    function calcTax(price, taxRate) {
      const tax = price * taxRate;
      const total = price + tax;
      return total;
    }

    function calcFinalPrice(originalPrice, discountRate, taxRate) {
      const discounted = calcDiscount(originalPrice, discountRate);
      const finalPrice = calcTax(discounted, taxRate);
      return finalPrice;
    }

    const finalPrice = calcFinalPrice(1000, 0.2, 0.1);
    console.log(`1000円に20%割引＋10%消費税を適用した最終価格：${finalPrice} 円`);

    console.log('--- Day 12 後半の練習が完了しました ---');
  </script>
</body>
</html>

Day 12 後半のまとめ

Day 12後半では、次のことを意識して学びました。

  • 引数と戻り値を「関数同士をつなぐ接点」として考えること
  • 足し算関数を別の関数の中で再利用し、「部品として使う」感覚を体験したこと
  • 割引計算関数にチェックや詳細情報の戻り値を加え、「安全性」と「拡張性」を意識したこと
  • BMI計算関数と判定関数を組み合わせて、「計算」と「評価」を分けて設計したこと
  • 割引→消費税→最終価格のように、関数をつないで処理の流れを作る考え方を体験したこと

ここまで来ると、関数は単なる「便利なまとまり」ではなく、 プログラム全体を構成する小さな部品たちとして見えてきます。

ぜひ、身近な処理をどんどん関数に分けて、 「引数と戻り値で関数同士をつなぐ」感覚を育てていってください。

Day 12：複数の計算処理を関数化して「部品として使う」感覚を身につける

Day 12のミニ課題では、これまで学んだ 引数・戻り値・return を使って、 複数の計算処理をそれぞれ関数として整理していくことを目標にします。

ここでは、

  • 計算処理を「関数という箱」に分けて考える
  • 足し算・割引・BMIなどを関数として並べて設計する
  • 「呼び出し側から見るとどう見えるか」を意識する
  • 再利用しやすい関数の形を体験する

という流れで、初心者向けにかみ砕いて説明していきます。

計算処理を「関数の箱」に分けて考える

関数は「1つの役割を持つ小さな計算の箱」

複数の計算処理を関数化するときに大事なのは、 「1つの関数に1つの役割」という考え方です。

例えば、次のように分けて考えることができます。

  • 足し算をする関数
  • 割引後の価格を計算する関数
  • BMIを計算する関数
  • 平均値を計算する関数
  • 合計を計算する関数

それぞれの関数は、

  • 何を入力として受け取るか（引数）
  • どんな計算をするか（処理）
  • 何を結果として返すか（戻り値）

がはっきりしていると、部品としてとても扱いやすくなります。

ミニ課題の設計方針を決める

どんな計算を関数化するかを言葉で整理する

ここでは、次のような複数の計算処理を関数化してみます。

  • 足し算：2つの数値を足す
  • 割引計算：元の価格と割引率から割引後の価格を求める
  • BMI計算：体重と身長からBMIを求める
  • 平均値計算：3つの数値の平均を求める

それぞれについて、

  • 引数：何を受け取るか
  • 戻り値：何を返すか

を先に言葉で決めてからコードにしていきます。

複数の計算処理を関数化する実践コード

全体テンプレート（HTML＋JavaScript）

まずは、ブラウザで動かせる練習用テンプレートとして、 複数の計算関数をまとめたファイルを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 12 ミニ課題：複数の計算処理を関数化する</title>
</head>
<body>
  <h1>Day 12 ミニ課題：複数の計算処理を関数化する</h1>
  <p>ブラウザのコンソールを開いて、各関数の結果を確認してください。</p>

  <script>
    console.log('--- 足し算関数 ---');

    // 2つの数値を足して結果を返す関数
    function add(a, b) {
      // a と b が「引数」です（入力）
      const result = a + b; // 足し算の処理
      return result;        // 計算結果を戻り値として返します
    }

    const sum1 = add(3, 5);
    const sum2 = add(10, 20);

    console.log(`3 + 5 = ${sum1}`);
    console.log(`10 + 20 = ${sum2}`);

    console.log('--- 割引計算関数 ---');

    // 元の価格と割引率から割引後の価格を返す関数
    function calcDiscount(price, discountRate) {
      // price：元の価格
      // discountRate：割引率（例：0.2 は 20% 割引）

      const discountAmount = price * discountRate;    // 割引額を計算
      const discountedPrice = price - discountAmount; // 割引後の価格を計算

      return discountedPrice; // 割引後の価格を戻り値として返します
    }

    const originalPrice = 1000;
    const discounted20 = calcDiscount(originalPrice, 0.2);
    const discounted50 = calcDiscount(originalPrice, 0.5);

    console.log(`元の価格：${originalPrice} 円`);
    console.log(`20%割引後の価格：${discounted20} 円`);
    console.log(`50%割引後の価格：${discounted50} 円`);

    console.log('--- BMI計算関数 ---');

    // 体重(kg)と身長(cm)からBMIを計算して返す関数
    function calcBMI(weightKg, heightCm) {
      // 身長(cm)をメートル(m)に変換
      const heightM = heightCm / 100;

      // BMIの計算式：体重(kg) / 身長(m)^2
      const bmi = weightKg / (heightM * heightM);

      return bmi; // BMI値を戻り値として返します
    }

    const bmiA = calcBMI(60, 170);
    const bmiB = calcBMI(75, 180);

    console.log(`体重60kg・身長170cmのBMI：${bmiA}`);
    console.log(`体重75kg・身長180cmのBMI：${bmiB}`);

    console.log('--- 平均値計算関数 ---');

    // 3つの数値の平均値を計算して返す関数
    function calcAverage(a, b, c) {
      const sum = a + b + c;   // 合計を計算
      const average = sum / 3; // 平均値を計算
      return average;          // 平均値を戻り値として返します
    }

    const avg1 = calcAverage(10, 20, 30);
    const avg2 = calcAverage(5, 15, 25);

    console.log(`10, 20, 30 の平均値：${avg1}`);
    console.log(`5, 15, 25 の平均値：${avg2}`);

    console.log('--- Day 12 ミニ課題の実行が完了しました ---');
  </script>
</body>
</html>

各関数をステップバイステップで深掘りする

足し算関数：最もシンプルな「入力→結果」の箱

function add(a, b) {
  const result = a + b;
  return result;
}
JavaScript
  • 引数：a と b → 足し算したい2つの数値を受け取ります。
  • 処理：a + b → 足し算を行い、result に代入します。
  • 戻り値：result → 計算結果を関数の外に返します。

呼び出し側では、

const sum = add(3, 5);
JavaScript

と書くだけで、sum に 8 が入ります。 このように、「何を受け取って何を返すか」がはっきりしている関数は、とても扱いやすいです。

割引計算関数：引数が増えても考え方は同じ

function calcDiscount(price, discountRate) {
  const discountAmount = price * discountRate;
  const discountedPrice = price - discountAmount;
  return discountedPrice;
}
JavaScript
  • 引数：price（元の価格）、discountRate（割引率）
  • 処理：
    • discountAmount = price * discountRate で割引額を計算
    • discountedPrice = price - discountAmount で割引後の価格を計算
  • 戻り値：discountedPrice（割引後の価格）

呼び出し側では、

const discounted = calcDiscount(1000, 0.2);
JavaScript

と書くと、discounted に 20%割引後の価格が入ります。 このように、現実的な計算も「入力→処理→結果」の流れに乗せて関数化できることがわかります。

BMI計算関数：少し複雑でも「流れ」は同じ

function calcBMI(weightKg, heightCm) {
  const heightM = heightCm / 100;
  const bmi = weightKg / (heightM * heightM);
  return bmi;
}
JavaScript
  • 引数：weightKg（体重）、heightCm（身長）
  • 処理：
    • heightM = heightCm / 100 で身長をメートルに変換
    • bmi = weightKg / (heightM * heightM) でBMIを計算
  • 戻り値：bmi（BMI値）

呼び出し側では、

const bmi = calcBMI(60, 170);
JavaScript

と書くだけで、BMI値が計算されて返ってきます。 計算式が少し複雑でも、引数・処理・戻り値の枠組みは変わらないことがポイントです。

平均値計算関数：複数の値をまとめて扱う

function calcAverage(a, b, c) {
  const sum = a + b + c;
  const average = sum / 3;
  return average;
}
JavaScript
  • 引数：a・b・c の3つの数値
  • 処理：
    • sum = a + b + c で合計を計算
    • average = sum / 3 で平均値を計算
  • 戻り値：average（平均値）

呼び出し側では、

const avg = calcAverage(10, 20, 30);
JavaScript

と書くと、avg に平均値が入ります。 このように、複数の値をまとめて扱う処理も、関数にするとスッキリ整理できるようになります。

複数の計算処理を関数化するときの設計ポイント

1. 関数ごとに「役割」を1つに絞る

  • 足し算は足し算だけ
  • 割引計算は割引だけ
  • BMI計算はBMIだけ

というように、1つの関数にいろいろ詰め込みすぎないことが大切です。 役割が1つだと、テストしやすく、再利用しやすく、理解しやすい関数になります。

2. 「何を受け取って何を返すか」を先に決める

コードを書く前に、

  • この関数は 何を入力として受け取るのか
  • この関数は 何を結果として返すのか

を日本語で整理しておくと、 自然と引数と戻り値がはっきりした関数になります。

3. 関数名で「役割＋結果」を表す

  • add → 足し算して結果を返す
  • calcDiscount → 割引を計算して結果を返す
  • calcBMI → BMIを計算して結果を返す
  • calcAverage → 平均値を計算して結果を返す

名前を見ただけで「何をする関数か」「何を返しそうか」がわかるようにしておくと、 コードの読みやすさがぐっと上がります。

Day 12 ミニ課題のまとめ

Day 12のミニ課題では、

  • 複数の計算処理（足し算・割引・BMI・平均値）をそれぞれ関数として切り出したこと
  • どの関数も「引数→処理→戻り値」という同じ枠組みで考えられること
  • 関数を「1つの役割を持つ小さな計算の箱」として設計する感覚を育てたこと

を体験しました。

ここまで来ると、プログラムは「関数という部品の組み合わせ」として見えてきます。 ぜひ、他にも身近な計算（合計、最大値、最小値、ポイント計算など）をどんどん関数化してみて、 「複数の処理を関数として整理する」感覚を自分のものにしていってください。

スポンサーリンク
タイトルとURLをコピーしました