【ITニュース解説】My Java Full Stack Journey Learning in JavaScript

この記事では、JavaScriptにおける同期処理と非同期処理の違い、そして非同期処理におけるPromiseの役割について解説する。システムエンジニアを目指す上で、これらの概念は非常に重要となる。

まず、同期処理とは、プログラムの命令が書かれた順番に一つずつ実行される方式のことだ。命令が完了するまで次の命令は実行されず、順番が厳密に守られる。記事内の例では、console.log("hii")、console.log("hello")、console.log("how are you")という3つの命令が順番に実行され、コンソールには「hii」、「hello」、「how are you」の順で出力される。これは、それぞれのconsole.logが前の命令の完了を待ってから実行されるためだ。

次に、非同期処理とは、複数のタスクが互いに独立して実行される方式のことだ。ある命令の実行中に別の命令が実行されるため、命令が書かれた順番通りに実行されるとは限らない。記事内の例では、console.log("hi")、setTimeout(() => { console.log("hello"); }, 2000)、console.log("end")という3つの命令がある。setTimeoutは、指定された時間（ここでは2000ミリ秒、つまり2秒）が経過した後に、与えられた関数を実行する命令だ。このsetTimeoutの性質上、console.log("hi")が実行された後、setTimeoutが実行されるが、setTimeoutの中のconsole.log("hello")は2秒後に実行される。そのため、コンソールには「hi」、「end」、「hello」の順で出力されることになる。setTimeoutは非同期処理の典型的な例だ。

JavaScriptで非同期処理を行う主な理由の一つは、Webページの応答性を保つためだ。例えば、サーバーからデータを取得する処理は時間がかかる場合がある。もしこれが同期処理で行われると、データが取得できるまでWebページ全体が一時的に停止してしまう。しかし、非同期処理を使えば、サーバーからのデータ取得を裏側で行い、その間にもWebページは操作可能となる。データ取得が完了したら、その結果を使ってWebページを更新すれば良い。

しかし、非同期処理を多用すると、「コールバック地獄（Callback Hell）」と呼ばれる問題が発生することがある。コールバック地獄とは、非同期処理の結果を処理するためにコールバック関数をネスト（入れ子）状に記述する必要があり、コードが非常に読みにくく、管理が困難になる状態のことだ。記事内の例では、task1関数の中にsetTimeoutがネストされている。実際には、さらに多くの非同期処理がネストされることもあり、コードの可読性は著しく低下する。

このコールバック地獄を解消するために、Promiseという仕組みが導入された。Promiseは、非同期処理の結果（成功または失敗）を表現するオブジェクトだ。Promiseを使うことで、非同期処理の結果を扱うコードをより構造的に、そして読みやすく記述できる。

Promiseには3つの状態がある。

• Pending（保留）: 非同期処理がまだ完了していない状態。
• Resolved（解決）: 非同期処理が正常に完了した状態。この時、Promiseは結果の値を保持している。
• Rejected（拒否）: 非同期処理が何らかの理由で失敗した状態。この時、Promiseはエラー情報を保持している。

記事内の例では、const myPromise = new Promise((resolve, rejected) => { resolve(); });というコードでPromiseオブジェクトを作成している。この例では、resolve()を呼び出しているので、Promiseは即座にResolved状態になる。実際には、非同期処理が成功した場合にresolve()を呼び出し、失敗した場合にrejected()を呼び出す。

Promiseを使うことで、.then()メソッドを使って成功時の処理を、.catch()メソッドを使って失敗時の処理を記述できる。これにより、コールバック関数をネストする必要がなくなり、コードの見通しが良くなる。

例えば、次のようなコードを考えてみよう。

Copy
1fetch('https://example.com/data') // サーバーからデータを取得する非同期処理
2  .then(response => response.json()) // レスポンスをJSON形式に変換する
3  .then(data => {
4    console.log(data); // 取得したデータをコンソールに表示する
5  })
6  .catch(error => {
7    console.error('エラーが発生しました:', error); // エラーが発生した場合、エラーメッセージをコンソールに表示する
8  });

このコードでは、fetch()関数を使ってサーバーからデータを取得し、.then()メソッドでレスポンスをJSON形式に変換し、さらに.then()メソッドで取得したデータをコンソールに表示している。もしエラーが発生した場合は、.catch()メソッドでエラーメッセージをコンソールに表示する。このように、Promiseを使うことで、非同期処理の成功と失敗を明確に区別し、それぞれの処理を簡潔に記述できる。

Promiseは、JavaScriptにおける非同期処理を扱う上で非常に強力なツールだ。特に、複数の非同期処理を連携させる必要がある場合や、エラー処理を適切に行う必要がある場合には、Promiseの利用が不可欠となる。システムエンジニアを目指す上で、Promiseの概念と使い方をしっかりと理解しておくことは非常に重要だ。