引数と戻り値を理解しよう

学習の目標

本章では、以下の内容を学習します。

引数の渡し方と受け取り方を理解する
return文による戻り値の仕組みを学ぶ
複数の引数を扱う方法を習得する
デフォルト引数の設定方法を理解する

はじめに

前回の章では、基本的な関数の作り方を学びました。しかし、これまでに作った関数は、毎回同じ処理しかできませんでした。

実際のプログラムでは、状況に応じて異なる処理を行いたいことが多くあります。たとえば、挨拶をする関数でも「田中さん、こんにちは」「佐藤さん、こんにちは」のように、相手の名前に応じて内容を変えたいでしょう。

そこで役立つのが引数と戻り値です。引数を使うことで関数に情報を渡すことができ、戻り値を使うことで関数から結果を受け取ることができるようになります。

引数とは何か

引数とは、関数に渡すデータのことです。コーヒーメーカーの例で言うと、豆の種類や水の量のように、関数の動作を変えるための「材料」だと考えることができます。

引数を使うことで、同じ関数でも、渡すデータによって異なる結果を得ることができるようになります。

HTMLファイルで引数を試してみよう

それでは、実際に引数を使った関数を作ってみましょう。VS Codeで新しいHTMLファイルargument-test.htmlを作成してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引数のテスト</title>
</head>
<body>
    <h1>引数のテスト</h1>
    
    <script>
        // 名前を受け取って挨拶する関数
        function greet(name) {
            console.log("こんにちは、" + name + "さん！");
        }
        
        // 関数を呼び出して引数を渡す
        greet("田中");
        greet("佐藤");
        greet("山田");
    </script>
</body>
</html>

このHTMLファイルを保存してブラウザで開き、開発者ツールのConsoleを確認してください。以下のような表示が現れるはずです。

こんにちは、田中さん！
こんにちは、佐藤さん！
こんにちは、山田さん！

引数の仕組みを理解しよう

上記のコードを詳しく見てみましょう。関数の定義部分では、function greet(name)のように、括弧の中にnameという名前を書いています。これが引数です。

関数を呼び出すときは、greet("田中")のように、括弧の中に実際の値を書きます。この値が関数の中でnameという変数として使えるようになります。

function greet(name) {
    // ここで name は "田中" という値になる
    console.log("こんにちは、" + name + "さん！");
}

greet("田中"); // "田中" が引数として渡される

引数は、関数の中でのみ使える特別な変数だと考えることができます。関数が呼び出されるたびに、新しい値が設定されます。

複数の引数を扱ってみよう

関数には、複数の引数を渡すこともできます。HTMLファイルに新しいコードを追加してみましょう。

<script>
    // 名前を受け取って挨拶する関数（これまでの例）
    function greet(name) {
        console.log("こんにちは、" + name + "さん！");
    }
    
    // 名前と年齢を受け取る関数を追加
    function introduce(name, age) {
        console.log("私の名前は" + name + "です。");
        console.log("年齢は" + age + "歳です。");
    }
    
    // 複数の引数を渡して関数を呼び出す
    introduce("田中", 25);
    introduce("佐藤", 30);
    
    // 引数の順番に注意
    introduce("山田", 28);
</script>

このコードを保存して更新すると、Consoleに以下のように表示されます。

私の名前は田中です。
年齢は25歳です。
私の名前は佐藤です。
年齢は30歳です。
私の名前は山田です。
年齢は28歳です。

複数の引数を使う場合は、カンマ（,）で区切って書きます。また、引数を渡すときも同じ順番で、カンマで区切って渡す必要があります。

引数の順番について

複数の引数を使う場合、引数の順番がとても大切です。関数を定義するときの順番と、呼び出すときの順番が一致している必要があります。

function introduce(name, age) {
    // name が最初、age が2番目
    console.log("私の名前は" + name + "です。");
    console.log("年齢は" + age + "歳です。");
}

introduce("田中", 25);  // 正しい順番
introduce(25, "田中");  // 間違った順番 - おかしな結果になる

もし順番を間違えると、「私の名前は25です。年齢は田中歳です。」のような変な結果になってしまいます。

戻り値とは何か

これまでの関数は、すべてconsole.log()を使って結果を表示していました。しかし、関数の処理結果を他の場所で使いたい場合もあります。

そんな時に使うのが戻り値です。戻り値とは、関数が処理を終えた後に返す値のことです。return文を使って、関数の結果を返すことができます。

return文を使ってみよう

戻り値を使った関数を作ってみましょう。HTMLファイルに以下のコードを追加してください。

