基礎から学ぶJavaScript入門 90日コース | JavaScriptを動かして慣れる － Day 11：関数の基礎

JavaScript 90日で身につけるJavaScript
スポンサーリンク
スポンサーリンク
  1. Day 11：関数の基礎で「処理に名前をつけて再利用する」感覚を身につける
  2. 関数とは何かをイメージでつかむ
    1. 関数は「処理に名前をつけたもの」
  3. 関数定義の基本形を理解する
    1. 関数定義の基本構文
  4. 関数呼び出しの基本を理解する
    1. 関数は「名前＋()」で呼び出す
    2. 挨拶関数の基本例（HTML＋JavaScript）
    3. 重要ポイントの深掘り
  5. 関数の再利用という考え方
    1. 同じ処理を何度も使うときのメリット
  6. 実践1：挨拶関数を少し発展させる
    1. 名前を受け取って挨拶する関数（基礎の一歩手前）
  7. 実践2：消費税計算関数を作る
    1. 消費税計算を言葉で整理する
    2. シンプルな消費税計算関数（税率固定）
    3. 重要ポイントの深掘り
  8. 関数の再利用性を消費税計算で体感する
    1. 同じ計算を何度も使うときのイメージ
  9. Day 11 前半の練習テンプレート
  10. Day 11 前半のまとめ
  11. Day 11：関数の基礎（後半）で「使い回せる処理」を設計する力を育てる
  12. 関数を「入力→処理→出力」の箱として捉える
    1. 関数の3要素を整理する
  13. 挨拶関数を「汎用的な部品」に育てる
    1. Step 1：前半の挨拶関数を振り返る
    2. Step 2：名前とメッセージを「入力」にする
    3. Step 3：挨拶文を「出力」として返す関数にする
  14. 消費税計算関数を「現場で使える形」に近づける
    1. Step 1：前半の消費税計算関数を振り返る
    2. Step 2：税率を「入力」にして柔軟にする
    3. Step 3：表示ロジックと計算ロジックを分ける
  15. 再利用しやすい関数を書くためのチェックポイント
    1. 1. 入力と出力がはっきりしているか
    2. 2. 関数の名前が「役割」を表しているか
    3. 3. 1つの関数に「役割を詰め込みすぎていないか」
  16. Day 11 後半の練習テンプレート
  17. Day 11 後半のまとめ

Day 11：関数の基礎で「処理に名前をつけて再利用する」感覚を身につける

Day 11では、JavaScriptのとても重要な概念である 「関数」を学びます。 関数は、ひと言でいうと 「処理のかたまりに名前をつけて、何度でも呼び出せるようにしたもの」です。 ここでは、

  • 関数とは何か
  • 関数の定義のしかた
  • 関数の呼び出し方
  • 再利用するメリット

を押さえたうえで、

  • 挨拶関数
  • 消費税計算関数

を題材に、初心者向けにかみ砕いてステップバイステップで解説していきます。

関数とは何かをイメージでつかむ

関数は「処理に名前をつけたもの」

これまでの学習では、コードをその場その場で書いてきました。 例えば、挨拶を表示したいときにこう書きます。

console.log('こんにちは！');
console.log('JavaScriptの学習を始めましょう！');
JavaScript

これでももちろん動きますが、 「この挨拶を何度も使いたい」となったときに、毎回同じコードを書くのは効率がよくありません。

そこで登場するのが 関数です。 関数を使うと、次のようなことができます。

  • 一連の処理に名前をつける
  • その名前を呼び出すだけで、同じ処理を何度でも実行できる
  • 処理の中身をあとからまとめて変更できる

イメージとしては、「自分専用のコマンドを作る」ような感覚です。

関数定義の基本形を理解する

関数定義の基本構文

JavaScriptの基本的な関数定義は、次のような形です。

function 関数名() {
  // ここに実行したい処理を書きます
}
JavaScript

例えば、「挨拶をする関数」を定義するなら、こう書きます。

function greet() {
  console.log('こんにちは！');
  console.log('JavaScriptの学習を始めましょう！');
}
JavaScript

ここで、

  • function → 関数を定義するときに使うキーワードです。
  • greet → 関数の名前です。 「この名前で呼び出せるようになる」と考えてください。
  • { ... } の中 → 関数が実行されたときに動く処理のかたまりです。

