カテゴリ: 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でパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
New2
JavaScript
JavaScriptのfor文の書き方を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの関数でよくあるエラーとその解決法まとめ
New4
JavaScript
JavaScriptのイベント処理でよくあるエラーとその対処法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのマウスイベントの使い方(click, mouseoverなど)
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptの純粋関数(pure function)と副作用の違いを理解しよう
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.7
Java&Spring記事人気No7
TypeScript
TypeScriptの始め方:開発環境の構築手順【初心者向け】
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptのDOMContentLoadedとloadイベントの違いを理解しよう