短絡評価（&& / ||）を利用した条件実行 — cond && fn()
JavaScript の 論理演算子 && と || は「真偽値の判定」だけでなく、短絡評価（ショートサーキット）を利用して「条件付きで処理を実行する」書き方に使えます。
初心者は「左側の値次第で右側が実行されるか決まる」と覚えると理解しやすいです。
基本の仕組み
cond && fn()- 左側
condが true のときだけ右側fn()が実行される。 - 左側が false なら右側は無視される。
- 左側
cond || fn()- 左側
condが true なら右側は無視される。 - 左側が false なら右側
fn()が実行される。
- 左側
コード例
条件付き実行（&&）
const isLoggedIn = true;
isLoggedIn && console.log("ログイン済みです");
// → "ログイン済みです"
const isAdmin = false;
isAdmin && console.log("管理者です");
// → 実行されない
条件付き代替（||）
const name = "" || "ゲスト";
console.log(name); // → "ゲスト"
const age = 20 || 30;
console.log(age); // → 20 （左が truthy なので右は無視）
よく使うテンプレート集
関数を条件付きで呼ぶ
function greet() {
console.log("こんにちは！");
}
const shouldGreet = true;
shouldGreet && greet(); // → "こんにちは！"
デフォルト値を設定
function printName(name) {
const safeName = name || "ゲスト";
console.log("名前:", safeName);
}
printName("Aki"); // → "名前: Aki"
printName(""); // → "名前: ゲスト"
オブジェクトの存在チェック
const user = { profile: { name: "Mika" } };
user.profile && console.log(user.profile.name);
// → "Mika"
const user2 = {};
user2.profile && console.log(user2.profile.name);
// → 実行されない（安全にスキップ）
例題: ボタンのクリックイベント
function onClick() {
console.log("ボタンがクリックされました");
}
const isEnabled = true;
isEnabled && onClick(); // → 実行される
const isEnabled2 = false;
isEnabled2 && onClick(); // → 実行されない
- 効果: 条件が true のときだけ関数を呼び出せる。
実務でのコツ
&&は「条件が true なら実行」に使う。||は「条件が false なら代替」に使う。- 可読性: 短く書けるが、複雑な条件では
if文の方が読みやすい。 - デフォルト値:
||は falsy（0, “”, false も含む）を代替するので注意。- 「null/undefined だけ代替したい」なら
??を使う。
- 「null/undefined だけ代替したい」なら
ありがちなハマりポイントと対策
0や""が falsy 扱いされる:const page = 0 || 1; console.log(page); // → 1 （0が代替されてしまう）→ 対策:??を使う。- 複雑な条件で乱用すると読みにくい:
→ 素直にif文を使う方が安全。
練習問題（条件付きログ）
function logIf(cond, msg) {
cond && console.log(msg);
}
logIf(true, "条件を満たしました"); // → "条件を満たしました"
logIf(false, "条件を満たしました"); // → 実行されない
直感的な指針
cond && fn()= 条件が true なら実行。cond || fn()= 条件が false なら実行。- 短く書けるが、複雑な条件は if 文を使う。
- 初心者は「ログ出力」「デフォルト値」「存在チェック」で練習すると理解が深まる。
これを覚えれば「簡単な条件付き処理」をスッキリ書けるようになり、コードが読みやすくなります。