関数呼び出しの基本を理解する

関数は「名前＋()」で呼び出す

定義した関数は、次のようにして呼び出します。

javascript

greet(); // 関数 greet を呼び出します

この1行が実行されると、先ほど定義した greet 関数の中身がまとめて実行されます。

挨拶関数の基本例（HTML＋JavaScript）

ブラウザで動かせる形で、挨拶関数を定義して呼び出してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 11 前半：挨拶関数の基礎</title>
</head>
<body>
  <h1>挨拶関数を作って呼び出す</h1>
  <p>ブラウザのコンソールを開いて、挨拶メッセージを確認してください。</p>

  <script>
    // 挨拶をする関数を定義します
    function greet() {
      // ここが関数の「中身」です
      console.log('こんにちは！');
      console.log('JavaScriptの学習を始めましょう！');
    }

    // 関数を呼び出します
    greet(); // これで上の2行の console.log がまとめて実行されます

    console.log('挨拶関数の呼び出しが完了しました。');
  </script>
</body>
</html>

重要ポイントの深掘り

  • 関数定義と関数呼び出しは別物です。 → 「定義」は準備、「呼び出し」は実行です。
  • 関数を定義しただけでは何も起こりません。 → 必ず 関数名(); で呼び出す必要があります。
  • 同じ関数を何度でも呼び出せるので、再利用性が高いコードになります。

関数の再利用という考え方

同じ処理を何度も使うときのメリット

例えば、ページのいろいろな場所で挨拶を表示したいとします。

関数を使わない場合：

console.log('こんにちは！');
console.log('JavaScriptの学習を始めましょう！');

// どこか別の場所でも同じ挨拶をしたい
console.log('こんにちは！');
console.log('JavaScriptの学習を始めましょう！');
JavaScript

関数を使う場合：

function greet() {
  console.log('こんにちは！');
  console.log('JavaScriptの学習を始めましょう！');
}

// 必要な場所で何度でも呼び出せます
greet();
greet();
JavaScript

関数を使うと、

  • 同じ処理を何度も書かなくてよくなる
  • 挨拶の内容を変えたいときに、関数の中身だけ直せばよい
  • コードの見通しがよくなる

というメリットがあります。

実践1：挨拶関数を少し発展させる

名前を受け取って挨拶する関数（基礎の一歩手前）

前半では「引数」の詳しい説明はメインではありませんが、 関数の再利用性をイメージしやすくするために、軽く触れておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 11 前半：名前付き挨拶関数</title>
</head>
<body>
  <h1>名前を受け取って挨拶する関数</h1>
  <p>ブラウザのコンソールを開いて、挨拶メッセージを確認してください。</p>

  <script>
    // 名前を受け取って挨拶する関数を定義します
    function greetWithName(name) {
      console.log(`こんにちは、${name}さん！`);
      console.log('JavaScriptの学習を始めましょう！');
    }

    // 関数を呼び出します
    greetWithName('太郎');
    greetWithName('花子');

    console.log('名前付き挨拶関数の呼び出しが完了しました。');
  </script>
</body>
</html>

ここでは、

  • name という「受け取る値（引数）」を使っています。
  • 呼び出し側で '太郎' や '花子' を渡すことで、挨拶の内容を変えられます。

本格的な引数の話は後半や次のDayで深掘りするとして、 「関数は、同じ処理を少しだけ変えながら再利用できる」というイメージを持っておくと理解が進みます。

実践2：消費税計算関数を作る

消費税計算を言葉で整理する

消費税計算は、次のような処理です。

  • 商品の価格（税抜き）を受け取る
  • 消費税率をかける（例：10%なら 0.1）
  • 税込み価格を計算する
  • 結果を返したり表示したりする

この処理は、いろいろな場面で何度も使いたくなるので、関数にしておくと便利です。

シンプルな消費税計算関数（税率固定）

