データと非同期 ― 閉じても消えない、外とつながる

1. オブジェクトをJSON文字列にするコンソールで試します。

   const item = { name: "メロンパン", price: 180 };
   const text = JSON.stringify(item);
   console.log(text); // '{"name":"メロンパン","price":180}'

2. JSON文字列をオブジェクトに戻す

   const back = JSON.parse(text);
   console.log(back.price); // 180

3. 変換の理由を知る保存も通信も「文字しか運べない」のです。だから、出発時に stringify (文字にする)、到着時に parse (戻す) をします。この往復だけ覚えれば、JSONは卒業です。
4. 本物のJSONを見るブラウザで https://zipcloud.ibsnet.co.jp/api/search?zipcode=5940041 を開いてみましょう。郵便番号データがJSONで返ってきます。これが授業3で取りに行くデータです。

お題: ユニット2のクイズの問題データ (オブジェクトの配列) を stringify → parse で往復させて、往復後も for...of でちゃんと表示できることを確かめます。

1. HTML: <textarea id="memo"></textarea> を1つ置きます。
2. 入力のたびに保存する

   const memo = document.querySelector("#memo");
   
   memo.addEventListener("input", () => {
     localStorage.setItem("memo", memo.value);
   });

3. 開いたときに復元するスクリプトの先頭に1行足します。

   memo.value = localStorage.getItem("memo") || "";

   || "" は「まだ保存がなければ空文字」という保険です。
4. 奇跡を確認する何か書いて、タブを閉じて、開き直します。文章が残っていれば成功です。
5. 保存箱の中を覗くF12 → Applicationタブ → Local Storage で、保存された中身を直接見られます。デバッグの強い味方です。

お題: localStorageは文字しかしまえません。ユニット2の「リスト追加」(演習5-B) に、配列ごと保存・復元する機能を足します。

1. しまうとき: localStorage.setItem("list", JSON.stringify(listData));
2. 取り出すとき: const listData = JSON.parse(localStorage.getItem("list") || "[]");
3. 復元の描画: ページを開いたとき、取り出した配列を for...of で回して li を作り直します。

お題: ページに「文字を大きくする」切り替えボタンをつけ、選んだ状態が次に開いたときも続いているようにします。

1. まず観察授業1の手順4で見たJSONをもう一度開き、住所が results の中にあることを確認します。取りに行く前に、形を見る ― これがAPIの作法その1です。
2. 取りに行く関数を書く

   async function searchAddress(zipcode) {
     const res = await fetch(
       "https://zipcloud.ibsnet.co.jp/api/search?zipcode=" + zipcode
     );
     const data = await res.json();
     return data.results;
   }

   await は「返事が来るまでここで待つ」、async は「この関数の中でawaitを使います」という宣言です。
3. 呼んで表示する

   const results = await searchAddress("5940041");
   console.log(results[0].address1 + results[0].address2 + results[0].address3);

   コンソールに住所が出れば、あなたのコードは今、インターネットの向こうと会話しました。
4. 画面とつなぐ入力欄 + 検索ボタンを作り、ボタンのクリックで searchAddress を呼んで、結果を p に表示します。ユニット2の「3行の型」との合体です。

お題: 郵便番号によっては、住所が複数返ったり、見つからなかったり (resultsがnull) します。検索アプリを次の仕様に育てます。

1. 見つからないとき: if (results === null) なら「見つかりませんでした。番号を確かめてください」と表示します。
2. 複数のとき: for...of で全部 li にして表示します。
3. 試す番号: 普通に出る番号 (例: 5940041)、存在しない番号 (例: 0000000) の両方でテストします。うまくいかない場合を先に試すのが、APIの作法その2です。

1. 読み込み中を出すボタンが押されたら、まず結果欄に「検索中…」を表示してからfetchします。返事が来たら上書きします。
2. 失敗を受け止める

   try {
     const results = await searchAddress(zip);
     // ここに成功時の表示
   } catch (e) {
     resultEl.textContent = "通信に失敗しました。少し待ってもう一度試してください。";
   }

   tryの中で失敗が起きると、catchに飛びます。利用者には「次にどうすればいいか」まで伝えるのが優しいエラー表示です。
3. 失敗を再現するWi-Fiを切って検索ボタンを押し、catchがちゃんと働くのを確認します。エラー表示は、エラーを起こしてテストする ― 当たり前のようで、忘れる人が多い作法です。
4. 連打対策検索中はボタンを disabled = true にして、終わったら戻します。細部ですが、こういう1行が「仕事の品質」です。