はじめに

JavaScriptの「条件分岐」と「例外処理」について整理します。
基礎の理解を言語化し、自分の中で定着させるためのアウトプット記事です。
主にMDN Web Docsを参考に、自分なりの理解や補足も交えてまとめています。

条件文とは？

プログラムの処理を状況に応じて分岐させるための文です。
条件(真偽値)に応じて異なるコードを実行したいときに使用します。

真偽値とは？

真偽値は「正しいか」「正しくないか」を表す値でtrueトゥルー(真)とfalseフォルス(偽)の2種類がある。

`falseと判定される値(falsy)`

値	説明
false	文字通りfalse
0	数値の0→false
-0	負の0→false
0n	BigIntの0→false
" "	空文字→false
null	値が存在しない→false
undefined	まだ値が設定されていない→false
NaN(Not a Number)	計算できない数→false

`trueと判定される値(truthy)`

それ以外は全部 truthy

値	説明
true	文字通りtrue
1、-1、100、3.14	0以外の数値→ true
"0"、"こんにちは"	空でない文字列→ true
[ ]	空配列→ true
{ }	空オブジェクト→ true
function() { }	関数→ true

演算子

trueとfalseはそのままでも使用できるが、演算子と組み合わせて条件判定に使用することもできる

・論理演算子

演算子	説明	例→(結果)
!	NOT(逆にする)	! true→ (false) ! false→ (true)
&&	AND(両方がtrue→true)	true && true→ (true) true && false→ (false) false && false→ (false)
\|\|	OR(どちらかがtrue→true)	true \|\| true→ (true) true \|\| false→ (true) false \|\| false→ (false)

・比較演算子

演算子	説明	例→(結果)
==	等しいか(型変換して比較)	1 == "1" → (true)
===	完全に等しいか(値と型の両方を比較)	1 === "1" → (false)
!=	等しくないか(型変換して比較)	1 != "2" → (true)
!==	完全に等しくないか(値と型の両方を比較)	1 !== "1" → (true)
>	より大きいか	3 > 2 → (true)
<	より小さいか	2 < 3 → (true)
>=	以上か	3 >= 3 → (true)
<=	以下か	3 <= 3 → (true)

`if`イフ

・基本の`if`

条件が true のときに処理を実行し、false のときは何も実行しない。

js

if (条件) {
    // 条件が true のときに実行される処理
}

・条件はtrue / falseで評価される
・条件がfalseの場合は無視される

js

let hasMoney = true;

if (hasMoney) {
    console.log("お金を持っています。"); // コンソールに出力される
}

js

let hasMoney = false;

if (hasMoney) {
    console.log("お金を持っています。"); // 何も出力されない
}

js

let money = 1500; // 所持金（円）

if (money >= 1000) {                  // moneyが1000以上ならtrue、1000未満ならfalse
    console.log("買い物に行けます！"); // trueになり「買い物に行けます！」と出力される
}

・`if else`イフエルス

条件が true のときは if の処理を、false のときは else の処理を実行する。

js

if (条件) {
    // 条件が true のときに実行される処理
} else {
    // 条件が false のときに実行される処理
}

js

let x = 3;
if (x > 5) {
    console.log("xは5より大きい"); // 処理は実行されない
} else {
    console.log("xは5以下");      // 処理は実行され、コンソールに出力される
}

・`if else if`

複数の条件を順番にチェックして、最初に true になった処理だけを実行する。

js

if (条件1) {
    // 条件1 が true のときに実行される処理
} else if (条件2) {
    // 条件2 が true のときに実行される処理
} else if (条件3) {
    // 条件3 が true のときに実行される処理
}

js

if (条件1) {
    // 条件1 が true のときに実行される処理
} else if (条件2) {
    // 条件2 が true のときに実行される処理
} else if (条件3) {
    // 条件3 が true のときに実行される処理
} else {
    // 最後にelseを追加すると上の条件がすべて false のときに処理が実行される
}

・ else は必須ではない

js

let x = 5;
if (x >= 7) {
    console.log("xは7以上です"); // 処理は実行されない
} else if (x <= 3){
    console.log("xは3以下です"); // 処理は実行されない
} else {
    console.log("xは3より大きく、7より小さいです"); // 処理が実行される
}

`switch`スウィッチ

switch文とは値を比較して条件分岐を行う構文のこと

js

switch (式) {                     // switch(式):式の結果とcaseの値を比較する
  case 値1:                       // case 値:式の値と一致する場合、実行される
    // 値1にマッチした場合の処理
    break;                       // break: これを書かないと、次のcaseに処理が流れる
  case 値2:                      
    // 値2にマッチした場合の処理
    break;
  default:
    // どのcaseにもマッチしなかった場合の処理
}

js

const score = 85;

