JS アロー関数における暗黙的リターン

JPKODA 編集部 May 7, 2026

ES6 (ECMAScript 2015) で導入された アロー関数 (Arrow Functions) は、従来の 関数式 (Function Expressions) よりも簡潔な記述を可能にします。これまでのセクションで基本的な構造や主要な違いを学んできましたが、アロー関数において最も強力で頻繁に使用される機能の一つが 暗黙的リターン (Implicit Return) です。

暗黙的リターンの理解は、クリーンで読みやすく、かつ効率的な JavaScript コードを書くために不可欠です。特に関数型プログラミングのスタイルで多用される map や filter といった配列メソッドを扱う際に、その真価を発揮します。この機能は、特定の条件下で return キーワードを省略することを可能にし、コードを極限まで精査することを助けます。

1. 暗黙的リターンの理解

アロー関数における暗黙的リターンとは、関数本体が単一の 式 (Expression) で構成されている場合、その結果が自動的に返される仕組みのことです。return キーワードを明示する必要はありません。この簡潔さはアロー関数の大きな特徴であり、多くの開発者に好まれる理由の一つです。

1.1 単一式の関数本体

暗黙的リターンのコア・ルールは、「関数本体が単一の式であること」です。

もし関数本体が波括弧 {} で囲まれている場合、それは「ブロック体 (Block Body)」と見なされ、従来の関数と同様に明示的な return ステートメントが必要になります。
一方で、波括弧がない場合は「式本体 (Expression Body)」となり、その単一の式の値が暗黙的にリターンされます。

明示的リターンと暗黙的リターンを比較してみましょう。

// 明示的リターン (従来の関数)
function addTraditional(a, b) {
  return a + b; // 'return' キーワードが必須
}
console.log(addTraditional(5, 3)); // 出力: 8

// 明示的リターン (ブロック体を持つアロー関数)
const addExplicitArrow = (a, b) => {
  return a + b; // {} がある場合、'return' キーワードが必須
};
console.log(addExplicitArrow(5, 3)); // 出力: 8

// 暗黙的リターン (式本体を持つアロー関数)
const addImplicitArrow = (a, b) => a + b; // {} も 'return' も不要
console.log(addImplicitArrow(5, 3)); // 出力: 8

addImplicitArrow の例では、a + b が単一の式です。関数本体が波括弧で囲まれていないため、JavaScript は自動的に a + b を計算し、その結果を返します。

1.2 暗黙的リターンを使用できない（または推奨されない）ケース

暗黙的リターンは強力ですが、万能ではありません。

1.2.1 多重ステートメント

値を返す前に複数の操作や 副作用 (Side Effects)（コンソールへの出力、外部変数の修正など）を実行する必要がある場合は、明示的な return を持つブロック体を使用しなければなりません。

// 誤った例：複数のステートメントで暗黙的リターンを試みる
// const calculateAndLog = (x, y) => {
//   console.log("計算中...");
//   x * y; // この結果は返されず、またこれが唯一のステートメントでもありません
// };
// console.log(calculateAndLog(2, 4)); // 出力: 計算中... undefined

// 正しい例：複数のステートメントに対して明示的リターンを使用
const calculateAndLogCorrect = (x, y) => {
  console.log("積を計算中..."); // 1つ目のステートメント (副作用)
  return x * y; // 2つ目のステートメント、明示的リターン
};
console.log(calculateAndLogCorrect(2, 4)); // 出力: 積を計算中... \n 8

ブロック体の中で return キーワードを省略すると、関数は暗黙的に undefined を返します。これは通常、意図した挙動ではないはずです。

1.2.2 オブジェクトリテラルの返却

オブジェクトリテラル (Object Literal) を暗黙的に返したい場合は、オブジェクトを丸括弧 () で囲む必要があります。これは、JavaScript の パーサ (Parser) がオブジェクトの波括弧 {} を、関数のブロック体と誤認してしまうのを防ぐためです。

// 誤った例：JavaScript が {} をオブジェクトではなくブロック体として解釈する
// const createUserIncorrect = (name, age) => { name: name, age: age };
// console.log(createUserIncorrect("Alice", 30)); // SyntaxError: Unexpected token ':'

// 正しい例：オブジェクトリテラルを丸括弧で囲んで暗黙的にリターン
const createUser = (name, age) => ({ name: name, age: age });
console.log(createUser("Alice", 30)); // 出力: { name: 'Alice', age: 30 }

// これは以下と同等です：
const createUserExplicit = (name, age) => {
  return { name: name, age: age };
};
console.log(createUserExplicit("Bob", 25)); // 出力: { name: 'Bob', age: 25 }

