JavaScriptで処理を止める方法と具体的な使い方10選

●JavaScriptで処理を止めるとは
●イベントの伝播を止める方法
- ○event.stopPropagation()で伝播を止める
  - □サンプルコード6：クリックイベントの伝播を止める
- ○event.preventDefault()でデフォルト動作をキャンセルする
  - □サンプルコード7：フォーム送信をキャンセルする
●非同期処理の制御
- ○setTimeoutをclearTimeoutで停止する
  - □サンプルコード8：setTimeoutのキャンセル
- ○Promiseでの処理待ちとキャンセル
  - □サンプルコード9：Promiseの基本的な使い方
  - □サンプルコード10：Promiseのキャンセル処理
●よくあるエラーと対処法
●処理を止めるのに適したその他の方法
まとめ

●JavaScriptで処理を止めるとは

JavaScriptを使ったプログラミングでは、時として処理を途中で止める必要があります。

たとえば、ある条件を満たした時点で関数の実行を終了したり、予期せぬエラーが発生した際に処理を中断したりといったケースです。

処理を止めるための方法はいくつかありますが、代表的なものとしてreturn文やthrow文、break文などが挙げられます。

これらを適切に使い分けることで、意図した通りに処理のフローを制御できるようになります。

では早速、それぞれの使い方を詳しく見ていきましょう。

○return文で関数の実行を終了する

return文は、関数の処理を終了させ、呼び出し元にコントロールを返すための命令です。

関数内のどの位置に記述しても、そこで即座に処理が終了します。

□サンプルコード1：return文の基本的な使い方

function greet(name) {
  if (!name) {
    return; // 名前が空の場合は処理を終了
  }
  console.log(`Hello, ${name}!`);
}

greet("John"); // "Hello, John!"と出力される
greet(); // 何も出力されない

このコードでは、greet関数は引数nameが空の場合にreturn文で処理を終了しています。

これにより、名前が渡されなかった場合は挨拶のメッセージを出力せずに関数を抜けるようになります。

□サンプルコード2：if文と組み合わせたreturn文

function divide(a, b) {
  if (b === 0) {
    console.log("ゼロ除算エラー");
    return; // ゼロ除算の場合は処理を終了
  }
  return a / b; // 割り算の結果を返す
}

console.log(divide(10, 2)); // 5が出力される 
console.log(divide(10, 0)); // "ゼロ除算エラー"と出力され、undefinedが返される

ここでは、divide関数内でゼロ除算のチェックを行っています。

もし第2引数bが0だった場合は、エラーメッセージを表示してreturn文で処理を終了します。

これ以降の処理（割り算）は実行されません。

○throw文で例外を投げて処理を中断する

return文が関数の実行を終了させるのに対し、throw文は例外を投げることで処理を中断させます。

例外が投げられると、通常のプログラムフローは中断され、例外を捕捉して処理する箇所（try…catch文）を探します。

throw文は、意図的にエラーを発生させたい場面で使用します。

たとえば、関数に渡された引数が不正な値だった場合や、特定の条件を満たさない場合などです。

□サンプルコード3：throw文の使い方

function calculateAge(birthYear) {
  if (birthYear > new Date().getFullYear()) {
    throw new Error("生まれ年が未来になっています");
  }
  return new Date().getFullYear() - birthYear;
}

try {
  const age = calculateAge(2025);
  console.log(`あなたの年齢は${age}歳です`);
} catch (error) {
  console.error(error.message);
}

実行結果

生まれ年が未来になっています

このコードでは、calculateAge関数は生まれ年（birthYear）から現在の年齢を計算します。

しかし、もし生まれ年が現在の年より未来の日付だった場合は、throw文で例外を投げています。

例外が投げられると、try…catch文のcatch節で例外が捕捉されます。

ここでは、例外オブジェクトのmessageプロパティを使ってエラーメッセージを表示しています。

○break文でループ処理を抜ける

JavaScriptでループ処理を行っている際、特定の条件を満たした時点でループを中断したいケースがあります。

そんな時に使えるのがbreak文です。

break文は、現在のループ（for文やwhile文など）を即座に中断し、ループの外側にある次の文から処理を再開します。

これにより、無限ループに陥ることを防いだり、必要なデータが得られた時点で効率よくループを抜けたりできます。

では早速、break文の使用例を見ていきましょう。

□サンプルコード4：for文とbreak文

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] === 5) {
    console.log("5が見つかったので、ループを終了します");
    break;
  }
  console.log(numbers[i]);
}

実行結果

1
2
3
4
5が見つかったので、ループを終了します

このコードでは、1から10までの数字が入った配列numbersに対して、for文でループ処理を行っています。

ループ内で現在の要素（numbers[i]）が5だった場合、break文によってループを中断しています。

