YovStudio

article 読むトレ #03：カッコがないと誰でも入れる!?

公開日: 2025-06-21著者: Yov in YovStudio

今回のお題コード

AI 「アカウントが有効で、メール認証かSNS連携のどちらかが済んでいるユーザーだけ、メンバー限定ページにアクセスさせる処理を書いてみました！どうでしょう？」

const user = {
  isActive: false,           // アカウントは停止中
  isEmailVerified: false,    // メール認証はしていない
  isSnsLinked: true          // SNS連携はしている
};

if (user.isActive && user.isEmailVerified || user.isSnsLinked) {
  console.log("✅ アクセス許可されました");
} else {
  console.log("⛔ アクセスできません");
}

どう動く？

さっそく読んでみましょう。 このコード、どういうユーザーが「アクセス許可」になると思いますか？

以下のようなサイトで動かしてみてもよいです。

気になる動き

実行すると、こうなります。

✅ アクセス許可されました

えっ、許可されちゃいましたね？ このユーザー、「アカウント停止中」ですが、アクセスできちゃっていいんでしょうか…？

const user = {
  isActive: false,
  isEmailVerified: false,
  isSnsLinked: true
};

AI はアカウントが有効で、メール認証かSNS連携のどちらかが済んでいるユーザーだけ、メンバー限定ページにアクセスさせたいと言っていました。
たしかに SNS 連携は済んでいるけど、それだけで OK にしていたつもりはなかったはず。

原因は「条件の評価順の考慮が抜けていた」

この if 文をもう一度見てみましょう。

if (user.isActive && user.isEmailVerified || user.isSnsLinked)

JavaScript をはじめ、ほとんどの言語の評価ルールでは、&& のほうが || よりも 先に処理されます。今回のように && と || が混ざっているときは、思った通りの順番で評価されるか注意が必要です。

実際、この if 文は次の順番で評価されます。

// 1. アカウントが有効かつメール認証が済んでいるか
user.isActive && user.isEmailVerified
// 2. またはSNSが連携されているか
|| user.isSnsLinked

そう、この評価順では SNS 連携さえしていればアカウントが有効ではなくても条件を満たしてしまうのです。

どう修正する？

if 文に && と || が混ざるときは、どういう順番で評価してほしいか、条件式を () で括って明示するのがよいです。 仮に () をつけないままで順序が正しかったとしても、です。
これには、() で括られている条件が優先的に評価されるから、というロジック的な理由と、コードを読む人にあなたの意図を正確に伝えられるという読みやすさを考えた理由の 2 つがあります。読む側としては、意図がカンタンに読み取れるようになっているだけで迷いがなくなるのでとてもありがたいのです。

今回、AI の要望を本当に満たす条件式はこうでした。

if (user.isActive && (user.isEmailVerified || user.isSnsLinked))

つまり、「アカウントが有効」かつ「メール認証済み または SNS連携あり」の場合だけアクセス許可するという条件になり、AI が希望していた要件を満たせます。

もしくは、以下のように、途中で変数を使って分解しても読みやすくなりますよ。

const isActive = user.isActive;

// 「このユーザーは信頼できるかどうか」という意味合いで isTrusted と名付けています。
// 実際、メール認証が済んでいるか、SNS連携済みか でユーザーの信頼性を確認することは多いです。
const isTrusted = user.isEmailVerified || user.isSnsLinked;

if (isActive && isTrusted) {
  console.log("✅ アクセス許可されました");
} else {
  console.log("⛔ アクセスできません");
}

今回の読みどころ

  • && と || が混ざるときは、どの条件をまとめたいのかカッコで明示すること
  • 優先順位は && > || だけど、読む人にも意図が伝わるように
  • 条件式の「論理構造」を読むクセをつけよう

おまけ：修正版のコード

const user = {
  isActive: false,
  isEmailVerified: false,
  isSnsLinked: true
};

if (user.isActive && (user.isEmailVerified || user.isSnsLinked)) {
  console.log("✅ アクセス許可されました");
} else {
  console.log("⛔ アクセスできません");
}
list 記事一覧に戻る