カテゴリ: JavaScript 更新日: 2025/10/22

JavaScriptの条件式で論理演算子(&&, ||, !)を活用する方法!初心者でもわかる使い方ガイド

JavaScriptの条件式で論理演算子(&&, ||, !)を活用する方法
JavaScriptの条件式で論理演算子(&&, ||, !)を活用する方法

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptの条件で複数の条件をまとめてチェックしたいんですが、どうすればいいですか?」

先生

「そういうときは論理演算子を使います。『&&(AND)』『||(OR)』『!(NOT)』の3つがありますよ。」

生徒

「それぞれどういう意味で、どう使うんですか?」

先生

「順番にわかりやすく説明しますね!」

1. 論理演算子とは?複数の条件をまとめて判定するための記号

1. 論理演算子とは?複数の条件をまとめて判定するための記号
1. 論理演算子とは?複数の条件をまとめて判定するための記号

論理演算子は、複数の条件を組み合わせて「すべて満たすか」「どれか満たすか」「条件を反転するか」などを判定するときに使います。

「条件式」はプログラムで「もし〇〇だったら…」と処理を分けるときの大切な部分です。

2. AND演算子(&&)の使い方

2. AND演算子(&&)の使い方
2. AND演算子(&&)の使い方

AND演算子は「かつ」と読みます。複数の条件すべてが真(true)だったときだけ、結果が真になります。

例えるなら、「今日は晴れている」かつ「気温が20度以上」でないと外出しない、という場合です。


if (isSunny && temperature >= 20) {
  console.log("外出しましょう!");
} else {
  console.log("今日は外出を控えましょう。");
}

ここでは isSunnytrue かつ temperature が20以上のときだけ「外出しましょう!」と表示されます。

3. OR演算子(||)の使い方

3. OR演算子(||)の使い方
3. OR演算子(||)の使い方

OR演算子は「または」と読みます。複数の条件のうち、どれか1つでも真なら結果が真になります。

たとえば、「今日は雨が降る」または「風が強い」なら傘を持っていく、という場合です。


if (isRainy || isWindy) {
  console.log("傘を持っていきましょう。");
} else {
  console.log("傘は必要ありません。");
}

雨が降っているか、風が強ければ「傘を持っていきましょう。」と表示されます。

4. NOT演算子(!)の使い方

4. NOT演算子(!)の使い方
4. NOT演算子(!)の使い方

NOT演算子は「〜でない」と読みます。条件の真偽を逆にします。つまり、真なら偽に、偽なら真に変える役割です。

例えば、「雨が降っていない」ことを調べたいときに使います。


if (!isRainy) {
  console.log("今日は晴れているかもしれません。");
}

isRainyfalseなら「今日は晴れているかもしれません。」と表示されます。

5. 複数の論理演算子を組み合わせる

5. 複数の論理演算子を組み合わせる
5. 複数の論理演算子を組み合わせる

論理演算子は組み合わせて使えます。例えば、「晴れているかつ気温が20度以上、または雨が降っていない」など複雑な条件を作れます。


if ((isSunny && temperature >= 20) || !isRainy) {
  console.log("外に出かけても良さそうです。");
}

かっこを使うことで、どの条件を先に判断するかをはっきりさせます。これを「優先順位」と言います。

6. 実際の生活に例えて理解しよう

6. 実際の生活に例えて理解しよう
6. 実際の生活に例えて理解しよう

論理演算子は「複数の条件を組み合わせる」ための便利な道具です。たとえば、料理のレシピで「材料がすべて揃っている」なら調理開始、または「特別な材料がある」なら代わりに使う、といった感じです。

このように、プログラムでも色々な条件を組み合わせて細かく処理を分けられます。

7. 論理演算子を使うときの注意点

7. 論理演算子を使うときの注意点
7. 論理演算子を使うときの注意点
  • 優先順位に気をつける
    論理演算子は順番によって結果が変わることがあるため、かっこを使って明確にしましょう。
  • 真(true)と偽(false)を理解する
    論理演算子は真偽値を扱うため、条件式が何を返すかを意識することが大事です。
  • 複雑すぎる条件は分けて書く
    コードが見にくくなる場合は、一つずつ条件を分けて書くとわかりやすいです。

8. よくある間違いと解決方法

8. よくある間違いと解決方法
8. よくある間違いと解決方法

例えば、!を使うときに「!isRainy == true」と書く人がいますが、これは不要です。!isRainyだけで十分です。

また、条件が複雑になったら途中でconsole.log()を使って結果を確認するのもおすすめです。

カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScript × ES6の連携まとめ!安全でモダンなJavaScript開発の鍵
New2
TypeScript
TypeScriptの型システムとは?静的型付けのメリットと基本
New3
JavaScript
JavaScriptの正規表現で繰り返し指定(* + ? {n,m})を学ぼう
New4
TypeScript
TypeScriptとESNextの連携を完全ガイド!最新機能を使いこなす設定と対応法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptの日時操作Tips!実務で役立つテクニック集
No.3
Java&Spring記事人気No3
TypeScript
TypeScriptでESLintとPrettierを導入!コード整形ルールを自動で統一する方法
No.4
Java&Spring記事人気No4
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
TypeScript
TypeScriptのif文の使い方を完全ガイド!初心者でもわかる条件分岐
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptの正規表現で文字列を置換する方法(replaceメソッド)
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptで非同期イテレーター(for await of)を活用する