その結果、5が見つかった時点でループが終了し、それ以降の数字は出力されません。

このように、break文を使えば、ループ処理を途中で打ち切ることができるのです。

□サンプルコード5：while文とbreak文

let count = 0;

while (true) {
  console.log(count);
  count++;

  if (count === 5) {
    console.log("カウントが5になったので、ループを終了します");
    break;
  }
}

実行結果

0
1
2
3
4
カウントが5になったので、ループを終了します

こちらのコードでは、while文で無限ループを作っています。

ループ内でカウンター変数countを1ずつ増やしていき、countが5になった時点でbreak文を使ってループを抜けています。

break文がない場合、このwhile文は永遠に続いてしまいます。

しかし、break文を適切に使用することで、無限ループに陥ることなく、必要な処理を実行できます。

●イベントの伝播を止める方法

JavaScriptを使ってWebページにインタラクティブな機能を実装する際、イベントの伝播を制御する必要があることがあります。

イベントの伝播とは、ある要素で発生したイベントが、親要素や子要素に次々と渡っていく仕組みのことです。

例えば、親要素と子要素の両方にクリックイベントのリスナーを設定している場合、子要素をクリックすると、子要素だけでなく親要素のイベントも発火してしまいます。

これが意図しない動作を引き起こすことがあるのです。

そんな時に役立つのが、stopPropagation()とpreventDefault()という2つのメソッドです。

これを使えば、イベントの伝播を止めたり、デフォルトの動作をキャンセルしたりできます。

では早速、それぞれの使い方を見ていきましょう。

○event.stopPropagation()で伝播を止める

stopPropagation()は、イベントが親要素や子要素に伝播するのを防ぐためのメソッドです。

このメソッドを呼び出すと、イベントはその要素で止まり、それ以上先には伝わりません。

□サンプルコード6：クリックイベントの伝播を止める

<div id="parent">
  <button id="child">子要素をクリック</button>
</div>

const parent = document.getElementById("parent");
const child = document.getElementById("child");

parent.addEventListener("click", function() {
  console.log("親要素がクリックされました");
});

child.addEventListener("click", function(event) {
  console.log("子要素がクリックされました");
  event.stopPropagation();
});

実行結果（子要素をクリックした場合）

子要素がクリックされました

このコードでは、親要素（#parent）と子要素（#child）の両方にクリックイベントのリスナーを設定しています。

子要素のイベントリスナー内でstopPropagation()を呼び出しているため、子要素をクリックしても親要素のイベントは発火しません。

このように、stopPropagation()を使えば、意図しない箇所でイベントが発生するのを防げます。

ただし、必要以上に使用すると、イベントの流れが分かりづらくなるので注意が必要ですね。

○event.preventDefault()でデフォルト動作をキャンセルする

一方、preventDefault()は、イベントのデフォルトの動作をキャンセルするためのメソッドです。

例えば、フォームの送信やリンクのクリックなどがデフォルトの動作に当たります。

□サンプルコード7：フォーム送信をキャンセルする

<form id="myForm">
  <input type="text" name="username">
  <button type="submit">送信</button>
</form>

const form = document.getElementById("myForm");

form.addEventListener("submit", function(event) {
  event.preventDefault();
  console.log("フォームの送信をキャンセルしました");
});

実行結果（送信ボタンをクリックした場合）

フォームの送信をキャンセルしました

ここでは、フォームの送信イベント（submit）に対してリスナーを設定し、preventDefault()を呼び出しています。

これで、送信ボタンをクリックしてもフォームのデフォルトの送信動作がキャンセルされ、ページがリロードされることはありません。

このpreventDefault()は、フォームの入力内容をJavaScriptで独自に処理したい場合や、ページ遷移をSPAで制御したい場合などに特に重宝します。

●非同期処理の制御

JavaScriptを使ってWebアプリケーションを開発していると、非同期処理を扱う機会が多くあります。

非同期処理とは、ある処理の完了を待たずに次の処理を実行できるようにすることです。

例えば、サーバーからデータを取得する際、レスポンスを待っている間も他の処理を進められるようにしたい場合などに非同期処理が使われます。

ただ、非同期処理を適切に制御しないと、予期しない動作を引き起こしてしまうことがあります。

そこで、非同期処理を途中で止めたり、処理が完了するまで待ったりする方法を知っておく必要があるのです。

JavaScriptには、非同期処理を制御するための様々な機能が用意されています。

代表的なものとしては、setTimeoutとclearTimeout、そしてPromiseなどが挙げられます。

これらを使いこなせば、非同期処理による予期しない動作を防ぎ、安定したWebアプリケーションを開発できるようになるでしょう。

