【JavaScript】if文やelse文で処理を分岐させる方法を詳しく解説

JavaScriptでプログラミングするうえで欠かせない条件分岐。条件に応じて処理する方向を変えることはプログラミングでは頻繁に起こりえます。その際は、if文を使うのが最もオーソドックスな方法です。

今回は、if文によって分岐処理を作り上げる方法について解説します。実践で有用なテクニックや注意点が理解できるソースコードも併せて載せました。ぜひ、プログラミングの勉強にお役立てください。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


if文の基本的な使い方

if文は、プログラミングするなかで避けては通れない、分岐処理を実装するために用いられます。使用頻度も高いため、早いうちに使い方に慣れておくことが重要です。基本となる形は、以下の通りです。

if (条件式) {
  分岐後の処理内容
}

if文は、プログラム実行を分岐させるか否かを評価する「条件式」を記載します。条件式の評価結果に応じ分岐する方向を決定し、分岐後の処理内容を波カッコの中で実装します。この形がif文の基礎です。

次に、具体的な例を挙げながら、if文を用いた分岐処理を実装してみます。例として、変数に格納された値が偶数であれば、コンソールに「2で割り切れます」と出力する仕様を考えたとします。if文で実装したサンプルコードが、以下の通りです。

let value = 1324;

// 2で割った余りで偶数であるかを判断
if (value % 2 == 0) {
  // 偶数と評価されたら、コンソール出力を実行
  console.log("2で割り切れます。");
}

ある数が偶数であるかどうかを判断するには、ある数を2で割った余りが0と等しいかどうかで判断できます。実際にif文に落とし込む際は、条件式に割り算の余りが0と等しいことを式として記載します(4行目)。

条件式の「%」は、余りを求めることを表す記号です。仮に変数valueに偶数が格納されていれば、4行目の条件式は正しいため、「true(真)である」と言います。一方、奇数が入っているときは、条件式は正しくありません。この状態は「false(偽)である」と言います。

そして、条件式がtrueと評価された場合のみ、波カッコの中身が実行されます。以上が、if文の基本的な仕組みです。

elseと組み合わせてみよう

elseキーワードは、if文でfalseと評価されたときにやってほしい処理を記述するためのキーワード。つまり、ifキーワードの対になるものと考えることができます。記載方法は以下の通りです。

if (条件式) {
  // 結果がtrue:このブロックが実行
} else {
  // 結果がfalse:このブロックが実行
}

例として、はじめに紹介したサンプルコードに、偶数でない場合「2で割り切れません」とコンソール出力する処理を追加してみます。elseキーワードを使えば、以下のサンプルコードのように実装可能です。

let value = 1324;

// 2で割った余りで偶数であるかを判断
if (value % 2 == 0) {
  // 偶数であると判断した場合に動作
  console.log("2で割り切れます。");
} else {
  // 偶数でないと判断した場合に動作
  console.log("2で割り切れません。");
}

ifキーワードの条件式を評価すれば良いので、elseの後ろに条件式を書く必要はありません。試しに変数valueを奇数の数値に書き換えてから実行してみましょう。もし、変数valueに奇数が格納されている状態ならば、条件式はfalseになり、6行目が実行されない代わりに9行目が実行されるのが分かります。

else ifと組み合わせてみよう

ifとelseを用いれば2本の分岐処理を実装可能です。しかし実際には、常に2本であるとは限りらず、複数本の分岐が考えられる場合もあります。3本以上条件が分かれるような複雑な処理において利用されるキーワードが、else ifです。

例として、変数の値が「正である場合」、「負である場合」、「0である場合」の3本の条件分岐を考えてみましょう。実装したプログラムは、以下の通りです。

let value = -32;

if (value > 0) {
  // valueが正である
} else if (value < 0) {
  // valueが負である
} else {
  // valueが0である
}

条件が3種類考えられているので、else ifを使って条件式を最低2つは記述しなければならないのがポイント。今回は、はじめの条件式において0以上であるか、つづいて、変数が0より小さい値であるかで評価しています。両方ともfalse評価なら、変数の中身に0が入っているのは明らかなので、elseキーワードで記述するようにしました。

