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

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

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

フリーランス案件を探すならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心	・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20%	・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース	・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など	・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ ・ZOZOテクノロジーズ ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

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種類があり、より複雑な条件を実装できます。

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になる条件を把握することで、バグを阻止することができるので、実際にプログラミングする際には気をつけましょう。

最後に

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

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

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

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

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