if文でよく見る「&&」と「| |」の動作をあなたは理解できてますか？「??」についても解説します！【JavaScript】

2024年10月14日 2024年10月14日

講師:中島

JavaScriptで条件分岐を行う際に多く使われる「&&（AND）」 や「 ||（OR）」 は、if文での基本的な演算子です。
さらに、最近のJavaScriptでは、「??（Null(ヌル)合体演算子）」という便利な演算子も追加されました。
これらの演算子の動作を理解しておくと、より短く効率的なコードが書けるようになります。

この記事は「&&や||の動作がイマイチ分かっていない」「なんとなく使っていた」という方に読んでいただきたい記事になっています。
では、演算子の動作を具体的な例とともに解説していきます！

目次：

この記事のポイント

「&&（AND）」 や「 ||（OR）」が何かがわかる
「??（Null(ヌル)合体演算子）」が何かがわかる
それらの具体的な使い方がわかる

`&&`の動作とは？

&&は「論理積」と呼ばれる演算子で、両方の条件が真(true)である場合のみ、全体として真となります。
左側の条件が偽(false) になると、右側の条件は評価されずにそのまま偽になります。

例：基本の使い方

const isChild = true;
const hasTicket = true;

if (isChild && hasTicket) {
  console.log('入場できます！'); //ここが実行される
} else {
  console.log('入場できません');
}

基本的なif文での使い方ですね。
結果をまとめると、以下のようになります。

true && true 　→true
true && false 　→false
false && true 　→false
false && false　→false

簡潔な動作の説明としては以下です。この動作が理解できているかが非常に重要です。

左辺がfalseだったら、そのまま左辺の値が返され、結果になる。
左辺がtrueだったら、右辺が評価され、右辺がそのまま返され結果になる。

次に応用の具体的なコードを見ていきましょう。
以下の２つのパターンは実務でも使用することがよくあり、
簡潔に記述できるというメリットがあります。

例：実務でよくある応用の使い方①　変数の値によって、関数の実行するかを変える

const judgeChild = () => {
return true
};
const hasTicket = false;


hasTicket && judgeChild(); //右辺のjudgechild関数は実行されない →実質は何も他の処理に影響しない

//↑上記はこのように書いているのと同じ動き↓
if (hasTicket) {
judgeChild();
}

例：実務でよくある応用の使い方②　変数の値によって、変数に入れる値を変える

const isLoggedIn = true;  // ユーザーがログインしているかどうか
const welcomeMessage = isLoggedIn && "ようこそ、ユーザーさん！";

console.log(welcomeMessage);  // "ようこそ、ユーザーさん！"



//↑上記はこのように書いているのと同じ動き↓
let welcomeMessage2;
if (isLoggedIn) {
  welcomeMessage2 = "ようこそ、ユーザーさん！";
} else {
  welcomeMessage2 = false;
}

console.log(welcomeMessage2);  // "ようこそ、ユーザーさん！"

| |の動作とは？

| |は「論理和」と呼ばれる演算子で、片方の条件がどちらかだけでも真(true)であれば、全体として真となります。
左側の条件が偽(false) になると、右側の条件が評価されます。
逆に左側の条件が真(true)の場合、右側の条件は評価されません。

例：基本の使い方

const isMember = false;
const hasCoupon = true;

if (isMember || hasCoupon) {
  console.log('割引が適用されます！');　//ここが実行される
} else {
  console.log('割引は適用されません');
}

こちらも基本的なif文での使い方ですね。
結果をまとめると、以下のようになります。

true && true 　→true
true && false 　→true
false && true 　→true
false && false　→false

簡潔な動作の説明としては以下です。この動作が理解できているかが非常に重要です。

左辺がfalseだったら、右辺の値が返され、結果になる。
左辺がtrueだったら、左辺がそのまま返され結果になる。

例：実務でよくある応用の使い方①　変数の値によって、関数の実行するかを変える

const judgeChild = () => {
return true
};
const hasTicket = false;


hasTicket || judgeChild(); //右辺のjudgeChild関数が実行される

//↑上記はこのように書いているのと同じ動き↓
if (!hasTicket) {
judgeChild();
}

例：実務でよくある応用の使い方②　変数の値によって、変数に入れる値を変える

const userInput = ""; // ユーザーが空欄の入力をした場合
const displayName = userInput || "ゲスト";
console.log(displayName); // "ゲスト"

const config = {
  theme: null, // 設定ファイルや外部入力でnullが入ることがある
};

const theme = config.theme || "light"; // デフォルトテーマは "light"
console.log(theme); // "light"

発展：??の動作とは？

初学者には少し難しめかもしれませんので、スキップでも大丈夫です。

