PR

【JavaScript】制御構文について解説

JavaScript

この記事では、JavaScriptの制御構文について紹介します。

1. 条件分岐

(1) if 文

特定の条件を満たすかどうかで処理を分岐する。

let num = 10;
if (num > 5) {
console.log("5より大きい");
} else {
console.log("5以下");
}
  • if の条件が true の場合、ブロック内のコードが実行される。
  • else を使えば、条件が false の場合の処理を指定できる。

(2) else if 文

複数の条件を評価する。

let num = 10;
if (num > 10) {
console.log("10より大きい");
} else if (num === 10) {
console.log("10と等しい");
} else {
console.log("10より小さい");
}

(3) 三項演算子(? :)

シンプルな条件分岐を1行で記述できる。

let result = num > 5 ? "5より大きい" : "5以下";
console.log(result);

(4) switch 文

値ごとに異なる処理を実行する場合に使用する。

let fruit = "apple";
switch (fruit) {
case "apple":
console.log("りんご");
break;
case "banana":
console.log("バナナ");
break;
default:
console.log("その他の果物");
}
  • break を入れないと、次の case も実行されるので注意。

2. ループ(繰り返し処理)

(1) for 文

指定した回数のループを実行する。

for (let i = 0; i < 5; i++) {
console.log(i);
}
  • i を初期化し、i < 5 の間ループし、i++ でカウントアップ。

(2) while 文

条件が true の間、ループを実行する。

let i = 0;
while (i < 5) {
console.log(i);
i++;
}

(3) do...while 文

最低1回は必ず実行されるループ。

let i = 0;
do {
console.log(i);
i++;
} while (i < 5);
  • while とは異なり、最初の実行時に条件チェックをしない。

(4) for...in 文

オブジェクトのキーをループする。

let obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
console.log(key, obj[key]);
}
  • 配列にも使えるが、意図しない順序で取得される可能性があるため、配列には forEachfor...of を推奨。

(5) for...of 文

配列やイテラブルオブジェクト(MapSet など)をループする。

let arr = [10, 20, 30];
for (let value of arr) {
console.log(value);
}

3. ループ制御

(1) break

ループを途中で終了する。

for (let i = 0; i < 10; i++) {
if (i === 5) {
break;
}
console.log(i);
}
  • i === 5 になったらループを終了。

(2) continue

現在のループの処理をスキップし、次のループへ進む。

for (let i = 0; i < 5; i++) {
if (i === 2) {
continue;
}
console.log(i);
}
  • i === 2 のときにスキップし、次のループへ。

4. 例外処理

try...catch...finally

エラーが発生してもプログラムを止めずに処理を続行する。

try {
let result = 10 / 0; // エラーではないが、注意が必要
console.log(result);
let obj = undefined;
console.log(obj.name); // エラー発生
} catch (error) {
console.log("エラーが発生しました:", error.message);
} finally {
console.log("処理終了");
}
  • try ブロック内でエラーが発生すると、catch に処理が移る。
  • finally ブロックはエラーの有無に関係なく必ず実行される。

5. 非同期処理(Promise & Async/Await)

(1) Promise

非同期処理の成功・失敗を管理するオブジェクト。

let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("成功!"), 1000);
});

promise.then(result => console.log(result)).catch(error => console.log(error));

(2) async/await

非同期処理を同期的に書ける構文。

async function fetchData() {
try {
let response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
let data = await response.json();
console.log(data);
} catch (error) {
console.log("エラー:", error);
}
}
fetchData();
  • await を使うと、Promise の結果が返るまで待機できる。

まとめ

構文説明
if / else if / else条件分岐
三項演算子 (? :)シンプルな条件分岐
switch値ごとの分岐
for指定回数のループ
while条件が true の間ループ
do...while最低1回は実行されるループ
for...inオブジェクトのキーをループ
for...ofイテラブルオブジェクトをループ
breakループを強制終了
continueループの処理をスキップ
try...catch...finally例外処理
Promise非同期処理
async/await非同期処理を同期的に記述

これらの制御構文を適切に使うことで、効率的で読みやすいコードを書くことができます! 😊

タイトルとURLをコピーしました