導入
Web開発の現場で、ふとブラウザのコンソールを確認した際に「SyntaxError: return not in function」というエラーが表示され、冷や汗をかいた経験はありませんか？このエラーはJavaScriptの構文エラーの中でも非常によくあるものですが、原因は意外と単純です。しかし、大規模なコードベースでは「なぜ関数の中に書いたはずなのに？」と混乱を招くこともあります。本記事では、このエラーの根本原因を理解し、現場で迷わず解決するためのポイントを解説します。
基礎知識
JavaScriptにおける「return」文は、関数の実行を終了させ、呼び出し元に値を返すためのキーワードです。重要なルールとして、return文（およびyield文）は必ず関数のスコープ（波括弧 { } で囲まれた中）に存在しなければなりません。
このエラーが発生する主な原因は、「記述ミスによるスコープの逸脱」です。特に、if文やfor文などのブロックと関数ブロックを混同してしまい、括弧（{ }）の閉じ方が不適切になると、本来関数内にあるべきreturnが「関数の外」にあると判定されてしまいます。
実装/解決策
このエラーを解決するための最短手順は以下の3ステップです。
1. エラーが発生している行を確認：ブラウザのデベロッパーツールで、エラーが指摘されている行番号に移動してください。
2. 括弧の対応をチェック：該当行の直前にある「{」と「}」が正しくペアになっているか、数を確認してください。
3. スコープの確認：return文が意図した関数の中にあるか、インデントを整えて視覚的に確認してください。
サンプルプログラム
以下は、よくあるミスと正しい実装の比較例です。
// 【エラーの原因となるコード】
function validateUser(user) {
if (user.isAdmin) {
// ここでreturnを書きたいが、ifの閉じ括弧を忘れると…
}
return true; // 意図せずここでエラーになる可能性がある
// 実際には、括弧の入れ子ミスが原因で「関数の外」とみなされる
}
// 【正しい実装例】
function validateUser(user) {
// ifブロックの中に正しくreturnを配置する
if (user.isAdmin) {
return true; // ここは関数の中なので正常
}
// 最後にデフォルトの戻り値を設定する
return false;
}
// 【応用的なチェック例：アロー関数】
const checkStatus = (status) => {
if (status === ‘active’) {
return ‘ログイン中’; // アロー関数でも波括弧が必要
}
return ‘ログアウト’;
};
応用・注意点
現場でこのエラーに遭遇した際、意外と見落としがちなのが「コピペによる括弧の削除」です。コードを移動したりリファクタリングしたりする際、うっかり閉じ括弧「}」を消してしまうミスが多発します。
・解決のコツ：VS Codeなどのエディタを使用している場合、閉じ括弧にカーソルを合わせると、対になる開始括弧がハイライトされます。これを使って「どの関数がどこで閉じているか」を論理的に追うのが最も確実です。
・エディタの機能活用：Prettierなどのコードフォーマッターを導入し、保存時に自動でインデントを整える設定にしておけば、括弧の閉じ忘れによる視覚的なミスを大幅に減らすことができます。
まずは焦らず、該当箇所の括弧のペアを一つずつ確認することから始めてみてください。
コメント