LVLPATH

日本最強無料プログラミングスクール

PATHSERVICEHANDS ONMANZI
JavaScript文法基礎: ショートサーキット

ショートサーキット

✅ ショートサーキット

ショートサーキットとは

ショートサーキット(short-circuit)は、条件分岐において評価を早期に終わらせる技法です。主に論理演算子(&&、||)を利用したものです。評価する条件が成立しない場合、その後の評価を省略します。

基本の使い方

  • 論理積 (&&)

左側の値が falsy であれば、右側の値を評価せずに結果を決定します。

逆に、左側が truthy であれば、右側の値を評価してその値を返します。

  • 論理和 (||)

左側の値が truthy であれば、右側を評価せずに左側の値を返します。

逆に、左側が falsy であれば、右側の値を評価してその値を返します。

✅ && の例

左側が falsy の場合、右側は評価されない

const isLoggedIn = false;

// 右側の console.log は評価されない
isLoggedIn && console.log("ユーザーはログインしています");

ここでは、isLoggedIn が false なので console.log() は実行されません。

左側が truthy の場合、右側が評価される

const isLoggedIn = true;

// 右側の console.log が評価される
isLoggedIn && console.log("ユーザーはログインしています");

ここでは、isLoggedIn が true なので console.log() が実行されます。

✅ || の例

左側が truthy の場合、右側は評価されない

const username = "Alice";

// 右側の "ゲスト" は評価されない
const displayName = username || "ゲスト";
console.log(displayName); // "Alice"

ここでは、username が truthy(つまり空でない文字列)なので、"ゲスト" は評価されず、username がそのまま displayName に設定されます。

左側が falsy の場合、右側が評価される

const username = "";

// 右側の "ゲスト" が評価される
const displayName = username || "ゲスト";
console.log(displayName); // "ゲスト"

ここでは、username が falsy(空文字列)なので、"ゲスト" が評価されて displayName に設定されます。

✅ ショートサーキットの利点

  • パフォーマンスの向上:条件を早期に評価して、無駄な処理を防ぐことができる。
  • コードの簡潔化:if 文を省略して1行で書ける場合が多い。
  • 副作用を使った処理:&& や || を使うことで、条件が満たされた場合に副作用を引き起こす処理を簡単に書ける。

✅ 練習例

コピペではなく実際に打ち込んで練習してみましょう。

1. && を使って条件が成立した場合のみ実行

const isActive = true;
isActive && console.log("アクティブな状態です");

ここでは、isActive が true なので、console.log() が実行されます。

2. || を使ってデフォルト値を設定

const name = "";
const displayName = name || "デフォルトの名前";
console.log(displayName); // "デフォルトの名前"

✅ まとめ(ショートサーキット)

&& は左が truthy の場合に右側を実行・返す。falsy の場合は即座に左側を返す

|| は左が falsy の場合に右側を評価して返す。truthy の場合はそのまま左側を返す

条件分岐を省略でき、コードをシンプルに保てる

if 文の代わりとして副作用のある処理やデフォルト値の代入に便利

お問い合わせ