JavaScriptによるif…else ifの複数分岐について現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptによるif…else ifの複数分岐について解説しています。else ifを使用することによってif文の条件分岐に複数の条件を指定することができます。if...else ifを使った条件分岐の書き方の例を学びましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptによるif…else ifの複数分岐について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

if…else ifの複数分岐について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

if文とは

if文は、多くのプログラミング言語に用意されています。指定した条件式の流れに、条件分岐を設定するための構文のことです。

記述した条件が満たされた場合と満たされない場合の2つに処理の流れを分岐させて、それぞれ異なる処理を実行できます。
今回は、下記の複数の条件分岐の使い方について紹介します。

① 記述した条件が満たされた場合

② ①が満たされず別の記述した条件が満たされた場合

③ ①も②満たされなかった場合

 

[PR] フロントエンドで挫折しない学習方法を動画で公開中

複数の条件分岐の記述方法

JavaScriptによるif文では単独の条件分岐だけではなく、下記の記述方法で、複数の条件分岐を作って処理を分割できます。

if (条件式①) {
  記述した条件が満たされた場合の処理
} else if (条件式②) {
  ①が満たされず②の条件が満たされた場合の処理
} else {
  ①も②満たされなかった場合の処理
}

 

if, else ifを利用して複数の条件分岐を作成してみよう

if…else ifを使用した複数条件分岐の書き方は、以下の通りです。

サンプル①

let a = 10
let b = 10
let c = 200

if (a === b) {
    console.log("aとbの値は等しいです。")
} else if (a === c) {
    console.log("aとcの値は等しいです。")
} else {
    console.log("すべての条件に当てはまりませんでしたので、ロールバックします。")
}

#=>
aとbの値は等しいです。

サンプル②

let a = 10
let b = 200
let c = 10

if (a === b) {
    console.log("aとbの値は等しいです。")
} else if (a === c) {
    console.log("aとcの値は等しいです。")
} else {
    console.log("すべての条件に当てはまりませんでしたので、ロールバックします。")
}

#=>
aとcの値は等しいです。

サンプル③

let a = "あいうえお"
let b = "かきくけこ"
let c = "さしすせそ"

if (a === b) {
    console.log("aとbの値は等しいです。")
} else if (a === c) {
    console.log("aとcの値は等しいです。")
} else {
    console.log("すべての条件に当てはまりませんでしたので、ロールバックします。")
}

#=>
すべての条件に当てはまりませんでしたので、ロールバックします。

 

まとめ

if…else ifでの複数分岐の書き方は、

① 記述した条件が満たされた場合

② ①が満たされず別の記述した条件が満たされた場合

③ ①も②満たされなかった場合

条件分岐を複数書けるので複雑な処理もできますが

第三者が見てわかりやすいコードを書くことを心がけて使いましょう!

 

監修してくれたメンター

澤亀浩弥(さわかめひろや)

Webエンジニア。

開発実績等は勤怠情報管理システムの開発、地方銀行のプログラムの保守・運用、企業とインフルエンサーをマッチングさせるプラットフォームの開発。

25歳までプロ野球の世界を目指し独立リーグでプレー。

その後、某大手会社の製造業作業員として働いていたが毎日の単調な仕事よりもっとクリエイティブな仕事がしたいと思い友人エンジニアにプログラミング学習方法など教えてもらい独学で半年程学習した後、IT業界に転職し、現場経験を積んでフリーランスエンジニアとして独立。

現在はその経験をこれからプログラミングを学んでいく方に伝えていくためにより広い知識を勉強中です。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。