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

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

 

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

 

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

 

 

目次

• if文とは
• 複数の条件分岐の記述方法
• 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講座を開催しています。

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