まずは、消費税率を 10% に固定した関数を作ってみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 11 前半：消費税計算関数（基本）</title>
</head>
<body>
  <h1>消費税計算関数を作る（税率10%固定）</h1>
  <p>ブラウザのコンソールを開いて、計算結果を確認してください。</p>

  <script>
    // 消費税率を定数として定義します（ここでは 10%）
    const TAX_RATE = 0.1;

    // 消費税を計算する関数を定義します
    function calcTax(price) {
      // price は税抜き価格です
      const tax = price * TAX_RATE;      // 消費税額を計算します
      const total = price + tax;         // 税込み価格を計算します

      console.log(`税抜き価格：${price} 円`);
      console.log(`消費税額：${tax} 円`);
      console.log(`税込価格：${total} 円`);

      // 必要に応じて、税込価格を戻り値として返すこともできます
      return total;
    }

    // 関数を呼び出して、消費税計算を行います
    const result1 = calcTax(1000); // 1000円の商品
    const result2 = calcTax(2500); // 2500円の商品

    console.log(`1つ目の商品（税込）：${result1} 円`);
    console.log(`2つ目の商品（税込）：${result2} 円`);

    console.log('消費税計算関数の呼び出しが完了しました。');
  </script>
</body>
</html>

重要ポイントの深掘り

  • const TAX_RATE = 0.1; → 消費税率を定数として定義しておくことで、あとから税率が変わってもここだけ直せば済みます。
  • function calcTax(price) { ... } → price は「税抜き価格」を受け取るための引数です。
  • return total; → 関数の外に「計算結果」を渡すための仕組みです。 → 呼び出し側で const result = calcTax(1000); のように受け取れます。
  • 関数の中で console.log することで、計算過程をわかりやすく表示しています。

関数の再利用性を消費税計算で体感する

同じ計算を何度も使うときのイメージ

消費税計算関数を使うと、次のようなことが簡単にできます。

  • 商品A（1000円）、商品B（2500円）、商品C（500円）など、 いろいろな価格に対して同じ計算を繰り返し使える。
  • 税率が変わったときに、TAX_RATE だけ変更すれば、 すべての計算が自動的に新しい税率で行われる。

関数を使わない場合：

const TAX_RATE = 0.1;

const priceA = 1000;
const taxA = priceA * TAX_RATE;
const totalA = priceA + taxA;

const priceB = 2500;
const taxB = priceB * TAX_RATE;
const totalB = priceB + taxB;

// …同じようなコードが増えていく
JavaScript

関数を使う場合：

const resultA = calcTax(1000);
const resultB = calcTax(2500);
const resultC = calcTax(500);
JavaScript

このように、関数は「処理のパターン」をひとつにまとめて、何度でも使えるようにする道具だと考えると、 その価値がよく見えてきます。

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

最後に、Day 11前半の内容をまとめた練習用テンプレートを示します。 このファイルを保存してブラウザで開くと、挨拶関数と消費税計算関数の両方を試せます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 11 前半：関数の基礎 練習テンプレート</title>
</head>
<body>
  <h1>Day 11 前半：関数の基礎（挨拶関数と消費税計算関数）</h1>
  <p>ブラウザのコンソールを開いて、出力結果を確認してください。</p>

  <script>
    console.log('--- 挨拶関数の例 ---');

    // 挨拶をする関数を定義します
    function greet() {
      console.log('こんにちは！');
      console.log('JavaScriptの学習を始めましょう！');
    }

    // 挨拶関数を呼び出します
    greet();
    greet(); // 同じ関数をもう一度呼び出してみます

    console.log('--- 名前付き挨拶関数の例 ---');

    // 名前を受け取って挨拶する関数を定義します
    function greetWithName(name) {
      console.log(`こんにちは、${name}さん！`);
      console.log('JavaScriptの学習を始めましょう！');
    }

    // 名前付き挨拶関数を呼び出します
    greetWithName('太郎');
    greetWithName('花子');

    console.log('--- 消費税計算関数の例 ---');

    const TAX_RATE = 0.1; // 消費税率（10%）

    // 消費税を計算する関数を定義します
    function calcTax(price) {
      const tax = price * TAX_RATE;
      const total = price + tax;

      console.log(`税抜き価格：${price} 円`);
      console.log(`消費税額：${tax} 円`);
      console.log(`税込価格：${total} 円`);

      return total; // 計算結果を戻り値として返します
    }

    // 消費税計算関数を呼び出します
    const totalA = calcTax(1000);
    const totalB = calcTax(2500);

    console.log(`商品Aの税込価格：${totalA} 円`);
    console.log(`商品Bの税込価格：${totalB} 円`);

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

