【JavaScript入門】条件によって処理を分岐する!if文について解説! | プログラミング入門ならWEBCAMP NAVI
【12月枠も残りわずか】転職保証コース

【JavaScript入門】条件によって処理を分岐する!if文について解説!

JavaScript

プログラムは処理の流れと変数の動きで説明されます。その処理の流れを制御する方法の1つ、条件分岐をご存知でしょうか?

もしご存じなければ、いまプログラム習得の第1歩を歩み始めたということです。ここでは、プログラムの重要な基本構文である「条件分岐」を詳しく説明します。

さあ、プログラムの広大な世界の歩き方を学んでいきましょう。

if文で条件分岐する

条件分岐というのは、特定の条件が成立した場合(しなかった場合)に別の処理をするということです。

もちろん、その分かれ道は3本でも4本でもかまいませんし、分かれたまま進んでも、また合流してもかまいません。

ここでは、そんな条件分岐を行うために必要な基本的なことを説明します。

基本構文

まずは、プログラムを条件分岐させる基本的な構文であるifの構文を説明しましょう。

if分の基本構文は、次のようになっています。

  :
処理a

if(条件A){
  処理A
}
else if(条件B){
  処理B
}
else{
  処理C
}

処理b
  :

この場合、処理は以下のように流れます。

if文の処理の流れ
 (1) 処理aを行う

(2) 条件Aを確認して、成立したら、処理Aを行う
(2)’ 条件Aが成立しなければ、条件Bを確認して、成立したら、処理Bを行う
(2)”条件Bが成立しなければ、処理Cを行う

(3) 処理bを行う

このように、if分を使うと条件が成立したかどうかで処理を切り替えることができ、どれか1つの処理だけを行って合流することができるのです。

なお、処理部分には何行の処理があってもかまいません。また、else if(){}はいくつでも追加可能で、入れなくても構いません。また、else{}省略可能ですが、できる限りあったほうが想定外のバグを防ぐことができます。

例えば、姓と名、年齢のいずれかを表示するプログラムは、以下のようになります。
(if1-1.js)

let fst_name = "松本";
let sec_name = "太郎";
let age = "34";
let disp = "";

let inp = "名";  // ユーザーから選択されたとする(1)

if(inp === "姓"){
  disp = fst_name;
}
else if(inp === "名"){
  disp = sec_name;
}
else if(inp === "年齢"){
  disp = age;
}
else {
  disp = "不正な入力";
}

document.write (disp + " です。");

ここでは、(1)で”名”が代入されていますので、このプログラムを実行すると「太郎 です。」と表示されます。inpに代入する値をいろいろと変更して、動きを確認してみましょう。

お試しテスト1(if)

さっそくですが、if文を使ったテストをやってみましょう。

if1-1.jsのプログラムを改造して、inp“年齢”を代入しても「不正な入力 です。」と表示されるようにしてください。

条件とは?

if文は条件が成立したときに行う処理を設定して、処理を分岐させます。

そのため、条件がどういうものなのか理解しておかなければ、思ったようにプログラムできないでしょう。

「条件が成立する」というのは、条件部分に設定された式(条件式など)が正しかった場合のことです。

例えば、if1-1.jsで、inpに”名”が代入されていた場合、条件式「inp === “姓”」は正しくありません。そのため、変数dispにfst_nameが代入されることはありません。(次に確認する「inp === “名”」は正しいので、dispにsec_nameが代入され、分岐を終えます)

真(true)と偽(false)

なお、条件が正しいこと「真」もしくは「true」正しくなかった場合「偽」もしくは「false」と呼びます。

不要なバグを減らして可読性を上げるためにも、if文の条件には、このどちらかになる処理を記載すべきです。

条件式は、条件が成立した場合に「true」、成立しなかった場合は「false」を返すようになっています。(JavaScriptでは、trueとfalseは予約語になっており、変数名などには使えません)

つまり、if文というのは条件式の結果がtrueだった場合に処理を行うようになっていると言うわけです。

そのため、以下のif分は処理Aが必ず実行されます。

if(true){
  処理A
}

比較演算子

if1-1.jsで条件式に使っている「===」というのは、比較演算子の1つで厳密に等しいかどうかを確認するものです。

他にも、値が等しい場合にtrueを返す「==」、左辺が大きい場合にtrueを返す「>」なども比較演算子です。

JavaScriptの比較演算子を紹介しておきましょう。

「===」や「!==」以外は、見慣れたものだと思いますが、「より大きい」と「以上」、「より小さい」と「以下」は

記号 意味 trueになる式の例
== 値が等しい 1==1
1==”1″
=== 型と値がともに等しい 1===1
!= 値が等しくない 1!=2
1!=”2″
!== 型もしくは値が等しくない、もしくは型と値がともに等しくない 1!==2
1!==”1″
> 左辺が右辺より大きい 5>4
>= 左辺が右辺以上 5>=5
5>=4
< 左辺が右辺より小さい 4<5
<= 左辺が右辺以下 5<=5
4<=5

