【JavaScript】条件分岐 if 文を簡単に解説。ついでに真偽値と比較演算子も。

JavaScript プログラミング

daiki

こんにちは、daikiです。

今回は、Progate の JavaScript で学んだこと、条件分岐 if 文について簡単に解説します。
そのついでに真偽値と比較演算子も解説します。

JavaScript を学んでいくと if 文というものを使います。

const number = 12;
if (number > 10) {
  console.log("number は10より大きい");
}

↑これですね。

if 文は条件分岐を表すときに必要なものなので覚えておいた方がいいですよ。

JavaScript で条件分岐は必須なので覚えるべし、単語は if です。

では、深堀します😌

※ついでに真偽値と比較演算子も解説しています。

JavaScript の条件分岐 if 文


JavaScript を学んでいくと「if」という条件分岐を使います。
こちらを解説。

「if」は日本語翻訳すると「もし」という意味です。
これはプログラミングでも同じ。

「もし~するなら」と置き換えて表されます。

条件分岐を詳しく

条件分岐はプログラミングをやるには重要な要素です。

プログラミングを学んでいると下の場面が出てきます。

「ある条件が成り立つときだけある処理を行う」

このようなプログラムが条件分岐と言います。

const number = 12;
console.log("number は10より大きい");

例として、上に条件分岐を追加してみます。

number は10より大きいですよ。
という条件分岐の指示を与える場合。

条件分岐のコードは if を用います。

const number = 12;
if (number > 10) {
  console.log("number は10より大きい");
}

という風になります。

if 文を詳しく

上でも書いていますが、if は「もし」という意味です。
if 文を用いると、「もし○○ならば●●を行う」という条件分岐が可能になります。

if (条件式) {
  処理
}

これが if の公式です。
条件式の所に「条件が成り立つ」場合の処理を書きます。

数学で「<(小なり)>(大なり)」を学んだ記憶はありますか?
これを用います。

では実際に書いてみます。

const number = 12;
if (number > 10) {
  console.log("number は10より大きい");
}

上の方で何度も書いている内容です。
こちらを例に解説。

if の条件式に number > 10 と書かれているのが分かります。
それを条件に console.log で出力。

number は10より大きい

と表示されます。
ただ、これだけだと console.log だけの時と同じ感じでイメージしづらいと思いますので、少し応用。

if 文をさらに深堀

if 文を僕なりに分かりやすく書いてみます。
と言っても、ほぼ Progate から引用しています😌

const number = 12;
console.log(number >= 10);
console.log(number < 10);

if (number >= 10) {
  console.log("number は10より大きい");
}

ここでの「 = 」は等しいという意味。
これを出力すると。

true
false
number は10より大きい
}

こんな感じで表示されます。
また、新しいのがありますね。

「true, false」

if の条件式に対して正しいものは true 、正しくないものは false と表示される。

これは真偽値と呼ばれるものです。
これは後に解説しますので置いときます。

if 文を用いるとこのように表示させたいものと、表示させたくないものを指定することができる。

今は書きませんが、また別の記事でも解説します。
なので、ここで覚えてほしいのは if は「もし○○ならば●●を行う。」ということ。

これだけで大丈夫です。

説明が下手かもしれません。
伝わりづらかったら、すみません🙇

ついでに2つほど解説。


if 文については理解していただけたと思います。
なので、おまけに2つほど追加で解説します。

「真偽値」と「比較演算子」

この2つを深堀です😌

真偽値

真偽値に至っては上の方で出ていましたね。

const number = 12;
console.log(number >= 10);
console.log(number < 10);

if (number >= 10) {
  console.log("number は10より大きい");
}
true
false
number は10より大きい
}
if の条件式に対して正しいものは true 、正しくないものは false と表示される。

これが真偽値です。

条件式が成り立つ場合は true と表示され、成り立たない場合は false と表示されるんです。

これが役に立ちます。

JavaScript で間違った部分がすぐに発見できるのでありがたい。

そういったものです。
簡単ですね。

比較演算子

次は比較演算子です。
実は先ほどまで書いていたものがそうです。

「 < > = 」
簡単に言うと、これですね。

ちょっと、解説が難しいので詳しく知りたい方はググってみてください。

一様解説します。

if 文の条件式に当てはめて、真偽値を表す前提のものです。

比較演算子は「左と右の値が等しいか?」を調べるものもあります。

(a === b) — a と b が等しい
(a !== b) — a と b が異なる

実際に書いてみます。

const password = "daikips";

if (password === "daikips") {
  console.log("ログインに成功しました");
}

if (password !== "daikips") {
  console.log("パスワードが間違っています");
}

上を出力した場合。

ログインに成功しました

下の方の異なる場合は表示されません。

こんな感じかな。

再度復習

少し強引な気がしますが、解説は以上です。
なので改めて復習。

条件分岐を表す単語は if であり、if 文を用いることで「もし○○ならば●●を行う」という条件を指定できる。

真偽値は「true , false」で表示され、問題点の把握が可能。

比較演算子は、条件式の数式「< > =」を用いて表す。
他には「===」「!==」などもある。

と言った感じですかね。

あまり分かりやすい解説とは言えませんが、なんとか伝われば嬉しいです。

では、今日はここまで😌