1. 正常な入力
  2. age が 0 でも正常
  3. name が空文字列
  4. age が負の数
  5. age が数値ではなく文字列
コース一覧
JavaScript基礎文法:処理を組み立てる
早期 return でネストを浅くする

JavaScript基礎文法:処理を組み立てる

if・switch による条件分岐、配列とループ、関数とコールバック、オブジェクトを順に組み立てる全 33 レッスン(525 分)の基礎文法コースです。FizzBuzz、作品リスト、関数への整理、作品データの構造化を通して、入力から結果を返す処理を自分で分解して書きます。DOM 操作は次のコースで扱います。

1
条件分岐
01. if 文の基本15分
02. if / else if / else で段階判定15分
03. switch 文で値を一覧から選ぶ15分
04. 条件を組み合わせる20分
05. FizzBuzz で複数条件を組み立てる20分
06. つくる 時間帯で挨拶を変える20分
07. 第1章まとめクイズ10分
2
配列とループ
01. 配列のきほん15分
02. 要素を足す・取り除く15分
03. for ループで合計を求める15分
04. for-of で配列を走査する15分
05. while で条件を満たす間くり返す15分
06. break と continue でループを制御する15分
07. つくる 作品リストを一覧にする20分
08. 第2章まとめクイズ10分
3
関数
01. 関数宣言15分
02. アロー関数15分
03. デフォルト引数15分
04. 早期 return でネストを浅くする15分
05. 変数のスコープ15分
06. コールバック関数15分
07. forEach で配列をまわす15分
08. つくる 処理を関数に整理する20分
09. 第3章まとめクイズ10分
4
オブジェクト
01. オブジェクトのきほん18分
02. オブジェクトで複数の値を返す16分
03. const と参照18分
04. ?. で安全に取り出す16分
05. 分割代入18分
06. スプレッド構文18分
07. find と includes で探す16分
08. つくる 作品データを構造化する25分
09. 第4章まとめクイズ10分

早期 return でネストを浅くする

ガード節
解説

このレッスンで分かること

  • return は関数をその場で終わらせるので、不正な入力を冒頭で追い返せます
  • ガード節を並べると else が消えて、本体が一番浅い位置に来ます

条件が 1 つ増えるたびに、本体が奥へ埋まる

第 4 章で if と else を学んだとき、条件が増えるほどコードが右へずれていくのを体験したはずです。あのときは我慢するしかありませんでした。return をまだ知らなかったからです。

作品カードの 1 行を作る関数で、入力を 3 つ検査してみます。

JavaScript

function workCard(title, views) { if (title) { if (typeof views === "number") { if (views >= 0) { return title + " 閲覧 " + views + " 回"; } else { return "表示できません"; } } else { return "表示できません"; } } else { return "表示できません"; } }

やりたいことは 1 行だけなのに、3 段の奥に埋まっています。else がどの if のものか目で追う必要があり、検査をもう 1 つ足すには本体を丸ごと包み直すことになります。

入口で追い返せば、本体は一番浅い位置に来る

return には「値を返す」だけでなく「そこで関数を終わらせる」働きがありました。これを使って、通したくない入力を冒頭で帰らせます。これをガード節、または早期 return と呼びます。

JavaScript

function workCard(title, views) { if (!title) return "表示できません"; if (typeof views !== "number") return "表示できません"; if (views < 0) return "表示できません"; return title + " 閲覧 " + views + " 回"; }

行数はほとんど変わりませんが、読みやすさは別物です。

観点ネスト版ガード節版
本体のインデント3 段の奥一番浅い位置
else の数3 個0 個
検査を 1 つ足す手間全体を包み直す1 行足すだけ

門番を並べておいて、引っかかった呼び出しにはその場で帰ってもらう。門を全部通り抜けた呼び出しだけが本体に届くので、本体は正常な値だけを想定して書けます。最初の数行を読むだけで、その関数がどんな入力を受け付けるのかが分かります。コメントを書かなくても、コードそのものが入力の仕様書になります。

ガード節を書いたら、else は要らない

if の中で return している以上、その先へ進むのは条件が偽だったときだけです。else は何の情報も足していません。

JavaScript

// 冗長 if (views < 0) { return "表示できません"; } else { return "OK"; } // すっきり if (views < 0) return "表示できません"; return "OK";

もう 1 つ大事なのが、はじいたときの戻り値をそろえることです。あるときは null、あるときは空文字列、あるときは文言、とばらばらだと、呼び出す側が毎回違う判定を書くはめになります。異常のときは必ずこれを返す、と 1 つに決めてください。

解説

else が悪いわけではありません。同じ重みの選択肢が並ぶときは if / else if / else が正解です。ガード節は異常なケースを先に落とすための道具で、対立する考え方ではありません。

よくある間違い

  • return を書かずに値だけ置く — if (!title) { "表示できません"; } では何も起きません。判定はしていますが関数は終わらず、そのまま下の行へ進みます
  • ! を付け忘れる — ガード節は否定形で書く場面が多く、if (title) return "表示できません"; と書くと、名前があるときにはじくという逆の動きになります。書いたあとに「この条件が真のとき何が起きるか」を一度声に出して確かめてください

要件

  1. 関数名は greetUser、引数は name と age の 2 つにすること
  2. 不正な入力は関数の冒頭でガード節を使って return すること
  3. エラー時の戻り値は文字列 入力エラー に統一すること
  4. 正常時は こんにちは、NAME さん (AGE 歳) の形の文字列を返すこと

入出力例

greetUser("山田 太郎", 20) → "こんにちは、山田 太郎さん (20 歳)" greetUser("山田 太郎", 0) → "こんにちは、山田 太郎さん (0 歳)" greetUser("", 20) → "入力エラー" greetUser("山田 太郎", -1) → "入力エラー" greetUser("山田 太郎", "20") → "入力エラー"

ヒント

はじきたい条件を先に紙に書き出し、1 行ずつ if で並べると迷いません

`if (条件) return "入力エラー";` を縦に 3 行並べ、最後に本体の return を書きます

0 歳は正常な入力です。`if (!age)` と書くと 0 まではじいてしまうので、`age < 0` で判定してください

生田 陸人
監修生田 陸人
ゆめさくエンジニア / 現役ソフトウェアエンジニア監修者プロフィールを見る →
編集 ゆめさく編集部·公開 2026/05/19·更新 2026/08/26

関連レッスン

  • 変数のスコープ

    宣言した変数がどこから見えるかという範囲について学びます。関数の外を汚してしまうバグを、ローカル変数に直して防ぎます。

  • コールバック関数

    他の関数に引数として渡し、あとで呼んでもらう関数について学びます。第9章でボタンのクリックに反応させるとき、この仕組みがそのまま使われます。

  • forEach で配列をまわす

    配列の各要素に対してコールバック関数を順番に呼んでくれるメソッドを学びます。作品一覧の組み立てを forEach で書き直します。

  • つくる 処理を関数に整理する

    第6章で学んだ関数の書き方を総動員して、プロフィールページの文字列を組み立てます。挨拶と作品一覧を別々の関数に分けるのがポイントです。

このレッスンに出てくる用語

意味があいまいなまま進んだ語は、ここから読み直せます。

  • 関数処理に名前を付けて再利用できる単位
  • インデントPythonはインデント(通常スペース4つ)でコードブロックを定義する。
  • コメント# で1行コメント。
  • 戻り値呼び出し元への返答を表す点線矢印
  • 引数位置引数=順番で渡す。
main.js
学習モード
エディタを読み込んでいます

メモ

早期 return でネストを浅くする

⌘S で保存