早期 return を一言でいうと
早期 return（early return）は、
「ダメな条件のときは、関数の途中でさっさと抜けてしまう書き方」 です。
これを意識して書けるようになると、
if が何重にもネストした“モコモココード”から卒業できます。
読みやすい関数を書けるようになる、かなり重要なテクニックです。
まずは「早期 return なし」のコードを見てみる
ネストが深くて読みにくいパターン
ユーザーを処理する関数を考えます。
やりたいことはこうです。
- ユーザーがいなければ「ユーザーがいません」と表示して終わり
- ユーザーが非アクティブなら「アクティブではありません」と表示して終わり
- それ以外なら「処理します」と表示する
早期 return を使わないと、こんな感じになりがちです。
function processUser(user) {
if (user) {
if (user.isActive) {
console.log("処理します");
} else {
console.log("アクティブではありません");
}
} else {
console.log("ユーザーがいません");
}
}
一見、普通に見えますが、
if の中に if が入っていて、
「良いケース」が一番奥に押し込められています。
読み手は、
「if (user) の中を見て、さらに if (user.isActive) の中を見て…」
と、頭の中で階層を追いかけないといけません。
早期 return を使った書き方
ダメな条件から先に“追い出す”
同じ処理を、早期 return を使って書き直してみます。
function processUser(user) {
if (!user) {
console.log("ユーザーがいません");
return;
}
if (!user.isActive) {
console.log("アクティブではありません");
return;
}
console.log("処理します");
}
やっていることは同じなのに、
かなり読みやすくなったはずです。
ポイントはこうです。
- 「ダメな条件」を先にチェックして、その場で
returnしてしまう - 「全部の条件をクリアした“良いケース”」を、最後にフラットに書く
これが早期 return の基本的な考え方です。
ここが重要です。
早期 return は「悪いケースを先に外に出す」テクニック。
その結果、「良いケース」が一番読みやすい場所に残る。
早期 return のメリットをちゃんと整理する
1. ネストが浅くなって読みやすい
if の中に if、その中にさらに if…
というコードは、読むだけで疲れます。
早期 return を使うと、
「if の中に if を書く」のではなく、
「if を横に並べて書く」形にできます。
結果として、
関数の構造が「縦に深い」から「横にフラット」に変わります。
これは読みやすさに直結します。
2. 「正常系」が一番目立つ場所に来る
多くの場合、
自分が本当に読みたいのは「正常に動くときの流れ」です。
早期 return を使うと、
「エラーや例外的なケース」は上の方で処理してしまい、
「正常な処理」は最後にスッキリ書けます。
読む人は、
「上の方で“ダメなパターン”をざっと確認 → 最後の正常系をじっくり読む」
という流れで理解できます。
3. 条件分岐の漏れに気づきやすい
早期 return で「ダメな条件」を1つずつ潰していくと、
「この条件、ちゃんと考えてなかったな」という抜け漏れに気づきやすくなります。
「この場合はどうする？」を
if の形で一つずつ書いていくイメージです。
具体例で感覚をつかむ
フォーム入力チェックの例
ユーザー登録フォームの入力チェックを考えます。
やりたいことはこうです。
- 名前が空なら「名前を入力してください」
- メールが空なら「メールを入力してください」
- パスワードが短すぎたら「パスワードが短すぎます」
- すべてOKなら「登録処理を実行」
早期 return なしだと、こうなりがちです。
function validateAndSubmit(form) {
if (form.name) {
if (form.email) {
if (form.password && form.password.length >= 8) {
console.log("登録処理を実行");
} else {
console.log("パスワードが短すぎます");
}
} else {
console.log("メールを入力してください");
}
} else {
console.log("名前を入力してください");
}
}
ネストが深くて、読むのがしんどいですよね。
早期 return を使うとこうなります。
function validateAndSubmit(form) {
if (!form.name) {
console.log("名前を入力してください");
return;
}
if (!form.email) {
console.log("メールを入力してください");
return;
}
if (!form.password || form.password.length < 8) {
console.log("パスワードが短すぎます");
return;
}
console.log("登録処理を実行");
}
「ダメな条件」を上から順に書いて、
ダメならその場で return。
全部通過したら、最後に「登録処理を実行」。
読み手にとって、
「どんなときに弾かれて、どんなときに通るのか」が一目で分かります。
早期 return と戻り値を組み合わせる
エラー時はメッセージを返す関数
戻り値を使うパターンもよくあります。
例えば、
「バリデーション結果を文字列で返す関数」を考えます。
- 問題なければ
nullを返す - 問題があればエラーメッセージを返す
function validatePassword(password) {
if (!password) {
return "パスワードを入力してください";
}
if (password.length < 8) {
return "パスワードは8文字以上にしてください";
}
if (!/[0-9]/.test(password)) {
return "パスワードには数字を含めてください";
}
return null; // 問題なし
}
const error = validatePassword("abc");
if (error) {
console.log("エラー:", error);
} else {
console.log("OK");
}
ここでも、
「ダメな条件ごとに早期 return」
「最後に“問題なし”の戻り値」
という形になっています。
ここが重要です。
早期 return は「エラーを返す」「null を返す」「false を返す」など、
戻り値の設計とも相性がいい。
“ダメならすぐ返す、良ければ最後に良い値を返す”というパターンを覚えておくと強いです。
早期 return を使うときの注意点
早期 return だらけで逆に読みにくくしない
早期 return は便利ですが、
あまりにも細かく使いすぎると、
「どこで終わるのか」がバラバラになって逆に読みにくくなることもあります。
例えば、1つの関数の中にreturn が10箇所もあると、
「この関数、どこでどう終わるんだ？」と追いかけるのが大変です。
目安としては、
- 「ダメな条件を数個チェックして、最後に正常系」くらい
- それ以上に複雑になってきたら、関数を分割することも検討
くらいの感覚でいるとバランスが良いです。
初心者として「早期 return」で本当に押さえてほしいこと
早期 return は、
「ダメな条件のときは、関数の途中でさっさと抜ける」書き方。
その結果として、
- if のネストが浅くなり、読みやすくなる
- 正常系の処理が一番目立つ場所に来る
- エラーや例外的なケースを、上から順に“潰していく”形で書ける
というメリットがあります。
書くときのコツは、
- 「まずダメな条件を考える」
- 「ダメならメッセージを出して
return」 - 「全部クリアしたら、最後にやりたい処理を書く」
という順番で関数を組み立てることです。
もし今、
自分のコードの中に「if の中に if、その中にさらに if…」という場所があったら、
それは早期 return に書き換えるチャンスです。
一箇所でいいので、
そのネストを「ダメな条件から先に return する形」に書き直してみてください。
その瞬間、
「お、コードが一段スッキリしたぞ」という感覚が、ちゃんと手応えとして残るはずです。