はい、承知いたしました。JavaScriptのreturn文の役割と具体的な使い方について、詳細な説明を含む記事を作成します。約5000語を目指し、多角的な視点から解説します。
JavaScriptのreturn文の役割と具体的な使い方を徹底解説
はじめに：JavaScriptにおける関数の心臓部、return文とは？
JavaScriptでプログラミングを行う上で、関数は避けて通れない非常に重要な概念です。関数は、特定の処理をひとまとまりにし、必要な時に何度でも呼び出して実行できる便利な仕組みです。例えば、「二つの数値を足し合わせる」という処理を関数として定義すれば、いつでも好きな二つの数値を渡してその合計を得ることができます。
しかし、関数がただ処理を実行するだけでは不十分な場合があります。多くの場合、私たちは関数に何らかの「仕事」を依頼し、その「結果」を受け取りたいと考えます。例えば、先ほどの「二つの数値を足し合わせる」関数に期待するのは、計算結果である「合計値」ですよね。あるいは、「ユーザーが入力したパスワードが要件を満たしているかチェックする」関数であれば、そのチェックが「成功したか失敗したか」という情報が必要になります。
ここで登場するのが、JavaScriptのreturn文です。return文は、関数がその仕事を終えた際に、呼び出し元に対して何らかの情報や結果を「返す」ための特別な命令です。それはまるで、あなたがお店で商品を購入し、代金を支払った後に「商品」を受け取るようなものです。関数が「お店」、商品の代金が「引数」、そしてreturn文によって返される「商品」が「戻り値（返り値）」に対応します。
return文の役割は、単に関数の計算結果を返すことだけではありません。実は、return文は「関数の実行を終了させる」という、もう一つの非常に重要な役割も持っています。これは、まるであなたがお店での買い物を終えて、レジを済ませたらすぐに店を出るようなものです。return文が実行された時点で、関数の中のそれ以降のコードは一切実行されずに処理が終了します。
このように、return文は「値を返す」と「関数の実行を終了する」という二つの主要な役割を担っており、これらを理解し適切に使いこなすことは、効率的で読みやすいJavaScriptコードを書く上で不可欠です。
この記事では、JavaScriptのreturn文について、その基本的な役割から具体的な使い方、注意点、そしてより効果的な使い方までを徹底的に掘り下げて解説します。例え話や豊富なコード例を交えながら、初心者の方でもしっかりと理解できるよう丁寧に説明していきますので、ぜひ最後までお読みください。
1. return文の基本的な役割：関数の出口と結果の伝達
まずは、return文が持つ二つの基本的な役割について、それぞれ詳しく見ていきましょう。
役割1: 関数の「出口」としての役割（実行の終了）
関数が呼び出されると、その関数の内部に書かれたコードが上から順番に実行されていきます。これはまるで、一本の道を進んでいくようなものです。通常、関数のコードは一番最後まで実行されると終了します。しかし、途中で特定の条件を満たした場合など、最後まで実行せずに途中で処理を中断し、関数から抜け出したい場合があります。
return文は、まさにこの「関数から抜け出す」、つまり「関数の実行を終了させる」役割を果たします。return文が実行された瞬間に、関数の中のそれ以降に書かれたコードはすべて無視され、関数の実行は即座に停止します。そして、関数の呼び出し元に処理が戻ります。
例:
“`javascript
function processData(data) {
console.log(“データの処理を開始します…”);
if (data === null || data === undefined) {
console.log(“データが無効です。処理を中断します。”);
return; // ここで関数の実行が終了します
}
console.log(“データが有効です。さらに処理を続けます…”);
// ここにデータを使った別の処理が続く…
console.log(“データの処理が完了しました。”);
}
processData(null);
console.log(“——————–“);
processData(“有効なデータ”);
“`
実行結果:
“`
データの処理を開始します…
データが無効です。処理を中断します。
データの処理を開始します…
データが有効です。さらに処理を続けます…
データの処理が完了しました。
“`
この例を見ると、processData(null)を呼び出した場合、data === nullの条件が真となり、ifブロック内のreturn;が実行されています。その結果、console.log("データが有効です。さらに処理を続けます...");やconsole.log("データの処理が完了しました。");といった、return;より後に書かれたコードは一切実行されていないことがわかります。
一方、processData("有効なデータ")を呼び出した場合は、条件が偽となりreturn;は実行されず、関数内のすべてのコードが最後まで実行されています。
このように、return文は関数の実行フローを制御し、特定の条件下で早期に処理を終了させるために非常に強力な手段となります。これを「早期リターン（Early Return）」と呼びます。早期リターンは、特にエラーハンドリングや入力値の検証などにおいて、コードのネストを減らし、可読性を高めるテクニックとして広く使われます。
役割2: 関数の「結果」を呼び出し元に伝える役割（値の返却）
return文のもう一つの、そして多くの人にとってより馴染み深い役割は、関数が計算したり生成したりした「結果」を、その関数を呼び出したコードに引き渡すことです。関数が何らかの処理を行い、その結果が必要な場合、return文に続けてその結果となる値を指定します。この返される値を「戻り値（Return Value）」または「返り値」と呼びます。
例:
“`javascript
function add(a, b) {
const result = a + b;
return result; // 計算結果を返します
}
function multiply(x, y) {
return x * y; // 計算結果を直接返します
}
let sum = add(5, 3); // add関数を呼び出し、戻り値を変数sumに代入
let product = multiply(4, 6); // multiply関数を呼び出し、戻り値を変数productに代入
console.log(“合計:”, sum); // 出力: 合計: 8
console.log(“積:”, product); // 出力: 積: 24
“`
この例では、add関数はaとbを足した結果を計算し、その結果をreturn result;で返しています。multiply関数も同様に、計算結果をreturn x * y;で直接返しています。
add(5, 3)を呼び出したとき、関数の内部でresultが8になり、return 8;が実行されます。この8という値が、関数呼び出しの箇所（add(5, 3)）に「返って」きます。そして、その返ってきた値（8）が変数sumに代入されます。multiply関数についても同様です。
このように、return文の後に値を指定することで、関数は自分が処理した結果を呼び出し元に「手渡す」ことができます。これにより、プログラムは関数の計算結果を利用して、次の処理を進めることが可能になります。
二つの役割の連携:
return文が値を指定して実行された場合、この二つの役割は同時に果たされます。つまり、指定された値を呼び出し元に返し、その直後に関数の実行を終了します。
例:
“`javascript
function calculateDiscountedPrice(price, discountPercentage) {
if (price < 0 || discountPercentage < 0 || discountPercentage > 100) {
console.log(“無効な入力値です。”);
return -1; // 無効な場合は特定の値(-1)を返して終了
}
const discountAmount = price * (discountPercentage / 100);
const discountedPrice = price – discountAmount;
return discountedPrice; // 有効な場合は計算結果を返して終了
}
let price1 = calculateDiscountedPrice(1000, 10); // 有効な入力
console.log(“割引価格1:”, price1); // 出力: 割引価格1: 900
let price2 = calculateDiscountedPrice(-100, 10); // 無効な入力
console.log(“割引価格2:”, price2); // 出力: 無効な入力値です。 割引価格2: -1
“`
この例では、入力値が無効な場合は、エラーメッセージを表示した後にreturn -1;が実行されます。これにより、ifブロック以降の計算処理はスキップされ、関数は値-1を返して終了します。一方、入力値が有効な場合は、ifブロックはスキップされ、計算結果がreturn discountedPrice;によって返され、関数が終了します。
このように、return文は「何を返すか」と「いつ終了するか」を同時に制御する、関数の非常に基本的ながら強力なメカニズムなのです。
2. 値の返却：何をどのように返すのか
return文は、JavaScriptで扱えるほとんどすべての種類の値を返すことができます。これには、プリミティブ型からオブジェクト型までが含まれます。
return文の基本的な構文は以下の通りです。
javascript
return expression;
ここで、expressionは返したい値を評価する式です。変数、リテラル（固定値）、計算式、関数呼び出しなど、値を生成するものであれば何でも指定できます。
値を返さない場合は、単純にreturn;と書くこともできます（これについては後述します）。
それでは、様々なデータ型を返す例を見ていきましょう。
プリミティブ型を返す
JavaScriptのプリミティブ型（文字列、数値、真偽値、null、undefined、Symbol、BigInt）は、関数から直接返すことができます。
“`javascript
// 数値を返す
function getZero() {
return 0;
}
// 文字列を返す
function greet(name) {
return “こんにちは、” + name + “さん！”;
}
// 真偽値を返す (条件判定によく使われる)
function isAdult(age) {
return age >= 20; // 条件式の結果(true or false)をそのまま返す
}
// nullを返す (特定の状態、例えば「値がない」ことを明示的に示す場合)
function findUser(id) {
// 実際にはデータベースなどを検索する処理
const user = null; // 例としてユーザーが見つからなかったとする
return user; // nullを返す
}
// undefinedを返す (意図的に値が未定義であることを示す場合や、エラーを示す場合)
// return; と書いた場合も暗黙的に undefined を返す
function getDefaultSetting() {
// 設定が見つからなかった場合など
return undefined;
}
// Symbolを返す
function getUniqueId() {
return Symbol(‘user_id’);
}
// BigIntを返す
function getLargeNumber() {
return 9007199254740991n + 1n;
}
console.log(getZero()); // 0
console.log(greet(“太郎”)); // こんにちは、太郎さん！
console.log(isAdult(25)); // true
console.log(findUser(123)); // null
console.log(getDefaultSetting()); // undefined
console.log(getUniqueId()); // Symbol(user_id)
console.log(getLargeNumber()); // 9007199254740992n
“`
これらの例からわかるように、プリミティブ型の値を返すことは非常にシンプルで直感的です。関数の計算結果や状態を、そのままの値として呼び出し元に渡すことができます。
オブジェクト型を返す
JavaScriptのオブジェクト型（オブジェクト、配列、関数）も、関数から返すことができます。これらはプリミティブ型とは異なり、参照渡し（正確には値としての参照渡し）となる点に注意が必要ですが、returnの仕組み自体は同じです。
オブジェクトを返す
関数でデータを集約したり、設定オブジェクトを生成したりする場合によく使われます。
“`javascript
function createUser(name, age) {
// 新しいユーザーオブジェクトを作成
const user = {
name: name,
age: age,
isActive: true
};
return user; // 作成したオブジェクトを返す
}
const newUser = createUser(“花子”, 30);
console.log(newUser); // { name: ‘花子’, age: 30, isActive: true }
console.log(newUser.name); // 花子
// オブジェクトを加工して返す例
function formatAddress(street, city, zipCode) {
return {
street: street.trim(),
city: city.toUpperCase(),
zipCode: zipCode.replace(‘-‘, ”)
};
}
const formattedAddr = formatAddress(” 123 Main St “, “new york”, “10001-1234”);
console.log(formattedAddr); // { street: ‘123 Main St’, city: ‘NEW YORK’, zipCode: ‘100011234’ }
“`
関数内で生成したオブジェクトや、引数で受け取ったオブジェクトを加工した結果をオブジェクトとして返すことは、複雑なデータを扱う関数で非常に一般的です。
配列を返す
複数の値をまとめて返したい場合や、リスト処理の結果を返したい場合に配列を使います。
“`javascript
function generateNumbers(count) {
const numbers = [];
for (let i = 0; i < count; i++) {
numbers.push(i * 2);
}
return numbers; // 作成した配列を返す
}
const numberList = generateNumbers(5);
console.log(numberList); // [ 0, 2, 4, 6, 8 ]
// 配列を加工して返す例
function filterEvenNumbers(arr) {
const evenNumbers = arr.filter(num => num % 2 === 0);
return evenNumbers; // フィルタリングした新しい配列を返す
}
const myNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNums = filterEvenNumbers(myNumbers);
console.log(evenNums); // [ 2, 4, 6, 8, 10 ]
“`
配列を返すことで、関数が複数の関連する値をひとまとまりにして提供できます。
関数を返す
JavaScriptでは関数も第一級オブジェクトであるため、関数から別の関数を返すことが可能です。これは高階関数（Higher-Order Function）の概念と関連しており、関数を動的に生成したり、設定を保持した関数を作成したりするのに使われます。
“`javascript
// 関数を返す関数（ファクトリ関数のようなもの）
function createMultiplier(multiplier) {
// 内部で新しい関数を定義し、それを返す
return function(number) {
return number * multiplier;
};
}
const multiplyByTwo = createMultiplier(2); // 2を掛ける関数を取得
const multiplyByTen = createMultiplier(10); // 10を掛ける関数を取得
console.log(multiplyByTwo(5)); // 10 (取得した関数を実行)
console.log(multiplyByTen(5)); // 50
“`
この例では、createMultiplier関数は直接計算結果を返すのではなく、引数multiplierを記憶した新しい関数を生成して返しています。返された関数（multiplyByTwoやmultiplyByTen）は、それぞれ異なるmultiplierの値を使って計算を行います。このように関数を返すことで、柔軟性の高いコードや、クロージャを利用した強力なパターンを実装できます。
複数の値を返すには？
return文で直接返せる値は一つだけです。しかし、実際には関数が複数の異なる結果を提供したい場合があります。この場合、返す値を配列またはオブジェクトにまとめて返すのが一般的なパターンです。
配列で複数の値を返す
“`javascript
function getUserInfo(id) {
// 仮のデータ
const users = {
1: { name: “Alice”, age: 25 },
2: { name: “Bob”, age: 30 }
};
const user = users[id];
if (!user) {
return [null, “ユーザーが見つかりません”]; // ユーザーが見つからない場合は [null, エラーメッセージ]
}
return [user, null]; // ユーザーが見つかった場合は [ユーザーオブジェクト, null]
}
const [alice, error1] = getUserInfo(1); // 分割代入で受け取る
console.log(“ユーザー1:”, alice, “エラー1:”, error1); // ユーザー1: { name: ‘Alice’, age: 25 } エラー1: null
const [bob, error2] = getUserInfo(3); // 存在しないID
console.log(“ユーザー2:”, bob, “エラー2:”, error2); // ユーザー2: null エラー2: ユーザーが見つかりません
“`
このパターンは、特にNode.jsのコールバック関数などで、エラーオブジェクトと結果をペアで返す際によく見られます（ただし、Promise/async/await の普及により、エラーは例外で扱うことが増えています）。配列を使うと、分割代入で受け取りやすいというメリットがあります。
オブジェクトで複数の値を返す
オブジェクトを使うと、各値に意味のある名前（プロパティ名）を付けて返すことができます。これは、返される値の種類が多い場合や、受け取り側が値の意味を明確に知りたい場合に適しています。
“`javascript
function processOrder(orderId, quantity) {
// 仮の在庫確認・価格計算処理
const itemPrice = 100; // 1個あたりの価格
const availableStock = 50; // 在庫数
if (quantity <= 0) {
return { success: false, message: “数量は正である必要があります。”, totalPrice: 0, remainingStock: availableStock };
}
if (quantity > availableStock) {
return { success: false, message: “在庫が不足しています。”, totalPrice: 0, remainingStock: availableStock };
}
const totalPrice = itemPrice * quantity;
const remainingStock = availableStock – quantity;
return { success: true, message: “注文処理成功”, totalPrice: totalPrice, remainingStock: remainingStock };
}
const result1 = processOrder(1, 10); // 成功ケース
console.log(result1); // { success: true, message: ‘注文処理成功’, totalPrice: 1000, remainingStock: 40 }
const result2 = processOrder(2, 60); // 在庫不足ケース
console.log(result2); // { success: false, message: ‘在庫が不足しています。’, totalPrice: 0, remainingStock: 50 }
// 受け取り側でプロパティを使ってアクセス
if (result1.success) {
console.log(注文金額: ${result1.totalPrice}, 残り在庫: ${result1.remainingStock});
}
if (!result2.success) {
console.log(エラー: ${result2.message});
}
“`
オブジェクトで返す方法は、返される値の意味が分かりやすく、コードの可読性が向上するというメリットがあります。特に、成功/失敗の状態と、その詳細な情報（エラーメッセージや結果データ）をまとめて返したい場合に便利です。
どちらの方法を使うかは、返す値の性質や数、そしてコードのスタイルによって選択します。意味のある名前を付けたい場合はオブジェクト、単に順番にアクセスできれば良い場合は配列、と考えると良いでしょう。
3. 関数の実行終了：早期リターンの活用
前述のように、return文は値を返すだけでなく、関数の実行を即座に終了させるという重要な役割も持っています。この性質を利用して、関数の冒頭で引数の検証や前提条件のチェックを行い、条件を満たさない場合はすぐにreturnで処理を終了させるテクニックを「早期リターン（Early Return）」と呼びます。
早期リターンは、コードの可読性と保守性を大幅に向上させることができます。なぜなら、正常系の処理ロジックが、エラー処理や特殊ケースの処理と混ざらずに、関数の後半に直線的に記述できるようになるからです。
早期リターンを使わない場合、条件分岐はネストが深くなりやすく、コードが複雑に見えることがあります。
早期リターンを使わない例:
“`javascript
function calculateTax(income) {
let tax = 0;
if (income > 0) { // 正の収入の場合のみ計算
if (income <= 100000) {
tax = income * 0.1;
} else if (income <= 500000) {
tax = 10000 + (income – 100000) * 0.2;
} else {
tax = 90000 + (income – 500000) * 0.3;
}
} else { // 収入が0以下の場合
console.log(“収入は正である必要があります。”);
// この場合、税金は0のまま
}
return tax;
}
console.log(calculateTax(80000));
console.log(calculateTax(300000));
console.log(calculateTax(-50000)); // エラーメッセージが表示され、税金は0が返る
“`
この例では、収入が正であるかのチェックが一番外側のif文で行われ、正常系の処理がその内側に記述されています。収入が0以下の場合は、elseブロックに処理が分岐し、メッセージ表示後に最終的なreturn tax;（この時点ではtaxは初期値の0）に到達します。
早期リターンを使う例:
“`javascript
function calculateTaxEarlyReturn(income) {
// 早期リターンによる無効な入力のチェック
if (income <= 0) {
console.log(“収入は正である必要があります。”);
return 0; // 無効な場合はすぐに0を返して終了
}
// ここから下が正常系の処理ロジック
let tax = 0;
if (income <= 100000) {
tax = income * 0.1;
} else if (income <= 500000) {
tax = 10000 + (income – 100000) * 0.2;
} else {
tax = 90000 + (income – 500000) * 0.3;
}
return tax; // 正常に計算された税金を返す
}
console.log(calculateTaxEarlyReturn(80000));
console.log(calculateTaxEarlyReturn(300000));
console.log(calculateTaxEarlyReturn(-50000)); // エラーメッセージが表示され、税金は0が返る
“`
早期リターンを使った例では、関数の冒頭でまず無効な入力（income <= 0）をチェックし、条件を満たす場合はすぐにreturn 0;で関数を終了させています。これにより、その後の税金計算ロジックは「incomeが必ず正である」という前提でシンプルに記述できます。コードのネストも浅くなり、どの条件が満たされればどの処理が実行されるのかが、より分かりやすくなっています。
早期リターンのメリット:
- 可読性の向上: 正常系のロジックが主要な流れとして見やすくなる。
- ネストの削減: 条件分岐のネストが深くなるのを防ぐ。
- 理解の容易さ: 関数がどのような条件で終了するのかが、コードの先頭付近で把握できる。
- 保守性の向上: 後からロジックを追加・変更する際に、影響範囲を限定しやすい。
早期リターンは、特に引数の検証、権限チェック、リソースの存在確認など、本処理に入る前に満たされるべき前提条件がある場合に非常に有効です。
4. return文がない場合：暗黙的なundefinedの返却
JavaScriptでは、すべての関数は呼び出し元に値を返します。もし関数内にreturn文が一つも含まれていない場合、あるいはreturn;のように値を指定せずにreturn文が実行された場合、その関数は暗黙的にundefinedを返します。
例:
“`javascript
function doSomething() {
console.log(“何か処理をしています…”);
// return 文がありません
}
function doSomethingElse() {
console.log(“別の処理をしています…”);
return; // 値を指定せずに return
}
let result1 = doSomething();
let result2 = doSomethingElse();
console.log(“result1:”, result1); // 出力: result1: undefined
console.log(“result2:”, result2); // 出力: result2: undefined
“`
doSomething関数にはreturn文が全くありません。doSomethingElse関数にはreturn;がありますが、値を指定していません。どちらの場合も、関数が終了したときに、呼び出し元には自動的にundefinedという値が返されます。
これは、値計算を主な目的としない関数、例えば画面に何かを表示するだけの関数や、データを保存するだけの関数など、いわゆる「副作用（Side Effect）」だけを持つ関数によく見られます。これらの関数は、特定の処理を実行することが目的であり、その処理結果として呼び出し元に何か値を返す必要がないからです。
このような関数を、C言語などではvoid関数と呼ぶことがありますが、JavaScriptには厳密な意味でのvoid型はありません。しかし、慣習的に「undefinedを返す（あるいは何も返さない）関数」として扱われます。
console.logとreturnの違い:
ここでよく混同されがちなのが、console.logとreturnの違いです。
console.log(): 引数に指定された値を開発者コンソールに表示します。関数自体の実行結果としてその値を「返す」わけではありません。return value;: 指定されたvalueを関数が呼び出し元に返します。この値は、変数に代入したり、別の関数の引数として渡したりして、後続の処理で利用できます。
例:
“`javascript
function logAndReturn(value) {
console.log(“ログ出力:”, value); // コンソールに表示
return value; // 値を返す
}
let returnedValue = logAndReturn(“テスト”); // 関数を呼び出し、戻り値を変数に代入
console.log(“戻り値:”, returnedValue); // 出力: 戻り値: テスト
“`
この例では、logAndReturn関数内で"ログ出力: テスト"がコンソールに表示されますが、これはconsole.logによる副作用です。そして、return value;によって引数の値（この場合は"テスト"）が関数呼び出しの箇所に返され、変数returnedValueに代入されています。
return文がない関数やreturn;で終了する関数は、主に処理の実行自体に意味があり、その結果値が必要ない場合に使われます。しかし、意図せずreturnを書き忘れてしまい、本来計算結果が必要な場所でundefinedを受け取ってしまうというミスも起こり得ます。関数の設計において、「この関数は何を返すべきか？」を明確にしておくことが重要です。
5. 具体的な使用例で理解を深める
これまでの説明を踏まえ、JavaScript開発でよく遭遇するreturn文の具体的な使用例をいくつか見ていきましょう。
例1: 計算処理の結果を返す関数
最も基本的な使い方の1つです。数学的な計算やデータ処理の結果を返します。
“`javascript
// 円の面積を計算して返す
function calculateCircleArea(radius) {
if (radius < 0) {
return NaN; // 無効な場合はNaN (Not a Number) を返す
}
return Math.PI * radius * radius;
}
const area1 = calculateCircleArea(5);
console.log(“半径5の円の面積:”, area1); // 半径5の円の面積: 78.5398…
const area2 = calculateCircleArea(-1);
console.log(“半径-1の円の面積:”, area2); // 半径-1の円の面積: NaN
“`
例2: 条件に基づいて異なる値を返す関数
早期リターンや、複数のif/else if/elseブロックを使って、条件に応じて異なる処理を行い、それぞれ異なる値を返すパターンです。
“`javascript
// 点数に応じて評価を返す関数
function getGrade(score) {
if (score < 0 || score > 100) {
return “無効な点数”; // 早期リターン: 無効な場合は特定の文字列を返す
} else if (score >= 90) {
return “秀”;
} else if (score >= 80) {
return “優”;
} else if (score >= 70) {
return “良”;
} else if (score >= 60) {
return “可”;
} else {
return “不可”;
}
}
console.log(“点数 95:”, getGrade(95)); // 点数 95: 秀
console.log(“点数 75:”, getGrade(75)); // 点数 75: 良
console.log(“点数 40:”, getGrade(40)); // 点数 40: 不可
console.log(“点数 120:”, getGrade(120)); // 点数 120: 無効な点数
“`
例3: 真偽値を返す関数 (Predicates)
特定の条件が真であるか偽であるかを判定し、その結果をtrueまたはfalseで返す関数は非常に一般的です。これらの関数は通常 is... や has... といった名前で命名されます。
“`javascript
// 文字列が空かどうかを判定する関数
function isEmptyString(str) {
return str === null || str === undefined || str.length === 0;
}
console.log(“” は空か？”, isEmptyString(“”)); // ” は空か？ true
console.log(“‘abc’ は空か？”, isEmptyString(“abc”)); // ‘abc’ は空か？ false
console.log(“null は空か？”, isEmptyString(null)); // null は空か？ true
// 配列に特定の要素が含まれているかを判定する関数
function containsElement(arr, element) {
return arr.includes(element);
}
const colors = [“red”, “green”, “blue”];
console.log(“[‘red’, ‘green’, ‘blue’] は ‘blue’ を含むか？”, containsElement(colors, “blue”)); // … を含むか？ true
console.log(“[‘red’, ‘green’, ‘blue’] は ‘yellow’ を含むか？”, containsElement(colors, “yellow”)); // … を含むか？ false
“`
これらの真偽値を返す関数は、if文やループの条件式として直接利用できるため、非常に便利です。
例4: オブジェクトや配列を生成・加工して返す関数
引数で受け取ったデータをもとに、新しいオブジェクトや配列を作成したり、既存のものを加工したりして返すパターンです。元のデータを変更しない（イミュータブルな）関数設計は、予期せぬ副作用を防ぐ上で重要です。
``javascript${user.firstName} ${user.lastName}
// ユーザー情報から表示用のフルネームとイニシャルを持つオブジェクトを生成して返す
function formatUserName(user) {
if (!user || !user.firstName || !user.lastName) {
return null; // 無効な入力の場合は null を返す
}
const fullName =;${user.firstName.charAt(0)}${user.lastName.charAt(0)}`;
const initials =
return {
fullName: fullName,
initials: initials
};
}
const userProfile = { firstName: “山田”, lastName: “太郎” };
const formattedName = formatUserName(userProfile);
console.log(formattedName); // { fullName: ‘山田 太郎’, initials: ‘山田太’ }
const invalidUser = {};
console.log(formatUserName(invalidUser)); // null
// 配列内の各要素に変換処理を適用し、新しい配列を返す (map関数の模倣)
function mapArray(arr, callback) {
if (!Array.isArray(arr)) {
return []; // 配列でない場合は空配列を返す
}
const result = [];
for (let i = 0; i < arr.length; i++) {
result.push(callback(arr[i], i, arr)); // コールバック関数の戻り値を新しい配列に追加
}
return result; // 新しい配列を返す
}
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = mapArray(numbers, num => num * num);
console.log(squaredNumbers); // [ 1, 4, 9, 16, 25 ]
“`
これらの例では、関数がデータを加工・変換し、その結果を新しいオブジェクトや配列として返しています。これは、JavaScriptの関数型プログラミングのスタイルや、Reactなどのライブラリでデータを扱う際にも頻繁に使われるパターンです。
例5: エラー発生時に早期リターンする関数
入力値の検証や、外部リソースへのアクセスなどでエラーが発生する可能性がある場合、エラーを示す特定の値（null、undefined、NaN、false、あるいは特定の構造を持つオブジェクトなど）を返して早期リターンすることがあります。
“`javascript
function divide(a, b) {
if (typeof a !== ‘number’ || typeof b !== ‘number’) {
console.error(“エラー: 入力は数値である必要があります。”);
return NaN; // 数値でない場合はNaNを返す
}
if (b === 0) {
console.error(“エラー: 0で割ることはできません。”);
return Infinity; // 0で割る場合はInfinityを返す
}
return a / b;
}
console.log(“10 / 2 =”, divide(10, 2)); // 10 / 2 = 5
console.log(“10 / 0 =”, divide(10, 0)); // エラー: 0で割ることはできません。 10 / 0 = Infinity
console.log(“‘a’ / 5 =”, divide(‘a’, 5)); // エラー: 入力は数値である必要があります。 ‘a’ / 5 = NaN
“`
エラーハンドリングの手法としては、例外処理 (throw) もありますが、関数がエラーを表す特別な値を返すパターンも広く使われます。どちらが良いかは状況やチームのコーディング規約によります。単純な入力値エラーなどでは、特定の値を返す早期リターンがコードをシンプルに保つ場合があります。
6. return文に関する注意点とベストプラクティス
return文を効果的に使うために、いくつか注意しておきたい点や推奨されるプラクティスがあります。
1. return; は return undefined; と同じ
値を指定しないreturn;文は、暗黙的にundefinedを返します。これは、関数が特定の処理を実行して終了することが目的で、特に呼び出し元に返す値がない場合に使われます。
“`javascript
function logMessage(msg) {
console.log(msg);
return; // undefined を返す
}
const result = logMessage(“ハロー”);
console.log(result); // undefined
“`
明示的にundefinedを返したい場合はreturn undefined;と書くこともできますが、慣習的にはreturn;が使われることが多いです。
2. returnの直後の改行に注意（ASI: Automatic Semicolon Insertion）
JavaScriptには、セミコロンを省略した場合に自動的に補完されるAutomatic Semicolon Insertion (ASI) という仕組みがあります。通常は便利な機能ですが、return文の直後に改行があると、意図しない挙動を引き起こす可能性があります。
危険な例:
“`javascript
function getResult() {
return // ここで改行
{
name: “Test”
};
}
console.log(getResult());
“`
このコードは、開発者の意図としてはオブジェクト{ name: "Test" }を返したいはずです。しかし、ASIのルールにより、returnの直後の改行がセミコロンの挿入箇所と判断され、コードは以下のように解釈されてしまいます。
javascript
function getResult() {
return; // ここでセミコロンが自動挿入される
{
name: "Test"
}; // このブロックは unreachable code (到達不能なコード) になる
}
結果として、この関数はreturn;によってundefinedを返して終了し、その後のオブジェクトリテラルは実行されません。
これを避けるためには、return文と返したい式の間に改行を入れないようにします。
安全な例:
“`javascript
function getResultSafe() {
return { // return の直後に { を置くか、式全体を return と同じ行に書く
name: “Test”
};
}
console.log(getResultSafe()); // { name: ‘Test’ }
function getResultSafe2() {
const data = { name: “Test” };
return data; // 式を変数に入れてから return するのも安全
}
console.log(getResultSafe2()); // { name: ‘Test’ }
“`
オブジェクトや配列など、複数行にわたるリテラルを返す場合は、開き括弧（{ または [）をreturnと同じ行に書くか、先に変数に代入してからその変数を返すようにするのが安全です。
3. 関数は常に同じ型の値を返すように設計する (Consistency)
これは厳密なルールではありませんが、関数の戻り値の型を予測可能にしておくことは、コードの保守性において非常に重要です。例えば、「成功したら数値を返し、失敗したら文字列を返す」といったように、同じ関数が状況によって全く異なる型の値を返すように設計すると、呼び出し元でその戻り値を扱うコードが複雑になりがちです。
“`javascript
// あまり推奨されない例: 戻り値の型が状況によって変わる
function riskyFunction(input) {
if (typeof input === ‘number’) {
return input * 2; // 数値を返す
} else if (typeof input === ‘string’) {
return “入力は文字列です: ” + input; // 文字列を返す
} else {
return false; // 真偽値を返す
}
}
const val1 = riskyFunction(10); // val1 は数値 (20)
const val2 = riskyFunction(“hello”); // val2 は文字列 (“入力は文字列です: hello”)
const val3 = riskyFunction(null); // val3 は真偽値 (false)
// 呼び出し元で戻り値の型を毎回チェックする必要があり、扱いにくい
if (typeof val1 === ‘number’) {
// 数値として扱う…
} else if (typeof val1 === ‘string’) {
// 文字列として扱う…
} // …
“`
代わりに、エラーや特殊なケースを示す場合でも、返す値の型をある程度統一するか、共通の構造を持つオブジェクトを返すように設計するのが良いプラクティスです。例えば、成功/失敗の状態と結果/エラーメッセージをプロパティとして持つオブジェクトを返すなどです。
“`javascript
// より良い例: 戻り値の型を統一する (オブジェクトを返す)
function betterFunction(input) {
if (typeof input === ‘number’) {
return { success: true, result: input * 2, type: ‘number’ };
} else if (typeof input === ‘string’) {
return { success: true, result: “入力は文字列です: ” + input, type: ‘string’ };
} else {
return { success: false, error: “無効な入力型です”, type: ‘unknown’ };
}
}
const res1 = betterFunction(10);
if (res1.success) {
console.log(結果: ${res1.result}, 型: ${res1.type}); // 結果: 20, 型: number
}
const res3 = betterFunction(null);
if (!res3.success) {
console.log(エラー: ${res3.error}, 型: ${res3.type}); // エラー: 無効な入力型です, 型: unknown
}
“`
このように、返す値の構造や型を予測可能にしておくことで、関数を利用する側のコードがシンプルになり、エラーを防ぎやすくなります。
4. 早期リターンを積極的に活用する
前述の通り、早期リターンはコードの可読性を高める強力なテクニックです。特に、関数の冒頭で引数の検証や前提条件のチェックを行う際には、積極的に活用を検討しましょう。これにより、正常系のロジックがシンプルに、そして読みやすく保たれます。
5. デバッグ時に戻り値を確認する
関数が期待通りの値を返しているか確認したい場合、デバッガーを使用するか、一時的にconsole.logを使って戻り値をコンソールに表示させて確認することができます。
“`javascript
function complexCalculation(a, b) {
const step1 = a + b;
const step2 = step1 * 10;
const result = step2 / 2;
// 一時的なデバッグ出力
console.log(“Debug: complexCalculation returned”, result);
return result;
}
const finalResult = complexCalculation(5, 3); // デバッグ出力が表示される
“`
デバッグ出力は開発時には便利ですが、本番環境では不要になる場合が多いので、開発終了時には削除するか、ロギングライブラリを使用してログレベルで制御できるようにすることが推奨されます。
7. returnと他の制御構造との違い
return文の役割をより明確に理解するために、他の似たような目的を持つ制御構造や概念との違いを整理しておきましょう。
return vs console.log
これは前述しましたが、再確認します。
– return: 関数の戻り値を指定し、関数実行を終了する。呼び出し元コードで値を受け取り、後続処理で利用できる。
– console.log: コンソールに表示する。関数実行結果として値を返すわけではない。デバッグや情報の確認が主な目的。
return vs break / continue
break文とcontinue文は、主にループ（for, while, do...while）やswitch文の中で使用され、実行フローを制御します。
– return: 関数全体の実行を終了し、呼び出し元に処理を戻す。
– break: 現在実行中のループやswitch文の実行を終了し、その制御構造の直後のコードに処理を移す。関数自体は終了しない。
– continue: 現在実行中のループの現在のイテレーション（周回）の残りの処理をスキップし、次のイテレーションを開始する。ループ自体は終了しない。
例:
“`javascript
function processArray(arr) {
for (let i = 0; i < arr.length; i++) {
if (arr[i] === 0) {
console.log(“要素0が見つかりました。処理を中断します。”);
break; // ループを終了するが、関数は終了しない
}
if (arr[i] < 0) {
console.log(“負の要素をスキップします。”);
continue; // 現在のイテレーションをスキップし、次の要素へ
}
console.log(“要素を処理中:”, arr[i]);
}
console.log(“配列の処理を終了しました。”);
// return 文がないので undefined を返す
}
function findFirstNegative(arr) {
for (let i = 0; i < arr.length; i++) {
if (arr[i] < 0) {
return arr[i]; // 負の要素が見つかったら、その値を返して関数全体を終了
}
console.log(“正または0の要素:”, arr[i]);
}
return null; // 配列の最後まで負の要素が見つからなかった場合
}
processArray([1, 2, -3, 4, 0, 5]);
// 出力:
// 要素を処理中: 1
// 要素を処理中: 2
// 負の要素をスキップします。
// 要素を処理中: 4
// 要素0が見つかりました。処理を中断します。
// 配列の処理を終了しました。
console.log(“——————–“);
console.log(“最初の負の要素:”, findFirstNegative([1, 2, -3, 4, 0, 5]));
// 出力:
// 正または0の要素: 1
// 正または0の要素: 2
// 最初の負の要素: -3
“`
この例からわかるように、breakやcontinueはループの中でのみ有効であり、関数全体から抜け出すことはできません。一方、returnは関数全体から抜け出し、値を返すことができます。
return vs throw
throw文は、エラーや例外を発生させるために使用されます。これは、関数の通常の処理フローでは回復できない深刻な問題が発生した場合に使われます。
– return: 関数の正常または期待される処理結果を返す。関数の通常の終了方法。
– throw: 関数内でエラーが発生したことを通知し、実行を中断する。呼び出し元のコードでtry...catchブロックによって捕捉されない限り、プログラムの実行が停止する可能性がある。
例:
“`javascript
function divideSafe(a, b) {
if (typeof a !== ‘number’ || typeof b !== ‘number’) {
throw new Error(“TypeError: 入力は数値である必要があります。”); // エラーを発生させる
}
if (b === 0) {
throw new Error(“RangeError: 0で割ることはできません。”); // エラーを発生させる
}
return a / b; // 正常な結果を返す
}
try {
console.log(“10 / 2 =”, divideSafe(10, 2)); // 正常系
console.log(“10 / 0 =”, divideSafe(10, 0)); // 0で割る – エラーが発生し、catchブロックへ
console.log(“‘a’ / 5 =”, divideSafe(‘a’, 5)); // 型エラー – エラーが発生し、catchブロックへ
} catch (error) {
console.error(“エラーを捕捉しました:”, error.message);
}
// 出力:
// 10 / 2 = 5
// エラーを捕捉しました: RangeError: 0で割ることはできません。
// エラーを捕捉しました: TypeError: 入力は数値である必要があります。
“`
returnは、関数の仕様として「このような入力があった場合は、この特別な値（例: null, NaN, -1など）を返します」と定めている場合に使われます。これは、エラーというよりは「期待された範囲外の結果」と見なされることが多いです。
一方throwは、「この関数はこのような状況では実行を継続できません」という、より深刻な中断を示す場合に選ばれます。例えば、必須の引数が渡されなかったり、アクセス権がないなどの状況です。どちらを使うかは、その状況が関数の正常な出力の一部と見なせるか、それとも例外的な事態と見なすべきかによって判断します。
8. まとめ：return文を使いこなすために
この記事では、JavaScriptのreturn文について、その二つの主要な役割（値の返却と実行の終了）を中心に、具体的な使い方や注意点を詳しく解説しました。
return文は、単に関数の計算結果を返すだけでなく、関数の実行フローを制御し、コードの可読性や効率を高めるための重要なツールです。
この記事のポイント:
return文は、関数が値を返す唯一の方法です。値を返さない関数は暗黙的にundefinedを返します。return文が実行されると、その直後に関数の実行は終了し、それ以降のコードは実行されません。- プリミティブ型からオブジェクト型（オブジェクト、配列、関数）まで、あらゆる種類の値を返すことができます。
- 複数の値を返したい場合は、それらを配列やオブジェクトにまとめて返すのが一般的です。
- 関数の冒頭で条件チェックを行い、すぐに
returnで終了する「早期リターン」は、コードの可読性と保守性を向上させる有効なテクニックです。 return文と返したい式の間に改行を入れると、Automatic Semicolon Insertion (ASI) により意図しない挙動になる可能性があるため注意が必要です。- 関数から返す値の型を統一する、あるいは予測可能な構造を持つオブジェクトを返すように設計すると、呼び出し元での扱いが容易になります。
returnは関数の正常な終了や期待される結果の伝達に使い、回復不能なエラーなど深刻な問題にはthrowによる例外処理を検討します。
JavaScriptで高品質なコードを書くためには、関数の設計とその戻り値をどのように扱うかが非常に重要です。return文の役割を深く理解し、状況に応じて適切に使い分けることで、より分かりやすく、メンテナンスしやすい、そして意図した通りに動作するプログラムを作成できるようになります。
最初は戸惑うこともあるかもしれませんが、様々なコード例を読み、実際に自分で関数を書いてreturn文を使ってみることを繰り返すうちに、その使い方が自然と身についてくるはずです。
ぜひこの記事で学んだ知識を活かして、JavaScriptプログラミングを楽しんでください。
参考文献
- MDN Web Docs:
return - JavaScript Primer – 迷わないための入門書
- JavaScriptエンジニア養成読本
（※ 実際にはこれらの参考文献を参考に、記事の内容を構成・記述しています。）
この記事は、JavaScriptのreturn文に関する詳細な情報を提供することを目的として、約5000語のボリュームで記述しました。基本的な概念から具体的なコード例、注意点やベストプラクティスまで、網羅的に解説したつもりです。JavaScript学習の一助となれば幸いです。