無料プログラミング教室 Pスクール JavaScript スタートブック 第5章: JavaScriptで非同期処理とAjax

第5章: JavaScriptで非同期処理とAjax

2024/10/252024/10/25| p-schoolp-school| 0 Comment| 17:17
Categories:

JavaScriptは、ウェブページにインタラクティブな要素を追加し、ユーザーがページをリロードせずにデータを取得したり、サーバーと通信したりすることを可能にします。この章では、非同期処理とAjaxの概念を理解し、コールバック、プロミス、そしてasync/awaitの3つの手法を通じて、データの取得方法について学びます。また、Fetch APIを使った外部APIとの連携方法を解説します。

5.1 非同期処理とは？

JavaScriptは基本的にシングルスレッドの言語で、コードが上から下へと順に実行される特性を持ちます。しかし、非同期処理を利用すると、他の処理が完了するのを待たずに次の処理に進むことができます。これにより、ユーザーがブラウザでページをリロードせずに、リアルタイムで情報を表示したり、反応速度の高いアプリケーションを作成したりできます。

5.2 コールバック

最も基本的な非同期処理の方法は「コールバック」です。コールバックは関数を引数として別の関数に渡し、処理が完了したらその関数を呼び出す仕組みです。

たとえば、サーバーからデータを取得し、そのデータを画面に表示する場合を考えましょう。以下のコードは、非同期処理にコールバックを利用した例です。

function fetchData(callback) {
    setTimeout(() => {
        const data = "データ取得完了！";
        callback(data);
    }, 2000);
}

function displayData(data) {
    console.log(data);
}

fetchData(displayData);
  • fetchData関数は、非同期処理を模倣するためにsetTimeoutを使っています。
  • displayData関数は、コールバックとしてfetchDataに渡され、データ取得が完了したら呼び出されます。

コールバックの欠点
コールバックを多用するとコードが複雑になり、コールバック地獄と呼ばれるネストが深くなりすぎて読みづらいコードが生まれやすいという問題があります。これを解決するために登場したのが、次に解説する「プロミス」です。

5.3 プロミス (Promise)

プロミスは、非同期処理の結果が「成功」か「失敗」かに応じて、最終的な結果を返すオブジェクトです。プロミスには3つの状態があり、それぞれ次のような状態遷移を持ちます。

  1. Pending (保留) – 処理が完了していない初期状態。
  2. Fulfilled (完了) – 処理が成功した状態。
  3. Rejected (失敗) – 処理が失敗した状態。

プロミスを使うと、コールバックの代わりに.then()と.catch()メソッドを用いて、コードの読みやすさと管理のしやすさが向上します。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = "プロミスのデータ取得完了！";
            if (data) {
                resolve(data);
            } else {
                reject("データ取得に失敗しました");
            }
        }, 2000);
    });
}

fetchData()
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error(error);
    });
  • fetchData関数はプロミスを返し、成功時にはresolve、失敗時にはrejectを呼び出します。
  • fetchData()を呼び出すと、.then()メソッドで成功時の処理を、.catch()メソッドでエラーハンドリングを行います。

プロミスのメリット
プロミスにより、非同期処理の結果をオブジェクトとして取り扱えるようになり、コールバック地獄を避けつつ、エラー処理が簡潔に記述できます。

5.4 async/await

async/awaitは、プロミスをさらに簡潔に書くための構文で、非同期処理を同期処理のように記述できます。async関数は、内部で非同期処理を扱うことを示し、awaitキーワードはプロミスが解決されるまで待機します。

以下のコードは、async/awaitを使用してデータを取得する例です。

async function fetchData() {
    try {
        const data = await new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("async/awaitのデータ取得完了！");
            }, 2000);
        });
        console.log(data);
    } catch (error) {
        console.error("エラー:", error);
    }
}

fetchData();
  • fetchData関数はasyncで宣言され、awaitを使ってプロミスの解決を待ちます。
  • エラーが発生する可能性があるので、try/catchブロックでエラーハンドリングを行います。

