UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#317 JavaScriptにおける非同期処理について

記入日:2023-11-21 編集日:2023-11-21

JavaScriptにおける非同期処理について解説してみようと思います。

この記事を読むと(約5分)
JavaScriptにおける非同期処理についてイメージできます。

JavaScriptにおける非同期処理

JavaScriptの非同期処理は、特にWeb開発において重要です。非同期処理は、ある処理が完了するまで待たずに次の処理を進めることができるため、ユーザーエクスペリエンスを向上させるのに役立ちます。以下に、非同期処理の概念をいくつかの事例を交えて解説します。

1. コールバック関数

非同期処理の最も基本的な形態は、コールバック関数を使用することです。例えば、setTimeout関数は一定時間後にコールバック関数を呼び出します。

console.log("Start");

setTimeout(function() {
  console.log("Timeout finished");
}, 2000); // 2秒後にコールバックが実行される

console.log("End");

このコードでは、setTimeoutのコールバック関数が2秒後に実行され、その間に他の処理が進行します。

2. Promise

Promiseは、コールバックベースの非同期処理をより管理可能にします。Promiseは成功または失敗のいずれかの状態を持ち、非同期操作が完了したときにそれに対応する処理を実行します。

function fetchData() {
  return new Promise(function(resolve, reject) {
    // 仮の非同期処理
    setTimeout(function() {
      const data = "Async data";
      if (data) {
        resolve(data); // 成功時
      } else {
        reject("Error fetching data"); // 失敗時
      }
    }, 1500);
  });
}

console.log("Start");

fetchData()
  .then(function(result) {
    console.log("Data received:", result);
  })
  .catch(function(error) {
    console.error("Error:", error);
  })
  .finally(function() {
    console.log("End");
  });

3. Async/Await

Async/AwaitはPromiseをより簡潔かつ読みやすく扱えるようにした構文です。関数がasyncでマークされると、その中でawaitを使ってPromiseが完了するのを待つことができます。

async function fetchData() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve("Async data");
    }, 1500);
  });
}

async function processData() {
  try {
    console.log("Start");
    const data = await fetchData();
    console.log("Data received:", data);
  } catch (error) {
    console.error("Error:", error);
  } finally {
    console.log("End");
  }
}

processData();

これにより、非同期コードが同期的なように書け、可読性が向上します。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。