また、等しい(等しくない)ことを確認するときは、「==(!=)」よりも「===(!==)」を使ったほうが不具合を
ミスして不具合を埋め込みがちですので、気を付けましょう。

防げます。
特別な理由がない限り、「===(!==)」を使いましょう。

複数の条件を組み合わせる(&&と||)

ここまでに説明した内容だけでは、以下のような条件を表現するのは苦しいでしょう。

「3月から5月は春、6月から8月は夏、9月から11月は秋、12月から2月は冬」

このように複数の条件を組み合わせる必要がある場合は、論理演算子「&&」と「||」を使います。

論理演算子を使えば、条件式の結果を組み合わせた真偽値を返すことができます。

記号 意味 trueになる式の例
&& AND
左右の条件式が両方とも真の場合だけ真を返す
1 >= 1 && 2 < 3
|| OR
左右の条件式のどちらかが真であれば真を返す
1 >= 1 || 2 > 3
! not
右辺が真であれば偽を、真であれば偽を返す
真偽を反転する1項演算子です
!false

(if2-1.js)論理演算子を使えば、先ほど紹介した以下の条件を表現してみましょう。
「3月から5月は春、6月から8月は夏、9月から11月は秋、12月から2月は冬」

let month = 5;  // ユーザーから選択されたとする(1)

if(month = 5) {
  let season = "春";
}
else if(month = 8) {
  let season = "夏";
}
else if(month = 11) {
  let season = "秋";
}
else if(month === 12 || month === 1 || month === 2) {
  let season = "冬";
}
else {
  let season = "不正な入力";
}

document.write (season + " です。");

春から秋は比較的スムーズですが、冬の条件は表現に悩んでしまうかもしれません。この程度であれば、||でつなげて併記したほうが可読性が高いでしょう。

また、elseはなくても良いと考えるかもしれませんが、外部からの入力の場合は想定外の値が設定される場合があります。そのため、記載しておくほうが強固なプログラムになります。

お試しテスト2(複数条件)

少しややこしくなるかもしれませんが、条件演算子論理演算子を使ったテストにチャレンジしてみましょう。

以下は、点数によってコースを設定するプログラムですが、マイナスを入力しても「不正な入力」にならない不具合があります。論理演算子を使って、マイナスの場合にも「不正な入力」となるようにしてください。

let score = 70;  // ユーザーから入力されたとする(1)

if(score &amp;amp;amp;amp;amp;amp;amp;gt; 100) {
  let msg = "不正な入力";
}
else if(score &amp;amp;amp;amp;amp;amp;amp;lt; 60){
  let msg = "補習コース";
}
else if(score &amp;amp;amp;amp;amp;amp;amp;gt; 90) {
  let msg = "特進コース";
}
else {
  let msg = "普通コース";
}
document.write (msg + " です。");

その他のif文の使い方

以上でif文により条件分岐の説明の基本はすべてですが、もう少し続けましょう。

if文で条件分岐を行うにあたっては、次の方法も良く使います。

if文のネスト

if文の中にif文を記載することもできます。

例えば、最初に紹介した氏名と年齢を表示する処理で、フラグを使って複数の表示を可能にしてみましょう。

なお、フラグというのは、ON/OFF1/0true/falseなど2種類のどちらかの値を持つ変数のことを指します。

このとき、以下の条件とします。

・姓と名を指定されたときはつなげて表示する
・年齢は名前の次の行に表示する

少し複雑ですが、一度頭の中でプログラムの流れを確認してから動かしてみましょう。
(if1-2.js)

let fst_name = "松本";
let sec_name = "太郎";
let age = "34";
let disp = "";

let fst_flg = true;  // ユーザーから入力されたとする(1)
let sec_flg = true;  // ユーザーから入力されたとする(1)
let age_flg = false; // ユーザーから入力されたとする(1)

if(fst_flg){
  disp = fst_name;
  if(sec_flg) {
    disp = disp + " " + sec_name;
  }
}
else if(sec_flg){
  disp = sec_name;
}

if(age_flg){
  if(disp !== ""){
    disp = disp + "&amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;gt;";
  }
  disp = disp + age;
}

document.write (disp + " です。");

条件演算子

ifとelseだけ(条件が成立しているかどうか)の条件分岐で、かつ行う処理が単純な場合は、条件演算子を使うことでif文をシンプルにできます。

構文は以下のようになっています。

結果 = 条件 ? 真の場合の処理 ; 偽の場合の処理

処理の部分で計算などを行う場合や出力すべき値を記載した場合、「結果」にはその計算結果が代入されます。表示などの結果を返さない処理の場合は、不定な値が代入されますので代入文は不要でしょう。

例えば以下のように、値が奇数か偶数かを返すだけの処理が該当します。(%は整数の割り算の余りを返す演算子です)
(if3-1.js)