Day 11 前半のまとめ

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

  • 関数とは「処理のかたまりに名前をつけて、何度でも呼び出せるようにしたもの」であること
  • function 関数名() { ... } という基本的な関数定義の形
  • 関数名(); で関数を呼び出すしくみ
  • 挨拶関数を通して、「同じ処理を何度も使う」感覚を体験したこと
  • 消費税計算関数を通して、「処理をひとつにまとめて再利用する」メリットを実感したこと

ここから先は、引数や戻り値をさらに深掘りしていくことで、 関数が「ただの便利な仕組み」から「プログラムの設計の中心」へと変わっていきます。 まずは、今日の挨拶関数や消費税計算関数を、自分なりに書き換えたり、機能を足したりしながら、 「処理に名前をつけて再利用する」という感覚をじっくり育てていってください。

Day 11：関数の基礎（後半）で「使い回せる処理」を設計する力を育てる

Day 11後半では、前半で触れた 関数の「定義・呼び出し・再利用」を、もう一歩深く掘り下げていきます。 単に「関数を書ける」だけでなく、どう設計すれば使い回しやすくなるかという視点を持つことがテーマです。

ここでは、

  • 関数の「入力」と「出力」という考え方
  • 挨拶関数を「汎用的な部品」に育てる
  • 消費税計算関数を「現場で使える形」に近づける
  • 再利用しやすい関数の書き方・考え方

を、初心者向けにかみ砕いて、ステップバイステップで解説していきます。

関数を「入力→処理→出力」の箱として捉える

関数の3要素を整理する

関数を設計するときは、次の3つを意識するとわかりやすくなります。

  • 入力（引数）：関数に渡す値
  • 処理：関数の中で行う計算や操作
  • 出力（戻り値）：関数から返す結果

これをコードで表すと、次のような形になります。

function 関数名(入力1, 入力2, ...) {
  // 処理
  const 結果 = ...;

  return 結果; // 出力（戻り値）
}
JavaScript

この「入力→処理→出力」という箱のイメージを持てると、 関数が「ただの便利なまとまり」から「プログラムの部品」に見えてきます。

挨拶関数を「汎用的な部品」に育てる

Step 1：前半の挨拶関数を振り返る

前半では、次のようなシンプルな挨拶関数を作りました。

function greet() {
  console.log('こんにちは！');
  console.log('JavaScriptの学習を始めましょう！');
}
JavaScript

これは「固定の挨拶」を何度も使うには十分ですが、 もう少し柔軟に使えるようにしてみます。

Step 2：名前とメッセージを「入力」にする

挨拶の内容を変えたいとき、 「名前」と「メッセージ」を入力として受け取れるようにすると、再利用性がぐっと上がります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 11 後半：汎用的な挨拶関数</title>
</head>
<body>
  <h1>汎用的な挨拶関数を作る</h1>
  <p>ブラウザのコンソールを開いて、挨拶メッセージを確認してください。</p>

  <script>
    // 名前とメッセージを受け取って挨拶する関数を定義します
    function greet(name, message) {
      // name と message は「入力（引数）」です
      console.log(`こんにちは、${name}さん！`);
      console.log(message);
    }

    // 関数を呼び出します（呼び出し側で入力を指定します）
    greet('太郎', 'JavaScriptの学習を始めましょう！');
    greet('花子', '今日もコツコツ進めていきましょう！');

    console.log('汎用的な挨拶関数の呼び出しが完了しました。');
  </script>
</body>
</html>

ここでの重要ポイント

  • name と message は、関数に渡される「入力」です。
  • 関数の中では、入力を使ってメッセージを組み立てています。
  • 呼び出し側で値を変えることで、同じ関数をいろいろな場面で使い回せます。

Step 3：挨拶文を「出力」として返す関数にする

