論理演算子と短絡評価
このレッスンで分かること
&&（かつ）、||（または）、!（〜でない）で条件を組み合わせます&&と||は真偽値ではなく、左右のどちらかの値そのものを返します
条件がひとつで済むことはめったにない
プロフィールサイトに作品を並べるとき、判定はたいてい重なります。「作品のデータが届いていて、かつ公開中のときだけ表示する」のように、複数の条件を組み合わせたい。これを担当するのが論理演算子です。
| 演算子 | 読み方 | 意味 | 例 |
|---|---|---|---|
&& | アンド | 両方が真のとき真 | hasPhoto && likes >= 100 |
|| | オア | どちらかが真なら真 | isPinned || hasPhoto |
! | ノット | 真偽を反転する。返るのは必ず true か false | !isPinned |
JavaScript
const hasPhoto = true;
const likes = 120;
console.log(hasPhoto && likes >= 100); // true 両方満たす
console.log(hasPhoto && likes >= 200); // false 右が偽
console.log(hasPhoto || likes >= 200); // true 左が真
console.log(!hasPhoto); // false 反転返るのは true / false ではなく値そのもの
ここが JavaScript の論理演算子でいちばん大事なところです。&& と || は真偽値を作って返しているのではなく、左右のオペランドのどちらかをそのまま返しています。
JavaScript
console.log("プロフィール" && "作品一覧"); // 作品一覧
console.log("" && "作品一覧"); // 空文字
console.log("プロフィール" || "作品一覧"); // プロフィール
console.log(0 || 120); // 120ルールは 2 つだけです。A && B は A が falsy なら A を、truthy なら B を返します。A || B は A が truthy なら A を、falsy なら B を返します。第2章で扱った falsy の感覚が、そのまま論理演算子の挙動の理解につながります。
値そのものが返るということは、戻り値が boolean とは限らないということです。関数から真偽を返したいときは Boolean() で包んで形をそろえます。包み忘れると、=== false で比べているコードからは見えないバグになります。
!を 2 つ重ねた!!valueという書き方もあります。反転の反転なのでBoolean(value)と同じ意味ですが、読みやすいのはBooleanのほうです。新しく書くならこちらを使ってください。
左辺で決まると右辺は読まれない
&& と || は、左辺だけで結果が確定した時点で右辺の評価をやめます。これを短絡評価と呼びます。
JavaScript
function log(value) {
console.log("評価された", value);
return value;
}
false && log("右辺"); // 何も表示されない
true || log("右辺"); // 何も表示されない
true && log("右辺"); // 評価された 右辺単なる最適化ではなく、意図して使うテクニックでもあります。
JavaScript
const profile = null;
// console.log(profile.bio); // TypeError で落ちる
console.log(profile && profile.bio); // null エラーにならないprofile が null のとき、profile.bio を単体で書くと実行時エラーになります。profile && を左に置けば、profile が falsy の時点で右辺が読まれないため、落ちずに済みます。この「ガード」の書き方は現場のコードに山ほど出てきます。
よくある間違い
&&の戻り値を boolean だと思い込む —likes && likes >= 100は、likesが0のとき0を返します。falseではありません
JavaScript
console.log(0 && true); // 0
console.log(Boolean(0 && true)); // falsea === 1 || 2と書く — 「a が 1 または 2」のつもりでも、2は truthy なので式全体が常に truthy になります。a === 1 || a === 2のように、比較を 2 回書いてください
要件
- 関数名は
isVisible、引数はworkの 1 つにすること workがnullやundefinedのときもエラーにせずfalseを返すこと- 戻り値は必ず boolean (
trueまたはfalse) にすること &&の短絡評価を使い、Boolean()で真偽値にそろえること
入出力例
isVisible({"published":true,"title":"プロフィールサイト","views":120,"year":2026}) → true
isVisible({"published":false,"title":"自己紹介カード","views":40,"year":2026}) → false
isVisible(null) → false
isVisible() → false
isVisible({"published":true,"title":"","views":0,"year":2026}) → trueヒント