このように、if、else、else ifの3種類のキーワードを用いて実装していくのが、おおまかな流れとなります。今後さまざまな場面で使われるため、早めに慣れておきましょう。

if文で使用できる演算子

if文の条件式には、さまざまな演算子(記号)を使用可能です。if文を使っていくうえで頻繁に使うであろう演算子たちをまとめております。各演算子の特徴・違いを理解して、応用できるようにしましょう。

if文で使用できる比較演算子まとめ

比較演算子はその名のごとく、演算子の左右にある変数の中身を比べるために用いられます。数学で言うところのイコールや不等号に相当すると考えるとわかりやすいです。

演算子(記号)評価方法
等価(==) 左右の値が等しいかを判断します。
数値と文字列を比較する際は、数値を文字列に自動変換した上で評価されます。
厳密等価(===) 左右の値が等しいかに加えて、データ型も同一であるかを判断します。
不等価(!=) 左右の値が違っているかを判断します。
等価演算子同様、数値と文字列の比較においては、数値を文字列に自動変換します。
厳密不等価(!==) 左右の値が違っているかに加えて、データ型も不一致であるかを判断します。
小なり(<) 演算子の左側が右側未満であるかを判断します。
小なり等価(<=) 演算子の左側が右側以下であるかを判断します。
大なり(>) 演算子の左側が右側より大きいかを判断します。
大なり等価(>=) 演算子の左側が右側以上であるかを判断します。

if文で使用できる論理演算子まとめ

論理演算子とは、if文横のカッコ内に複数条件式を記載する際に用いられる演算子です。以下の3種類があり、より複雑な条件を実装できます。

演算子(記号)評価方法
論理和 / OR(||) 複数定義した条件式の中で、1つでもtureがあれば全体としてtrueとみなす。
論理積 / AND(&&) 複数定義した条件式を評価し、全部trueである場合に全体としてtrueとみなす。
論理否定 / NOT (!) 条件式の評価結果と逆の値を返します。

if文を使用する際のテクニック

この節では、if文を使う際に実践したいテクニックを紹介します。ここで紹介するテクニックを実践すれば、ソースコードの記述量を削減できたり、プログラムの実行速度を向上させたりできます。ただ動作するだけのプログラムで終わらせないように、実践では積極的に活用していきましょう。

処理が1行のみの場合に {} を省略する

1つ目のテクニックは、波カッコの省略。分岐後の処理が1行だけで済むときは、波カッコを書かなくても問題ありません。以下のサンプルコードをご覧ください。

let data = 30;

if (data > 0) console.log("値は正");
else if(data < 0) console.log("値は負");
else console.log("値は0");

いずれの分岐処理も、コンソール出力が1つ存在するのみです。したがって、波カッコを省略でき、わずかにプログラムの記述量が少なく済みます。加えて、条件式の横に記述することで分岐処理の見栄えもスッキリします。

三項演算子に書き換える

三項演算子は、if文のような分岐処理を実装する際に使われる記法です。ifとelseの2本の条件分岐であれば、if文よりも三項演算子を採用することで、分岐処理をより簡潔に記述できます。詳しくは、以下の関連記事を参考にしてください。

おすすめ記事

みなさんこんにちは! 今回の記事は、 悩みを抱えた人 ・JavaScriptの三項演算子ってどうやって使うの?・if文とはどうやって使い分けたらいいの?・三項演算子の応用テクニックが知りたい! というお悩みを解決[…]

【JavaScript】三項演算子の使い方 | if文との使い分けも解説します

ショートサーキットを使用する

ショートサーキットとは短絡評価ともいい、論理積(&&)論理和(||)を使った条件式を記述するうえで有用な記法です。以下のサンプルコードで挙動を確認しましょう。

let data = 20;

if ((data % 2 == 0) || (data >= 20)) {
  // dataが偶数または20以上の場合
}