?? は「Null(ヌル)合体演算子」と呼ばれる演算子で、左辺がnullまたはundefinedの時のみ右の値を返し、それ以外の場合に左の値を返す演算子です。
この挙動は、| | (論理和)と似ていますが、"" (空文字)、0 、NaNなど (nullとundefined以外の)「falsy」な値 には反応せず、nullと undefinedにだけ反応するという違いがあります。

例：基本の使い方

const result = 左側の値 ?? 右側の値;


const user = null;
const displayName = user ?? "ゲスト";

console.log(displayName);  // "ゲスト"

上記の例では userがnullなので、"ゲスト" というデフォルト値が返され、displayNameに代入されます。
もし userに有効な値が入っていた場合、その値が返されます。

通常&&や||と異なり、??はif文の条件式の中で使うことはないですが、一応下記に挙動をまとめておきます。

true ?? true 　→true
true ?? false 　→true
false ?? true 　→false
false ?? false　→false
undefined ?? true → true
null ?? true → true

簡潔な動作の説明としては以下です。この動作が理解できているかが非常に重要です。

左辺が undefinedかnullだったら、右辺の値が返され、結果になる。
左辺が trueだったら、左辺がそのまま返され結果になる。
左辺が false (undefinedまたはnull以外) だったら、左辺がそのまま返され結果になる。

次に応用の具体的なコードを見ていきましょう。
以下の3つのパターンは実務でも使用することがよくあります。

例：実務でよくある応用の使い方①　デフォルト値の設定ー設定ロジック

const userSettings = null;
const defaultSettings = { theme: "light", layout: "grid" };
const currentSettings = userSettings ?? defaultSettings;

console.log(currentSettings);  // { theme: "light", layout: "grid" }

例：実務でよくある応用の使い方①　デフォルト値の設定ー関数

function greet(name) {
  const displayName = name ?? "ゲスト";
  console.log(`こんにちは、${displayName}さん！`);
}

greet();         // "こんにちは、ゲストさん！"
greet("太郎");   // "こんにちは、太郎さん！"



//↑上記はこのように書いているのと同じ動き↓
function greet(name) {
  let displayName;
  if (name === undefined ) { // または name == nullでも同じ動作
    displayName = "ゲスト";
  } else {
    displayName =　name;
  }
  console.log(`こんにちは、${displayName}さん！`);
}

greet();         // "こんにちは、ゲストさん！"
greet("太郎");   // "こんにちは、太郎さん！"

例：実務でよくある応用の使い方②　APIレスポンスの処理

const apiResponse = {
  userName: null, // APIのレスポンスとしてはよくundefinedやnullが返ってくる
};

const username = apiResponse.userName ?? "ゲスト";
console.log(username);  // "ゲスト"



//↑上記はこのように書いているのと同じ動き↓
let userName;
if (apiResponse.userName == null ) {
 userName = "ゲスト";
} else {
  userName =　apiResponse.userName;
}

console.log(userName);  // "ゲスト"

補足: `falsy`とは？

簡潔にいうと、演算子などでfalseとして判定される値のことです。
JavaScriptでは、以下のような値はすべて「falsy」とみなされます。

false
0
" " や ' ' (空文字)
null
undefined
NaN（Not-a-Number）

応用編：演算子を組み合わせた使い方

例：よくある使い方①　&&と| |の組み合わせ

const user = { name: "Alice", isAdmin: false };

// isAdmin が true なら管理者、false ならゲストユーザーと表示
const userRole = user.isAdmin && "管理者" || "ゲストユーザー";

console.log(userRole);  // "ゲストユーザー"

解説：
user.isAdmin が true であれば && によって "管理者" が返されますが、false なので、|| により "ゲストユーザー" が返されます。
&& の評価が優先され、最初の条件が false であれば次の条件が || によって実行されます。

例：よくある使い方②　&&と??の組み合わせ

const user = { name: "Alice", age: null };
const userAge = user.age ?? (user.name && "年齢不詳");

console.log(userAge);  // "年齢不詳"

解説：
user.age が null なので、?? によって右側の式が評価されます。
user.name が存在するため、&& で "年齢不詳" が返されます。

まとめ

JavaScriptの条件分岐でよく使う &&と | | は、どちらもif文より簡潔に書け、　使う場面によっては、コードの可読性やパフォーマンスや開発効率を高める演算子です。
&& は両方が trueでなければ処理されず、| |はどちらかが trueであれば処理が実行されます。
また、?? は左辺がの値がnullまたは undefinedの場合にのみ右辺を返すため、0や空文字をそのまま使いたいときに便利です。

これらの演算子をうまく活用することで、if文を使わず、より柔軟で効率的な条件分岐を行うことができるので、ぜひ覚えておきましょう！