では return（関数から値を返す）を 超やさしく、ステップを追って、例題付き で詳しく解説します。初心者が「意味はわかるけど実際どう使うの？」とつまずきやすい点を重点的にカバーします。
1. まず、return の超ざっくりイメージ
関数は「箱」です。return は箱の中から何か（値）を取り出して呼び出し元へ渡すための口です。
箱の中で計算や処理をして、その「結果」を外で使いたいときに return を使います。
2. 基本の書き方（シンプル）
function add(a, b) {
return a + b;
}
const result = add(2, 3); // result に 5 が入る
console.log(result); // -> 5
説明：add(2,3) を呼ぶと、関数内の a + b が計算され、その値が return によって呼び出し元に渡されます。
3. return と console.log の違い（超重要）
console.log()：値を「表示するだけ」。表示はされるが外でその値を使えない（自動的には戻らない）。return：値を「返す」。変数に受け取ってプログラムの別の場所で使える。
例：
function printSum(a, b) {
console.log(a + b); // 表示はされるが値は返さない
}
function getSum(a, b) {
return a + b; // 値を返す
}
const x = printSum(2, 3); // コンソールに 5 が出るが、x は undefined
const y = getSum(2, 3); // y は 5
console.log(x); // -> undefined
console.log(y); // -> 5
4. return がない・値を書かない場合は undefined
returnを書かない、またはreturn;とだけ書くと、戻り値はundefinedになります。
function noReturn() {
const a = 1 + 2;
// return が無い
}
console.log(noReturn()); // -> undefined
5. 途中で処理を終えたい（ガード句／早期リターン）
条件に合わないときだけ早く抜けたい場合、return を途中に書きます。これを「ガード句」と呼ぶこともあります。
function buyDrink(age) {
if (age < 20) {
return '購入不可'; // ここで関数終了（以降の処理は実行されない）
}
// 年齢が 20 以上なら続ける
return '購入OK';
}
console.log(buyDrink(18)); // -> '購入不可'
console.log(buyDrink(25)); // -> '購入OK'
6. 複数の値を返したいとき
JS の return は 1 つの値しか直接返せませんが、オブジェクトや配列を返せば複数の値をまとめて返せます。
function getUser() {
return { name: 'Aoi', age: 28 };
}
const user = getUser();
console.log(user.name); // -> 'Aoi'
console.log(user.age); // -> 28
// 配列でも可
function splitFullName(fullName) {
const parts = fullName.split(' ');
return parts; // ['First', 'Last']
}
const [first, last] = splitFullName('Taro Yamada');
7. Arrow 関数の return（短い形と長い形）
- 中かっこ
{}を使わない短い形は式の評価結果が自動で返る（暗黙の return）。 - 中かっこを使うと
returnを明示する必要がある。
// 短い形（自動で返る）
const mul = (x, y) => x * y;
console.log(mul(2, 3)); // -> 6
// 長い形（中かっこあり） => return が必要
const mul2 = (x, y) => {
const r = x * y;
return r;
};
初心者がよくミスする例：
const add = (a, b) => { a + b }; // これだと undefined が返る！（return がない）
const addCorrect = (a, b) => a + b; // OK
8. 実践例：円の面積を計算して表示する（段階的）
- 値を返さないパターン（ただ表示するだけ）：
function printArea(r) {
console.log(r * r * Math.PI);
}
printArea(2); // -> 12.566370614359172
- 値を返すパターン（返して別で使う）：
function calcArea(r) {
return r * r * Math.PI;
}
const area = calcArea(2);
console.log('面積は', area); // -> 面積は 12.566370614359172
const rounded = Math.round(area); // 他の処理にも使える
使い分けポイント：他でその結果を使うなら return する。
9. よくある初心者の落とし穴（チェックリスト）
returnのあとに書いた処理は実行されない →returnが早すぎないか確認。- arrow 関数で中かっこ
{}を使うと自動 return されない（returnを書く必要あり）。 - 関数に
returnが無いとundefinedが返る。 console.logとreturnを混同しない（表示と返すは別）。
10. 例題（手を動かして確認） — 練習問題と解答
例題1：偶数かどうか判定する関数を作って、結果を受け取って表示してみよう
function isEven(n) {
return n % 2 === 0;
}
console.log(isEven(4)); // -> true
console.log(isEven(7)); // -> false
例題2：配列の合計を返す関数を作って、合計を 2 倍にして出力しよう
function sumArray(arr) {
let s = 0;
for (let i = 0; i < arr.length; i++) {
s += arr[i];
}
return s;
}
const total = sumArray([1,2,3,4]); // 10
console.log(total * 2); // -> 20
例題3（少し応用）：計算結果とメッセージをまとめて返す
function divide(a, b) {
if (b === 0) {
return { ok: false, message: '0 で割れません' };
}
return { ok: true, result: a / b };
}
const r1 = divide(10, 2);
if (r1.ok) console.log(r1.result); // -> 5
const r2 = divide(5, 0);
if (!r2.ok) console.log(r2.message); // -> '0 で割れません'
11. ミニ演習
- 関数
greet(name)を作り、"Hello, <name>!"を返すようにしよう。 multiplyAll(arr, factor)を作り、配列内の全要素にfactorを掛けた新しい配列を返そう（元配列を変更しないこと）。
解答
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('Miki')); // -> Hello, Miki!
function multiplyAll(arr, factor) {
const out = [];
for (let i = 0; i < arr.length; i++) {
out.push(arr[i] * factor);
}
return out;
}
console.log(multiplyAll([1,2,3], 3)); // -> [3,6,9]
まとめ（覚えておきたいポイント）
returnは関数の「結果」を外に渡すために使う。console.logは表示、returnは値を返す（用途が違う）。returnがないとundefined。- 複数のデータを返したければオブジェクトか配列で返す。
- arrow 関数の書き方で
returnの有無を間違いやすいので注意。