if ((data % 2 == 1) && (data >= 20)) {
  // dataが奇数かつ20以上の場合
}

変数dataに対して、ANDを使った条件とORを使った条件を各々記載しています。通常、論理演算子を用いた条件式の評価は、「左辺の評価」「右辺の評価」「全体の評価」の順番で処理が進行します。この3段階のうち「右辺の評価」をスキップすることが、ショートサーキットの仕組みです。

例えば、3行目の論理和を使った条件式では、変数dataが偶数であるため左辺の条件式はtrueとなります。論理和の仕様上、片方がtrueであれば条件式全体はtrueになるため、右辺を評価する必要がなくなることがお分かりでしょうか? したがって、変数dataが20以上であるかを評価せずに処理が進行します。

同様に、7行目の条件式で用いられている論理積も、片方がfalseであれば条件式全体はfalseになるという仕様であるため、右辺を評価する必要はありません。したがって、変数dataが奇数であるかの評価だけで条件式の評価が完了します。

このように、処理をスキップすることでプログラムの実行速度を向上させられるのが、ショートサーキットの大きな利点です。

if文を使用する際の注意点

この節では、if文を使用する際に気をつけるべきポイントについて解説していきます。

コードの実行順序に気を付ける

if文で複数の条件分岐を実装する際には、実行する順序に気をつけることがポイントです。以下のサンプルコードで、実行順序の重要性について確認しましょう。

let test_score = 50;

// テストの点数に応じて成績を告げる。
if (test_score >= 60) {
  console.log('ひとまず進級可能です。');
} else if (test_score >= 80) {
  console.log('おおむね優秀です。');
} else if (test_score >= 90) {
  console.log('非常に優秀です。');
} else {
  console.log('進級不可能です。');
}

テストの点数を条件式で評価し、成績をコンソール出力するプログラムです。試しに、変数test_scoreに91を設定してプログラムを実行してみましょう。単純に考えれば、8行目の条件式がtrueとなるのが理想に見えますが、実際には60点以上の場合の処理が実行されていることが分かります。

プログラムは基本的に、ソースコードの上から順番に実行されるため、4行目の条件式が最初に評価されます。今回設定した変数test_scoreは60以上であるため、90点以上であるかを評価する前に別の処理が実行されてしまったのです。

このように、条件式の順番を誤ると、意図しない動作を起こしてしまいます。プログラムのバグを生み出さないためにも、条件式の順番には気を使うことが大切です。今回の例であれば、以下のソースコードで理想通り動作します。

if (test_score >= 90) {
  console.log('非常に優秀です。');
} else if (test_score >= 80) {
  console.log('おおむね優秀です。');
} else if (test_score >= 60) {
  console.log('ひとまず進級可能です。');
} else {
  console.log('進級不可能です。');
}

falseになる条件を把握しておく

if文の条件式でfalseになる条件は、比較演算子や論理演算子を用いたもの以外に、ある特定の値を条件式にそのまま設定することで成立する場合が存在します。その条件は、以下の5つです。

let val1 = 0;
let val2 = '';
let val3 = null;

// 値が0である
if (val1) console.log('値は0以外です');

// 数値を定義できない(0除算など)
if (1 % val1) console.log('値は割り切れます');

// 空文字である
if (val2) console.log('文字列が設定されています');

// nullが設定されている
if (val3) console.log('何かしら値が設定されています');

// 変数が定義されていない
if (val4) console.log('値が定義されています');

上記のプログラムを実行しても、コンソールには何も出力されません。比較演算子や論理演算子以外でfalseになる条件を把握することで、バグを阻止することができるので、実際にプログラミングする際には気をつけましょう。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでJavascriptでのif文の使い方やテクニックについて解説してきましたがいかがでしたか?

どの言語でもそうですが、実際に開発していく中で「条件分岐」は必ず通る道になりますので、今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

今回ご紹介したテクニックや注意点を思い出していただければ特に悩むことなく使っていけるかと思います。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。