オブジェクトリテラル ({ ... }) の周囲の丸括弧は、JavaScript に対して「これはコードブロックではなく、一つの式（オブジェクトリテラル）である」ことを伝えます。

1.3 暗黙的リターンのメリット

簡潔性: ボイラープレート (Boilerplate) が減り、関数が短くなるため、全体としてコードがスッキリします。
可読性: 単純な変換処理において return キーワードを省くことで、意図がより明確になり、結果がひと目でわかります。
関数型プログラミング: map、filter、reduce といった高階関数 (Higher-order Functions) を使用する際、小さく単一目的の関数を渡すシーンで非常に威力を発揮します。

2. 実戦的な例とデモンストレーション

暗黙的リターンが役立つ具体的なシナリオを見ていきましょう。

2.1 基礎的な計算

数値を2倍にする関数を例にとります。

// 従来の関数式
const doubleTraditional = function(num) {
  return num * 2;
};
console.log(`従来の関数で2倍: ${doubleTraditional(5)}`); // 出力: 10

// 明示的リターンのアロー関数
const doubleExplicitArrow = (num) => {
  return num * 2;
};
console.log(`明示的アロー関数で2倍: ${doubleExplicitArrow(5)}`); // 出力: 10

// 暗黙的リターンのアロー関数
const doubleImplicitArrow = (num) => num * 2;
console.log(`暗黙的アロー関数で2倍: ${doubleImplicitArrow(5)}`); // 出力: 10

このような単純な操作では、暗黙的リターン版が最もコンパクトで、可読性も高いと言えます。

2.2 文字列操作

文字列を大文字に変換する一般的なタスクです。

// 従来の関数
function toUpperTraditional(str) {
  return str.toUpperCase();
}
console.log(`従来の関数で大文字化: ${toUpperTraditional("hello")}`); // 出力: HELLO

// 暗黙的リターンのアロー関数
const toUpperImplicit = (str) => str.toUpperCase();
console.log(`暗黙的アロー関数で大文字化: ${toUpperImplicit("world")}`); // 出力: WORLD

2.3 配列メソッドとの連携

map を使って配列を変換する例です。map は配列の各要素に関数を適用し、変換後の要素を含む新しい配列を返します。

const numbers = [1, 2, 3, 4, 5];

// map 内で明示的リターンを使用
const doubledNumbersExplicit = numbers.map((number) => {
  return number * 2;
});
console.log(`明示的リターンによる2倍: ${doubledNumbersExplicit}`); // [2, 4, 6, 8, 10]

// map 内で暗黙的リターンを使用 - シンプルな変換にはこちらが圧倒的にクリーン
const doubledNumbersImplicit = numbers.map((number) => number * 2);
console.log(`暗黙的リターンによる2倍: ${doubledNumbersImplicit}`); // [2, 4, 6, 8, 10]

ご覧の通り、コールバック関数の暗黙的リターン版は非常に精査されており、ロジックがひと目で理解できます。

2.4 オブジェクトの暗黙的リターン

関数の引数に基づいてオブジェクトを生成する際、丸括弧を用いた暗黙的リターンは非常に便利です。

// フルネームとイニシャルをフォーマットする関数
const formatName = (firstName, lastName) => ({
  fullName: `${firstName} ${lastName}`,
  initials: `${firstName[0]}${lastName[0]}`,
});

const userProfile = formatName("Jane", "Doe");
console.log(userProfile); // 出力: { fullName: 'Jane Doe', initials: 'JD' }
console.log(`ユーザーのフルネーム: ${userProfile.fullName}`); // 出力: Jane Doe

この例では fullName と initials プロパティを持つオブジェクトを生成しています。オブジェクトリテラル { ... } の周囲にある丸括弧 () が、暗黙的リターンを示すために不可欠です。

2.5 使用を避けるべきケース

入力を検証（バリデーション）してから結果を返す必要がある関数を考えてみましょう。

const processInput = (value) => {
  if (typeof value !== 'number') {
    console.error("エラー: 入力は数値である必要があります。");
    return null; // エラー時の明示的リターン
  }
  const squared = value * value;
  console.log(`入力を2乗しました: ${squared}`); // 副作用
  return squared; // 成功時の明示的リターン
};

console.log(processInput(5));    // 出力: 入力を2乗しました: 25 \n 25
console.log(processInput("abc")); // 出力: エラー: 入力は数値である必要があります。 \n null

この processInput 関数には if 条件と console.log ステートメントがあります。このように複数のステートメントや条件ロジックが含まれる場合は、必ずブロック体 {} と明示的な return ステートメントを使用する必要があります。これを無理に暗黙的リターンに書き換えようとすると、誤った挙動や構文エラーの原因となります。