async/awaitの利点
コードがシンプルで読みやすくなり、非同期処理を同期処理のように記述できるため、エラーハンドリングも直感的に書けます。

5.5 Fetch APIを使ったデータ取得

JavaScriptのFetch APIは、Ajax（Asynchronous JavaScript and XML）を用いて非同期にリソースやデータを取得するモダンな方法です。APIを使うことで、HTTPリクエストを簡潔に記述できます。

以下は、Fetch APIを使ってサンプルAPIからデータを取得する例です。

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then((response) => {
        if (!response.ok) {
            throw new Error("ネットワークエラー");
        }
        return response.json();
    })
    .then((data) => {
        console.log("取得したデータ:", data);
    })
    .catch((error) => {
        console.error("エラー:", error);
    });
  • fetch()メソッドはHTTPリクエストを送信し、結果をプロミスとして返します。
  • レスポンスが正常でない場合は、Errorを投げ、エラーハンドリングを行います。

5.6 外部APIとの連携

最後に、非同期処理を使った外部APIとの連携についてです。以下は、async/awaitとFetch APIを使って、外部APIからデータを取得する例です。

async function getData() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
        if (!response.ok) {
            throw new Error("データ取得に失敗しました");
        }
        const data = await response.json();
        console.log("取得したデータ:", data);
    } catch (error) {
        console.error("エラー:", error);
    }
}

getData();
  • getData関数は、asyncで宣言され、APIリクエストが解決されるまでawaitで待機します。
  • レスポンスが正常でない場合はエラーを発生させ、try/catchでエラーハンドリングします。

まとめ

この章では、非同期処理とAjaxについて学び、コールバック、プロミス、async/awaitを通じたデータ取得の基本的な使い方を理解しました。特に、async/awaitはコードの可読性が高く、非同期処理を直感的に扱うための便利な手法です。

初心者におすすめ！プログラミングスクールのススメ

未経験でも気軽に！サブスク型プログラミングスクール【Freeks】

プログラミングを始めたいと思っているそこのあなた、独学よりもプログラミングスクールが断然おすすめです！理由は簡単、続けやすさです。

独学の挫折率、驚きの87.5％！

独学でプログラミングを続けるのは、実はかなりハードルが高いんです。データによると、なんと87.5％もの学習者が途中で挫折しているとか。一方、各プログラミングスクールが公表しているデータによると、受講生の約95％が最後までやり抜いているとのこと。数字を見れば一目瞭然、プログラミングスクールの方が圧倒的に続けやすいんです。

有料と無料、スクールの違いは？

プログラミングスクールには有料と無料のタイプがありますが、その違いは次の通りです：

  • 受講条件が異なる
  • 学べるスキルやカリキュラム内容が異なる
  • 就職や転職のサポート内容が異なる

どちらが自分に合っているか、よく考えて選ぶのが大事です。

サブスク型プログラミングスクール『FREEKS（フリークス）』に注目！

プログラミング初心者でも学びやすいと評判の『FREEKS』、その特徴は以下の通り：

  • 未経験者向けのわかりやすいカリキュラム
  • 経験豊富なエンジニアのサポート
  • オンラインで自分のペースで学習可能

なんと、月会費のみで全カリキュラムが受け放題！Java、PHP、HTML/CSS、JavaScriptなど、多彩なプログラミング言語が学べるんです。しかも、AIが質問に自動で答えてくれるシステムも導入済み。

終了後は副業もサポート！

カリキュラムを終了した後には、Freeks経由で未経験者でも取り組める副業案件の受注が可能。実務を通じてスキルを磨き、市場価値の高いエンジニアへの道が開けます。

独学で悩むくらいなら、まずはプログラミングスクールをチェックしてみるのもアリかもしれませんよ！
　↓　↓　こちらをクリック　↓　↓　

Related Post