それでは、実際にコードを見ながら、非同期処理の制御方法について詳しく理解していきましょう。

○setTimeoutをclearTimeoutで停止する

setTimeoutは、指定したミリ秒数の間隔で関数を実行するための機能です。

一方、clearTimeoutは、setTimeoutで設定したタイマーを解除するためのものです。

□サンプルコード8：setTimeoutのキャンセル

const timerId = setTimeout(function() {
  console.log("3秒経過しました");
}, 3000);

// タイマーを解除する
clearTimeout(timerId);

実行結果

（何も出力されない）

このコードでは、setTimeoutを使って3秒後に関数を実行するようにしています。

しかし、その直後でclearTimeoutを呼び出しているため、関数は実行されずにタイマーが解除されます。

このように、clearTimeoutを使えば、setTimeoutで設定した処理を途中でキャンセルできるのです。

これは、ユーザーのアクションによって処理を中断したい場合などに役立ちます。

○Promiseでの処理待ちとキャンセル

Promiseは、非同期処理の完了や失敗を表すオブジェクトです。

Promiseを使えば、非同期処理の結果を簡潔に扱えるようになります。

□サンプルコード9：Promiseの基本的な使い方

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      const data = { id: 1, name: "John" };
      resolve(data);
    }, 2000);
  });
}

fetchData()
  .then(function(data) {
    console.log("データを取得しました:", data);
  })
  .catch(function(error) {
    console.error("データの取得に失敗しました:", error);
  });

実行結果

データを取得しました: { id: 1, name: "John" }

ここでは、fetchData関数内でPromiseを使っています。

setTimeoutで2秒後にデータを取得する非同期処理をシミュレートし、resolve関数で成功時の値を返しています。

fetchData関数を呼び出すと、thenメソッドで成功時の処理を、catchメソッドで失敗時の処理を記述できます。

このように、Promiseを使えば、非同期処理の結果を分かりやすく扱えるようになります。

□サンプルコード10：Promiseのキャンセル処理

function fetchData() {
  let cancel = false;

  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      if (cancel) {
        reject(new Error("キャンセルされました"));
      } else {
        const data = { id: 1, name: "John" };
        resolve(data);
      }
    }, 2000);
  });
}

const promise = fetchData();

promise
  .then(function(data) {
    console.log("データを取得しました:", data);
  })
  .catch(function(error) {
    console.error("エラーが発生しました:", error);
  });

// キャンセル処理
promise.cancel = true;

実行結果

エラーが発生しました: Error: キャンセルされました

このコードでは、Promise内でcancelフラグを使ってキャンセル処理を行っています。

cancelフラグがtrueの場合、reject関数で失敗時の値を返すようにしています。

promiseオブジェクトにcancelプロパティを追加することで、Promiseの処理をキャンセルできるようになります。

このようにして、必要に応じて非同期処理を中断することができるのです。

ただし、この方法はPromiseの標準的な機能ではないため、ライブラリやフレームワークによっては別の方法でキャンセル処理を行う場合もあります。

●よくあるエラーと対処法

JavaScriptを使っていると、時々crypticなエラーメッセージに遭遇することがあります。

特に、処理を止めるための構文を正しく使用していない場合、エラーが発生しやすくなります。

そんな時、エラーメッセージを手がかりに原因を特定し、適切に対処できればスムーズに開発を進められるでしょう。

しかし、初心者にとってはエラーメッセージの意味を理解するのが難しく、つまずいてしまうこともあるかもしれません。

そこで、ここではJavaScriptで処理を止める際によく遭遇するエラーとその対処法を3つ紹介します。

これらを知っておくことで、エラーに悩まされることなく、バグのない堅牢なコードを書けるようになるはずです。

○syntaxerror: illegal return statementの原因と対処

syntaxerror: illegal return statementは、return文が正しく使用されていない場合に発生するエラーです。

よくある原因としては、次のようなものが挙げられます。

・関数の外でreturn文が使用されている
・if文などのブロックの中でreturn文が使用されている
・return文の後に改行せずにコードが続いている

このエラーを解決するには、次のように対処しましょう。

・return文は必ず関数の中で使用する
・if文などのブロックの中でreturn文を使う場合は、ブロックを関数で囲む
・return文の後は必ず改行し、コードを続ける

このように、return文の使用法を正しく理解し、適切な位置に配置することが大切です。

○syntaxerror: unexpected token tryに関するエラー対処

try...catch文は、エラーハンドリングのための構文ですが、正しく使用しないとエラーが発生することがあります。

syntaxerror: unexpected token tryは、tryキーワードが予期しない場所で使用された場合に発生します。

このエラーを防ぐためには、次の点に気をつけましょう。