switch (true) {
  case score >= 90:
    console.log("あなたの成績は 秀 です");
    break;
  case score >= 80:
    console.log("あなたの成績は 優 です"); // 最初に値が一致した処理が実行される
    break;                               // break：処理を途中で終了する命令
  case score >= 70:
    console.log("あなたの成績は 良 です");
    break;
  case score >= 60:
    console.log("あなたの成績は 可 です");
    break;
  default:
    console.log("あなたの成績は 不可 です");
}

js

// breakを書かなかった場合、次のcaseに処理が流れる(フォールスルー)
const score = 85;

switch (true) {
  case score >= 90:
    console.log("あなたの成績は 秀 です");
    
  case score >= 80:
    console.log("あなたの成績は 優 です");   // 最初に値が一致した処理が実行される   
                                           // breakがないため、次の処理に流れる
  case score >= 70:                       
    console.log("あなたの成績は 良 です");
                                           // breakがないため、次の処理に流れる
  case score >= 60:
    console.log("あなたの成績は 可 です");
                                           // breakがないため、次の処理に流れる
  default:
    console.log("あなたの成績は 不可 です");
}

例外処理(エラーハンドリング)とは？

プログラムでエラーが起きたときに、強制終了させず安全に処理する仕組みのこと

js

// 例外処理をしない場合、エラーが出た瞬間にプログラムが止まる
console.log("開始");  // 実行される

console.log(a);      // aは定義されていない → エラーが発生する

console.log("終了"); // 実行されない

js

// 例外処理を使う場合、エラーが出てもプログラムが止まらない
console.log("開始");  // 実行される

try {
  console.log(a);    // aは定義されていない → エラーが発生する
} catch (error) {    // catchでエラーを処理する
  console.log("エラーが発生しました");
}

console.log("終了"); // 実行される

`try...catch`トライ　キャッチ(エラーを処理する)

js

try {
  // エラーが起きるかもしれない処理
} catch (e) {
  // エラーが起きた時の処理
}
  // エラーが発生しなければ何も起こらない

js

try {
  console.log(text);                // 定義されていない変数を使用　→　エラーが発生する
} catch (e) {
  console.log("定義されていません"); // エラーが発生した時、コンソールに出力される
}

index.html

// Errorオブジェクトを使用することもできる
try {
  console.log(text);                
} catch (e) {             // eは発生したErrorオブジェクト(error、errなどでも可能)
  console.log(e.name);    // エラーの種類
  console.log(e.message); // エラーの説明文
  console.log(e.stack);   // エラーがどこで発生したか
}
// Errorオブジェクトは、catchブロック内だけ有効

エラーが発生した場所、index.html:14:21
index.htmlはファイル名、:14は行数、:21は列数(文字数目)

`throw`スロー(エラーを発生させる)

js

// あらゆる型の式を投げることができる
throw "Error"; // 文字列型
throw 100;     // 数値型
throw true;    // 論理型
throw {        // オブジェクト
  toString() {
    return "これはオブジェクトです！";
  },
};

js

// 文字列を投げてみる
try {
    throw "エラーを発生させる";               
} catch (e) {               
    console.log(e);         // 文字列を投げているので、e は文字列が入っている
    console.log(e.name);    // e は文字列なのでnameプロパティは存在しない
    console.log(e.message); // e は文字列なのでmessageプロパティは存在しない
    console.log(e.stack);   // e は文字列なのでstackプロパティは存在しない
}

js

// エラーオブジェクトとして投げてみる
// 実務では、Errorオブジェクトを使うのが一般的
try {
    throw new Error("エラーを発生させる"); // new Error("メッセージ")でエラーオブジェクト
} catch (e) {               
    console.log(e);         // e はエラーオブジェクトが入っている
    console.log(e.name);    // e はエラーオブジェクトなのでnameプロパティが入っている
    console.log(e.message); // e はエラーオブジェクトなのでmessageプロパティが入っている
    console.log(e.stack);   // e はエラーオブジェクトなのでstackプロパティが入っている
}

`finally`ファイナリー(必ず実行される)

js

// エラーがあってもなくても必ず最後に実行される
try {
  // エラーが起きるかもしれない処理
} catch (e) {
  // エラーが起きた時の処理
} finally {
  // 必ず実行される処理
}

js

// エラーが発生しない場合
try {
  console.log("処理中…");
} catch (e) {
  console.log("エラー発生");
} finally {
  console.log("必ず実行される処理");
}

js

// エラーが発生する場合
try {
  console.log("処理中…");
  throw new Error("問題発生");
} catch (e) {
  console.log(e.message);
} finally {
  console.log("必ず実行される処理");
}

さいごに

内容に間違いがあれば教えていただけると嬉しいです。
よければ「いいね」も励みになりますので、よろしくお願いします。

参考サイト

MDN 開発者向けのウェブ技術>JavaScript>JavaScript ガイド>制御フローとエラー処理