JavaScriptで処理の順番をコントロールする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで処理の順番をコントロールする方法について現役エンジニアが解説しています。JavaScriptは書かれた順番に処理を行いますが、setIntervalやsetTimeoutメソッドで処理をコントールすることが出来ます。また明示的にPromiseオブジェクトを使う方法もあります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptで処理の順番をコントロールする方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで処理の順番をコントロールする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

JavaScriptの処理の順番の原則

JavaScriptの処理順として、JavaScriptのキューに登録された順に処理を行います。キュー登録の優先度については、同じタイミングで登録した処理 > 各処理内での処理で登録されます。

例えば

console.log("a");

console.log("b");

console.log("c");

を実行すると

// a

// b

// c

 

という処理結果になります。しかし、以下のようにsetTimeoutを使用すると、処理順番が変更します。これはキューの登録の優先度においてconsole.log(“b”)が一番最後に来るからです。

console.log("a");

setTimeout(function(){console.log("b")}, 0);

console.log("c");

// "a"

// "c"

// "b"

 

処理の順番をコントロールする方法

JavaScriptで、非同期の処理であっても明示的に処理順番を制御するために、Promiseオブジェクトを使用します。先程のログ出力を順番通りに出したい場合は、以下のように書くことで実行できます。

new Promise((resolve, reject) => {
console.log('a')
resolve(引継情報)
}).then((変数名(省略可)
setTimeout(function(){console.log("b")}, 0);
// resolveとrejectは引き続き使える
).then(()) => {
console.log('c')
}

// "a"

// "c"

// "b"

 

Promiseオブジェクトを作成後にPromiseオブジェクトに対してthen()を使用することによって、コールバック関数のように使用することが出来ます。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

引き継ぎを使用して次の処理に変数を渡す。

var num = 100
console.log(num);
new Promise((resolve, reject) => {
num += 100;
console.log(num);
resolve(num);
}).then((num) => {
setTimeout(function(){num += 200}, 0);
console.log(num);
}).then((num) => {
console.log(num);
})

// 100

// 200

// 400

// 400

 

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。