JavaScriptのFetchとデータ保存 | JavaScript入門

Promiseとasync・await

非同期処理は、すぐに結果が返らない処理を表します。async関数の中でawaitを使うと、処理が終わるまで待つ流れを読みやすく書けます。

非同期処理を待つJAVASCRIPT

const wait = (ms) =>
    new Promise((resolve) => setTimeout(resolve, ms));

async function main() {
    await wait(100);
    console.log('処理が完了しました');
}

main();

実行結果OUTPUT

処理が完了しました

Fetch API

fetchはURLへリクエストを送り、Promiseを返します。HTTPエラーは自動で例外にならないため、response.okも確認します。

JSONを取得するJAVASCRIPT

async function loadUser() {
    const response = await fetch('/api/user.json');
    if (response.ok === false) throw new Error('取得に失敗しました');

    const user = await response.json();
    console.log(user.name);
}

loadUser().catch((error) => console.error(error.message));

localStorage

localStorageは、同じブラウザーの同じサイトで使える文字列形式の保存領域です。数値やオブジェクトは文字列へ変換して保存します。

テーマ設定を保存するJAVASCRIPT

localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme') ?? 'light';
console.log(theme); // dark

localStorage.removeItem('theme');

JSONへ変換する

JSON.stringifyでオブジェクトを文字列へ変換し、JSON.parseで元へ戻します。

配列を保存するJAVASCRIPT

const todos = [{ title: 'JavaScriptを学ぶ', done: false }];
localStorage.setItem('todos', JSON.stringify(todos));

const saved = JSON.parse(localStorage.getItem('todos') ?? '[]');
console.log(saved[0].title); // JavaScriptを学ぶ

JavaScript入門の講座一覧

Promiseとasync・await

Fetch API

localStorage

JSONへ変換する