短絡評価でデフォルト値を返す
短絡評価でデフォルト値を返す とは
||の短絡評価で「値がなければデフォルト」を表現する関数を実装する。本レッスンでは、短絡評価でデフォルト値を返す の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
短絡評価でデフォルト値を返す
if を書かなくても、|| と && という論理演算子だけで「分岐っぽいこと」が書けます。これは 短絡評価 (short-circuit evaluation) という性質を利用したテクニックで、JavaScript のコードを読む上では必須の知識です。読まずに動けば、というのが短絡評価です。
短絡評価は、左から評価していって、答えが確定した時点で右を評価しない 仕組みです。
false || xはxの結果次第なので右まで見ます。true || xは左のtrueだけで結果が確定するので、右は見ません。
|| と && の評価の特徴
JavaScript の || と && は、true / false ではなく 元の値そのもの を返すのが特徴です。
a || bは、aがtruthyならaを、そうでなければbを返すa && bは、aがfalsyならaを、そうでなければbを返す
JavaScript
console.log('hello' || 'world'); // 'hello'
console.log('' || 'world'); // 'world'
console.log(0 || 100); // 100
console.log('a' && 'b'); // 'b'
console.log(0 && 100); // 0ここで重要なのは、結果が
true/falseではなく 元の値 だという点です。'' || 'world'の結果はtrueではなく'world'です。JavaScript独特の挙動なので、最初は驚くかもしれません。
デフォルト値のパターン
もっとも有名な活用例が「値がなければデフォルトを使う」パターンです。
JavaScript
function welcome (name) {
const displayName = name || 'ゲスト';
return 'ようこそ、 ' + displayName + ' さん';
}
welcome('太郎'); // 'ようこそ、 太郎 さん'
welcome(''); // 'ようこそ、 ゲスト さん'
welcome(); // 'ようこそ、 ゲスト さん'name が undefined や空文字 '' のときは falsy なので、|| の右側の 'ゲスト' が返ります。if (name) { displayName = name; } else { displayName = 'ゲスト'; } の 4 行ぶんを 1 行で書けるのが利点です。
図の通り、内部的には if / else と同じ分岐です。短絡評価はその構造を 1 つの式に圧縮した記法 だと考えると理解しやすいです。
?? との違い
第 3 章の js-nullish-coalescing で扱った ?? も似た用途で使えますが、判定する対象が違います。
JavaScript
0 || 'default'; // 'default' (0 は falsy)
0 ?? 'default'; // 0 (0 は null / undefined ではない)
'' || 'default'; // 'default'
'' ?? 'default'; // ''「
0や''も有効な値として扱いたい」なら??、「とにかく値が空っぽいなら差し替えたい」なら||を使い分けます。今回のレッスンは||の方を扱います。
&& を使ったガード
&& も使い方を覚えておくと便利です。
JavaScript
function loudHello (msg) {
return msg && msg.toUpperCase();
}
loudHello('hi'); // 'HI'
loudHello(''); // ''
loudHello(null); // nullmsg が falsy なら、msg.toUpperCase() を呼ばずに msg そのものを返します。null.toUpperCase() のエラーを 未然に防ぐ イディオムです。
よくある間違い
0を有効値として扱いたいのに||を使う。const count = input || 10;はinputが0でも10に置き換わってしまいます。これを避けるには??を使うか、ifで明示的に判定します。- 戻り値が
true/falseだと勘違いする。'' || 'world'はtrueではなく'world'です。条件式以外の場所で使うときは、戻り値の型に注意します。 - 副作用付きの式を
&&の右側に置く。fn() && save();のようにすると、fn()がfalsyを返したときにsave()が実行されません。意図したロジックでなければif文にしましょう。
やってみよう
name (文字列、undefined の可能性あり) を受け取り、name が空でなければ 'ようこそ、 NAME さん' を、そうでなければ 'ようこそ、 ゲスト さん' を返す関数 welcomeMessage を、|| の短絡評価を使って実装してください。if 文を使わずに、|| だけで書きましょう。
よくある質問
Q. ブラウザと Node.js で動作は変わりますか？
A. JavaScript の構文・組み込み機能（配列・文字列・Promise 等）はどちらでも同じです。違いは DOM API（ブラウザ専用）と fs などのファイル系（Node 専用）など、実行環境固有の機能です。コアロジックは両方で動くため、テストもしやすくなります。
Q. ES6 以降の新機能は使っても大丈夫ですか？
A. 現代のブラウザ・Node.js は ES2020 以降の機能をほぼサポートしています。古い IE 等を対象にする必要が無ければ、let/const、アロー関数、分割代入、async/await を積極的に使ってください。トランスパイル（Babel/Vite）が必要なケースは年々減っています。
Q. TypeScript に進む価値はありますか？
A. 型情報があるとリファクタやエディタ補完が劇的に効くため、規模が大きくなるなら TypeScript への移行を強くおすすめします。最初は any を許容しつつ徐々に型を付ければ、JS の知識をそのまま活かせます。
次のレッスン
次は 第4章まとめクイズ で、|| の短絡評価で「値がなければデフォルト」を表現する関数を実装する を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- 短絡評価でデフォルト の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. 短絡評価でデフォルト とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
要件
- || の短絡評価を使ってデフォルト値を表現すること
- if 文を使わずに書くこと
- name が空文字や null のときは 'ゲスト' を使うこと
入出力例
test-cases.txt
welcomeMessage("太郎") → "ようこそ、 太郎 さん"
welcomeMessage("花子") → "ようこそ、 花子 さん"
welcomeMessage("") → "ようこそ、 ゲスト さん"
welcomeMessage(null) → "ようこそ、 ゲスト さん"
welcomeMessage() → "ようこそ、 ゲスト さん"