let num = 5;

if(num % 2 === 0){
  let msg = "偶数";
}
else {
  let msg = "奇数";
}

document.write (msg + " です。");

条件演算子を用いることで、if3-1.jsは以下のようにシンプルな記載になります。
(if3-2.js)

let num = 5;

let msg = num % 2 === 0 ? "偶数" : "奇数";
document.write (msg + " です。");

条件の付け方

以上でif文の説明は終わりです。これらをマスターすれば、ほぼ思った通りに条件によって処理を分岐することが可能になるでしょう。

しかし、実はもう1点憶えていただきたいことがあります。

それは、見やすさ(可読性)です。

if文処理の流れを制御するものであるため、プログラムを読む要とも言えます。そのため、その条件が読みにくいとそのままバグを潜ませることになります。

そのため、if文を作るときはできるだけ自然に読めるようにしなければいけません。

if文で分岐するとき、プログラムはメインの処理とサブ的な処理(エラー処理や特別な値の場合の処理)に分かれることがほとんどです。if文の条件が真のときの処理メイン偽のときの処理(elseの処理)サブにするなど、統一するのです。

そうすれば、正常な処理と異常な(イレギュラーな)処理とが見えやすく、可読性が上がることでしょう。

特に、論理演算子のところで紹介した「!(not)」文字として見落とすことも多いので、できるだけ使わないようにしたほうが良いかもしれません。
(もちろん、使ったほうがプログラムの流れがスムーズに読めるなら、使うべきです)

まとめ

if文による条件分岐について、解説しました。

冒頭に書いたように、条件分岐はプログラムの基本です。何度でも読み返して、ミニテストも繰り返して、しっかりと理解しておくようにしましょう。

また、if文の使い方を誤ると可読性が著しく落ちた読みにくいコードになることもあります。そのため、読みやすさも重視した使い方を心がけましょう。

ただし、可読性については状況によってさまざまなので長年の経験によるところも多い部分です。もしスクールなどで技術者と話せる機会があれば、ぜひ積極的に活用して聞いてみてください。

今回のまとめ
・if…else if …elseは、条件が正しいかどうかで処理を分岐させる
・条件式が正しければ「真(true)」、正しくなければ「偽(false)」
・等しいかどうかは「===」を使ったほうが安全
・論理演算子で条件を組み合わせることができる
・if文はネストできる
・if文を使うときは、可読性を気にすること

お試しテスト1(if)の問題とこたえ

問題

if1-1.jsのプログラムを改造して、inpに”年齢”を代入しても「不正な入力 です。」と表示されるようにしてください。

こたえ

let fst_name = "松本";
let sec_name = "太郎";
let age = "34";
let disp = "";

let inp = "姓";  // ユーザーから選択されたとする(1)

if(inp === "姓"){
  disp = fst_name;
}
else if(inp === "名"){
  disp = sec_name;
}
else {
  disp = "不正な入力";
}

document.write (disp + " です。");

else if(inp === “年齢”){}の分岐を削除すれば、「年齢」と入力されてもelseの処理に移るため、「不正な入力 です。」と表示されます。

お試しテスト2(複数条件)の問題とこたえ

問題

以下は、点数によってコースを設定するプログラムですが、マイナスを入力しても「不正な入力」にならない不具合があります。論理演算子を使って、マイナスの場合にも「不正な入力」となるようにしてください。

let score = 70;  // ユーザーから入力されたとする(1)

if(score &amp;amp;amp;amp;amp;amp;amp;gt; 100) {
  let msg = "不正な入力";
}
else if(score = 60){
  let msg = "補習コース";
}
else if(score &amp;amp;amp;amp;amp;amp;amp;lt; 90) {
  let msg = "特進コース";
}
else {
  let msg = "普通コース";
}
document.write (msg + " です。");

こたえ

let score = 70;  // ユーザーから入力されたとする(1)

if(score &amp;amp;amp;amp;amp;amp;amp;gt; 100 || score &amp;amp;amp;amp;amp;amp;amp;lt; 0) {
  let msg = "不正な入力";
}
else if(score &amp;amp;amp;amp;amp;amp;amp;lt; 60){
  let msg = "補習コース";
}
else if(score &amp;amp;amp;amp;amp;amp;amp;gt; 90) {
  let msg = "特進コース";
}
else {
  let msg = "普通コース";
}
document.write (msg + " です。");

方法はいくつかありますが、「不正な入力」時の条件にマイナスの場合も追加するのがもっとも簡単です。

12月枠も残りわずか!!

エンジニア転職を目指すなら…

転職保証付きプログラミングスクール

で未経験からエンジニア目指そう

 

✔︎未経験からの転職 ✔︎会社の将来が不安 ✔︎給与や待遇に不満がある

 

転職保証コースは質の高いカリキュラムで転職成功率98%