JSON、localStorage、そして初めての fetch

データをJSONとしてシリアライズし、localStorage でブラウザに永続化し、fetch でリモートのデータを取得します。

10 分 · 3 問

JSONはウェブの普遍的な交換フォーマットです。その構文がJavaScriptオブジェクトに似たテキストです(キーはダブルクォート、関数はなし)。必要なのは2つのメソッドだけ: JSON.stringify はJavaScriptの値を文字列に変え、JSON.parse は逆方向に変換します。

const task = { title: "Review the lesson", done: false };

const json = JSON.stringify(task);
console.log(json);
// {"title":"Review the lesson","done":false}

const parsed = JSON.parse(json);
console.log(parsed.done); // false

localStorage は、タブを閉じた後でもブラウザにデータを保持します。選んだテーマ、下書き、タスクリストに最適です。テキストしか保存できないので、JSONが橋渡しの役割を果たします。setItem の前にシリアライズし、getItem の後にデシリアライズします。

const tasks = [
  { title: "Buy bread", done: false },
  { title: "Review the lesson", done: true }
];

localStorage.setItem("tasks", JSON.stringify(tasks));

const raw = localStorage.getItem("tasks");
const saved = raw ? JSON.parse(raw) : [];
console.log(saved.length); // 2

最後の構成要素: サーバーからデータを取得することです。fetch はHTTPリクエストを送り、Promiseを返します。async/await を使うと、コードは上から下へと読めます。レスポンスを待ち、それが有効かどうかを確認し、次にJSONのデコードを待ちます。これもまた非同期です。

async function loadUsers() {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/users"
  );
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  const users = await response.json();
  console.log(users[0].name);
}

loadUsers();

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. JSON.stringify は何をしますか?
   • JSON文字列をJavaScriptオブジェクトに変換します
   • JavaScriptの値をJSON文字列に変換します
   • JSONファイルの構文を検証します
2. 存在しないキーに対して localStorage.getItem は何を返しますか?
   • 空の文字列
   • undefined
   • null
   • エラーがスローされる
3. 単に response.json() ではなく await response.json() と書くのはなぜですか?
   • response.json() が Promise を返すからです
   • レスポンスを文字列に変換するためです
   • 失敗した場合にリクエストを再試行するためです