JavaScript

JavaScriptの条件分岐の方法【if・else・else if】

どうも、つよぽんです!

今回は、JavaScriptで条件分岐を行う方法について解説していきます。

今回の記事は次のような方に向けて書きました。

想定読者
  • 「条件分岐」ってどんなことするもの?
  • if・else if・elseでどんなことが出来るの?
  • if・else if・elseの使い方を知りたい

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
JavaScriptでif-elseを使った条件分岐プログラミングで条件に応じて処理を切り替えたいときに使う「条件分岐」について学習します。条件分岐を行うためには「if」「else if」「else」というキーワードを使いますが、それぞれ3つの使い方についても詳しく解説します。...

それでは次の内容で話を進めていきます。

今回の内容
  1. 条件分岐とは
  2. JavaScriptのif・else if・elseの使い方

 

条件分岐とは

この章では「条件分岐とは何か?」について解説します。

条件分岐」とは、利用する値に応じて処理内容を切り替えることを言います。

例もなしに、定義だけで理解するのは難しいかと思いますので、以下に条件分岐の例を3つ挙げます。

条件分岐の例
  1. 年齢・性別・曜日によって映画館の料金を切り替える
  2. 自動販売機に入金された金額に応じて購入できるものと購入できないものをふりわける
  3. 駅の改札を通るときに定期券のチャージ金額が不足していて、なおかつ定期券の期間も過ぎていたら改札を閉じる

の例は、映画館でよくやっている「レディースデイ」や「シニア割引」に関するものです。

の例は、120円の缶ジュース150円のペットボトルジュースが含まれている自動販売機に関するものです。

120円を自動販売機に入れたときに缶ジュースは購入できる状態になりますが、ペットボトルジュースは150円必要なので購入できません。

しかし、150円を自動販売機に入れると全ての飲み物が買える状態になります。

の例は、そのままなので詳しい説明は省きますが、①②③のいずれも、条件に応じて処理内容が切り替わっていることがわかるかと思います。

この「条件に応じて処理内容を切り替える」ことを「条件分岐」と呼びます。

そしてJavaScriptで条件分岐を行いたいときに使うのが次の章で解説する「if」「else if」 「else」の3つのキーワードとなります。

JavaScriptのif・else if・elseの使い方

この章ではJavaScriptでの条件分岐の方法について解説します。

JavaScriptで条件分岐を行うためには次の3つのキーワードを使うことになります。

3つのキーワード
  1. if
  2. else if
  3. else

以下の画像は、上記3つのキーワードを実際に使ったときの様子になります。

if・else if・elseを使ったときのコードif・else if・elseを使ったときのコード

上記画像のサンプルコードは以下のリンクから直接確認することもできます。

条件分岐のサンプル1

それではのifから順番に解説していきます。

ifの使い方

JavaScriptで「if」キーワードを使って条件分岐を行うときは、以下の画像の左側のようにします。

ifの使い方ifの使い方

if」の直後に「(条件)」、その後に「{処理内容}」の形式で記述します。

{処理内容}」の中の処理は「(条件)」の値がtrueのときに実行されます。

画像の右側では実際の値を使っており、「(条件)」の部分に「(age >= 20)」を使って「true」「false」のいずれかの値がセットされるようになっています。

これによって、変数ageの値が20以上であれば「{処理内容}」で実装した処理が実行されます。今回の例だと「console.log(‘ageは20以上の値’)」が実行されます。

今回の画像の例では「(条件)」の部分に「比較演算子」を使っていますが、「論理演算子」を使うことも一般的です。

その理由は「比較演算子」「論理演算子」を使うことで「(条件)」の部分に「true」「false」のいずれかの値をセット出来るからです。

比較演算子・論理演算子がよくわからないという方は、以下の記事で比較演算子・論理演算子について解説しているのでそちらを参考にしていただけたらと思います。

あわせて読みたい
JavaScriptでBoolean値を取得【比較演算子・論理演算子】ループ処理や条件分岐などで必要になってくる「真偽値(boolean)」の主の取得方法を3つ解説します。①true・falseを直接使う、②比較演算子を使う、③論理演算子を使う。複雑な処理をしたいときに比較演算子・論理演算子を使うことになります。...

else ifの使い方

次にJavaScriptでの「else if」の使い方を解説します。

以下は「else if」の使い方を説明した画像になります。

else ifの使い方else ifの使い方

基本的には「if」と使い方は同じで、「if」と「else if」異なる点は次の2つとなります。

「if」「else if」の相違点
  1. 「else if」は単体では使えず、必ず「if」の後につなげて記述する
  2. 「if」の条件が「false」になったときだけ、「else if」の条件がチェックされる

そして「else if」は複数つなげる事もできて、「30歳以上」「20歳以上」「10歳以上」のように年齢に応じて複数の処理を切り替えたい場合は以下の画像のように実装することができます。

else ifを複数つなげている様子else ifを複数つなげている様子

上の画像で使われているコードの流れを説明すると次のようになります。

コードの流れ
  1. 変数ageに15を代入する
  2. 最初の「if」の条件は「15 >= 30」となり、数学的に正しくないため「false」となり、1つ目の「else if」の条件に移る
  3. 1つ目の「else if」の条件は「15 >= 20」となり、数学的に正しくないため「false」となり、2つ目の「else if」の条件に移る
  4. 2つ目の「else if」の条件は「15 >= 10」となり、数学的に正しいため「true」となり、2つ目の「else if」の実装内容である「console.log(‘ageは10以上20未満’)」が実行される
  5. 2つ目の条件で「条件分岐処理」が完了したため、3つ目の「else if」には移らず、一連の条件分岐のコードを終了する

elseの使い方

最後にJavaScriptでの「else」の使い方を解説します。

以下の画像は「else」の使い方を説明したものになります。

elseの使い方elseの使い方

「else」は「if」「else if」と異なり「(条件)」を記述する必要はありません。

「else」の役割は「全ての条件に当てはまらなかったときに処理を実行する」ことなので、「if」「else」の条件が全て「false」になった場合にのみ処理が実行されます。

そのような理由により、「else」も「else if」と同様に単体で使うことが出来ません。

また「else」を記述する位置は一連の条件分岐処理の一番最後になります。

「else」に関する説明は以下の画像にも書いたので、そちらも参考にしていただけたらと思います。

elseの説明まとめelseの説明まとめ

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. 「条件分岐」とは与えられた値に応じて処理内容を切り替えることである
  2. JavaScriptで条件分岐を行うときは「if」「else if」「else」を使う
  3. 「if」「else if」に記述する条件には「比較演算子」「論理演算子」を使うことが一般的

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptでif-elseを使った条件分岐プログラミングで条件に応じて処理を切り替えたいときに使う「条件分岐」について学習します。条件分岐を行うためには「if」「else if」「else」というキーワードを使いますが、それぞれ3つの使い方についても詳しく解説します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です