今度は、コンソールに表示するのではなく、 挨拶文を文字列として返す関数にしてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 11 後半：挨拶文を返す関数</title>
</head>
<body>
  <h1>挨拶文を返す関数を作る</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    // 名前を受け取って、挨拶文を「出力（戻り値）」として返す関数です
    function createGreeting(name) {
      const message = `こんにちは、${name}さん！JavaScriptの学習を始めましょう！`;
      return message; // 挨拶文を戻り値として返します
    }

    // 関数を呼び出して、戻り値を変数に受け取ります
    const greetingForTaro = createGreeting('太郎');
    const greetingForHanako = createGreeting('花子');

    // 受け取った挨拶文を表示します
    console.log(greetingForTaro);
    console.log(greetingForHanako);

    console.log('挨拶文を返す関数の動作確認が完了しました。');
  </script>
</body>
</html>

ここでの重要ポイント

  • return message; によって、関数の外に「結果」を渡しています。
  • 呼び出し側では、戻り値を変数に受け取ってから、好きな場所で使えます。
  • 「表示するかどうか」「どこに表示するか」は呼び出し側の責任にできるので、 関数がより汎用的な部品になります。

消費税計算関数を「現場で使える形」に近づける

Step 1：前半の消費税計算関数を振り返る

前半では、税率10%固定の消費税計算関数を作りました。

const TAX_RATE = 0.1;

function calcTax(price) {
  const tax = price * TAX_RATE;
  const total = price + tax;

  console.log(`税抜き価格：${price} 円`);
  console.log(`消費税額：${tax} 円`);
  console.log(`税込価格：${total} 円`);

  return total;
}
JavaScript

ここから、もう少し「現場で使いやすい形」にしていきます。

Step 2：税率を「入力」にして柔軟にする

国や状況によって税率が変わることを考えると、 税率を引数として受け取れるようにすると再利用性が高まります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 11 後半：税率を指定できる消費税計算関数</title>
</head>
<body>
  <h1>税率を指定できる消費税計算関数</h1>
  <p>ブラウザのコンソールを開いて、計算結果を確認してください。</p>

  <script>
    // 税抜き価格と税率を受け取って、税込価格を返す関数です
    function calcTax(price, taxRate) {
      const tax = price * taxRate; // 消費税額を計算します
      const total = price + tax;   // 税込み価格を計算します

      return {
        price: price,
        tax: tax,
        total: total
      }; // 複数の値をまとめて返します
    }

    // 10%の税率で計算します
    const result10 = calcTax(1000, 0.1);
    console.log('--- 税率10%の場合 ---');
    console.log(`税抜き価格：${result10.price} 円`);
    console.log(`消費税額：${result10.tax} 円`);
    console.log(`税込価格：${result10.total} 円`);

    // 8%の税率で計算します
    const result8 = calcTax(1000, 0.08);
    console.log('--- 税率8%の場合 ---');
    console.log(`税抜き価格：${result8.price} 円`);
    console.log(`消費税額：${result8.tax} 円`);
    console.log(`税込価格：${result8.total} 円`);

    console.log('税率を指定できる消費税計算関数の動作確認が完了しました。');
  </script>
</body>
</html>

ここでの重要ポイント

  • price と taxRate の2つが「入力（引数）」です。
  • 戻り値として、price・tax・total をオブジェクトにまとめて返しています。 → 複数の値を返したいときに便利なパターンです。
  • 同じ関数を、税率10%・8%など、状況に応じて使い分けられます。

Step 3：表示ロジックと計算ロジックを分ける

関数を再利用しやすくするためには、 「計算」と「表示」を分ける」という考え方がとても重要です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 11 後半：計算と表示を分けた消費税関数</title>
</head>
<body>
  <h1>計算と表示を分けた消費税計算の設計</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    // 計算専用の関数：税抜き価格と税率から、税込価格などを計算して返します
    function calcTax(price, taxRate) {
      const tax = price * taxRate;
      const total = price + tax;

      return {
        price,
        taxRate,
        tax,
        total
      };
    }

    // 表示専用の関数：計算結果を受け取って、コンソールに表示します
    function printTaxResult(result) {
      console.log('--- 消費税計算結果 ---');
      console.log(`税抜き価格：${result.price} 円`);
      console.log(`税率：${result.taxRate * 100} %`);
      console.log(`消費税額：${result.tax} 円`);
      console.log(`税込価格：${result.total} 円`);
    }

    // 実際の利用例
    const resultA = calcTax(1000, 0.1); // 1000円・税率10%
    const resultB = calcTax(2500, 0.1); // 2500円・税率10%

    printTaxResult(resultA);
    printTaxResult(resultB);

    console.log('計算と表示を分けた消費税計算の動作確認が完了しました。');
  </script>
