async await を使ったfetch

try catch 仕組み

  async ~ + try (fetch始めるよ！)
  データ送信するよ、メソッド ＋ お決まり文定義
  if HTTP通信できなかったら
  HTTP通信失敗したよ、と表示
  HTTP通信できたら、HTTP通信できたよと表示
　data送信できたら
  　　させたい処理を書く
 データ送信できなかったら <catch>
 データ送れなかったよ、と表示


 ルール : 処理ができたらawaitを必ずかき、
         失敗したらawaitは書かない


//テーブルにdata追加 code化すると
fetch始めるよ！
async function createData(data) {
    try {

        ↓
  データ送信するよ、メソッド ＋ お決まり文定義
      const response = await fetch('https://jsonplaceholder.typicode.com/users', { // ダミーAPI
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });
             ↓
             
    //if HTTP通信できなかったら
      if (!response.ok) {

    //HTTP通信失敗したよ、と表示
        throw new Error(`HTTP error! status: ${response.status}`);
              ↓
      }
      HTTP通信できたら、HTTP通信できたよと表示
      const result = await response.json();
      console.log('APIから新規データが追加されました:', result);
      
                ↓
  //data送信できたら、データ保存・データ更新
  ・データ削除 /  入力formを空に
      studentData.push({ ...data, id: nextId++ }); // IDを更新
      saveDataToLocalStorage();
      renderTable();
      clearFormInputs();
            ↓
    } catch (error) {
      console.error('データ追加に失敗しました:', error);
      alert('データ追加に失敗しました。');
    }
  }

ばつボタン　仕組み

 ばつボタンはspan

parseInt ：数字を整数にしてdata返却
例 066 → 66に