JavaScript | 基礎構文：関数 – 戻り値

JavaScript JavaScript
2025.12.14
スポンサーリンク

戻り値ってそもそも何者？

戻り値は、
「関数が“仕事を終えたあとに外に渡す結果”」 です。

関数は「何かをして終わり」のときもあれば、
「計算して、その結果を返してほしい」ときもあります。

その「結果」を外に返すために使うのが return、
そして return で返される値が「戻り値」です。

一番シンプルな戻り値の例

足し算をして結果を返す関数

まずは、戻り値の基本形から。

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

const result = add(3, 5);
console.log(result); // 8
JavaScript

ここで起きていることを分解すると、

  1. add(3, 5) を呼び出す
  2. 関数の中で a + b が計算される（3 + 5 → 8）
  3. return 8; が実行される
  4. 呼び出し元の add(3, 5) の場所が「8」に置き換わる

つまり、
「add(3, 5) という“呼び出し”は、最終的に“8という値”になる」
というイメージです。

ここが重要です。
戻り値は「関数呼び出しそのものの“値”になるもの」 です。
だからこそ、変数に代入したり、他の計算に使えます。

戻り値がない関数はどうなる？

return を書かないときの挙動

return を書かない関数も書けます。

function greet(name) {
  console.log("こんにちは、" + name + "さん");
}

const result = greet("太郎");
console.log("result:", result);
JavaScript

このとき、コンソールにはこう出ます。

こんにちは、太郎さん
result: undefined
JavaScript

greet は console.log するだけで、return を書いていません。
その場合、戻り値は自動的に undefined になります。

ここが重要です。
「return を書かなかった関数の戻り値は undefined」
これは仕様です。

なので、
「何かを計算して、その結果を使いたい」関数では、
必ず return を書く必要があります。

return は「結果を返す」と同時に「関数を終わらせる」

途中で処理を打ち切る

return には2つの意味があります。

  1. 値を返す
  2. その時点で関数の処理を終了する

例えば、こういう関数を見てください。

function checkAge(age) {
  if (age < 18) {
    return "未成年です";
  }

  console.log("ここは18歳以上のときだけ実行される");
  return "成人です";
}

console.log(checkAge(16)); // 未成年です
console.log(checkAge(20)); // 成人です
JavaScript

age = 16 のときは、
if (age < 18) が true なので、最初の return "未成年です"; が実行されます。
その瞬間、関数はそこで終了し、
console.log("ここは18歳以上のときだけ実行される"); は実行されません。

ここが重要です。
return は「答えを返す」と同時に「ここで終わり」という区切りでもある。
条件分岐で早めに抜けたいときにもよく使われます。

戻り値を使うとコードがどう変わるか

戻り値を使わないパターン

例えば、税込価格を計算して表示するだけの関数。

function showPrice(price) {
  const tax = price * 0.1;
  const total = price + tax;
  console.log("税込価格:", total);
}

showPrice(1000);
JavaScript

この関数は「表示するだけ」で、結果を返していません。
他の場所で「この税込価格をさらに別の計算に使いたい」となったら困ります。

戻り値を使うパターン

同じ処理を「結果を返す関数」にしてみます。

function calcPriceWithTax(price) {
  const tax = price * 0.1;
  const total = price + tax;
  return total;
}

const total = calcPriceWithTax(1000);
console.log("税込価格:", total);
console.log("2個分:", total * 2);
JavaScript

こうすると、

「表示する」処理と
「計算する」処理を分けられる

計算結果を、他の計算にも使い回せる

というメリットが生まれます。

ここが重要です。
戻り値を意識すると、「計算する関数」と「表示する関数」を分けて設計できる。
これはコードをきれいに保つうえで、とても大事な考え方です。

戻り値の型はいろいろ

数値・文字列・真偽値・オブジェクト・配列…なんでも返せる

戻り値は、JavaScript の値なら何でも返せます。

数値を返す：

function double(n) {
  return n * 2;
}
JavaScript

文字列を返す：

function greet(name) {
  return "こんにちは、" + name + "さん";
}
JavaScript

真偽値を返す：

function isAdult(age) {
  return age >= 18;
}
JavaScript

オブジェクトを返す：

function createUser(name, age) {
  return {
    name,
    age,
    isAdult: age >= 18,
  };
}
JavaScript

配列を返す：

function range(from, to) {
  const result = [];
  for (let i = from; i <= to; i++) {
    result.push(i);
  }
  return result;
}
JavaScript

ここが重要です。
「この関数は何を返すべきか？」を考えるとき、
“どんな形の値が一番使いやすいか”を意識すると、関数設計が一段うまくなります。

戻り値を無視してもいいが、意識はしておく

戻り値を使わない呼び出し

戻り値は、必ずしも受け取らなくても構いません。

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

add(1, 2); // 何もしていないが、エラーにはならない
JavaScript

この場合、add(1, 2) の結果（3）はどこにも使われず、捨てられます。

ただし、
「この関数は結果を返すものなのか」「副作用（表示・更新など）をするものなのか」
は自分の中で意識しておくとよいです。

ここが重要です。
「戻り値を返す関数」と「何かをするだけの関数（戻り値は気にしない）」を
自分の中で区別して設計すると、コードの意図がクリアになります。

戻り値と早期リターン（early return）

ネストを浅くするテクニック

return をうまく使うと、
条件分岐のネストを浅くできます。

悪い例：

function process(user) {
  if (user) {
    if (user.isActive) {
      console.log("処理します");
    } else {
      console.log("アクティブではありません");
    }
  } else {
    console.log("ユーザーがいません");
  }
}
JavaScript

早期リターンを使う例：

function process(user) {
  if (!user) {
    console.log("ユーザーがいません");
    return;
  }

  if (!user.isActive) {
    console.log("アクティブではありません");
    return;
  }

  console.log("処理します");
}
JavaScript

「ダメな条件のときは早めに return して抜ける」ことで、
「良いケース」の処理を最後にスッキリ書けます。

ここが重要です。
戻り値（というより return）は、「結果を返す」だけでなく
「ここで処理を終える」という制御にも使える。
これを意識すると、読みやすい関数を書きやすくなります。

初心者として「戻り値」で本当に押さえてほしいこと

戻り値は、
「関数が外に渡す結果」。

return 値; と書いた瞬間、
その関数はそこで終わり、
呼び出し元では「関数呼び出しの場所」がその値に置き換わる。

return を書かなければ、戻り値は undefined。
「計算して結果を使いたい関数」では、必ず return を書く。

戻り値を意識すると、

「計算する関数」と「表示する関数」を分けられる
関数の責務がはっきりする
早期リターンで読みやすい条件分岐を書ける

もし今書いている関数が、
中で計算しているのに return していないなら、
「この結果、外から使えた方が便利じゃない？」と一度立ち止まってみてください。

その瞬間から、
あなたの関数は「ただ動くだけ」から「再利用できる部品」に変わっていきます。

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