暗黙の return とは何か
暗黙の return は、アロー関数で本体が“1つの式”だけのときに、return キーワードを書かなくてもその式の評価結果が返る仕組みです。ここが重要です:波括弧 {} を書かない「簡潔な本体(concise body)」のときだけ有効で、ブロックを使ったら必ず return を書く必要があります。
// 暗黙の return(式が1つ)
const double = x => x * 2;
// ブロックにしたら明示的な return が必須
const double2 = x => {
const y = x * 2;
return y;
};
JavaScript基本文法とオブジェクト返却の注意
1行の式ならそのまま返せる
式が1つなら、短くて読みやすい関数になります。関数を「値を計算して返すもの」として使う典型に向いています。
const greet = name => `Hello, ${name}`;
const add = (a, b) => a + b;
const isPositive = n => n > 0;
JavaScriptオブジェクトを返すときは括弧で包む
ここが重要です:{} は“ブロック”とも解釈されるため、オブジェクトリテラルを返すときは丸括弧 () で包んで「これは式です」と明示します。
const makeUser = (id, name) => ({ id, name }); // OK
// const makeUser = (id, name) => { id, name }; // NG(ブロックと解釈される)
JavaScript使えるとき/使えないとき(設計の分岐点)
使えるとき:純粋で短い“変換・判定”
暗黙の return は、入力を受けて“すぐに答えを返す”タイプの関数に最適です。副作用がなく、1行で意図が伝わるものに向いています。
const toLabel = ({ id, name }) => `${id}:${name.trim()}`;
const priceWithTax = (price, rate = 0.1) => Math.round(price * (1 + rate));
JavaScript使えないとき:複数文・分岐・例外処理
ここが重要です:複数行のロジック、try/catch、複数ステップの処理では波括弧を使い、return を明示します。if/else を書きたいなら三項演算子に“式として”落とし込むか、ブロック+returnに切り替えます。
// 三項演算子で式にする(暗黙の return を活かす)
const status = s => s ? "OK" : "NG";
// 複数行は明示的な return
const sumPositives = arr => {
let total = 0;
for (const n of arr) if (n > 0) total += n;
return total;
};
JavaScriptよくある落とし穴(重要ポイントの深掘り)
波括弧を付けたのに return を忘れる
ブロックを書いた瞬間、暗黙の return は無効になります。ここが重要です:ブロック本体では必ず return を書く癖をつける。
const f = x => { x * 2; }; // undefined(return なし)
const g = x => { return x * 2; }; // OK
JavaScriptオブジェクト返却の括弧忘れ
丸括弧を忘れると“空のブロック”になり、undefined を返します。返すのは「式」だと自分に言い聞かせるのがコツです。
const toUser = name => ({ name, active: true }); // OK
JavaScript複雑な式の“無理な1行化”
読みやすさを犠牲にしてまで暗黙の return に押し込むのは逆効果です。式が長い・ネストが深いなら、波括弧+returnで段階的に書きましょう。
// NG: 長すぎる1行
const calc = x => ((x>0?x*2:x/2)+Math.max(0,x-10))|0;
// OK: 段階的に
const calc = x => {
const base = x > 0 ? x * 2 : x / 2;
const bonus = Math.max(0, x - 10);
return (base + bonus) | 0;
};
JavaScript実務での活用パターン
配列メソッドとの相性が抜群
map・filter・reduce は“短いコールバック”が前提です。暗黙の return で意図が直感的に伝わります。
const rows = [
{ id: 1, active: true, price: 100 },
{ id: 2, active: false, price: 200 },
{ id: 3, active: true, price: 300 },
];
const view = rows
.filter(r => r.active)
.map(r => ({ id: r.id, priceWithTax: Math.round(r.price * 1.1) }));
const total = rows.reduce((sum, r) => sum + r.price, 0);
JavaScriptasync/await と合わせる
暗黙の return は async アロー関数でも使えます。ここが重要です:短い非同期処理を1行で表現でき、読みやすさが向上します。
const fetchJson = async url => (await fetch(url)).json();
const loadAll = async urls => Promise.all(urls.map(fetchJson));
JavaScriptまとめ
暗黙の return の核心は「アロー関数を“1つの式”で書けば return を省略できる」ことです。オブジェクト返却は括弧で包み、複数行や例外処理があるならブロック+明示的 return に切り替える。短く純粋な変換・判定・配列メソッドのコールバックで最大の効果を発揮し、読みやすさを維持するために“無理な1行化”は避ける。これを徹底すれば、初心者でもアロー関数を気持ちよく使いこなし、誤作動のない明快な関数を書けます。
