【JavaScript】条件が成り立たない場合の別の処理 else 。if を深堀して解説。

JavaScript プログラミング

daiki

こんにちは、daikiです。

今回は、Progate で JavaScript を学んでいるので、その時学んだものを共有します。
条件が成り立たない場合の別の処理 else 。
こちらを解説です。

まずは if について過去の記事でおさらいです↓
分かる方はスルーでOK。

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

if は翻訳すると「もし」という意味。
if 文を用いる場合は、「もし○○ならば●●を行う」という指示でしたよね。

これに else が加わります。

else が加わることによって、条件が成り立たない場合の処理でも、別の処理を行うことが可能になります。

今回はそちらを学んでいきましょう。
では、深堀です😌

条件式が成り立たなくても別の処理ができるのが else です


if 文を用いて else を詳しく解説します。

else を詳しく

else は翻訳すると「そうしないと」という意味です。
これがプログラミングでは少し違います。

プログラミングでは「そうしないと」というより、「そうでなければ」と言う感じになる。

if が「もし○○ならば●●を行う」でしたね。
これにさらに指示を送りたい。

そんな時に else です。

else を加えると、「もし○○ならば●●を行う、そうでなければ□□も行う」という風になります。

else を使うことによって、たとえ if の条件式が成り立たなくても別の処理が可能になる。

というわけです。

実際に else を用いて書いてみます

if 文に else を追加してみます。
その前にこちらが else の公式です。

if (条件式) {
  条件が「true」の時の処理
} else {
  条件が「false」の時の処理
}

条件が成り立たない場合の if の後に else が追加されています。
こちらを実際に書いて見ます。

const number = 7;
if (number > 10) {
  console.log("number は 10 より大きいです");
} else {
  console.log("number は 10 以下です");
}

こちらを表示させます。

number は10 以下です

上の「number は 10 より大きいです」という内容は表示されず、else を用いた下の方が表示されていますね。
これが else です。

else を使わない場合

else を使わなくても上と同じように処理することは可能です。
ただ、すこし書くことが増えます。

const number = 7;
if (number > 10) {
  console.log("number は 10 より大きいです");
}
if (number >= 10) {
  console.log("number は 10 以下です");

if 文にさらに if 文を追加するという方法です。
見てもらったら分かるように else の方が楽ですね。

それに if の時みたいに >= とか考えなくていいので。

出来るだけシンプルにするのがプログラミングを覚えるコツなので、この場合は else を優先的に覚えた方が良さそうです。

else if を用いてさらに深堀


else をさらに深堀してみます。

else if という追加がある

上の方で else について学んだので、ある程度分かったかと思います。
説明が下手なので伝わっていなかったらすみません🙇

次は else if のバージョンを紹介します。
先ほどの内容は、条件式➔追加というイメージです。

ですが次は、さらに追加させてみます。

if (条件式1) {
  条件式1が「true」の時の処理
} else if (条件式2) {
  条件式1が「false」、条件式2が「true」の時の処理
} else {
  どちらの条件式も「false」の時の処理

こちらが公式です↑

条件式➔追加➔さらに追加
という感じになります。

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

else if 文の公式を基に書いていきます。

const number = 7;
if (number = 10) {
  console.log("number は 10 より大きいです");
} else if (number = 5) {
  console.log("number は 5 より大きいです");
} else {
  console.log("number は 5以下です");

これを表示させると。

number は 5 以下です

一番下の else が優先的に表示されます。
これが「条件式➔追加➔さらに追加」の指示ですね。

以上です。軽く復習

少し復習しましょう。

if は「もし○○ならば●●を行う」でしたね。
そして、else を追加すると、「もし○○ならば●●を行う、そうでなければ□□を行う」。

else if の場合はさらに追加です。

「もし○○ならば●●を行う、そうでなければ□□を行う、そうでもなければ■■を行う」

言葉にするとこんな感じ。
長いですね。

else を用いると条件式が合わない場合でも別の処理を行う事ができるので便利です。
JavaScript を進めていると必ず出てくるので覚えておきましょう。

うん。
いい感じに終われそうなのでここまで。

では。