<script>
    // 2つの数値を足し算して結果を返す関数
    function add(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);
    
    // 戻り値を直接計算に使うこともできる
    const total = add(sum1, sum2);
    console.log("合計: " + total);
</script>

このコードを実行すると、Consoleに以下のように表示されます。

3 + 5 = 8
10 + 20 = 30
合計: 38

return文の働き

return文は、関数の処理を終了して、指定した値を関数の呼び出し元に返します。上記の例では、add(3, 5)を呼び出すと、関数内で計算された結果の8が返され、それがsum1という変数に代入されます。

function add(a, b) {
    const result = a + b;
    return result; // この値が関数の戻り値になる
}

const sum1 = add(3, 5); // sum1 には 8 が代入される

戻り値を使うことで、関数の計算結果を他の処理で活用することができるようになります。

return文の後の処理について

return文が実行されると、その時点で関数の処理は終了します。return文の後に書かれたコードは実行されません。

<script>
    function testReturn() {
        console.log("関数開始");
        return "戻り値";
        console.log("この行は実行されない"); // ここは実行されない
    }
    
    const result = testReturn();
    console.log("受け取った値: " + result);
</script>

このコードを実行すると、以下のように表示されます。

関数開始
受け取った値: 戻り値

「この行は実行されない」というメッセージは表示されません。これは、return文が実行された時点で関数が終了するためです。

より実用的な関数を作ってみよう

これまで学んだ引数と戻り値を組み合わせて、いくつかの関数を作ってみましょう。

<script>
    // 文字列の長さを返す関数
    function getLength(text) {
        return text.length;
    }
    
    // 2つの数値の大きい方を返す関数
    function getMax(num1, num2) {
        if (num1 > num2) {
            return num1;
        } else {
            return num2;
        }
    }
    
    // 消費税込みの価格を計算する関数
    function addTax(price) {
        const tax = price * 0.1;
        return price + tax;
    }
    
    // 関数をテストしてみる
    console.log("=== 関数のテスト ===");
    
    const message = "こんにちは";
    console.log("「" + message + "」の文字数: " + getLength(message));
    
    console.log("15と23の大きい方: " + getMax(15, 23));
    
    console.log("1000円の税込価格: " + addTax(1000) + "円");
</script>

このコードを実行すると、以下のような結果が表示されます。

=== 関数のテスト ===
「こんにちは」の文字数: 5
15と23の大きい方: 23
1000円の税込価格: 1100円

これらの関数は、それぞれ引数を受け取って何らかの計算や処理を行い、その結果を戻り値として返しています。

デフォルト引数を使ってみよう

時には、引数が渡されなかった場合に、あらかじめ決められた値を使いたいことがあります。そんな時に便利なのがデフォルト引数です。

<script>
    // デフォルト引数を使った関数
    function greetWithDefault(name = "ゲスト") {
        console.log("こんにちは、" + name + "さん！");
    }
    
    // 引数を渡した場合
    greetWithDefault("田中");
    
    // 引数を渡さなかった場合
    greetWithDefault();
    
    // 複数のデフォルト引数
    function calculateArea(width = 10, height = 5) {
        const area = width * height;
        return area;
    }
    
    console.log("幅20、高さ15の面積: " + calculateArea(20, 15));
    console.log("幅のみ指定（高さはデフォルト）: " + calculateArea(30));
    console.log("引数なし（両方デフォルト）: " + calculateArea());
</script>

このコードを実行すると、以下のように表示されます。

こんにちは、田中さん！
こんにちは、ゲストさん！
幅20、高さ15の面積: 300
幅のみ指定（高さはデフォルト）: 150
引数なし（両方デフォルト）: 50

デフォルト引数を設定するには、関数の定義で引数名 = デフォルト値と書きます。引数が渡されなかった場合、自動的にデフォルト値が使われます。

引数と戻り値を組み合わせた応用例

最後に、引数と戻り値を組み合わせて、少し複雑な処理を行う関数を作ってみましょう。

<script>
    // 成績を判定する関数
    function judgeGrade(score) {
        if (score >= 90) {
            return "優秀";
        } else if (score >= 70) {
            return "良好";
        } else if (score >= 60) {
            return "普通";
        } else {
            return "要努力";
        }
    }
    
    // 学生の情報を表示する関数
    function showStudentInfo(name, score) {
        const grade = judgeGrade(score);
        console.log("学生名: " + name);
        console.log("点数: " + score + "点");
        console.log("評価: " + grade);
        console.log("---");
    }
    
    // 複数の学生の情報を表示
    showStudentInfo("田中", 85);
    showStudentInfo("佐藤", 92);
    showStudentInfo("山田", 58);
</script>