【初学者向け】JavaScript学習において避けては通れないスコープと非同期処理のお話

はじめに

JavaScriptを学び始め、特に覚えておきたいスコープと非同期処理についてまとめました！
自分も本格的に学び始め3ヶ月程度ですので、JavaScript初心者の方はぜひ！

変数のスコープ

JavaScriptでは、変数のスコープ（有効範囲）に注意することが非常に重要です。
変数のスコープを理解することで、予期しない動作を避けることができます。
varは関数スコープを持ち、letとconstはブロックスコープを持ちます。

サンプルコード

function testVar() {
    if (true) {
        var x = "varは関数スコープです";
    }
    console.log(x); // ここではxにアクセスできます
}

function testLet() {
    if (true) {
        let y = "letはブロックスコープです";
    }
    console.log(y); // ここではyにアクセスできません - エラーになります
}

function testConst() {
    if (true) {
        const z = "constもブロックスコープです";
    }
    console.log(z); // ここではzにアクセスできません - エラーになります
}

testVar();  // 出力: varは関数スコープです
testLet();  // エラー: y is not defined
testConst(); // エラー: z is not defined

varは関数全体で有効ですが、 letとconstはブロック内でのみ有効です。
最近はvarを使うことがあまりないため、letとconstだけ理解すればOKです。

非同期処理の理解

JavaScriptは非同期処理が得意な言語です。

※非同期処理とは、時間のかかる操作（例えば、ネットワークリクエストやファイルの読み書き）をバックグラウンドで実行しながら、他のコードを止めることなく実行し続ける手法です。これにより、アプリケーションのレスポンスが向上し、ユーザー体験が向上します。

特に、コールバック、プロミス（Promise）、async/awaitの使い方を理解することが重要です。

コールバック関数

コールバック関数は、書き方がシンプルです。 ですが、複数の非同期処理には向いてない印象です。

サンプルコード

function fetchData(callback) {
    setTimeout(() => {
        callback("データが取得されました");
    }, 2000); // 2秒後にコールバック関数が実行されます
}

fetchData((message) => {
    console.log(message); // ここに「データが取得されました」と表示されます
});

プロミス（Promise）

プロミスは、非同期処理の流れを簡潔に記述しやすいです。 エラーハンドリングも明確にしやすいことが主な特徴となってます。

サンプルコード

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("データが取得されました");
        }, 2000); // 2秒後にプロミスが解決されます
    });
}

fetchData().then((message) => {
    console.log(message); // ここに「データが取得されました」と表示されます
});

asyncとawait

async/awaitは、非同期処理を同期処理のように記述できるため、コードの読みやすさを重視する場合にも最適かも。

サンプルコード

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("データが取得されました");
        }, 2000); // 2秒後にプロミスが解決されます
    });
}

async function getData() {
    const message = await fetchData(); // fetchDataが解決されるのを待ちます
    console.log(message); // ここに「データが取得されました」と表示されます
}

getData();

まとめ

今回は、JavaScriptでつまづきやすいスコープと非同期処理についてまとめました。
これらを理解しないと、JavaScriptでよく起きるエラーに遭遇することが増えるため、きっちり把握しておきましょう！