JavaScriptで処理を一時停止（中止）する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで処理を一時停止（中止）する方法について現役エンジニアが解説しています。JavaScriptで処理を一時停止するには、setTimeoutやsetIntervalメソッドを使います。今回は例として簡単なタイマーアプリケーションを作成してみます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptで処理を一時停止（中止）する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。
JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptで処理を一時停止（中止）する方法について詳しく説明していくね！
お願いします！
JavaScriptでの処理実行の基本
プログラミング言語というのは実にたくさんの種類があります。
プログラミング言語のなかには様々な考え方があり、主に以下のようなものがあります。
- 手続き型
- 関数型
- オブジェクト指向
JavaScriptというプログラミング言語はとても柔軟な言語で、マルチパラダイムといって上に上げた様々な考え方を取り入れたプログラムを書くことができます。今回は一番わかりやすい手続き型と関数型での書き方で解説を行っていきたいと思います。
手続き型の考え方というのはとてもわかりやすく、単純にプログラムが記述順の上から下へ実行されていくというものです。
プログラムが上から下へと実行されていく中で処理を一時停止（中止）したいこともあるでしょう。また、ある関数が実行されている最中にその関数の処理を一時停止したいこともあるでしょう。
では次に、実際にプログラムの処理を一時停止していく方法を見ていきましょう。
処理を一時停止（中止）する方法
プログラムの様々な場面で処理を一時停止したい時があると思います。今回はタイマーアプリを参考に処理を一時停止する方法を見ていきましょう。
作成するアプリは以下のようなものです。
- スタートボタンを押すとタイマーがスタートする
- ストップボタンを押すとタイマーが一時停止する
- リセットボタンを押すとタイマーがリセットされる
画面はこのようなものになります。
では次に、実際のプログラムを見ていきましょう。
実際に書いてみよう
今回作成したタイマーアプリのソースコードはHTMLファイルとJavaScriptファイルになります。
HTMLのソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイマーアプリ</title> <script src="script.js"></script> </head> <body> <p id="time"></p> <button id="start">スタート</button> <button id="stop">ストップ</button> <button id="reset">リセット</button> </body> </html>
JavaScriptのソースコード
// 経過秒数
var spanedSec = 0;
// タイマー表示部
var time;
// スタートボタン
var startButton;
// ストップボタン
var stopButton;
// リセットボタン
var resetButton;
// タイマー停止用ID
var intervalId;
// 初期化処理
window.onload = function() {
// タイマー表示部
time = document.getElementById('time');
time.innerHTML = spanedSec;
// スタートボタン
startButton = document.getElementById('start');
// ストップボタン
stopButton = document.getElementById('stop');
// リセットボタン
resetButton = document.getElementById('reset');
// ボタンが押された際の動作を設定する
startButton.onclick = function() {
start();
};
stopButton.onclick = function() {
stop();
};
resetButton.onclick = function() {
reset();
};
};
// スタート
function start() {
if (intervalId == null) {
intervalId = setInterval(function(){
// 経過秒数を1秒進める
spanedSec++;
// 画面に反映する
time.innerHTML = spanedSec;
}, 1000);
}
}
// ストップ
function stop() {
clearInterval(intervalId);
intervalId = null;
}
// リセット
function reset() {
// 経過秒数を初期化
spanedSec = 0;
// 画面に反映する
time.innerHTML = spanedSec;
}
では、プログラムの解説をしていきます。
まずHTMLファイルの説明ですが、経過時間を表示する箇所とスタート、ストップ、リセットの各ボタンを配置しました。
次に、JavaScriptの説明です。プログラムの一番上にこのアプリケーションで利用する変数をすべて記載してあります。そして、HTMLファイルがすべて読み込まれた後にwindow.onloadに設定した処理が動きます。ここではタイマー表示部に初期状態の経過秒数の表示、各ボタンが押された際に実行される関数を設定しています。
スタートボタンが押されるとstart()関数が動き、setInterval()関数によって設定した時間ごとに繰り返し処理が行われます。ここでは1000マイクロ秒(1秒)ずつ経過秒数を進め、経過秒数を画面に表示するということをしています。
次にstop()関数ではストップボタンが押された際の動作を設定しています。ここではclearInterval()関数によって、スタートボタンが押された際に開始した繰り返し処理を終了しています。
処理の”一時停止”ではなく、”終了”ですが、この際に経過秒数をリセットしていないため、再度スタートボタンが押され新たにsetInterval()が実行されても経過秒数は前回の値から始まるのでアプリケーション上では”一時停止”という動作が実現できています。
次にreset()関数ではリセットボタンが押された際の動作を設定しています。ここでは経過秒数のリセットを行い、画面への反映を行うことによってタイマーのリセット動作を実現しています。
今回は簡単なタイマーアプリを使ってJavaScriptによる処理の一時停止について解説してきました。一言に処理の一時停止といっても、作成しているアプリケーションによって方法は様々です。プログラムを使ってアプリケーションのどのような機能を実現したいのかに着目していろいろな方法を試してみましょう。
筆者プロフィール
| 黒木一志（くろきかつし）
TechAcademyジュニアのゲームアプリコースを担当しています黒木です。現在は会社員としてシステムエンジニアをしております。 会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。 プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