・tryブロックの後には必ずcatchブロックまたはfinallyブロックを記述する
・tryブロックとcatch/finallyブロックの間に他のコードを挟まない
・tryブロック内で宣言された変数は、catch/finallyブロック内でも使用可能

これらのルールを守ることで、try...catch文によるエラーハンドリングを正しく行えるようになります。

○typeerror: cannot read property of nullの対処

typeerror: cannot read property of nullは、nullまたはundefinedの値に対してプロパティやメソッドにアクセスしようとした場合に発生するエラーです。

このエラーが起きる主な原因は、次の2つです。

・オブジェクトがnullまたはundefinedになっている
・オブジェクトの中の特定のプロパティがnullまたはundefinedになっている

これを防ぐには、オブジェクトやプロパティが存在するかどうかを確認してからアクセスするようにしましょう。

具体的には、次のような方法があります。

・if文を使って、オブジェクトが存在するかどうかを確認する
・オプショナルチェーン演算子（?.）を使って、プロパティにアクセスする
・デフォルト値を設定しておく（||演算子や??演算子を使用する）

このように、nullやundefinedに対する適切な処理を行うことで、エラーを未然に防ぐことができます。

●処理を止めるのに適したその他の方法

JavaScriptで処理を止めるためには、return文、throw文、break文など様々な方法がありました。

しかし、状況によってはこれらの方法では対応しきれないケースもあるでしょう。

そんな時に役立つのが、continue文、exitやquit、そしてdebuggerです。

これらを使えば、より細かく処理をコントロールできるようになります。

例えば、ループ内の特定の条件を満たす場合だけ処理をスキップしたい時はcontinue文が便利ですし、プログラム自体を終了させたい場合はexitやquitが使えます。

また、コードのデバッグ中に処理を一時的に止めたい時は、debugger文を使うと良いでしょう。

それでは、これらの方法について詳しく見ていきましょう。

○continueで処理をスキップする

continue文は、ループ内の処理を途中でスキップし、次のループに進むための構文です。

特定の条件を満たす場合に処理を飛ばしたい時に使います。

例えば、次のようなコードがあるとします。

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    continue;
  }
  console.log(i);
}

実行結果：

このコードでは、1から10までのループ処理の中で、偶数の場合はcontinue文によって処理をスキップしています。

その結果、奇数だけが出力されるようになっています。

このように、continue文を使えば、ループ内の不要な処理を飛ばすことができるのです。

ただし、continue文を使いすぎるとコードの可読性が下がるので、適度に使うことが大切ですね。

○exitやquitでプログラム自体を終了する

exitやquitは、プログラムを途中で終了させるための関数です。

Node.jsなどのサーバーサイドJavaScriptで使われることが多いですが、一部のブラウザでも使用できます。

exitは処理の正常終了を表すのに対し、quitは異常終了を表します。

どちらもプログラムを終了させる点では同じですが、終了ステータスが異なります。

例えば、Node.jsで次のようなコードを実行すると、プログラムが途中で終了します。

console.log("プログラムを開始します");

if (someCondition) {
  console.log("エラーが発生しました。プログラムを終了します");
  process.exit(1);
}

console.log("プログラムを終了します");

実行結果（someConditionがtrueの場合）

プログラムを開始します
エラーが発生しました。プログラムを終了します

ここでは、someConditionがtrueの場合にprocess.exit(1)が呼び出され、プログラムが終了します。

引数の1は終了ステータスを表し、0以外の値は異常終了を意味します。

このように、exitやquitを使えば、特定の条件でプログラムを強制的に終了させることができます。

ただし、これらの関数は慎重に使う必要があるでしょう。

○debuggerで処理を一時停止する

debugger文は、デバッグ中にブレークポイントを設定するための構文です。

debugger文を記述した箇所で処理が一時停止し、デバッガーツールを使ってその時点の変数の中身などを確認できます。

通常のコード中にdebugger文を記述しておけば、わざわざブレークポイントを設定しなくても、その箇所で自動的に処理が止まるようになります。

例えば、次のようなコードがあるとします。

let x = 1;
debugger;
x++;
console.log(x);

このコードをデバッガーツールで実行すると、debugger文の位置で処理が一時停止します。

そこで変数xの値を確認したり、ステップ実行したりできるようになります。

debugger文はデバッグ時にとても便利な機能ですが、デプロイするコードには含めないようにしましょう。

予期しない場所で処理が止まってしまうかもしれません。

まとめ

JavaScriptで処理を止めるための様々な方法を、実際のコード例を交えながら詳しく解説してきました。

本記事で公開した知識を活かし、実際のプロジェクトでJavaScriptによる処理制御に挑戦してみてください。

コードの可読性と保守性を高めながら、より洗練されたプログラムを書けるようになるはずです。