【6日でできるJavaScript入門】関数の戻り値
プログラミングにおいて「関数の戻り値」は、関数が何らかの計算や処理を行った後、その結果を関数の呼び出し元へ返す仕組みです。
「引数」は関数にデータを渡す役割ですが、「戻り値」は返す役割を持っています。
たとえば「合計値を計算する関数」は、計算後の合計値を呼び出し元へ返します。これが「戻り値」です。
| 項目 | 説明 |
|---|---|
| 引数 | 関数に渡す値・データ |
| 戻り値 | 関数から返される値。呼び出し元で利用できる |
| return | 戻り値を返すために使うキーワード |
イメージ
関数の呼び出し元 ⇒ (引数) ⇒ 関数 [処理] ⇒ (戻り値) ⇒ 呼び出し元
１．戻り値とは？
「戻り値」とは、関数が計算や処理した結果を返す値です。
呼び出し元はその値を受け取って、さらに別の処理に活用できます。
| 用語 | 説明例 |
|---|---|
| 関数 | 何らかの処理や計算をまとめたもの |
| 戻り値 | 処理結果を呼び出し元へ返す値 |
| 返さない関数 | 戻り値がない（例: 画面に表示だけする） |
1.1. 戻り値の使い方
関数の戻り値は、returnキーワードで指定します。
戻り値がある関数は、呼び出し元で「変数」に代入して利用できます。
| 使い方 | 例 |
|---|---|
| 値を返す | return 合計値; |
| 変数に受け取る | let x = 関数名(引数); |
| 返さない | return; またはreturnなし |
２．戻り値を受け取る方法
「戻り値」を受け取るには、関数呼び出しの結果を変数で受け取る必要があります。
HTMLから直接呼ぶ場合（例：ボタンのonclick属性など）だと、受け取り用の変数がないため、戻り値を利用しにくいです。
| パターン | 利用例 | 説明 |
|---|---|---|
| 変数に代入する | let result = add(3, 7); | 戻り値が変数に入る |
| 直接関数のみ呼ぶ | add(3, 7); | 戻り値はどこにも使われない |
| イベント属性（onclick等） | <button onclick="add(3,7)">計算</button> | 戻り値を受け取れない |
2.1. サンプル：合計値を計算して返す
「2つの数字を入力して、合計を計算し画面に表示する」サンプル
ファイル名： lesson17-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>🧮 合計計算ツール</title>
</head>
<body>
<h1>🧮 合計計算ツール</h1>
<p>2つの数値を入力してください：</p>
<input type="number" id="num1" value="5">
<input type="number" id="num2" value="7">
<button onclick="showSum()">合計を表示</button>
<div id="output">ここに合計が表示されます。</div>
<script>
// 合計を計算して返す関数
function calcSum(a, b) {
return a + b;
}
// 入力値を取得して合計を表示する関数
function showSum() {
const n1 = Number(document.getElementById('num1').value);
const n2 = Number(document.getElementById('num2').value);
let sum = calcSum(n1, n2); // 戻り値を変数sumで受け取る
document.getElementById('output').textContent = `合計は ${sum} です。`;
}
</script>
</body>
</html>ブラウザの出力例
解説
| 関数 | 役割/説明 |
|---|---|
| calcSum(a, b) | 2つの数値を受け取り、その合計を戻り値で返す |
| showSum() | 入力値取得→calcSum()を呼び出し→合計を画面表示 |
ポイント
calcSum関数はreturnで合計値を返すshowSum関数でその戻り値をsum変数に代入- 戻り値を使って画面に表示している
３．returnを使うときの注意点
returnが実行されると、その時点で関数の処理は終了します。
したがって、returnより後に書いた処理は実行されません。
| ケース | 例 | 挙動 |
|---|---|---|
| 関数の最後 | return x; | 正常 |
| 途中でreturn | if(...) { return y; } | 条件次第で早期終了 |
| returnの後の処理 | return z; console.log('実行されない'); | return後は実行されない |
3.1. 早期終了の例
function getDiscountedPrice(price) {
if (price <= 0) {
return '価格が無効です';
}
return price * 0.85; // 15%OFF
}- priceが0以下なら即returnし、それ以降は実行されない
４．関数を定義する順番
JavaScriptでは、トップレベルで定義した関数は、記述順に関係なく同じスクリプト内で自由に呼び出せます。
ただし、関数式やアロー関数などの場合は、定義より後で呼び出すとエラーになります。
| パターン | 利用例 | 呼び出し可能性 |
|---|---|---|
| function宣言 | function foo(){} | 定義順に関係なく呼び出せる。 |
| 関数式（var/let） | let bar = function() {}; | 定義後でないと呼び出せない。 |
| アロー関数 | const baz = () => {}; | 定義後でないと呼び出せない。 |
例：
showMessage(); // OK
function showMessage() {
alert('Hello!');
}５．true/falseを返すreturn
判定結果（真偽値）を返す関数は、if文などと組み合わせてよく使われます。
| 用途 | 例 | 戻り値 |
|---|---|---|
| 条件判定 | isEven(4) | true |
| 条件判定 | isEven(5) | false |
5.1. サンプル：偶数判定
function isEven(num) {
return num % 2 === 0;
}使い方例
if (isEven(8)) {
console.log('8は偶数です');
}出力例
8は偶数ですまとめ
- 戻り値は関数が処理した結果を返すための仕組みです。
returnで戻り値を指定し、呼び出し元は変数で受け取れます。returnが実行されると関数はそこで終了します。- true/falseを返すことで条件分岐にも活用できます。
- 関数定義の形式によっては呼び出し順に注意しましょう。