はじめに
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("必ず実行される処理");
}
さいごに
内容に間違いがあれば教えていただけると嬉しいです。
よければ「いいね」も励みになりますので、よろしくお願いします。