</body>
</html>

ここでの重要ポイント

  • calcTax は「計算だけ」を担当する関数です。
  • printTaxResult は「表示だけ」を担当する関数です。
  • このように役割を分けることで、
    • 計算ロジックを別の画面やAPIでも再利用しやすくなる
    • 表示方法（コンソール・画面・ファイルなど）を変えたいときに、表示側だけ差し替えればよくなる

関数を「役割ごとに分ける」という発想が、 後々の設計力につながっていきます。

再利用しやすい関数を書くためのチェックポイント

1. 入力と出力がはっきりしているか

  • 何を受け取る関数なのか（引数）
  • 何を返す関数なのか（戻り値）

この2つが明確だと、関数は「使いやすい部品」になります。

2. 関数の名前が「役割」を表しているか

  • greet → 挨拶する
  • createGreeting → 挨拶文を作る
  • calcTax → 消費税を計算する
  • printTaxResult → 消費税計算結果を表示する

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

3. 1つの関数に「役割を詰め込みすぎていないか」

  • 計算と表示を分ける
  • 入力チェックと処理を分ける

など、「1つの関数は1つの責務」という意識を持つと、 関数が再利用しやすく、テストもしやすくなります。

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

最後に、Day 11後半の内容をまとめた練習用テンプレートを示します。 このファイルを保存してブラウザで開くと、汎用的な挨拶関数と、 計算と表示を分けた消費税計算関数をまとめて試せます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 11 後半：関数の再利用 練習テンプレート</title>
</head>
<body>
  <h1>Day 11 後半：関数の再利用と設計</h1>
  <p>ブラウザのコンソールを開いて、出力結果を確認してください。</p>

  <script>
    console.log('--- 汎用的な挨拶関数 ---');

    // 名前とメッセージを受け取って挨拶する関数
    function greet(name, message) {
      console.log(`こんにちは、${name}さん！`);
      console.log(message);
    }

    greet('太郎', 'JavaScriptの学習を始めましょう！');
    greet('花子', '今日も一歩ずつ進んでいきましょう！');

    console.log('--- 挨拶文を返す関数 ---');

    // 名前を受け取って挨拶文を返す関数
    function createGreeting(name) {
      const message = `こんにちは、${name}さん！JavaScriptの学習を始めましょう！`;
      return message;
    }

    const greetingA = createGreeting('太郎');
    const greetingB = createGreeting('花子');

    console.log(greetingA);
    console.log(greetingB);

    console.log('--- 計算と表示を分けた消費税計算 ---');

    // 計算専用の関数
    function calcTax(price, taxRate) {
      const tax = price * taxRate;
      const total = price + tax;

      return {
        price,
        taxRate,
        tax,
        total
      };
    }

    // 表示専用の関数
    function printTaxResult(result) {
      console.log('--- 消費税計算結果 ---');
      console.log(`税抜き価格：${result.price} 円`);
      console.log(`税率：${result.taxRate * 100} %`);
      console.log(`消費税額：${result.tax} 円`);
      console.log(`税込価格：${result.total} 円`);
    }

    const taxResultA = calcTax(1000, 0.1);
    const taxResultB = calcTax(2500, 0.1);

    printTaxResult(taxResultA);
    printTaxResult(taxResultB);

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

Day 11 後半のまとめ

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

  • 関数を「入力→処理→出力」の箱として捉えること
  • 挨拶関数を、名前やメッセージを入力として受け取る汎用的な部品に育てたこと
  • 消費税計算関数を、税率や表示方法を変えられる柔軟な設計にしたこと
  • 計算と表示を分けることで、関数の再利用性と拡張性が高まること

ここまでの関数の感覚が身についてくると、 プログラムを「関数という部品の組み合わせ」として考えられるようになっていきます。 挨拶・計算・表示など、身近な処理をどんどん関数化しながら、 「処理に名前をつけて再利用する」という感覚をさらに育てていってください。

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